@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* ══════════════════════════════════════
   THEME VARIABLES
══════════════════════════════════════ */
:root {
  --blue:#2563EB; --blue-d:#1d4ed8; --blue-l:#3b82f6;
  --font-sans:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --radius:8px; --radius-lg:14px;
  --tr:.2s cubic-bezier(.4,0,.2,1);
}

/* DARK (default) */
[data-theme="dark"], :root {
  --bg:       #0A0A0F;
  --bg-2:     #111118;
  --bg-3:     #1a1a24;
  --border:   rgba(255,255,255,.07);
  --bh:       rgba(255,255,255,.13);
  --white:    #FFFFFF;
  --black:    #0A0A0F;
  --gray:     #A1A1AA;
  --text:     #FFFFFF;
  --text-2:   rgba(255,255,255,.75);
  --text-3:   #A1A1AA;
  --shadow:   rgba(0,0,0,.4);
  --nav-bg:   rgba(10,10,15,.92);
  --input-bg: #1a1a24;
  --card-bg:  #111118;
  --hover-bg: rgba(255,255,255,.04);
}

/* LIGHT */
[data-theme="light"] {
  --bg:       #F8F9FC;
  --bg-2:     #FFFFFF;
  --bg-3:     #F1F3F8;
  --border:   rgba(0,0,0,.08);
  --bh:       rgba(0,0,0,.14);
  --white:    #FFFFFF;
  --black:    #0A0A0F;
  --gray:     #6B7280;
  --text:     #0F172A;
  --text-2:   #374151;
  --text-3:   #6B7280;
  --shadow:   rgba(0,0,0,.12);
  --nav-bg:   rgba(248,249,252,.95);
  --input-bg: #FFFFFF;
  --card-bg:  #FFFFFF;
  --hover-bg: rgba(0,0,0,.03);
}

/* ══════════════════════════════════════
   BASE
══════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);
  min-height:100vh;line-height:1.6;transition:background .25s,color .25s;}
a{color:inherit;text-decoration:none;transition:color var(--tr);}
button{cursor:pointer;font-family:var(--font-sans);border:none;outline:none;
  -webkit-tap-highlight-color:transparent;}
input,select,textarea{font-family:var(--font-body);}
img{max-width:100%;display:block;}
p{color:var(--text-3);line-height:1.7;}

::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:3px;}
::selection{background:rgba(37,99,235,.28);}

/* ══════════════════════════════════════
   THEME TOGGLE
══════════════════════════════════════ */
.theme-toggle{
  display:inline-flex;align-items:center;gap:0;
  background:var(--bg-3);border:1px solid var(--border);
  border-radius:100px;padding:3px;
}
.theme-btn{
  width:30px;height:26px;border-radius:100px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;color:var(--text-3);
  transition:all var(--tr);font-size:13px;
}
.theme-btn.active{background:var(--bg-2);color:var(--blue-l);
  box-shadow:0 1px 4px var(--shadow);}
.theme-btn:hover:not(.active){color:var(--text);}

/* ══════════════════════════════════════
   LANG TOGGLE
══════════════════════════════════════ */
.lang-toggle{display:inline-flex;align-items:center;background:var(--bg-3);
  border:1px solid var(--border);border-radius:100px;padding:2px;}
.lang-opt{padding:4px 12px;border-radius:100px;cursor:pointer;transition:all .2s;
  color:var(--text-3);border:none;background:transparent;font-family:var(--font-sans);
  font-size:12px;font-weight:600;letter-spacing:.04em;}
.lang-opt.active{background:var(--blue);color:#fff;}
.lang-opt:hover:not(.active){color:var(--text);}

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;
  border-radius:var(--radius);font-family:var(--font-sans);font-size:14px;
  font-weight:500;letter-spacing:-.01em;white-space:nowrap;
  transition:all var(--tr);border:1px solid transparent;cursor:pointer;}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue);}
.btn-primary:hover{background:var(--blue-d);transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(37,99,235,.3);}
.btn-secondary{background:transparent;color:var(--text);border-color:var(--border);}
.btn-secondary:hover{border-color:var(--bh);background:var(--hover-bg);}
.btn-danger{background:rgba(239,68,68,.1);color:#f87171;border-color:rgba(239,68,68,.2);}
.btn-danger:hover{background:rgba(239,68,68,.18);}
.btn-success{background:rgba(34,197,94,.1);color:#4ade80;border-color:rgba(34,197,94,.2);}
.btn-sm{padding:7px 14px;font-size:13px;}
.btn-xs{padding:5px 10px;font-size:12px;}
.btn-full{width:100%;justify-content:center;}
.btn:disabled{opacity:.5;pointer-events:none;}

/* ══════════════════════════════════════
   FORMS
══════════════════════════════════════ */
.form-group{display:flex;flex-direction:column;gap:6px;}
.form-label{font-family:var(--font-sans);font-size:12.5px;font-weight:500;color:var(--text-3);}
.form-input,.form-select,.form-textarea{
  width:100%;padding:10px 14px;background:var(--input-bg);
  border:1px solid var(--border);border-radius:var(--radius);
  color:var(--text);font-family:var(--font-body);font-size:14px;
  transition:border-color var(--tr),box-shadow var(--tr);
  outline:none;-webkit-appearance:none;appearance:none;
}
.form-input::placeholder,.form-textarea::placeholder{color:rgba(107,114,128,.5);}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.form-select{cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;}
.form-select option{background:var(--bg-2);color:var(--text);}
.form-textarea{resize:vertical;min-height:80px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-error{font-size:12px;color:#f87171;margin-top:3px;}
.form-hint{font-size:12px;color:var(--text-3);margin-top:3px;}

/* Password show/hide */
.pw-wrap{position:relative;}
.pw-wrap .form-input{padding-right:44px;}
.pw-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--text-3);cursor:pointer;padding:4px;
  display:flex;align-items:center;transition:color .2s;}
.pw-toggle:hover{color:var(--text);}

/* ══════════════════════════════════════
   CARDS
══════════════════════════════════════ */
.card{background:var(--card-bg);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:22px;}
.card-section-title{font-family:var(--font-sans);font-size:13.5px;font-weight:600;
  color:var(--text);margin-bottom:16px;padding-bottom:12px;
  border-bottom:1px solid var(--border);}

/* ══════════════════════════════════════
   BADGES
══════════════════════════════════════ */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;
  border-radius:100px;font-family:var(--font-sans);font-size:11px;
  font-weight:600;letter-spacing:.04em;text-transform:uppercase;}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;
  background:currentColor;flex-shrink:0;}
.badge-active   {background:rgba(34,197,94,.1); color:#22c55e;border:1px solid rgba(34,197,94,.2);}
.badge-expiring {background:rgba(251,191,36,.1);color:#f59e0b;border:1px solid rgba(251,191,36,.2);}
.badge-expired  {background:rgba(239,68,68,.1); color:#ef4444;border:1px solid rgba(239,68,68,.2);}
.badge-cancelled{background:rgba(107,114,128,.1);color:var(--gray);border:1px solid rgba(107,114,128,.2);}
.badge-paid     {background:rgba(34,197,94,.1); color:#22c55e;border:1px solid rgba(34,197,94,.2);}
.badge-pending  {background:rgba(251,191,36,.1);color:#f59e0b;border:1px solid rgba(251,191,36,.2);}
.badge-failed   {background:rgba(239,68,68,.1); color:#ef4444;border:1px solid rgba(239,68,68,.2);}

/* Status dot indicator */
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;}
.dot-active  {background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,.5);}
.dot-expiring{background:#f59e0b;box-shadow:0 0 6px rgba(245,158,11,.5);}
.dot-expired {background:#ef4444;box-shadow:0 0 6px rgba(239,68,68,.5);}
.dot-none    {background:var(--text-3);}

/* ══════════════════════════════════════
   TOASTS
══════════════════════════════════════ */
.toast{position:fixed;bottom:24px;right:24px;z-index:999;
  background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px 18px;
  font-family:var(--font-sans);font-size:14px;font-weight:500;
  box-shadow:0 8px 24px var(--shadow);transform:translateY(16px);opacity:0;
  transition:all .3s cubic-bezier(.16,1,.3,1);max-width:300px;}
.toast.show{transform:translateY(0);opacity:1;}
.toast-success{border-color:rgba(34,197,94,.3);color:#22c55e;}
.toast-error  {border-color:rgba(239,68,68,.3);color:#ef4444;}
.toast-info   {border-color:rgba(37,99,235,.3);color:var(--blue-l);}

/* ══════════════════════════════════════
   SPINNER
══════════════════════════════════════ */
.spinner{width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(107,114,128,.2);border-top-color:var(--blue-l);
  animation:spin .7s linear infinite;display:inline-block;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ══════════════════════════════════════
   NAV
══════════════════════════════════════ */
.portal-nav{
  position:sticky;top:0;z-index:100;
  background:var(--nav-bg);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);padding:0 20px;height:60px;
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
  transition:background .25s,border-color .25s;
}
.nav-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-sans);
  font-size:16px;font-weight:600;letter-spacing:-.03em;color:var(--text);}
.nav-logo-icon{width:32px;height:32px;border-radius:50%;background:var(--bg);
  border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;
  position:relative;flex-shrink:0;}
.nav-logo-dot{position:absolute;bottom:2px;right:2px;width:8px;height:8px;
  border-radius:50%;background:var(--blue);}
.nav-wordmark .dot{color:var(--blue);}
.nav-wordmark .suf{font-weight:300;color:var(--text-3);}
.nav-right{display:flex;align-items:center;gap:10px;}
.nav-user{font-size:13px;color:var(--text-3);}

/* ══════════════════════════════════════
   PAGE LAYOUT
══════════════════════════════════════ */
.page{max-width:1040px;margin:0 auto;padding:28px 22px 80px;flex:1;}
.page-header{margin-bottom:22px;}
.page-header h1{font-family:var(--font-sans);font-size:clamp(1.3rem,3vw,1.8rem);
  font-weight:700;letter-spacing:-.04em;color:var(--text);margin-bottom:4px;}
.page-header p{font-size:14px;}

/* ══════════════════════════════════════
   TABLE
══════════════════════════════════════ */
.table-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--border);}
table{width:100%;border-collapse:collapse;}
thead tr{border-bottom:1px solid var(--border);background:var(--bg-2);}
th{padding:11px 16px;font-family:var(--font-sans);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);text-align:left;
  white-space:nowrap;}
td{padding:13px 16px;font-size:13.5px;color:var(--text-2);
  border-bottom:1px solid var(--border);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:var(--hover-bg);}
.td-name{font-family:var(--font-sans);font-weight:500;color:var(--text);}

/* ══════════════════════════════════════
   CLIENT CARDS (mobile table alternative)
══════════════════════════════════════ */
.client-cards{display:none;flex-direction:column;gap:10px;}
.client-card{background:var(--card-bg);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:16px;transition:border-color var(--tr);}
.client-card:hover{border-color:var(--bh);}
.cc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:8px;}
.cc-name{font-family:var(--font-sans);font-weight:600;font-size:15px;color:var(--text);}
.cc-sub{font-size:12px;color:var(--text-3);}
.cc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
.cc-field{background:var(--bg-3);border-radius:var(--radius);padding:8px 10px;}
.cc-field-label{font-size:10px;font-family:var(--font-sans);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin-bottom:3px;}
.cc-field-val{font-size:13px;font-weight:500;color:var(--text);}
.cc-actions{display:flex;gap:8px;align-items:center;}
.cc-pw-row{display:flex;align-items:center;gap:6px;}
.cc-pw-val{font-family:monospace;font-size:13px;color:var(--text-3);}

/* ══════════════════════════════════════
   STATS GRID
══════════════════════════════════════ */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px;}
.stat-card{background:var(--card-bg);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:18px 20px;transition:border-color var(--tr);}
.stat-card:hover{border-color:var(--bh);}
.stat-num{font-family:var(--font-sans);font-size:28px;font-weight:700;
  letter-spacing:-.04em;color:var(--text);line-height:1;margin-bottom:4px;}
.stat-label{font-size:12px;color:var(--text-3);}
.stat-blue{border-color:rgba(37,99,235,.25);}
.stat-blue .stat-num{color:var(--blue-l);}

/* ══════════════════════════════════════
   FILTER PILLS
══════════════════════════════════════ */
.filter-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.pill{padding:5px 14px;border-radius:100px;font-family:var(--font-sans);
  font-size:12.5px;font-weight:500;cursor:pointer;border:1px solid var(--border);
  background:transparent;color:var(--text-3);transition:all var(--tr);}
.pill:hover{border-color:var(--bh);color:var(--text);}
.pill.active{background:var(--blue);color:#fff;border-color:var(--blue);}
.pill-active  {border-color:rgba(34,197,94,.3);color:#22c55e;}
.pill-active.active{background:#22c55e;border-color:#22c55e;color:#fff;}
.pill-expiring{border-color:rgba(245,158,11,.3);color:#f59e0b;}
.pill-expiring.active{background:#f59e0b;border-color:#f59e0b;color:#fff;}
.pill-expired {border-color:rgba(239,68,68,.3);color:#ef4444;}
.pill-expired.active{background:#ef4444;border-color:#ef4444;color:#fff;}

/* ══════════════════════════════════════
   PROFILE HEADER
══════════════════════════════════════ */
.profile-header{background:var(--card-bg);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:20px;margin-bottom:20px;
  display:flex;align-items:center;gap:14px;}
.profile-avatar{width:48px;height:48px;border-radius:50%;
  background:rgba(37,99,235,.12);border:2px solid rgba(37,99,235,.3);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-sans);font-size:17px;font-weight:700;
  color:var(--blue-l);flex-shrink:0;}
.profile-info h2{font-family:var(--font-sans);font-size:17px;font-weight:600;
  color:var(--text);margin-bottom:2px;}
.profile-info p{font-size:13px;color:var(--text-3);}

/* ══════════════════════════════════════
   CONTRACT CARD
══════════════════════════════════════ */
.contract-card{background:var(--card-bg);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;margin-bottom:22px;}
.contract-header{padding:17px 20px;border-bottom:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.contract-body{padding:17px 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.contract-field label{font-size:11px;font-family:var(--font-sans);text-transform:uppercase;
  letter-spacing:.08em;color:var(--text-3);display:block;margin-bottom:4px;}
.contract-field span{font-size:14px;font-family:var(--font-sans);font-weight:500;color:var(--text);}
.contract-footer{padding:13px 20px;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}

/* ══════════════════════════════════════
   DAYS METER
══════════════════════════════════════ */
.days-meter{margin-top:6px;}
.days-meter-bar{height:5px;background:var(--bg-3);border-radius:3px;overflow:hidden;margin-bottom:5px;}
.days-meter-fill{height:100%;border-radius:3px;transition:width .6s ease;}
.days-meter-fill.green {background:#22c55e;}
.days-meter-fill.yellow{background:#f59e0b;}
.days-meter-fill.red   {background:#ef4444;}
.days-meter span{font-size:12px;color:var(--text-3);}

/* ══════════════════════════════════════
   ALERTS
══════════════════════════════════════ */
.alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;
  border-radius:var(--radius);margin-bottom:16px;font-size:13.5px;}
.alert-warning{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);color:#f59e0b;}
.alert-error  {background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.2); color:#ef4444;}
.alert-info   {background:rgba(37,99,235,.08); border:1px solid rgba(37,99,235,.2); color:var(--blue-l);}
.alert-success{background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.2); color:#22c55e;}

/* ══════════════════════════════════════
   MODAL
══════════════════════════════════════ */
.modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.65);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .2s;}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:26px;max-width:480px;width:100%;transform:translateY(14px);
  transition:transform .25s;max-height:90vh;overflow-y:auto;}
.modal-overlay.open .modal{transform:translateY(0);}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.modal-header h3{font-family:var(--font-sans);font-size:16px;font-weight:600;color:var(--text);}
.modal-close{background:transparent;color:var(--text-3);font-size:20px;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all var(--tr);}
.modal-close:hover{background:var(--hover-bg);color:var(--text);}
.modal-actions{display:flex;gap:10px;margin-top:18px;justify-content:flex-end;}

/* Quick create slide panel */
.slide-panel{position:fixed;top:0;right:0;bottom:0;z-index:300;
  width:min(420px,100vw);background:var(--bg-2);border-left:1px solid var(--border);
  box-shadow:-8px 0 32px var(--shadow);transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;}
.slide-panel.open{transform:translateX(0);}
.slide-panel-overlay{position:fixed;inset:0;z-index:299;background:rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:opacity .3s;}
.slide-panel-overlay.open{opacity:1;pointer-events:all;}
.slide-panel-header{padding:18px 20px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.slide-panel-header h3{font-family:var(--font-sans);font-size:16px;font-weight:600;color:var(--text);}
.slide-panel-body{flex:1;overflow-y:auto;padding:20px;}
.slide-panel-footer{padding:16px 20px;border-top:1px solid var(--border);
  display:flex;gap:10px;flex-shrink:0;}

/* ══════════════════════════════════════
   LOGIN PAGE
══════════════════════════════════════ */
.login-page{display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:24px;position:relative;background:var(--bg);}
.login-page::before{content:'';position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(37,99,235,.1) 0%,transparent 70%);
  z-index:0;}
.login-page::after{content:'';position:fixed;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(37,99,235,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(37,99,235,.03) 1px,transparent 1px);
  background-size:52px 52px;z-index:0;}
.login-box{width:100%;max-width:380px;position:relative;z-index:1;}
.login-logo{display:flex;flex-direction:column;align-items:center;gap:10px;
  margin-bottom:28px;text-align:center;}
.login-logo h1{font-family:var(--font-sans);font-size:21px;font-weight:600;
  letter-spacing:-.04em;color:var(--text);}

/* ══════════════════════════════════════
   TABS
══════════════════════════════════════ */
.tab-nav{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:22px;}
.tab-btn{padding:10px 20px;font-family:var(--font-sans);font-size:13px;font-weight:500;
  color:var(--text-3);cursor:pointer;border:none;background:none;
  border-bottom:2px solid transparent;transition:all .2s;margin-bottom:-1px;}
.tab-btn.active{color:var(--text);border-bottom-color:var(--blue);}
.tab-btn:hover:not(.active){color:var(--text);}
.tab-panel{display:none;}.tab-panel.active{display:block;}

/* ══════════════════════════════════════
   SETTINGS / COUPONS
══════════════════════════════════════ */
.settings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.setting-card{background:var(--bg-3);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:18px;}
.setting-card label{font-family:var(--font-sans);font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);display:block;margin-bottom:8px;}
.price-input-wrap{display:flex;align-items:center;gap:8px;}
.price-input-wrap .dollar{font-size:18px;font-weight:700;color:var(--blue-l);font-family:var(--font-sans);}
.coupon-row{display:flex;align-items:center;gap:10px;padding:12px;
  background:var(--bg-3);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;}
.coupon-code{font-family:monospace;font-size:14px;font-weight:700;color:var(--text);min-width:100px;}
.coupon-price{color:var(--blue-l);font-weight:600;font-family:var(--font-sans);}
.coupon-desc{flex:1;font-size:13px;color:var(--text-3);}

/* ══════════════════════════════════════
   ACTIVITY LOG
══════════════════════════════════════ */
.log-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.log-item:last-child{border-bottom:none;}
.log-icon{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;margin-top:2px;}
.log-icon.create{background:rgba(34,197,94,.1);}
.log-icon.edit  {background:rgba(37,99,235,.1);}
.log-icon.delete{background:rgba(239,68,68,.1);}
.log-text{font-size:13px;color:var(--text-2);line-height:1.5;}
.log-text strong{color:var(--text);font-weight:500;}
.log-time{font-size:11px;color:var(--text-3);margin-top:2px;}

/* ══════════════════════════════════════
   COPY BUTTON
══════════════════════════════════════ */
.copy-btn{background:none;border:none;color:var(--text-3);cursor:pointer;
  padding:2px 4px;border-radius:4px;display:inline-flex;align-items:center;
  transition:all var(--tr);}
.copy-btn:hover{color:var(--blue-l);background:rgba(37,99,235,.1);}

/* ══════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════ */
.empty{text-align:center;padding:48px 24px;color:var(--text-3);}
.empty svg{margin:0 auto 16px;opacity:.3;}
.empty h3{font-family:var(--font-sans);color:var(--text-3);font-size:15px;margin-bottom:6px;}
.empty p{font-size:13px;}

/* ══════════════════════════════════════
   SEARCH BAR
══════════════════════════════════════ */
.search-bar{padding:9px 14px;background:var(--input-bg);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--text);font-family:var(--font-body);
  font-size:13.5px;outline:none;transition:border-color .2s;width:100%;max-width:280px;}
.search-bar::placeholder{color:rgba(107,114,128,.5);}
.search-bar:focus{border-color:var(--blue);}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media(max-width:900px){
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .settings-grid{grid-template-columns:1fr 1fr;}
  .form-row{grid-template-columns:1fr;}
  .contract-body{grid-template-columns:1fr 1fr;}
}
@media(max-width:680px){
  /* Switch table to cards on mobile */
  .table-wrap{display:none;}
  .client-cards{display:flex;}
  .page{padding:16px 14px 60px;}
  .portal-nav{padding:0 14px;}
  .nav-user{display:none;}
  .slide-panel{width:100%;}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr 1fr;}
  .contract-body{grid-template-columns:1fr;}
  .filter-pills{gap:4px;}
  .pill{font-size:11.5px;padding:4px 10px;}
}

/* ── BACKWARDS COMPAT ALIASES ── */
:root,
[data-theme="dark"],
[data-theme="light"] {
  --dark:         var(--bg);
  --dark-2:       var(--bg-2);
  --dark-3:       var(--bg-3);
  --dark2:        var(--bg-2);
  --dark3:        var(--bg-3);
  --font:         var(--font-sans);
  --rl:           var(--radius-lg);
  --blue-light:   var(--blue-l);
  --border-hover: var(--bh);
  --font-sans:    'Space Grotesk', system-ui, sans-serif;
  --body:         var(--font-body);
}

/* Logo SVG adapts to theme */
[data-theme="dark"]  .nav-logo-icon { color: #ffffff; }
[data-theme="light"] .nav-logo-icon { color: #0A0A0F; }
[data-theme="dark"]  .login-logo-icon { color: #ffffff; }
[data-theme="light"] .login-logo-icon { color: #0A0A0F; }