/* ============================================================
   reseller.8ledger.app — Reseller Portal Stylesheet
   ============================================================ */
:root{--gold:#C9A03D;--gold-light:#E8D48B;--gold-dark:#A07E2E;--blue:#2C5F8A;--blue-dark:#1E3F5C;--blue-light:#3A7AB5;--jade:#4A8B71;--jade-light:#6BAF91;--bg:#F5F6FA;--bg-dark:#E8EAF0;--white:#FFFFFF;--text:#2D3748;--text-light:#718096;--text-muted:#A0AEC0;--border:#E2E8F0;--danger:#E53E3E;--danger-light:#FED7D7;--success:#38A169;--success-light:#C6F6D5;--warning:#DD6B20;--warning-light:#FEEBC8;--sidebar-width:260px;--topbar-height:60px;}

@keyframes shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-4px)}20%,40%,60%,80%{transform:translateX(4px)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:var(--text);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:var(--gold);text-decoration:none;transition:color .2s;}a:hover{color:var(--gold-dark);}
button{font-family:inherit;cursor:pointer;}

/* ─── Login Screen ─── */
#auth-gate{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);}
#login-wrapper{display:flex;width:100%;max-width:960px;min-height:600px;border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.12);}
#login-branding{flex:0 0 45%;background:linear-gradient(135deg,#1A3A4F 0%,#0F2233 60%,#0A1A2A 100%);color:#fff;padding:48px 40px;display:flex;flex-direction:column;}
#login-branding-inner{flex:1;}
#login-logo{width:180px;margin-bottom:28px;}
#login-tagline{font-family:'Poppins',sans-serif;font-size:26px;font-weight:700;margin-bottom:12px;line-height:1.3;}
#login-subtitle{font-size:14px;color:rgba(255,255,255,0.7);line-height:1.7;margin-bottom:32px;}
#login-features{list-style:none;}
#login-features li{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:14px;color:rgba(255,255,255,0.85);}
.icon-feature{width:20px;height:20px;flex-shrink:0;}
#login-branding-footer{margin-top:auto;padding-top:24px;}
#login-branding-footer p{font-size:12px;color:rgba(255,255,255,0.35);}

#login-form-panel{flex:1;background:var(--white);display:flex;align-items:center;justify-content:center;padding:48px 40px;}
#login-form-container{width:100%;max-width:360px;}
#login-form-container h2{font-family:'Poppins',sans-serif;font-size:22px;font-weight:700;color:#1A3A4F;margin-bottom:4px;}
.login-desc{font-size:14px;color:var(--text-light);margin-bottom:24px;}
#login-error{padding:12px 16px;border-radius:8px;font-size:14px;margin-bottom:16px;background:#FED7D7;color:#C53030;border:1px solid #FEB2B2;}
.field-group{margin-bottom:18px;}
.field-group label{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:5px;}
.input-icon-wrap{position:relative;}
.input-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--text-muted);pointer-events:none;}
.input-icon-wrap input{width:100%;padding:13px 16px 13px 48px;border:1.5px solid var(--border);border-radius:10px;font-size:15px;font-family:inherit;background:var(--white);transition:border-color .2s,box-shadow .2s;outline:none;}
.input-icon-wrap input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,160,61,0.12);}
.input-icon-wrap input::placeholder{color:var(--text-muted);}
.login-options{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;font-size:13px;}
.remember-me{display:flex;align-items:center;gap:6px;color:var(--text-light);cursor:pointer;}
.remember-me input{accent-color:var(--gold);width:16px;height:16px;}
.sso-link{color:var(--gold);font-weight:500;}
#loginBtn{width:100%;padding:13px;border:none;border-radius:10px;background:linear-gradient(135deg,var(--gold) 0%,var(--gold-dark) 100%);color:#fff;font-size:16px;font-weight:600;transition:transform .15s,box-shadow .2s;}
#loginBtn:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(201,160,61,0.3);}
#loginBtn:disabled{opacity:.6;cursor:not-allowed;transform:none;}
.login-footer-text{font-size:13px;color:var(--text-muted);text-align:center;margin-top:24px;}

/* ─── App Layout ─── */
#app{display:flex;min-height:100vh;}

/* Sidebar */
#sidebar{width:var(--sidebar-width);background:linear-gradient(180deg,#1A3A4F 0%,#0F2233 100%);color:#fff;display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:50;transition:transform .3s;}
.sidebar-header{padding:20px 24px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,0.08);}
.sidebar-title{font-family:'Poppins',sans-serif;font-size:18px;font-weight:600;}
.sidebar-nav{flex:1;padding:16px 12px;display:flex;flex-direction:column;gap:4px;}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;color:rgba(255,255,255,0.65);font-size:14px;font-weight:500;transition:all .2s;cursor:pointer;border:none;background:none;text-align:left;width:100%;}
.nav-item svg{width:20px;height:20px;flex-shrink:0;opacity:.7;}
.nav-item:hover{background:rgba(255,255,255,0.08);color:#fff;}
.nav-item.active{background:rgba(201,160,61,0.15);color:var(--gold);font-weight:600;}
.nav-item.active svg{opacity:1;color:var(--gold);}
.sidebar-footer{padding:16px;border-top:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:space-between;}
.user-info{display:flex;align-items:center;gap:10px;}
.user-avatar{width:36px;height:36px;border-radius:10px;background:var(--gold);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:#fff;}
.user-details{display:flex;flex-direction:column;}
.user-name{font-size:13px;font-weight:600;color:#fff;}
.user-role{font-size:11px;color:rgba(255,255,255,0.5);}
.logout-btn{background:none;border:none;color:rgba(255,255,255,0.5);padding:8px;border-radius:8px;transition:all .2s;}
.logout-btn:hover{background:rgba(255,255,255,0.1);color:#fff;}

/* Main */
#main{flex:1;margin-left:var(--sidebar-width);}
#topbar{height:var(--topbar-height);background:var(--white);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 28px;position:sticky;top:0;z-index:40;}
#topbar h1{font-size:18px;font-weight:700;color:#1A3A4F;font-family:'Poppins',sans-serif;}
.menu-toggle{display:none;background:none;border:none;font-size:22px;color:var(--text);margin-right:16px;}
.topbar-actions{margin-left:auto;display:flex;gap:16px;}
.topbar-link{font-size:14px;color:var(--text-light);font-weight:500;}
.topbar-link:hover{color:var(--gold);}
.content-area{padding:28px;animation:fadeIn .3s ease;}

/* ─── Dashboard Cards ─── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;}
.stat-card{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:22px;transition:transform .2s,box-shadow .2s;}
.stat-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.06);}
.stat-label{font-size:13px;color:var(--text-light);font-weight:500;margin-bottom:6px;}
.stat-value{font-size:28px;font-weight:700;font-family:'Poppins',sans-serif;color:#1A3A4F;}
.stat-value.gold{color:var(--gold);}
.stat-value.jade{color:var(--jade);}
.stat-change{font-size:12px;margin-top:4px;font-weight:600;}
.stat-change.up{color:var(--success);}
.stat-change.down{color:var(--danger);}

/* Tables */
.section-card{background:var(--white);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:24px;}
.section-header{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.section-header h3{font-size:16px;font-weight:700;color:#1A3A4F;}
.data-table{width:100%;border-collapse:collapse;}
.data-table th{text-align:left;padding:12px 22px;font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;background:var(--bg);border-bottom:1px solid var(--border);}
.data-table td{padding:14px 22px;font-size:14px;border-bottom:1px solid var(--border);}
.data-table tr:last-child td{border-bottom:none;}
.data-table tr:hover td{background:rgba(201,160,61,0.03);}
.badge{display:inline-block;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;}
.badge.active{background:var(--success-light);color:#276749;}
.badge.trial{background:var(--warning-light);color:#975A16;}
.badge.churned{background:var(--danger-light);color:#C53030;}
.badge.pending{background:#EDF2F7;color:var(--text-light);}
.badge.paid{background:var(--success-light);color:#276749;}

/* Resources */
.resources-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.resource-card{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:24px;transition:transform .2s,border-color .2s;}
.resource-card:hover{transform:translateY(-2px);border-color:var(--gold);}
.resource-icon{font-size:32px;margin-bottom:12px;}
.resource-card h4{font-size:16px;font-weight:700;color:#1A3A4F;margin-bottom:6px;}
.resource-card p{font-size:13px;color:var(--text-light);line-height:1.5;margin-bottom:12px;}
.resource-link{font-size:13px;font-weight:600;color:var(--gold);}

/* Support */
.support-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.support-card{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:28px;text-align:center;transition:transform .2s,border-color .2s;}
.support-card:hover{transform:translateY(-2px);border-color:var(--gold);}
.support-card h4{font-size:16px;font-weight:700;color:#1A3A4F;margin:12px 0 6px;}
.support-card p{font-size:13px;color:var(--text-light);margin-bottom:16px;}
.support-btn{display:inline-block;padding:10px 24px;border-radius:10px;font-size:14px;font-weight:600;transition:transform .15s;}
.support-btn.primary{background:var(--gold);color:#fff;}
.support-btn.primary:hover{transform:translateY(-1px);color:#fff;}
.support-btn.secondary{border:1.5px solid var(--border);background:var(--white);color:var(--text);}
.support-btn.secondary:hover{border-color:var(--gold);color:var(--gold);}

/* Empty state */
.empty-state{text-align:center;padding:60px 20px;color:var(--text-light);}
.empty-state svg{margin-bottom:16px;opacity:.5;}
.empty-state h3{font-size:18px;color:var(--text);margin-bottom:8px;}
.empty-state p{font-size:14px;max-width:400px;margin:0 auto;}

@media(max-width:900px){
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .resources-grid,.support-grid{grid-template-columns:1fr;}
}
@media(max-width:768px){
  #sidebar{transform:translateX(-100%);}
  #sidebar.open{transform:translateX(0);}
  #main{margin-left:0;}
  .menu-toggle{display:block;}
  #login-wrapper{flex-direction:column;}
  #login-branding{display:none;}
}