/* ============================================================
   KWS Advocate SaaS — Premium Legal Practice Management
   Dark / Emerald Theme
   ============================================================ */

:root{
  --bg:            #0b1712;
  --bg-soft:       #0f1e17;
  --card:          #12241c;
  --card-2:        #16291f;
  --border:        #223b2e;
  --text:          #eaf3ee;
  --text-dim:      #9fb5aa;
  --text-mute:     #6f8a7c;
  --accent:        #12c48b;
  --accent-2:      #22e0a3;
  --accent-dim:    rgba(18,196,139,.12);
  --danger:        #ef5b5b;
  --warning:       #f2b94b;
  --info:          #4aa8f0;
  --radius:        14px;
  --radius-sm:     9px;
  --shadow:        0 10px 30px rgba(0,0,0,.35);
  --sidebar-w:     260px;
  --font-head:     'Poppins', sans-serif;
  --font-body:     'Inter', sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(circle at 15% 0%, rgba(18,196,139,.08), transparent 40%),
    radial-gradient(circle at 90% 10%, rgba(18,196,139,.06), transparent 35%),
    var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:14.5px;
  min-height:100vh;
}
h1,h2,h3,h4,h5,h6{font-family:var(--font-head); font-weight:600; margin:0 0 6px;}
a{color:var(--accent); text-decoration:none;}
a:hover{color:var(--accent-2);}
p{color:var(--text-dim);}

/* ---------- Layout shell ---------- */
.app-shell{display:flex; min-height:100vh;}
.sidebar{
  width:var(--sidebar-w); flex-shrink:0;
  background:linear-gradient(180deg, var(--bg-soft), #0a1510 90%);
  border-right:1px solid var(--border);
  position:fixed; top:0; left:0; bottom:0; overflow-y:auto;
  z-index:50; transition:transform .25s ease;
}
.sidebar-brand{
  display:flex; align-items:center; gap:10px;
  padding:22px 20px; border-bottom:1px solid var(--border);
}
.sidebar-brand .logo-mark{
  width:38px; height:38px; border-radius:10px;
  background:linear-gradient(135deg, var(--accent), #0a8f66);
  display:flex; align-items:center; justify-content:center;
  color:#06140e; font-size:18px; box-shadow:0 4px 14px rgba(18,196,139,.35);
}
.sidebar-brand .brand-text{font-family:var(--font-head); font-weight:700; font-size:16.5px; line-height:1.2;}
.sidebar-brand .brand-text small{display:block; font-weight:400; font-size:11px; color:var(--text-mute);}

.sidebar-section-label{
  padding:16px 20px 6px; font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-mute); font-weight:600;
}
.sidebar-nav{list-style:none; margin:0; padding:4px 12px 20px;}
.sidebar-nav li{margin-bottom:2px;}
.sidebar-nav a{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:var(--radius-sm);
  color:var(--text-dim); font-size:13.6px; font-weight:500;
}
.sidebar-nav a i, .sidebar-nav a svg{width:18px; text-align:center; font-size:15px; flex-shrink:0;}
.sidebar-nav a:hover{background:var(--card); color:var(--text);}
.sidebar-nav a.active{background:var(--accent-dim); color:var(--accent-2); box-shadow:inset 2px 0 0 var(--accent);}
.sidebar-nav .badge-count{
  margin-left:auto; background:var(--accent); color:#06140e;
  font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:20px;
}

.main{margin-left:var(--sidebar-w); flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px; border-bottom:1px solid var(--border);
  background:rgba(11,23,18,.7); backdrop-filter:blur(6px);
  position:sticky; top:0; z-index:40;
}
.topbar .page-title{font-size:19px; font-weight:600; font-family:var(--font-head);}
.topbar .page-title .sub{display:block; font-size:12px; font-weight:400; color:var(--text-mute); margin-top:2px;}
.topbar-right{display:flex; align-items:center; gap:16px;}
.topbar-user{display:flex; align-items:center; gap:10px;}
.topbar-user .avatar{
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#0a8f66);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#06140e; font-size:14px;
}
.topbar-user .name{font-size:13.5px; font-weight:600;}
.topbar-user .role{font-size:11px; color:var(--text-mute); text-transform:capitalize;}
.icon-btn{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border-radius:10px; background:var(--card); border:1px solid var(--border);
  color:var(--text-dim); cursor:pointer; position:relative;
}
.icon-btn:hover{color:var(--accent-2); border-color:var(--accent);}
.icon-btn .dot{position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%; background:var(--danger); border:2px solid var(--bg-soft);}

.content{padding:26px 28px 60px; flex:1;}

/* ---------- Cards ---------- */
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:22px;
}
.card + .card{margin-top:20px;}
.card-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
.card-header h3{font-size:16px;}

.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:22px;}
@media (max-width:1100px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
.stat-card{
  background:linear-gradient(160deg, var(--card-2), var(--card));
  border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; position:relative; overflow:hidden;
}
.stat-card::after{
  content:''; position:absolute; right:-30px; top:-30px; width:100px; height:100px;
  background:var(--accent); opacity:.08; border-radius:50%;
}
.stat-card .icon{
  width:42px; height:42px; border-radius:11px; background:var(--accent-dim); color:var(--accent-2);
  display:flex; align-items:center; justify-content:center; font-size:19px; margin-bottom:14px;
}
.stat-card .value{font-family:var(--font-head); font-size:26px; font-weight:700;}
.stat-card .label{font-size:12.5px; color:var(--text-mute); margin-top:2px;}
.stat-card .trend{font-size:11.5px; margin-top:10px; font-weight:600;}
.trend.up{color:var(--accent-2);} .trend.down{color:var(--danger);}

/* ---------- Table ---------- */
.table-wrap{overflow-x:auto; border-radius:var(--radius-sm); border:1px solid var(--border);}
table{width:100%; border-collapse:collapse; font-size:13.4px;}
thead th{
  text-align:left; padding:12px 16px; background:var(--card-2);
  color:var(--text-mute); font-weight:600; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--border);
}
tbody td{padding:13px 16px; border-bottom:1px solid var(--border); color:var(--text-dim);}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:rgba(255,255,255,.015);}
td.strong, .cell-strong{color:var(--text); font-weight:600;}

/* ---------- Badges ---------- */
.badge{
  display:inline-block; padding:4px 10px; border-radius:20px;
  font-size:11px; font-weight:600; text-transform:capitalize;
  border:1px solid transparent;
}
.badge-success{background:rgba(18,196,139,.14); color:#3fe0ac; border-color:rgba(18,196,139,.3);}
.badge-danger{background:rgba(239,91,91,.14); color:#ff8b8b; border-color:rgba(239,91,91,.3);}
.badge-warning{background:rgba(242,185,75,.14); color:#ffcf7a; border-color:rgba(242,185,75,.3);}
.badge-info{background:rgba(74,168,240,.14); color:#7ec1ff; border-color:rgba(74,168,240,.3);}
.badge-secondary{background:rgba(159,181,170,.12); color:var(--text-dim); border-color:var(--border);}
.badge-dark{background:rgba(0,0,0,.25); color:var(--text-mute); border-color:var(--border);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:10px 18px; border-radius:10px; font-size:13.5px; font-weight:600;
  border:1px solid transparent; cursor:pointer; font-family:var(--font-body);
  transition:.15s ease;
}
.btn-primary{background:linear-gradient(135deg,var(--accent),#0a9d6f); color:#06140e; box-shadow:0 6px 16px rgba(18,196,139,.25);}
.btn-primary:hover{filter:brightness(1.08);}
.btn-outline{background:transparent; border-color:var(--border); color:var(--text-dim);}
.btn-outline:hover{border-color:var(--accent); color:var(--accent-2);}
.btn-danger{background:rgba(239,91,91,.14); color:#ff8b8b; border-color:rgba(239,91,91,.3);}
.btn-sm{padding:6px 12px; font-size:12.3px; border-radius:8px;}
.btn-block{width:100%;}
.btn-icon{width:36px; height:36px; padding:0; border-radius:8px;}

/* ---------- Forms ---------- */
label{display:block; font-size:12.5px; font-weight:600; color:var(--text-dim); margin-bottom:6px;}
.form-group{margin-bottom:16px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:700px){.form-row{grid-template-columns:1fr;}}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=time],input[type=tel],input[type=file],
select, textarea{
  width:100%; padding:11px 13px; background:var(--bg-soft);
  border:1px solid var(--border); border-radius:9px; color:var(--text);
  font-family:var(--font-body); font-size:13.6px; outline:none;
}
input:focus, select:focus, textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim);}
textarea{resize:vertical; min-height:90px;}
::placeholder{color:var(--text-mute);}

/* ---------- Alerts ---------- */
.alert{padding:13px 16px; border-radius:10px; font-size:13.5px; margin-bottom:16px; border:1px solid transparent;}
.alert-success{background:rgba(18,196,139,.12); color:#3fe0ac; border-color:rgba(18,196,139,.3);}
.alert-danger{background:rgba(239,91,91,.12); color:#ff8b8b; border-color:rgba(239,91,91,.3);}
.alert-warning{background:rgba(242,185,75,.12); color:#ffcf7a; border-color:rgba(242,185,75,.3);}
.alert-info{background:rgba(74,168,240,.12); color:#7ec1ff; border-color:rgba(74,168,240,.3);}

/* ---------- Modal ---------- */
.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(4,10,7,.65);
  z-index:200; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.show{display:flex;}
.modal-box{
  background:var(--card-2); border:1px solid var(--border); border-radius:var(--radius);
  width:100%; max-width:560px; max-height:88vh; overflow-y:auto; box-shadow:var(--shadow);
}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border);}
.modal-head h3{font-size:16px;}
.modal-body{padding:22px;}
.modal-close{cursor:pointer; color:var(--text-mute); font-size:20px; background:none; border:none;}

/* ---------- Auth pages ---------- */
.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 20% 20%, rgba(18,196,139,.14), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(18,196,139,.1), transparent 40%),
    var(--bg);
  padding:20px;
}
.auth-card{
  width:100%; max-width:420px; background:var(--card); border:1px solid var(--border);
  border-radius:18px; padding:38px 34px; box-shadow:var(--shadow);
}
.auth-logo{display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:26px; text-align:center;}
.auth-logo .logo-mark{
  width:56px; height:56px; border-radius:16px;
  background:linear-gradient(135deg,var(--accent),#0a8f66);
  display:flex; align-items:center; justify-content:center; font-size:26px; color:#06140e;
  box-shadow:0 8px 22px rgba(18,196,139,.35);
}
.auth-logo h2{font-size:20px;}
.auth-logo p{font-size:12.5px; margin:0; color:var(--text-mute);}
.demo-creds{
  margin-top:22px; padding:14px 16px; background:var(--bg-soft); border:1px dashed var(--border);
  border-radius:10px; font-size:12px; color:var(--text-mute); line-height:1.7;
}
.demo-creds b{color:var(--text-dim);}

/* ---------- Misc ---------- */
.text-mute{color:var(--text-mute);}
.text-dim{color:var(--text-dim);}
.flex{display:flex;} .items-center{align-items:center;} .justify-between{justify-content:space-between;}
.gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;}
.mb-0{margin-bottom:0;} .mt-16{margin-top:16px;}
.empty-state{text-align:center; padding:50px 20px; color:var(--text-mute);}
.empty-state i{font-size:36px; margin-bottom:12px; opacity:.5; display:block;}
.filter-bar{display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap;}
.filter-bar input, .filter-bar select{width:auto; min-width:160px;}
.pill-nav{display:flex; gap:6px; background:var(--bg-soft); padding:5px; border-radius:10px; border:1px solid var(--border); width:fit-content; margin-bottom:18px;}
.pill-nav a{padding:7px 15px; border-radius:7px; font-size:12.8px; color:var(--text-dim); font-weight:600;}
.pill-nav a.active{background:var(--accent); color:#06140e;}
.avatar-sm{width:30px; height:30px; border-radius:50%; background:var(--accent-dim); color:var(--accent-2); display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; margin-right:8px;}
.hamburger{display:none; background:none; border:none; color:var(--text); font-size:20px; cursor:pointer;}

@media (max-width:960px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .main{margin-left:0;}
  .hamburger{display:block;}
  .stat-grid{grid-template-columns:1fr 1fr;}
}