/* BriefDesk OMS Design System — v1.0 */
:root {
  --navy-900:#061626; --navy-850:#082034; --navy-800:#0b2840;
  --navy-700:#123351; --navy-600:#1d4569; --navy-400:#4f6f8d;
  --teal-700:#0a5b58; --teal-600:#0e6f6b; --teal-500:#14847e;
  --teal-100:#dff0ee; --teal-050:#f0f8f7;
  --gold-700:#94701f; --gold-600:#b08a2c; --gold-500:#c39a3e;
  --gold-300:#e4cf95; --gold-100:#f6efdb;
  --paper:#f7f7f4; --surface:#ffffff; --surface-2:#fbfbf9;
  --line:#e5e4df; --line-strong:#d3d2cb;
  --ink-900:#17201c; --ink-700:#3c443f; --ink-500:#6a726d;
  --red-600:#c53030; --red-100:#fff5f5;
  --green-600:#276749; --green-100:#f0fff4;
  --font-display:"Cormorant Garamond","Georgia",serif;
  --font-ui:"DM Sans",-apple-system,sans-serif;
  --sidebar-w:244px; --topbar-h:62px;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;
  --radius-sm:4px;--radius:8px;--radius-lg:12px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06);--shadow:0 2px 8px rgba(0,0,0,.08);--shadow-lg:0 8px 24px rgba(0,0,0,.12);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-ui);background:var(--paper);color:var(--ink-900);line-height:1.5}
a{color:var(--teal-600);text-decoration:none}
a:hover{color:var(--teal-500)}

/* ── App Shell ── */
.app-shell{display:flex;height:100vh;overflow:hidden}
.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}

/* ── Sidebar ── */
.sidebar{width:var(--sidebar-w);background:var(--navy-900);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;overflow-x:hidden}
.sidebar__brand{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-5) var(--sp-5);border-bottom:1px solid rgba(255,255,255,.08);min-height:var(--topbar-h)}
.sidebar__logo{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--teal-600);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1rem;font-weight:600;color:#fff;flex-shrink:0}
.sidebar__app{display:block;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-300)}
.sidebar__sub{display:block;font-size:.7rem;color:rgba(255,255,255,.4)}
.sidebar__nav{flex:1;padding:var(--sp-4) 0}
.sidebar__footer{padding:var(--sp-3) 0;border-top:1px solid rgba(255,255,255,.08)}
.navlink{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-5);color:rgba(255,255,255,.65);font-size:.85rem;font-weight:400;transition:all .15s;white-space:nowrap;border-left:2px solid transparent}
.navlink:hover{background:rgba(255,255,255,.06);color:#fff}
.navlink--active{background:rgba(14,111,107,.18);color:#fff;border-left-color:var(--teal-500);font-weight:500}
.navlink--danger{color:rgba(255,100,100,.7)}
.navlink--danger:hover{background:rgba(255,80,80,.1);color:#ff8080}
.navlink__icon{width:18px;height:18px;flex-shrink:0;opacity:.7}
.navlink--active .navlink__icon,.navlink:hover .navlink__icon{opacity:1}

/* ── Topbar ── */
.topbar{height:var(--topbar-h);background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:var(--sp-4);padding:0 var(--sp-6);flex-shrink:0;box-shadow:var(--shadow-sm)}
.topbar__toggle{display:none;background:none;border:none;cursor:pointer;padding:var(--sp-2);color:var(--ink-700)}
.topbar__title{font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:var(--ink-900);flex:1}
.topbar__right{display:flex;align-items:center;gap:var(--sp-3);margin-left:auto}
.topbar__user{display:flex;flex-direction:column;line-height:1.2}
.topbar__name{font-size:.82rem;font-weight:500;color:var(--ink-900)}
.topbar__role{font-size:.72rem;color:var(--ink-500)}

/* ── Page ── */
.page{flex:1;overflow-y:auto;padding:var(--sp-6);background:var(--paper)}
.pagehead{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-6)}
.pagehead__main{flex:1}
.pagehead__title{font-family:var(--font-display);font-size:1.8rem;font-weight:500;color:var(--ink-900)}
.pagehead__sub{font-size:.82rem;color:var(--ink-500);margin-top:2px}

/* ── Card ── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.card__head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--line)}
.card__title{font-family:var(--font-display);font-size:1.1rem;font-weight:600}
.card__toolbar{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-6);border-bottom:1px solid var(--line);flex-wrap:wrap}
.card--danger{border-color:var(--red-600);padding:var(--sp-6)}
.card--danger p{margin-bottom:var(--sp-4)}

/* ── Stats Grid ── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-4)}
.stat-card{display:flex;align-items:center;gap:var(--sp-5);padding:var(--sp-6)}
.stat-card__icon{width:48px;height:48px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stat-card__icon svg{width:24px;height:24px}
.stat-card__icon--teal{background:var(--teal-100);color:var(--teal-600)}
.stat-card__icon--navy{background:rgba(6,22,38,.08);color:var(--navy-700)}
.stat-card__icon--gold{background:var(--gold-100);color:var(--gold-600)}
.stat-card__value{font-family:var(--font-display);font-size:2rem;font-weight:500;line-height:1}
.stat-card__label{font-size:.8rem;color:var(--ink-500);margin-top:2px}

/* ── Table ── */
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:.85rem}
.table th{text-align:left;font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-500);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line);white-space:nowrap}
.table td{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line);color:var(--ink-700)}
.table tr:last-child td{border-bottom:none}
.table tr:hover td{background:var(--surface-2)}
.table__actions{white-space:nowrap;text-align:right}
.table__empty{text-align:center;color:var(--ink-500);padding:var(--sp-10) var(--sp-4) !important}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);border-radius:var(--radius-sm);font-family:var(--font-ui);font-size:.85rem;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all .15s;white-space:nowrap;text-decoration:none}
.btn--primary{background:var(--teal-600);color:#fff;border-color:var(--teal-600)}
.btn--primary:hover{background:var(--teal-500);color:#fff}
.btn--ghost{background:transparent;color:var(--ink-700);border-color:var(--line)}
.btn--ghost:hover{background:var(--surface-2);color:var(--ink-900)}
.btn--danger{background:var(--red-600);color:#fff;border-color:var(--red-600)}
.btn--danger:hover{background:#b91c1c;color:#fff}
.btn--full{width:100%;justify-content:center}
.btn--sm{padding:var(--sp-1) var(--sp-3);font-size:.8rem}
.btn--xs{padding:2px 8px;font-size:.75rem}

/* ── Forms ── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);padding:var(--sp-6)}
.form-group{display:flex;flex-direction:column;gap:var(--sp-2)}
.form-group--full{grid-column:1/-1}
.form-group--actions{grid-column:1/-1;display:flex;gap:var(--sp-3);padding-top:var(--sp-4);border-top:1px solid var(--line)}
.form-label{font-size:.8rem;font-weight:600;color:var(--ink-700);letter-spacing:.02em}
.form-input{padding:var(--sp-2) var(--sp-3);border:1px solid var(--line-strong);border-radius:var(--radius-sm);font-family:var(--font-ui);font-size:.88rem;color:var(--ink-900);background:var(--surface);transition:border-color .15s;width:100%}
.form-input:focus{outline:none;border-color:var(--teal-500);box-shadow:0 0 0 3px rgba(14,111,107,.12)}
.form-input--sm{padding:5px 10px;font-size:.8rem}
.form-select{padding:var(--sp-2) var(--sp-3);border:1px solid var(--line-strong);border-radius:var(--radius-sm);font-family:var(--font-ui);font-size:.88rem;color:var(--ink-900);background:var(--surface);width:100%;cursor:pointer}
.form-select:focus{outline:none;border-color:var(--teal-500)}
.form-select--sm{padding:5px 10px;font-size:.8rem}
.input-wrapper{position:relative}
.input-toggle{position:absolute;right:var(--sp-3);top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--ink-500);padding:var(--sp-1)}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:99px;font-size:.72rem;font-weight:600;letter-spacing:.03em}
.badge--teal{background:var(--teal-100);color:var(--teal-700)}
.badge--gold{background:var(--gold-100);color:var(--gold-700)}
.badge--neutral{background:var(--surface-2);color:var(--ink-500);border:1px solid var(--line)}
.badge--success{background:var(--green-100);color:var(--green-600)}

/* ── Avatar ── */
.avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0}
.avatar--sm{width:28px;height:28px;font-size:.68rem}
.avatar--teal{background:var(--teal-100);color:var(--teal-700)}

/* ── User cell ── */
.user-cell{display:flex;align-items:center;gap:var(--sp-3)}
.user-cell__name{font-weight:500;color:var(--ink-900)}
.user-cell__sub{font-size:.75rem;color:var(--ink-500)}

/* ── Alert / Toast ── */
.alert{padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-sm);margin-bottom:var(--sp-4);font-size:.85rem}
.alert--error{background:var(--red-100);color:var(--red-600);border:1px solid #fed7d7}
.alert--warning{background:var(--gold-100);color:var(--gold-700);border:1px solid var(--gold-300)}
.toast{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-sm);margin-bottom:var(--sp-4);font-size:.85rem;background:var(--green-100);color:var(--green-600);border:1px solid #9ae6b4}
.toast--error{background:var(--red-100);color:var(--red-600);border-color:#fed7d7}
.toast--show{display:flex}
.toast__icon{font-weight:700}

/* ── Pagination ── */
.pagination{display:flex;gap:var(--sp-1);padding:var(--sp-4) var(--sp-6);border-top:1px solid var(--line)}
.pagination__page{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-sm);font-size:.8rem;color:var(--ink-700);border:1px solid var(--line)}
.pagination__page--active{background:var(--teal-600);color:#fff;border-color:var(--teal-600)}

/* ── Auth Pages ── */
.auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--navy-900)}
.auth-container{width:100%;max-width:400px;padding:var(--sp-4)}
.auth-card{background:var(--surface);border-radius:var(--radius-lg);padding:var(--sp-8);box-shadow:var(--shadow-lg)}
.auth-brand{text-align:center;margin-bottom:var(--sp-8)}
.auth-logo{width:56px;height:56px;border-radius:var(--radius);background:var(--teal-600);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.4rem;font-weight:600;color:#fff;margin:0 auto var(--sp-4)}
.auth-title{font-family:var(--font-display);font-size:1.6rem;font-weight:600;color:var(--ink-900)}
.auth-sub{font-size:.82rem;color:var(--ink-500);margin-top:4px}
.auth-form{display:flex;flex-direction:column;gap:var(--sp-4)}
.auth-help{text-align:center;font-size:.75rem;color:var(--ink-500);margin-top:var(--sp-5)}

/* ── Sections ── */
.section-title{font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:var(--ink-900);padding:var(--sp-5) var(--sp-6) var(--sp-3);border-top:1px solid var(--line);grid-column:1/-1}

/* ── Permissions grid ── */
.perm-group{padding:0 var(--sp-6) var(--sp-4)}
.perm-group__header{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-500);margin-bottom:var(--sp-3)}
.perm-group__items{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.checkbox-label{display:flex;align-items:center;gap:var(--sp-2);font-size:.83rem;cursor:pointer}
.checkbox-label input{accent-color:var(--teal-600);width:15px;height:15px}

/* ── Search / Filter form ── */
.search-form,.filter-form{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}

/* ── Utils ── */
.text-muted{color:var(--ink-500)}
code{font-size:.8em;background:var(--surface-2);padding:1px 5px;border-radius:3px;border:1px solid var(--line)}

/* ── Responsive ── */
@media(max-width:768px){
  .topbar__toggle{display:flex}
  .sidebar{position:fixed;z-index:100;height:100%;transform:translateX(-100%);transition:transform .25s}
  .sidebar--open{transform:translateX(0)}
  .form-grid{grid-template-columns:1fr}
  .form-group--full,.form-group--actions,.section-title{grid-column:auto}
  .stats-grid{grid-template-columns:1fr 1fr}
}