/* ═══ OE Client Portal — Premium Dark Theme ═══ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0a1f04;--bg2:#0d2206;--accent:#8bc34a;--accent2:#a8d060;--gold:#c4a35a;
  --glass-bg:rgba(22,45,12,0.55);--glass-border:rgba(139,195,74,0.15);
  --text:rgba(255,255,255,0.92);--muted:rgba(255,255,255,0.5);
  --sidebar-w:260px;
}
html,body{height:100%;margin:0;padding:0}
body{
  font-family:'Inter','Segoe UI',system-ui,sans-serif !important;
  background:var(--bg) !important;color:var(--text) !important;min-height:100vh;
  position:relative;overflow-x:hidden;
}
/* Dot grid */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(139,195,74,0.07) 1px,transparent 1px);
  background-size:32px 32px;
}
/* Ambient glow */
body::after{
  content:'';position:fixed;z-index:0;pointer-events:none;
  width:600px;height:600px;top:-120px;right:-180px;
  background:radial-gradient(circle,rgba(139,195,74,0.08) 0%,transparent 70%);
  border-radius:50%;
}

/* ═══ Layout ═══ */
.layout{display:flex;min-height:100vh;position:relative;z-index:1}

/* ═══ Sidebar ═══ */
.sidebar{
  display:flex;flex-direction:column;
  width:var(--sidebar-w);height:100vh;position:fixed;left:0;top:0;z-index:100;
  background:linear-gradient(180deg,rgba(13,34,6,0.85),rgba(10,31,4,0.95));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-right:1px solid var(--glass-border);
  transition:transform 0.3s ease;
}
.sidebar-header{
  padding:24px 20px 20px;border-bottom:1px solid var(--glass-border);
  display:flex;align-items:center;gap:12px;
}
.sidebar-header img{height:36px;width:auto}
.sidebar-header .brand{font-size:15px;font-weight:700;color:#fff;letter-spacing:-0.02em}
.sidebar-header .brand-sub{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;font-weight:500}

.sidebar-nav{flex:1;padding:12px 10px;overflow-y:auto;overflow-x:hidden}
.nav-section{
  font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:1.2px;padding:16px 12px 6px;
}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;
  font-size:13px;font-weight:500;color:rgba(255,255,255,0.7);text-decoration:none;
  transition:all 0.2s ease;margin-bottom:2px;cursor:pointer;
}
.nav-item:hover{background:rgba(139,195,74,0.08);color:#fff}
.nav-item.active{
  background:rgba(139,195,74,0.15);color:#fff;font-weight:600;
  border:1px solid rgba(139,195,74,0.2);
  box-shadow:0 0 12px rgba(139,195,74,0.08);
}
.nav-icon{font-size:16px;width:22px;text-align:center}

.sidebar-footer{
  flex-shrink:0;padding:16px 20px;border-top:1px solid var(--glass-border);
  font-size:12px;color:var(--muted);
}
.sidebar-footer .client-email{color:rgba(255,255,255,0.7);font-weight:500;margin-bottom:8px;display:block}
.btn-logout{
  width:100%;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.2);
  color:#f87171;padding:10px;border-radius:8px;font-size:12px;font-weight:600;
  cursor:pointer;transition:all 0.2s;font-family:inherit;
}
.btn-logout:hover{background:rgba(239,68,68,0.2)}

/* ═══ Content area ═══ */
.content{
  margin-left:var(--sidebar-w);flex:1;min-height:100vh;
  position:relative;z-index:1;overflow-x:hidden;
  max-width:calc(100vw - var(--sidebar-w));
}
.main{padding:32px 36px;max-width:1400px}
.main h1,.page-title{font-size:1.6rem;font-weight:800;color:#fff;margin-bottom:6px}
.main .subtitle,.page-subtitle{color:var(--muted);font-size:13px;margin-bottom:28px}

/* ═══ Cards / Glass tiles ═══ */
.card,.section-card,.tile,.box,.glass-card{
  background:var(--glass-bg);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  border-radius:14px;padding:24px;margin-bottom:20px;
  position:relative;
}
.card::before,.section-card::before,.tile::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  border-radius:14px 14px 0 0;opacity:0.4;
}
.card:hover,.tile:hover{
  border-color:rgba(139,195,74,0.25);
  box-shadow:0 8px 24px rgba(139,195,74,0.08);
}
.card-title,.card h2,.card h3,.section-card h2,.section-card h3{
  font-size:15px;font-weight:700;color:#fff;margin-bottom:16px;
  display:flex;align-items:center;gap:8px;
}

/* ═══ KPI / Stats ═══ */
.cards-grid,.kpi-row,.stats-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:24px;
}
.card-label,.kpi-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.8px;margin-bottom:8px}
.card-value,.kpi-val,.metric-value{font-size:1.6rem;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
.card-detail,.kpi-sub{font-size:12px;color:var(--muted);margin-top:4px}

/* ═══ Tables ═══ */
table{width:100%;border-collapse:collapse}
th{
  font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:0.8px;padding:10px 14px;text-align:left;
  border-bottom:1px solid var(--glass-border);
  background:rgba(10,31,4,0.4);
}
td{
  padding:10px 14px;color:var(--text);font-size:13px;
  border-bottom:1px solid rgba(139,195,74,0.06);
}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:rgba(139,195,74,0.06)}

/* ═══ Badges ═══ */
.badge{display:inline-block;padding:3px 10px;border-radius:50px;font-size:11px;font-weight:700}
.badge-active,.badge.active{background:rgba(74,222,128,0.12);color:#4ade80;border:1px solid rgba(74,222,128,0.25)}
.badge-trial,.badge-pending,.badge.pending{background:rgba(251,191,36,0.12);color:#fbbf24;border:1px solid rgba(251,191,36,0.25)}
.badge-paid{background:rgba(74,222,128,0.12);color:#4ade80;border:1px solid rgba(74,222,128,0.25)}
.badge-failed,.badge.error{background:rgba(248,113,113,0.12);color:#f87171;border:1px solid rgba(248,113,113,0.25)}

/* ═══ Buttons ═══ */
.btn,button[type="submit"],.action-btn{
  padding:8px 18px;border:none;border-radius:8px;font-size:13px;font-weight:600;
  cursor:pointer;transition:all 0.25s;font-family:inherit;
}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0a1f04;box-shadow:0 0 16px rgba(139,195,74,0.12)}
.btn-primary:hover{box-shadow:0 0 28px rgba(139,195,74,0.3);transform:translateY(-1px)}
.btn-success{background:rgba(74,222,128,0.15);color:#4ade80;border:1px solid rgba(74,222,128,0.3)}
.btn-danger{background:rgba(239,68,68,0.15);color:#f87171;border:1px solid rgba(239,68,68,0.3)}

/* ═══ Forms ═══ */
input,select,textarea{
  background:rgba(10,31,4,0.6) !important;border:1px solid var(--glass-border) !important;
  color:var(--text) !important;padding:10px 14px;border-radius:8px;font-family:inherit;
  font-size:13px;transition:border-color 0.2s;width:100%;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent) !important;
  box-shadow:0 0 0 3px rgba(139,195,74,0.1);
}
label{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px;display:block}
.form-group{margin-bottom:16px}

/* ═══ Tabs ═══ */
.tabs{display:flex;gap:4px;margin-bottom:24px;border-bottom:1px solid var(--glass-border);padding-bottom:0}
.tab{
  padding:10px 20px;font-size:13px;font-weight:600;color:var(--muted);
  cursor:pointer;border-bottom:2px solid transparent;transition:all 0.2s;
}
.tab:hover{color:#fff}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}

/* ═══ Hamburger (mobile) ═══ */
.hamburger{
  display:none;position:fixed;top:16px;left:16px;z-index:200;
  background:var(--glass-bg);backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);border-radius:10px;
  padding:10px 12px;cursor:pointer;font-size:20px;line-height:1;
  color:var(--text);
}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:90}
.sidebar-overlay.open{display:block}

@media(max-width:768px){
  .hamburger{display:block}
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .content{margin-left:0;max-width:100vw}
  .main{padding:80px 16px 32px}
  .cards-grid,.kpi-row,.stats-grid{grid-template-columns:1fr}
}

/* ═══ Misc overrides ═══ */
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent2)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block}
.loading{text-align:center;padding:40px;color:var(--muted)}
.error{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#f87171;padding:16px;border-radius:8px;margin-bottom:20px}
.empty{text-align:center;padding:40px;color:var(--muted)}

/* Legacy overrides - override light theme remnants */
.main-wrapper{flex:1;display:flex;flex-direction:column;overflow-y:auto;background:var(--bg) !important}
.container{padding:32px 36px;max-width:1400px;margin:0 auto;background:transparent !important;color:var(--text) !important}
nav:not(.sidebar-nav){background:transparent !important;border:none !important}