/* ===================================================================
   MailboxRadar — shared stylesheet
   Used by both the guest/marketing/auth layouts and the authenticated
   dashboard layout. Page-specific CSS is pushed via @push('styles').
   =================================================================== */

:root {
  --orange: #F06820;
  --orange-hover: #D45510;
  --orange-light: #FFF4EE;
  --orange-mid: #FF8C4B;
  --orange-pale: #FFF9F6;
  --teal: #06B6D4;
  --teal-hover: #0891B2;
  --teal-light: #F0FEFF;
  --green: #10B981;
  --green-light: #ECFDF5;
  --green-mid: #059669;
  --red: #EF4444;
  --red-light: #FEF2F2;
  --purple: #8B5CF6;
  --purple-light: #F5F3FF;
  --navy: #1A3566;
  --text: #1E293B;
  --text-light: #64748B;
  --text-muted: #94A3B8;
  --border: #E2E8F0;
  --bg: #FFFFFF;
  --bg-soft: #F8FAFC;
  --bg-orange: #FFF9F6;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow: 0 4px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.12);
  --radius: 10px;
  --radius-lg: 16px;
  --sidebar-w: 220px;
}

/* ── Base reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Inter',sans-serif;color:var(--text);background:var(--bg);line-height:1.6;}
a{text-decoration:none;color:inherit;}

/* ===================================================================
   PUBLIC / MARKETING NAV
   =================================================================== */
.nav-wrap{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;}
.nav-wrap::after{content:'';display:block;height:3px;background:linear-gradient(90deg,#F06820 0%,#FF8C4B 50%,#06B6D4 100%);}
.nav-inner{max-width:1200px;margin:0 auto;padding:5px 5px;display:flex;align-items:center;justify-content:space-between;}
.logo{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:700;}
.logo-mailbox{color:var(--navy);}
.logo-radar{color:var(--orange);}
.logo-img{height:90px;width:90px;object-fit:contain;flex-shrink:0;}
.footer-logo-img{height:90px;width:90px;object-fit:contain;flex-shrink:0;}
.nav-links{display:flex;align-items:center;gap:32px;}
.nav-links a{font-size:15px;font-weight:500;color:var(--text);transition:color .2s;}
.nav-links a:hover,.nav-links a.active{color:var(--orange);}
.nav-ctas{display:flex;align-items:center;gap:12px;}

/* ===================================================================
   BUTTONS (marketing)
   =================================================================== */
.btn-ghost{padding:8px 18px;border:1px solid var(--border);border-radius:var(--radius);font-size:14px;font-weight:500;color:var(--text);background:transparent;cursor:pointer;transition:all .2s;display:inline-block;}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange);}
.btn-orange{padding:9px 20px;background:var(--orange);color:#fff;border-radius:var(--radius);font-size:14px;font-weight:600;border:none;cursor:pointer;transition:background .2s;display:inline-block;}
.btn-orange:hover{background:var(--orange-hover);}
.btn-primary{padding:14px 28px;background:var(--orange);color:#fff;border-radius:var(--radius);font-size:15px;font-weight:600;border:none;cursor:pointer;transition:background .2s;display:inline-block;}
.btn-primary:hover{background:var(--orange-hover);}
.btn-secondary{padding:13px 26px;border:2px solid var(--border);border-radius:var(--radius);font-size:15px;font-weight:600;color:var(--text);background:transparent;cursor:pointer;transition:all .2s;display:inline-block;}
.btn-secondary:hover{border-color:var(--orange);color:var(--orange);}
.btn-white{padding:14px 32px;background:#fff;color:var(--orange);border-radius:var(--radius);font-size:15px;font-weight:700;border:none;cursor:pointer;transition:all .2s;display:inline-block;}
.btn-white:hover{background:#FFF4EE;}
.btn-outline-white{padding:14px 32px;border:2px solid rgba(255,255,255,.6);color:#fff;border-radius:var(--radius);font-size:15px;font-weight:600;background:transparent;cursor:pointer;transition:all .2s;display:inline-block;margin-left:14px;}
.btn-outline-white:hover{background:rgba(255,255,255,.1);}
.btn-full{width:100%;text-align:center;display:block;}

/* ===================================================================
   SECTION HELPERS
   =================================================================== */
section{padding:72px 24px;}
.section-inner{max-width:1200px;margin:0 auto;}
.section-label{display:inline-block;background:var(--orange-light);color:var(--orange);padding:5px 14px;border-radius:20px;font-size:12px;font-weight:600;margin-bottom:14px;}
.section-title{font-size:38px;font-weight:800;color:var(--text);margin-bottom:14px;line-height:1.2;}
.section-sub{font-size:16px;color:var(--text-light);max-width:580px;line-height:1.7;}
.section-header{margin-bottom:48px;}
.section-header.center{text-align:center;}
.section-header.center .section-sub{margin:0 auto;}

/* ===================================================================
   FOOTER
   =================================================================== */
footer{background:linear-gradient(180deg,#F8FAFC 0%,#F1F5F9 100%);border-top:1px solid var(--border);padding:56px 24px 32px;}
.footer-inner{max-width:1200px;margin:0 auto;}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:40px;}
.footer-brand p{font-size:14px;color:var(--text-light);margin-top:12px;max-width:260px;line-height:1.7;}
.footer-col h4{font-size:12px;font-weight:700;color:var(--text);margin-bottom:14px;text-transform:uppercase;letter-spacing:.06em;}
.footer-col ul{list-style:none;}
.footer-col ul li{margin-bottom:9px;}
.footer-col ul li a{font-size:14px;color:var(--text-light);transition:color .2s;}
.footer-col ul li a:hover{color:var(--orange);}
.footer-bottom{border-top:1px solid var(--border);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.footer-bottom p{font-size:13px;color:var(--text-muted);}

@media(max-width:900px){
  .footer-top{grid-template-columns:1fr 1fr;}
}
@media(max-width:768px){
  .nav-links{display:none;}
  .footer-top{grid-template-columns:1fr 1fr;}
}

/* ===================================================================
   AUTHENTICATED APP CHROME (dashboard layout)
   =================================================================== */
.app-body{background:linear-gradient(135deg,#F8FAFC 0%,#FFF9F6 100%);display:flex;min-height:100vh;}

.sidebar{width:var(--sidebar-w);background:#fff;border-right:1px solid var(--border);position:fixed;top:0;left:0;height:100vh;display:flex;flex-direction:column;z-index:100;}
.sidebar-logo{padding:5px 20px 8px;border-bottom:1px solid var(--border);position:relative;}
.sidebar-logo::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#F06820,#FF8C4B,#06B6D4);}
.sidebar-logo .logo-text {
    font-size: 18px;
    font-weight: 700;
    justify-content: center;
    color: var(--navy);
    letter-spacing: -.3px;
    display: flex;
    align-items: center;
    gap: 9px;
}
.sidebar-logo .logo-img{height:80px;width:80px;}
.sidebar-nav{flex:1;padding:12px 0;overflow-y:auto;}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 18px;font-size:14px;font-weight:500;color:var(--text-light);text-decoration:none;transition:all .15s;cursor:pointer;}
.nav-item:hover{background:var(--orange-light);color:var(--orange);}
.nav-item.active{background:var(--orange);color:#fff;}
.nav-icon{font-size:15px;width:18px;text-align:center;}
.sidebar-footer{padding:16px;border-top:1px solid var(--border);}
.plan-badge{background:var(--orange-light);color:var(--orange);font-size:11px;font-weight:600;padding:5px 10px;border-radius:20px;display:inline-block;margin-bottom:10px;}
.sidebar-back-link{font-size:12px;color:var(--text-muted);text-decoration:none;}
.sidebar-back-link:hover{color:var(--text-light);}

.main{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh;}
.topbar{background:linear-gradient(90deg,#FFFFFF 0%,#FFF9F6 100%);border-bottom:1px solid var(--border);min-height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:50;}
.topbar-title{font-size:16px;font-weight:600;}
.topbar-right{display:flex;align-items:center;gap:14px;}
.topbar-user{font-size:14px;font-weight:600;color:var(--text);}
.role-badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--orange);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.logout-form{display:inline;}
.logout-btn{padding:6px 14px;border:1px solid var(--border);border-radius:8px;background:#fff;font-size:13px;font-weight:600;color:var(--text-light);cursor:pointer;transition:all .15s;font-family:'Inter',sans-serif;}
.logout-btn:hover{border-color:var(--orange);color:var(--orange);}

.content{padding:28px;flex:1;}
.flash{margin:0 28px 0;margin-top:20px;background:var(--green-light);border:1px solid #A7F3D0;color:var(--green-mid);padding:12px 16px;border-radius:var(--radius);font-size:14px;font-weight:600;}

/* ── Cards / panels ── */
.card,.panel{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm);}

/* ── Stat grid ── */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;}
.stat-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;}
.stat-card:nth-child(1)::before{background:var(--orange);}.stat-card:nth-child(1){background:linear-gradient(135deg,#FFF4EE 0%,#FFFBF8 100%);}
.stat-card:nth-child(2)::before{background:var(--green);}.stat-card:nth-child(2){background:linear-gradient(135deg,#ECFDF5 0%,#F8FDF8 100%);}
.stat-card:nth-child(3)::before{background:var(--teal);}.stat-card:nth-child(3){background:linear-gradient(135deg,#EFF9FF 0%,#F8FCFF 100%);}
.stat-card:nth-child(4)::before{background:var(--red);}
.stat-label{font-size:11px;font-weight:600;color:var(--text-light);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;}
.stat-value{font-size:34px;font-weight:800;line-height:1;margin-bottom:5px;}
.stat-value.orange{color:var(--orange);}
.stat-value.red{color:var(--red);}
.stat-sub{font-size:12px;color:var(--text-muted);}
.up{color:var(--green);font-weight:500;}

/* ── Badges (dashboard) ── */
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;}
.badge-green{background:var(--green-light);color:var(--green-mid);}
.badge-orange{background:var(--orange-light);color:#D97706;}
.badge-red{background:var(--red-light);color:#DC2626;}
.badge-teal{background:var(--teal-light);color:var(--teal-hover);}
.badge-gray{background:var(--bg-soft);color:var(--text-light);}

/* ── Dashboard buttons ── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;transition:all .15s;border:none;white-space:nowrap;}
.btn.btn-primary{background:var(--orange);color:#fff;box-shadow:0 2px 8px rgba(240,104,32,.25);padding:8px 16px;font-size:13px;}
.btn.btn-primary:hover{background:var(--orange-hover);}
.btn.btn-secondary{background:#fff;color:var(--text);border:1px solid var(--border);padding:8px 16px;font-size:13px;}
.btn.btn-secondary:hover{border-color:var(--orange);color:var(--orange);}
.btn-sm{padding:5px 12px;font-size:12px;}

/* ── Dashboard tables ── */
.table-wrap{overflow-x:auto;}
table.data-table{width:100%;border-collapse:collapse;font-size:13px;}
table.data-table thead th{background:var(--bg-soft);color:var(--text-light);font-weight:600;padding:10px 14px;text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;}
table.data-table tbody tr{border-bottom:1px solid var(--border);}
table.data-table tbody tr:last-child{border-bottom:none;}
table.data-table tbody tr:hover{background:var(--bg-soft);}
table.data-table tbody td{padding:11px 14px;vertical-align:middle;}

@media(max-width:1100px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:768px){
  .sidebar{display:none;}
  .main{margin-left:0;}
  .stat-grid{grid-template-columns:1fr 1fr;}
}