/* =====================================================================
   Grows Portal — Trustworthy Corporate design system
   Brand: navy #002D4B + gold accent. Layered on top of Bootstrap 5.3.x.
   ===================================================================== */

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

:root {
  /* ── Brand ─────────────────────────────────────── */
  --g-navy:        #002D4B;
  --g-navy-rgb:    0,45,75;
  --g-navy-2:      #003E66;
  --g-navy-3:      #00598F;
  --g-navy-soft:   #E6EDF3;

  --g-gold:        #C99746;
  --g-gold-2:      #B5852E;
  --g-gold-soft:   #FBF1DD;

  /* ── Status palette ────────────────────────────── */
  --g-success:     #2A9D8F;
  --g-success-soft:#DEEFEC;
  --g-warning:     #E89F2F;
  --g-warning-soft:#FBEBD0;
  --g-danger:      #C84B41;
  --g-danger-soft: #F8DEDB;
  --g-info:        #3D7BB1;
  --g-info-soft:   #DCE8F4;

  /* ── Surfaces / Ink ────────────────────────────── */
  --g-bg:          #F5F7FA;
  --g-bg-2:        #ECF0F5;
  --g-surface:     #FFFFFF;
  --g-surface-2:   #FAFBFD;
  --g-border:      #E1E6ED;
  --g-border-2:    #CDD4DE;

  --g-ink:         #1A2330;
  --g-ink-2:       #4A5568;
  --g-ink-3:       #7A8699;
  --g-ink-4:       #B5BDCC;

  /* ── Effects ───────────────────────────────────── */
  --g-shadow-xs:   0 1px 1px rgba(15,23,42,.04);
  --g-shadow-sm:   0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --g-shadow:      0 4px 12px rgba(15,23,42,.07);
  --g-shadow-lg:   0 16px 40px rgba(15,23,42,.12);

  --g-radius:      10px;
  --g-radius-lg:   14px;
  --g-radius-xl:   18px;

  /* ── Bootstrap overrides ───────────────────────── */
  --bs-body-font-family: 'Inter','Segoe UI','Helvetica Neue',Arial,sans-serif;
  --bs-body-color:    var(--g-ink);
  --bs-body-bg:       var(--g-bg);
  --bs-primary:       var(--g-navy);
  --bs-primary-rgb:   var(--g-navy-rgb);
  --bs-secondary-color: var(--g-ink-2);
  --bs-tertiary-color:  var(--g-ink-3);
  --bs-border-color:  var(--g-border);
  --bs-link-color:    var(--g-navy);
  --bs-link-hover-color: var(--g-navy-2);
  --bs-success: var(--g-success);
  --bs-warning: var(--g-warning);
  --bs-danger:  var(--g-danger);
  --bs-info:    var(--g-info);
}

/* ── Base ─────────────────────────────────────────── */
html, body {
  background: var(--g-bg); color: var(--g-ink);
  font-family: var(--bs-body-font-family); font-size: 14.5px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01","cv11";
}
h1,h2,h3,h4,h5,h6 { color: var(--g-ink); font-weight: 700; letter-spacing: -.012em; }
.display-serif { font-family: 'Fraunces', serif; font-weight: 700; letter-spacing: -.02em; }
.text-muted, small.text-muted { color: var(--g-ink-3) !important; }
a { color: var(--g-navy); text-decoration: none; }
a:hover { color: var(--g-navy-2); }
.text-secondary { color: var(--g-ink-2) !important; }
.link-quiet { color: var(--g-ink-3); text-decoration: none; }
.link-quiet:hover { color: var(--g-navy); }
::selection { background: var(--g-gold-soft); color: var(--g-ink); }

/* ── Buttons ──────────────────────────────────────── */
.btn { border-radius: 9px; font-weight: 600; padding: .58rem 1.1rem; transition: all .14s ease; letter-spacing: -.005em; }
.btn-lg { padding: .82rem 1.45rem; border-radius: 11px; }
.btn-sm { padding: .35rem .75rem; border-radius: 7px; font-size: .85rem; }
.btn-primary { background: var(--g-navy); border-color: var(--g-navy); color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 6px 14px rgba(var(--g-navy-rgb),.18); }
.btn-primary:hover, .btn-primary:focus { background: var(--g-navy-2); border-color: var(--g-navy-2); color: #fff;
  transform: translateY(-1px); box-shadow: 0 8px 18px rgba(var(--g-navy-rgb),.22); }
.btn-primary:active { transform: translateY(0); }
.btn-gold { background: var(--g-gold); border-color: var(--g-gold); color: #fff;
  box-shadow: 0 6px 14px rgba(201,151,70,.22); }
.btn-gold:hover { background: var(--g-gold-2); border-color: var(--g-gold-2); color: #fff; transform: translateY(-1px); }
.btn-light, .btn-outline-secondary { background: var(--g-surface); border: 1px solid var(--g-border); color: var(--g-ink-2); }
.btn-light:hover, .btn-outline-secondary:hover { background: var(--g-surface-2); border-color: var(--g-border-2); color: var(--g-ink); }
.btn-outline-primary { color: var(--g-navy); border: 1px solid var(--g-navy); background: transparent; }
.btn-outline-primary:hover { background: var(--g-navy); color: #fff; }
.btn-soft { background: var(--g-navy-soft); color: var(--g-navy); border: 1px solid transparent; }
.btn-soft:hover { background: var(--g-navy); color: #fff; }
.btn-completed { background: var(--g-success-soft); color: #1d6f65; border: 1px solid rgba(42,157,143,.35); }
.btn-completed:hover { background: var(--g-success); color: #fff; border-color: var(--g-success); }
.btn-ghost { background: transparent; color: var(--g-ink-2); border: 1px solid transparent; }
.btn-ghost:hover { background: var(--g-bg-2); color: var(--g-ink); }
.btn-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 9px; }

/* ── Forms ────────────────────────────────────────── */
.form-label { font-size: .82rem; font-weight: 600; color: var(--g-ink-2); margin-bottom: .35rem; }
.form-control, .form-select { border-radius: 9px; border: 1px solid var(--g-border); background-color: var(--g-surface);
  padding: .65rem .85rem; font-size: .94rem; color: var(--g-ink); transition: border-color .12s, box-shadow .12s; line-height: 1.4; }
.form-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231A2330' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 12px 10px; padding-right: 2.4rem;
}

/* ── Compact (sm) — pixel-locked alignment across select / input-group ── */
.form-control-sm, .form-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text {
  height: 34px; box-sizing: border-box;
  padding: 0 .7rem; font-size: .85rem; line-height: 1.4;
  border-radius: 8px;
}
.form-select-sm { padding-right: 2rem; background-position: right .65rem center; background-size: 11px 9px; }

/* Joined corners for input-group-sm so prefix + input read as one pill */
.input-group-sm > .input-group-text {
  border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0;
  padding-right: .4rem; padding-left: .7rem; background: var(--g-surface);
}
.input-group-sm > .form-control { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: .25rem; }
.input-group-sm > .input-group-text i { font-size: .9rem; color: var(--g-ink-3); }
.input-group-sm:focus-within > .input-group-text,
.input-group-sm:focus-within > .form-control { border-color: var(--g-navy); }
.input-group-sm:focus-within > .form-control { box-shadow: 0 0 0 4px rgba(var(--g-navy-rgb),.10); }
.form-control:focus, .form-select:focus { border-color: var(--g-navy); box-shadow: 0 0 0 4px rgba(var(--g-navy-rgb),.10); }
.form-control.is-valid { border-color: var(--g-success); background-image: none; padding-right: .85rem; }
.form-control.is-invalid { border-color: var(--g-danger); background-image: none; padding-right: .85rem; }
.form-control.is-invalid:focus { box-shadow: 0 0 0 4px rgba(200,75,65,.12); }
.invalid-feedback { font-size: .8rem; color: var(--g-danger); }
.form-check-input:checked { background-color: var(--g-navy); border-color: var(--g-navy); }
.form-text { color: var(--g-ink-3); font-size: .82rem; }
.input-group-text { background: var(--g-surface-2); border-color: var(--g-border); color: var(--g-ink-3); }

/* ── Cards ────────────────────────────────────────── */
.card { background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-radius-lg);
  box-shadow: var(--g-shadow-xs); transition: box-shadow .18s; }
.card:hover { box-shadow: var(--g-shadow-sm); }
.card-header { background: var(--g-surface); border-bottom: 1px solid var(--g-border); padding: 1rem 1.4rem; font-weight: 600; }
.card-body { padding: 1.4rem; }
.card-footer { background: var(--g-surface); border-top: 1px solid var(--g-border); padding: 1rem 1.4rem; }

/* ── Page header ──────────────────────────────────── */
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.page-header h1 { font-size: 1.55rem; margin: 0; }
.breadcrumb { font-size: .82rem; margin-bottom: .4rem; }
.breadcrumb a { color: var(--g-ink-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--g-navy); }
.breadcrumb-item.active { color: var(--g-ink-2); font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--g-ink-4); content: '/'; }

/* ── Service tile (dashboard quick-jump) — same shape as .kpi ──── */
.g-svc-tile {
  display: block; text-decoration: none; height: 100%;
  background: var(--g-surface); border: 1px solid var(--g-border);
  border-radius: var(--g-radius-lg);
  padding: 1.35rem 1.45rem; position: relative; overflow: hidden;
  box-shadow: var(--g-shadow-xs);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.g-svc-tile::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--g-navy);
  border-top-left-radius: var(--g-radius-lg); border-bottom-left-radius: var(--g-radius-lg);
}
.g-svc-tile:hover {
  transform: translateY(-2px); box-shadow: var(--g-shadow-sm);
  border-color: var(--g-navy); color: var(--g-ink);
}
.g-svc-tile-name  { font-size: .76rem; font-weight: 600; color: var(--g-ink-3);
  text-transform: uppercase; letter-spacing: .07em; }
.g-svc-tile-count { font-size: 2rem; font-weight: 800; color: var(--g-ink); line-height: 1.1; margin-top: .35rem; }
.g-svc-tile-sub   { font-size: .82rem; font-weight: 600; margin-top: .35rem;
  display: inline-flex; align-items: center; gap: .3rem; color: var(--g-success); }
.g-svc-tile-ico {
  position: absolute; top: 1.1rem; right: 1.1rem;
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; color: var(--g-navy); background: var(--g-navy-soft);
}

/* ── KPI cards ────────────────────────────────────── */
.kpi { background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-radius-lg);
  padding: 1.35rem 1.45rem; position: relative; overflow: hidden; }
.kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--g-navy);
  border-top-left-radius: var(--g-radius-lg); border-bottom-left-radius: var(--g-radius-lg); }
.kpi.kpi-gold::before { background: var(--g-gold); }
.kpi.kpi-success::before { background: var(--g-success); }
.kpi.kpi-warning::before { background: var(--g-warning); }
.kpi.kpi-danger::before { background: var(--g-danger); }
.kpi.kpi-info::before { background: var(--g-info); }
.kpi-label { font-size: .76rem; font-weight: 600; color: var(--g-ink-3); text-transform: uppercase; letter-spacing: .07em; }
.kpi-value { font-size: 2rem; font-weight: 800; color: var(--g-ink); line-height: 1.1; margin-top: .35rem; }
.kpi-delta { font-size: .82rem; font-weight: 600; margin-top: .35rem; display: inline-flex; align-items: center; gap: .3rem; }
.kpi-delta.up { color: var(--g-success); }
.kpi-delta.down { color: var(--g-danger); }
.kpi-delta.flat { color: var(--g-ink-3); }
.kpi-icon { position: absolute; top: 1.1rem; right: 1.1rem; width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
  color: var(--g-navy); background: var(--g-navy-soft); }
.kpi.kpi-gold .kpi-icon { color: var(--g-gold-2); background: var(--g-gold-soft); }
.kpi.kpi-success .kpi-icon { color: var(--g-success); background: var(--g-success-soft); }
.kpi.kpi-warning .kpi-icon { color: var(--g-warning); background: var(--g-warning-soft); }
.kpi.kpi-danger .kpi-icon { color: var(--g-danger); background: var(--g-danger-soft); }
.kpi.kpi-info .kpi-icon { color: var(--g-info); background: var(--g-info-soft); }

/* ── Pills / chips ────────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem;
  border-radius: 999px; font-size: .76rem; font-weight: 600; line-height: 1; }
.pill-primary { background: var(--g-navy-soft); color: var(--g-navy); }
.pill-gold { background: var(--g-gold-soft); color: var(--g-gold-2); }
.pill-success { background: var(--g-success-soft); color: #1d6f65; }
.pill-warning { background: var(--g-warning-soft); color: #94661c; }
.pill-danger { background: var(--g-danger-soft); color: #8d342c; }
.pill-info { background: var(--g-info-soft); color: #2a5d89; }
.pill-muted { background: var(--g-bg-2); color: var(--g-ink-3); }
.pill-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem;
  border: 1px solid var(--g-border); background: var(--g-surface); border-radius: 999px;
  font-size: .82rem; color: var(--g-ink-2); cursor: pointer; transition: .15s; }
.chip:hover { border-color: var(--g-border-2); }
.chip.active { background: var(--g-navy); color: #fff; border-color: var(--g-navy); }

/* ── Alerts ───────────────────────────────────────── */
.alert { border: 1px solid transparent; border-radius: 10px; padding: .85rem 1rem; }
.alert-danger { background: var(--g-danger-soft); color: #8d342c; border-color: rgba(200,75,65,.25); }
.alert-success { background: var(--g-success-soft); color: #1d6f65; border-color: rgba(42,157,143,.25); }
.alert-info { background: var(--g-info-soft); color: #2a5d89; border-color: rgba(61,123,177,.25); }
.alert-warning { background: var(--g-warning-soft); color: #94661c; border-color: rgba(232,159,47,.30); }

/* ── Tables ───────────────────────────────────────── */
.table { color: var(--g-ink); margin-bottom: 0; }
.table > :not(caption) > * > * { padding: 1rem 1.1rem; border-color: var(--g-border); }
.table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--g-ink-3); border-bottom: 1px solid var(--g-border); font-weight: 700; background: var(--g-surface-2); }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: var(--g-surface-2); }
.table-card { border: 1px solid var(--g-border); border-radius: var(--g-radius-lg); overflow: hidden; background: var(--g-surface); }

/* ── App shell (sidebar + topbar) ─────────────────── */
.g-shell { display: grid; grid-template-columns: 256px 1fr; min-height: 100vh; }
.g-shell-main { display: flex; flex-direction: column; min-width: 0; background: var(--g-bg); }
.g-shell-content { padding: 1.6rem 2rem 2.5rem; flex: 1; }

.g-sidebar { background: var(--g-navy); color: #cbd6e2; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.g-sidebar .g-brand-row {
  padding: 1rem 1.4rem;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border-bottom: 1px solid var(--g-border);
  min-height: 67px;
}
.g-sidebar .g-brand-full { display: block; max-width: 100%; line-height: 0; }
.g-sidebar .g-brand-full img { display: block; width: 100%; max-width: 180px; height: auto; }
.g-sidebar .g-brand-mini   { display: none; line-height: 0; }
.g-sidebar .g-brand-mini img { width: 32px; height: 32px; }
.g-sidebar .g-brand-tag { color: #8a99ad; font-size: .65rem; text-transform: uppercase; letter-spacing: .16em; }

/* ── Collapsed (icon-only) sidebar ─────────────────────────── */
.g-shell.is-collapsed { grid-template-columns: 76px 1fr; }
.g-shell.is-collapsed .g-sidebar .g-brand-full     { display: none; }
.g-shell.is-collapsed .g-sidebar .g-brand-mini     { display: block; }
.g-shell.is-collapsed .g-sidebar .g-brand-tag      { display: none; }
.g-shell.is-collapsed .g-sidebar nav .g-nav-section,
.g-shell.is-collapsed .g-sidebar .g-side-foot       { display: none; }
.g-shell.is-collapsed .g-sidebar nav a,
.g-shell.is-collapsed .g-sidebar nav .g-nav-toggle {
  justify-content: center; gap: 0; padding: .65rem .55rem; font-size: 0;
  position: relative;
}
.g-shell.is-collapsed .g-sidebar nav a i,
.g-shell.is-collapsed .g-sidebar nav .g-nav-toggle i { font-size: 1.15rem; width: auto; }
.g-shell.is-collapsed .g-sidebar nav a .badge,
.g-shell.is-collapsed .g-sidebar nav .g-nav-toggle .g-nav-caret { display: none; }
.g-shell.is-collapsed .g-sidebar .g-subnav { display: none !important; }
/* Tooltip-style hover label on collapsed nav items */
.g-shell.is-collapsed .g-sidebar nav a::after,
.g-shell.is-collapsed .g-sidebar nav .g-nav-toggle::after {
  content: attr(data-label);
  position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  background: var(--g-ink); color: #fff; padding: .35rem .65rem; border-radius: 6px;
  font-size: .8rem; font-weight: 500; white-space: nowrap; letter-spacing: 0;
  opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 100;
  box-shadow: var(--g-shadow);
}
.g-shell.is-collapsed .g-sidebar nav a:hover::after,
.g-shell.is-collapsed .g-sidebar nav .g-nav-toggle:hover::after { opacity: 1; }

/* Hamburger toggle button */
.g-side-toggle { flex-shrink: 0; }

/* Legacy fallbacks kept for the small square logo style elsewhere */
.g-sidebar .g-brand-logo { width: 38px; height: 38px; border-radius: 9px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 4px; flex-shrink: 0; }
.g-sidebar .g-brand-logo img { width: 100%; height: auto; }
.g-sidebar .g-brand-name { color: #fff; font-weight: 700; font-size: 1.02rem; line-height: 1.1; letter-spacing: -.01em; }
.g-sidebar nav { flex: 1; padding: 1rem .8rem 1.5rem; overflow-y: auto; }
.g-sidebar nav .g-nav-section { font-size: .66rem; text-transform: uppercase; letter-spacing: .15em; color: #5b6b81; padding: 1rem .8rem .35rem; font-weight: 700; }
.g-sidebar nav a { display: flex; align-items: center; gap: .75rem; padding: .62rem .9rem; margin: 1px 0;
  color: #abb7c8; text-decoration: none; border-radius: 8px; font-size: .9rem; font-weight: 500;
  transition: background .12s, color .12s; position: relative; }
.g-sidebar nav a i { font-size: 1.05rem; width: 1.1rem; text-align: center; flex-shrink: 0; }
.g-sidebar nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.g-sidebar nav a.active { background: rgba(255,255,255,.08); color: #fff; font-weight: 600; }
.g-sidebar nav a.active::before { content: ''; position: absolute; left: -.8rem; top: .3rem; bottom: .3rem; width: 3px; background: var(--g-gold); border-radius: 0 3px 3px 0; }
.g-sidebar nav a .badge { margin-left: auto; background: var(--g-gold); color: var(--g-navy); font-size: .7rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; }
.g-side-foot { padding: 1rem 1.4rem; border-top: 1px solid rgba(255,255,255,.07); font-size: .78rem; color: #7d8a9e; }
.g-side-foot strong { color: #fff; font-weight: 600; }

/* Sidebar collapsible parent (e.g. Clients ▸ View all / Add client) */
.g-sidebar nav .g-nav-toggle {
  display: flex; align-items: center; gap: .75rem;
  width: 100%; padding: .62rem .9rem; margin: 1px 0;
  background: transparent; border: 0; color: #abb7c8; border-radius: 8px;
  font-size: .9rem; font-weight: 500; line-height: 1.3;
  text-align: left; transition: background .12s, color .12s; cursor: pointer;
}
.g-sidebar nav .g-nav-toggle:hover { background: rgba(255,255,255,.05); color: #fff; }
.g-sidebar nav .g-nav-toggle.active { background: rgba(255,255,255,.08); color: #fff; font-weight: 600; }
.g-sidebar nav .g-nav-toggle i.bi-people-fill,
.g-sidebar nav .g-nav-toggle > i:first-child { font-size: 1.05rem; width: 1.1rem; text-align: center; flex-shrink: 0; }
.g-nav-caret { font-size: .72rem; transition: transform .18s; }
.g-sidebar nav .g-nav-toggle[aria-expanded="true"] .g-nav-caret { transform: rotate(180deg); }

.g-subnav { padding: .15rem 0 .3rem 1.6rem; margin-bottom: 2px; }
.g-subnav a {
  display: block; padding: .42rem .75rem; margin: 1px 0;
  color: #92a0b8; text-decoration: none; border-radius: 7px;
  font-size: .86rem; font-weight: 500; line-height: 1.3;
  position: relative; transition: background .12s, color .12s;
}
.g-subnav a:hover  { color: #fff; background: rgba(255,255,255,.04); }
.g-subnav a.active { color: #fff; font-weight: 600; }
.g-subnav a.active::before {
  content:''; position:absolute; left:-.55rem; top:.55rem; bottom:.55rem; width:2px;
  background: var(--g-gold); border-radius: 0 2px 2px 0;
}

/* Topbar */
.g-topbar { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1.6rem;
  background: var(--g-surface); border-bottom: 1px solid var(--g-border); position: sticky; top: 0; z-index: 50; gap: 1rem; }
.g-search { display: flex; align-items: center; gap: .55rem; background: var(--g-surface-2); border: 1px solid var(--g-border);
  border-radius: 9px; padding: .45rem .85rem; min-width: 320px; max-width: 480px; flex: 1; color: var(--g-ink-3); transition: .12s; }
.g-search:focus-within { border-color: var(--g-navy); background: var(--g-surface); }
.g-search input { border: none; outline: none; background: transparent; flex: 1; color: var(--g-ink); font-size: .9rem; }
.g-search kbd { background: var(--g-surface); border: 1px solid var(--g-border); padding: .05rem .35rem; border-radius: 4px; color: var(--g-ink-3); font-size: .72rem; font-family: 'Inter'; }
.g-userchip { display: flex; align-items: center; gap: .65rem; padding: .25rem .8rem .25rem .3rem; border-radius: 999px; background: var(--g-surface-2); border: 1px solid var(--g-border); cursor: pointer; }
.g-userchip:hover { border-color: var(--g-border-2); }
.g-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--g-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; flex-shrink: 0; }
.g-iconbtn { width: 38px; height: 38px; border-radius: 9px; background: var(--g-surface-2); border: 1px solid var(--g-border); color: var(--g-ink-2);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; text-decoration: none; transition: .14s; position: relative; }
.g-iconbtn:hover { color: var(--g-navy); border-color: var(--g-navy); }
.g-iconbtn .g-iconbtn-dot { position: absolute; top: 6px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--g-gold); border: 2px solid var(--g-surface); }

/* ── Auth split ───────────────────────────────────── */
.g-auth { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--g-bg); }
.g-auth-brand { position: relative; overflow: hidden; background: var(--g-navy); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between; padding: 3rem 3.2rem; }
.g-auth-brand::before { content: ''; position: absolute; inset: 0;
  background: radial-gradient(720px 480px at 100% -10%, rgba(201,151,70,.18), transparent 60%),
              radial-gradient(560px 380px at -10% 110%, rgba(255,255,255,.06), transparent 60%); pointer-events: none; }
.g-auth-brand > * { position: relative; z-index: 1; }
.g-auth-brand .g-brand-row { display: flex; align-items: center; gap: .85rem; }
.g-auth-brand .g-brand-logo { width: 44px; height: 44px; border-radius: 10px; background: #fff; padding: 5px; display: flex; align-items: center; justify-content: center; }
.g-auth-brand .g-brand-logo img { width: 100%; }
.g-auth-brand .g-auth-logo { line-height: 0; }
.g-auth-brand .g-auth-logo img { display: block; max-width: 220px; height: auto; }
.g-auth-brand .display-serif { color: #fff; font-size: 2.4rem; line-height: 1.15; max-width: 480px; }
.g-auth-brand p { color: rgba(255,255,255,.78); max-width: 480px; line-height: 1.6; }
.g-feat { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.1rem; max-width: 480px; }
.g-feat li { display: flex; gap: .9rem; align-items: flex-start; }
.g-feat .g-feat-ico { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; color: var(--g-gold); flex-shrink: 0; }
.g-feat strong { color: #fff; font-weight: 600; display: block; margin-bottom: 1px; }
.g-feat small { color: rgba(255,255,255,.65); line-height: 1.5; }
.g-auth-foot { font-size: .82rem; color: rgba(255,255,255,.5); display: flex; gap: 1.2rem; }
.g-auth-foot a { color: rgba(255,255,255,.7); }
.g-auth-foot a:hover { color: #fff; }
.g-auth-form { display: flex; align-items: center; justify-content: center; padding: 3rem 2rem; }
.g-auth-form .card { width: 100%; max-width: 460px; box-shadow: var(--g-shadow); border-radius: var(--g-radius-xl); }
.g-auth-form .card-body { padding: 2.2rem 2.4rem; }
.g-auth-form h1 { font-size: 1.65rem; margin-bottom: .25rem; }
.g-auth-form .g-sub { color: var(--g-ink-3); margin-bottom: 1.6rem; font-size: .94rem; }

@media (max-width: 960px) {
  .g-auth { grid-template-columns: 1fr; }
  .g-auth-brand { display: none; }
  .g-shell { grid-template-columns: 1fr; }
  .g-sidebar { display: none; }
  .g-search { min-width: 0; }
}

/* ── Activity timeline ────────────────────────────── */
.g-timeline { list-style: none; padding: 0; margin: 0; }
.g-timeline li { display: flex; gap: 1rem; padding: 1rem 1.4rem; border-bottom: 1px solid var(--g-border); }
.g-timeline li:last-child { border-bottom: 0; }
.g-tl-dot { width: 36px; height: 36px; border-radius: 10px; background: var(--g-navy-soft); color: var(--g-navy);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; }
.g-tl-meta { font-size: .78rem; color: var(--g-ink-3); }
.g-tl-title { font-weight: 600; color: var(--g-ink); }

/* ── Kanban (Workboard) ───────────────────────────── */
.kb { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .8rem; }
.kb-lane { flex: 0 0 320px; background: var(--g-bg-2); border: 1px solid var(--g-border); border-radius: var(--g-radius-lg);
  display: flex; flex-direction: column; max-height: calc(100vh - 240px); }
.kb-lane-head { padding: .9rem 1rem; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--g-border); background: var(--g-surface); border-radius: var(--g-radius-lg) var(--g-radius-lg) 0 0; }
.kb-lane-title { font-weight: 700; font-size: .92rem; display: flex; align-items: center; gap: .5rem; }
.kb-lane-title .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--g-navy); }
.kb-lane-count { font-size: .78rem; font-weight: 600; color: var(--g-ink-3); padding: .15rem .55rem; background: var(--g-bg-2); border-radius: 999px; }
.kb-lane-body { padding: .8rem; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .65rem; }
.kb-card { background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-radius);
  padding: .85rem 1rem; cursor: pointer; transition: .15s; text-decoration: none; color: var(--g-ink); display: block; }
.kb-card:hover { border-color: var(--g-border-2); box-shadow: var(--g-shadow-xs); transform: translateY(-1px); color: var(--g-ink); }
.kb-card-title { font-weight: 600; color: var(--g-ink); font-size: .9rem; margin-bottom: .35rem; line-height: 1.3; }
.kb-card-meta { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; font-size: .78rem; color: var(--g-ink-3); }
.kb-card-meta .pill { font-size: .72rem; padding: .15rem .5rem; }

/* ── Empty / footer / misc ───────────────────────── */
.empty { text-align: center; padding: 2.5rem 1rem; color: var(--g-ink-3); }
.empty .empty-ico { font-size: 2.5rem; color: var(--g-ink-4); margin-bottom: .5rem; }
.g-footer { padding: 1rem 2rem; color: var(--g-ink-3); font-size: .82rem; border-top: 1px solid var(--g-border); background: var(--g-surface); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.divider { height: 1px; background: var(--g-border); margin: 1.4rem 0; border: 0; }
hr { border-color: var(--g-border); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--g-border-2); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--g-ink-4); }

.dropdown-menu { border: 1px solid var(--g-border); border-radius: 10px; box-shadow: var(--g-shadow); padding: .35rem; }
.dropdown-item { border-radius: 6px; padding: .5rem .75rem; font-size: .9rem; color: var(--g-ink-2); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--g-surface-2); color: var(--g-ink); }
.dropdown-divider { border-top: 1px solid var(--g-border); margin: .35rem 0; }