/* ============================================================================
   ImmiPro CRM - Design System
   Light theme only. Clean, futuristic, glass + soft-gradient accents.
   ============================================================================ */

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

:root{
  /* surfaces */
  --bg:            #f5f6fc;
  --bg-soft:       #eef1fb;
  --surface:       #ffffff;
  --surface-2:     #fbfbff;
  --border:        #e6e8f2;
  --border-soft:   #eef0f8;

  /* text */
  --text:          #1b1f3b;
  --text-soft:     #5b6178;
  --text-faint:    #9aa0b4;

  /* brand */
  --primary:       #4f46e5;
  --primary-2:     #7c3aed;
  --primary-soft:  #eef0ff;
  --cyan:          #06b6d4;
  --grad-brand:    linear-gradient(135deg,#4f46e5 0%,#7c3aed 55%,#06b6d4 100%);
  --grad-soft:     linear-gradient(135deg,#eef0ff 0%,#f0f9ff 100%);

  /* status */
  --blue:   #2563eb; --blue-bg:#eaf1ff;
  --cyan-c: #0891b2; --cyan-bg:#e5faff;
  --amber:  #d97706; --amber-bg:#fff6e5;
  --violet: #7c3aed; --violet-bg:#f4eeff;
  --green:  #059669; --green-bg:#e6f9f1;
  --gray:   #64748b; --gray-bg:#f1f2f8;
  --red:    #dc2626; --red-bg:#fde9e9;

  --shadow-sm: 0 1px 2px rgba(30,32,80,.04);
  --shadow-md: 0 6px 20px rgba(45,49,120,.08);
  --shadow-lg: 0 16px 40px rgba(45,49,120,.12);
  --radius:    16px;
  --radius-sm: 10px;
  --radius-lg: 22px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:
    radial-gradient(circle at 8% 0%, #eef0ff 0%, transparent 45%),
    radial-gradient(circle at 100% 12%, #e6fbff 0%, transparent 40%),
    var(--bg);
  color:var(--text);
  font-size:14.5px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.brand,.stat-value{font-family:'Sora',sans-serif;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}
::selection{background:var(--primary-soft);color:var(--primary);}

/* ---------------------------------------------------------------- layout */
.app-shell{display:flex;min-height:100vh;}

.sidebar{
  width:264px;flex-shrink:0;
  background:var(--surface);
  border-right:1px solid var(--border-soft);
  display:flex;flex-direction:column;
  position:sticky;top:0;
  /* 100vh is the OLD viewport unit and, on mobile Safari/Chrome, does not
     shrink when the address bar is showing - it measures the LARGEST
     possible viewport, so a sidebar sized to it can render taller than the
     space actually visible, and its white background appears to "run out"
     partway down with the page's own background showing through below it.
     100dvh (dynamic viewport height) tracks the real visible viewport and
     is the standard fix; the 100vh line above is kept as a fallback for
     browsers that don't support dvh yet, since an unsupported value is
     ignored rather than applied. */
  height:100vh;height:100dvh;
  padding:22px 0 22px 16px;
}
.sidebar-brand{display:flex;align-items:center;gap:10px;padding:6px 26px 22px 10px;flex-shrink:0;}
.sidebar nav{
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  padding-right:16px;margin-right:2px;
  /* Reliable touch/momentum scrolling for a scrollable region nested
     inside a fixed/sticky ancestor - without this, some mobile browsers
     don't register a touch-drag on this element as a scroll gesture. */
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.sidebar nav::-webkit-scrollbar{width:6px;}
.sidebar nav::-webkit-scrollbar-track{background:transparent;}
.sidebar nav::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px;}
.sidebar nav::-webkit-scrollbar-thumb:hover{background:var(--text-faint);}
.sidebar-brand .logo-mark{
  width:38px;height:38px;border-radius:12px;background:var(--grad-brand);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-family:'Sora',sans-serif;
  box-shadow:0 6px 16px rgba(79,70,229,.35);
}
.sidebar-brand .brand-text{font-weight:700;font-size:16px;color:var(--text);}
.sidebar-brand .brand-sub{font-size:11px;color:var(--text-faint);font-weight:500;}

.nav-group-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);font-weight:600;padding:16px 12px 6px;}
.nav-link{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;
  color:var(--text-soft);font-weight:500;font-size:14px;margin-bottom:2px;transition:.15s;
}
.nav-link svg{width:18px;height:18px;flex-shrink:0;opacity:.85;}
.nav-link:hover{background:var(--bg-soft);color:var(--text);}
.nav-link.active{background:var(--grad-brand);color:#fff;box-shadow:0 6px 16px rgba(79,70,229,.28);}
.nav-link.active svg{opacity:1;}
.nav-link .badge-count{margin-left:auto;background:var(--primary-soft);color:var(--primary);font-size:11px;font-weight:700;padding:1px 7px;border-radius:20px;}
.nav-link.active .badge-count{background:rgba(255,255,255,.25);color:#fff;}

.sidebar-footer{margin-top:auto;padding:14px 16px 0 0;border-top:1px solid var(--border-soft);flex-shrink:0;}

/* Dimmed backdrop behind the sidebar when it's opened as a mobile overlay
   (see the max-width:860px block below) - tapping it closes the menu, and
   it also disables interaction with the rest of the page while open.
   display:none on desktop by default; JS only ever adds/removes .open. */
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(20,22,50,.45);z-index:190;}
.sidebar-backdrop.open{display:block;}

/* Hidden by default (desktop, where the sidebar is always visible inline);
   shown only inside the max-width:860px block below. Previously this was
   an inline style="display:none" on the element with no matching CSS to
   ever turn it back on at mobile widths, so the menu could never be
   reopened once closed (or opened at all on a phone that loads the page
   narrow from the start). */
#sidebarToggle{display:none;}

/* ---------------------------------------------------------------- main */
.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{
  display:flex;align-items:center;gap:16px;padding:14px 28px;
  background:rgba(255,255,255,.75);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);position:sticky;top:0;z-index:20;
}
.topbar-titles{min-width:0;}
.topbar .page-title{font-family:'Sora',sans-serif;font-weight:700;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar .page-sub{font-size:12.5px;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar-search{
  flex:1;max-width:380px;display:flex;align-items:center;gap:8px;
  background:var(--bg-soft);border:1px solid transparent;border-radius:12px;padding:9px 14px;color:var(--text-faint);
}
.topbar-search input{border:none;background:transparent;outline:none;font-size:13.5px;width:100%;color:var(--text);}
.topbar-actions{display:flex;align-items:center;gap:10px;margin-left:auto;}
.icon-btn{
  width:38px;height:38px;border-radius:11px;background:var(--surface);border:1px solid var(--border-soft);
  display:flex;align-items:center;justify-content:center;color:var(--text-soft);cursor:pointer;transition:.15s;
}
.icon-btn:hover{background:var(--bg-soft);color:var(--primary);}
.avatar{
  width:38px;height:38px;border-radius:11px;background:var(--grad-brand);color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-family:'Sora',sans-serif;
}
.content{padding:24px 28px 60px;}

/* ---------------------------------------------------------------- cards */
.card{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.card-pad{padding:22px;}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border-soft);}
.card-header h3{margin:0;font-size:15.5px;}
.card-header p{margin:2px 0 0;font-size:12.5px;color:var(--text-faint);}

.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:22px;}
.stat-card{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);padding:20px;
  box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
}
.stat-card::before{
  content:"";position:absolute;top:-40px;right:-40px;width:120px;height:120px;border-radius:50%;
  background:var(--grad-soft);opacity:.6;
}
.stat-card .stat-icon{
  width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;
  background:var(--grad-brand);color:#fff;box-shadow:0 8px 18px rgba(79,70,229,.25);position:relative;z-index:1;
}
.stat-value{font-size:26px;font-weight:700;position:relative;z-index:1;}
.stat-label{font-size:12.5px;color:var(--text-faint);font-weight:500;margin-top:2px;position:relative;z-index:1;}
.stat-trend{font-size:11.5px;font-weight:600;margin-top:10px;position:relative;z-index:1;}
.stat-trend.up{color:var(--green);}
.stat-trend.down{color:var(--red);}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:10px 18px;border-radius:12px;font-weight:600;font-size:13.5px;border:1px solid transparent;
  cursor:pointer;transition:.15s;white-space:nowrap;
}
.btn-primary{background:var(--grad-brand);color:#fff;box-shadow:0 8px 20px rgba(79,70,229,.28);}
.btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px);}
.btn-outline{background:var(--surface);border-color:var(--border);color:var(--text);}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);}
.btn-soft{background:var(--primary-soft);color:var(--primary);}
.btn-soft:hover{filter:brightness(0.97);}
.btn-danger{background:var(--red-bg);color:var(--red);}
.btn-sm{padding:7px 13px;font-size:12.5px;border-radius:9px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.55;cursor:not-allowed;}

/* ---------------------------------------------------------------- forms */
.form-group{margin-bottom:16px;}
label{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px;}
label .req{color:var(--red);}
.form-control{
  width:100%;padding:11px 14px;border-radius:11px;border:1.5px solid var(--border);
  background:var(--surface-2);font-size:14px;color:var(--text);outline:none;transition:.15s;font-family:inherit;
}
.form-control:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px var(--primary-soft);}
textarea.form-control{resize:vertical;min-height:90px;}
select.form-control{appearance:none;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='%235b6178' 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-hint{font-size:12px;color:var(--text-faint);margin-top:5px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.input-group{display:flex;}
.input-group .form-control{border-radius:11px 0 0 11px;}
.input-group .btn{border-radius:0 11px 11px 0;}

/* ---------------------------------------------------------------- table */
.table-wrap{overflow-x:auto;}
table.data-table{width:100%;border-collapse:collapse;}
.data-table th{
  text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);
  font-weight:700;padding:12px 16px;border-bottom:1px solid var(--border-soft);white-space:nowrap;
}
.data-table td{padding:14px 16px;border-bottom:1px solid var(--border-soft);font-size:13.5px;vertical-align:middle;}
.data-table tr:last-child td{border-bottom:none;}
.data-table tbody tr{transition:.12s;}
.data-table tbody tr:hover{background:var(--bg-soft);}

/* ---------------------------------------------------------------- badges */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:20px;font-size:11.5px;font-weight:700;}
.badge-blue{background:var(--blue-bg);color:var(--blue);}
.badge-cyan{background:var(--cyan-bg);color:var(--cyan-c);}
.badge-amber{background:var(--amber-bg);color:var(--amber);}
.badge-violet{background:var(--violet-bg);color:var(--violet);}
.badge-green{background:var(--green-bg);color:var(--green);}
.badge-gray{background:var(--gray-bg);color:var(--gray);}
.badge-red{background:var(--red-bg);color:var(--red);}
.badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor;}

/* ---------------------------------------------------------------- misc */
.pill-tabs{display:flex;gap:6px;background:var(--bg-soft);padding:5px;border-radius:12px;width:fit-content;}
.pill-tab{padding:8px 16px;border-radius:9px;font-size:13px;font-weight:600;color:var(--text-soft);cursor:pointer;}
.pill-tab.active{background:var(--surface);color:var(--primary);box-shadow:var(--shadow-sm);}

.alert{padding:13px 16px;border-radius:12px;font-size:13.5px;font-weight:500;margin-bottom:16px;display:flex;gap:10px;align-items:flex-start;overflow-wrap:anywhere;}
.alert-success{background:var(--green-bg);color:var(--green);}
.alert-error{background:var(--red-bg);color:var(--red);}
.alert-info{background:var(--blue-bg);color:var(--blue);}
.alert-warning{background:var(--amber-bg);color:var(--amber);}
.result-row:hover{background:var(--bg-soft,#f5f6f8);}

code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;background:var(--bg-soft);padding:1px 5px;border-radius:5px;overflow-wrap:anywhere;}

.empty-state{text-align:center;padding:60px 20px;color:var(--text-faint);}
.empty-state .icon-wrap{width:64px;height:64px;border-radius:18px;background:var(--grad-soft);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--primary);}

.modal-backdrop{position:fixed;inset:0;background:rgba(20,22,50,.45);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:100;padding:20px;}
.modal-backdrop.open{display:flex;}
.modal{background:#fff;border-radius:var(--radius-lg);max-width:520px;width:100%;box-shadow:var(--shadow-lg);max-height:90vh;overflow-y:auto;}
.modal-header{padding:20px 24px;border-bottom:1px solid var(--border-soft);display:flex;justify-content:space-between;align-items:center;}
.modal-body{padding:22px 24px;}
.modal-footer{padding:16px 24px;border-top:1px solid var(--border-soft);display:flex;justify-content:flex-end;gap:10px;}

.timeline{position:relative;padding-left:28px;}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--border);}
.timeline-item{position:relative;padding-bottom:22px;}
.timeline-item::before{content:"";position:absolute;left:-28px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--grad-brand);border:3px solid #fff;box-shadow:0 0 0 1px var(--border);}
.timeline-item .t-meta{font-size:11.5px;color:var(--text-faint);margin-bottom:2px;}
.timeline-item .t-body{font-size:13.5px;color:var(--text);}

.avatar-sm{width:30px;height:30px;border-radius:9px;background:var(--grad-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;font-family:'Sora',sans-serif;flex-shrink:0;}

/* ---------------------------------------------------------------- responsive multi-column layouts
   Shared by every "detail page with a fixed-width sidebar card" (leads/view,
   enrollment/view, agreement-templates/edit, enrollment/agreement-edit,
   analytics/member) and a couple of near-even two-column settings pages
   (dashboard, integrations/meta-settings, menu/settings). Named/classed
   instead of the inline grid-template-columns each page used to carry,
   specifically so the max-width:900px rule below can collapse every one of
   them to a single column on a phone - a 340px fixed column plus even a
   narrow 1fr column cannot both fit in a ~375px phone viewport, which is
   what was pushing these pages into horizontal overflow on mobile. */
.layout-detail{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start;}
.layout-split{display:grid;grid-template-columns:2fr 1fr;gap:20px;align-items:start;}
.layout-split-narrow{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:start;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
/* Grid items default to min-width:auto, which floors their size at their
   content's intrinsic width - a wide .data-table inside a card in one of
   these columns would otherwise force the whole column (and the page)
   wider than the viewport instead of letting .table-wrap's overflow-x:auto
   do its job. This was a real, reproducing horizontal-scroll bug on
   dashboard/index.php at phone widths, caught by measuring the rendered
   page rather than just reading the CSS. */
.layout-detail > *,.layout-split > *,.layout-split-narrow > *{min-width:0;}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1080px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .form-row{grid-template-columns:1fr;}
}
@media (max-width: 900px){
  .layout-detail,.layout-split,.layout-split-narrow{grid-template-columns:1fr;}
}
@media (max-width: 860px){
  #sidebarToggle{display:flex;}
  /* top+bottom instead of a height value: this stretches to the real
     visible viewport on its own, so it can't fall prey to the same
     100vh-vs-100dvh mismatch explained above, belt-and-suspenders on top
     of the dvh fix for browsers that get either one wrong. */
  .sidebar{position:fixed;top:0;bottom:0;left:-280px;height:auto;z-index:200;transition:.2s;box-shadow:var(--shadow-lg);}
  .sidebar.open{left:0;}
  .content{padding:18px 16px 50px;}
  .topbar{padding:12px 16px;gap:10px;}
  .stat-grid{grid-template-columns:1fr;}
  .card-pad{padding:16px;}
  .card-header{padding:14px 16px;flex-wrap:wrap;gap:10px;}
  .modal-header{padding:16px 18px;}
  .modal-body{padding:18px;}
  .modal-footer{padding:14px 18px;}
  .data-table th,.data-table td{padding:10px 12px;}
  /* A pill-tabs row with several tabs (e.g. Filing's Memo/Our Documents/...)
     would otherwise force the whole page wider than the viewport - scroll
     the tab strip itself instead, same fix as .table-wrap uses for wide
     tables. */
  .pill-tabs{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .pill-tab{white-space:nowrap;flex-shrink:0;}
}
@media (max-width: 640px){
  .grid-3{grid-template-columns:1fr 1fr;}
}
@media (max-width: 480px){
  /* The name+role block next to the avatar is the first thing to go when
     there isn't room - the avatar (with its title tooltip), the page
     title, the global search icon, and the notification bell are what
     actually matter at this width (search is meant to be reachable from
     every page, every size, and the bell is how the team notices a new
     WhatsApp message/lead/signed agreement/etc. from a phone). */
  .topbar-actions > div:not(.avatar):not(#globalSearchBtn):not(#notifBellWrap){display:none;}
  .topbar .page-title{max-width:52vw;}
  .grid-3{grid-template-columns:1fr;}
  .stat-value{font-size:21px;}
}