/* ==========================================================================
   Compliance & Risk Management Platform — UI design system
   Cushman & Wakefield palette. Server-rendered Blade; no build step.
   ========================================================================== */

:root {
    --cw-navy:      #003865;
    --cw-navy-700:  #16283A;
    --cw-navy-050:  #E1E9F0;
    --cw-red:       #A6192E;
    --cw-red-700:   #7E1223;
    --cw-red-050:   #F6E4E7;
    --cw-teal:      #0093B2;
    --cw-teal-700:  #036A82;
    --cw-teal-050:  #E0F1F5;
    --cw-green:     #1E7A4B;
    --cw-green-050: #DDE7CE;
    --cw-amber:     #A66A00;
    --cw-amber-050: #F6ECD9;

    --ink:        #1D1F20;
    --ink-2:      #40444A;
    --ink-3:      #6E7377;
    --line:       #D9DEE3;
    --line-2:     #E8ECEF;
    --bg:         #F4F6F8;
    --surface:    #FFFFFF;
    --surface-2:  #F8FAFB;

    --radius:   8px;
    --radius-s: 5px;
    --shadow:   0 1px 2px rgba(16,40,58,.06), 0 4px 12px rgba(16,40,58,.06);
    --shadow-lg:0 12px 40px rgba(16,40,58,.18);
    --sidebar:  248px;
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--cw-teal-700); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .4em; color: var(--ink); font-weight: 650; line-height: 1.25; }
h1 { font-size: 22px; } h2 { font-size: 18px; } h3 { font-size: 15px; }
p { margin: 0 0 1em; }
small, .muted { color: var(--ink-3); }
code, kbd, .mono { font-family: var(--mono); font-size: .92em; }

/* ---- layout ------------------------------------------------------------ */
.app { display: flex; min-height: 100vh; }
.sidebar {
    width: var(--sidebar); flex: 0 0 var(--sidebar);
    background: var(--cw-navy-700); color: #C7D2DC;
    display: flex; flex-direction: column;
    position: fixed; inset: 0 auto 0 0; z-index: 40;
}
.sidebar__brand {
    padding: 18px 20px; display: flex; align-items: center; gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar__brand strong { color: #fff; font-size: 14px; letter-spacing: .01em; }
.sidebar__brand span { display: block; font-size: 11px; color: #8DA2B4; }
.sidebar__nav { flex: 1; overflow-y: auto; padding: 12px 10px 24px; }
.sidebar__group { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
    color: #6C8194; padding: 16px 12px 6px; }
.sidebar__link {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; margin: 1px 0; border-radius: var(--radius-s);
    color: #C7D2DC; font-size: 13px; font-weight: 500;
}
.sidebar__link:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.sidebar__link.is-active { background: var(--cw-teal); color: #fff; }
.sidebar__link .ico { width: 16px; text-align: center; opacity: .9; }

.main { flex: 1; margin-left: var(--sidebar); display: flex; flex-direction: column; min-width: 0; }
.topbar {
    height: 56px; background: var(--surface); border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 16px; padding: 0 24px; position: sticky; top: 0; z-index: 30;
}
.topbar__title { font-weight: 650; font-size: 15px; }
.topbar__spacer { flex: 1; }
.content { padding: 24px; flex: 1; max-width: 1240px; width: 100%; }

.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.page-head h1 { margin: 0; }
.page-head .muted { margin-top: 2px; }
.page-head__actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.breadcrumb { font-size: 12px; color: var(--ink-3); margin-bottom: 10px; }
.breadcrumb a { color: var(--ink-3); }
.breadcrumb span::before { content: "/"; margin: 0 7px; color: var(--line); }

/* ---- cards & grid --------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); }
.card__head { padding: 14px 18px; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; gap: 10px; }
.card__head h2, .card__head h3 { margin: 0; }
.card__body { padding: 18px; }
.card__body--flush { padding: 0; }
.card + .card { margin-top: 18px; }

.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px 18px; box-shadow: var(--shadow); }
.stat__label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.stat__value { font-size: 26px; font-weight: 700; margin-top: 4px; color: var(--cw-navy); }
.stat__sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

/* ---- tables ------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th, table.data td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.data th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3);
    background: var(--surface-2); font-weight: 650; white-space: nowrap; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.empty { padding: 40px 20px; text-align: center; color: var(--ink-3); }
.empty .ico { font-size: 26px; display: block; margin-bottom: 8px; opacity: .5; }

/* ---- buttons ---------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; gap: 7px; justify-content: center;
    padding: 8px 14px; border-radius: var(--radius-s); border: 1px solid transparent;
    font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap;
    background: var(--surface); color: var(--ink); border-color: var(--line);
    transition: background .12s, border-color .12s;
}
.btn:hover { text-decoration: none; background: var(--surface-2); }
.btn:disabled, .btn.is-disabled { opacity: .5; pointer-events: none; }
.btn--primary { background: var(--cw-navy); border-color: var(--cw-navy); color: #fff; }
.btn--primary:hover { background: #002B4E; }
.btn--accent { background: var(--cw-teal); border-color: var(--cw-teal); color: #fff; }
.btn--accent:hover { background: var(--cw-teal-700); }
.btn--danger { background: var(--cw-red); border-color: var(--cw-red); color: #fff; }
.btn--danger:hover { background: var(--cw-red-700); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--sm { padding: 5px 10px; font-size: 12px; }
.btn--block { width: 100%; }

/* ---- forms ------------------------------------------------------------- */
.form-row { margin-bottom: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.form-grid .form-row--full { grid-column: 1 / -1; }
@media (max-width: 680px) { .form-grid { grid-template-columns: 1fr; } }
label.lbl { display: block; font-weight: 600; font-size: 12.5px; margin-bottom: 5px; color: var(--ink-2); }
label.lbl .req { color: var(--cw-red); }
.hint { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date],
input[type=search], input[type=tel], select, textarea {
    width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-s);
    font: inherit; font-size: 13px; background: var(--surface); color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cw-teal);
    box-shadow: 0 0 0 3px var(--cw-teal-050); }
textarea { min-height: 84px; resize: vertical; }
input.is-invalid, select.is-invalid, textarea.is-invalid { border-color: var(--cw-red); }
.err { color: var(--cw-red-700); font-size: 12px; margin-top: 4px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.check input { width: auto; }
.form-actions { display: flex; gap: 10px; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line-2); }
fieldset { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 14px; margin: 0 0 16px; }
legend { font-weight: 650; font-size: 12.5px; padding: 0 6px; color: var(--ink-2); }

/* ---- badges & pills ---------------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 650; line-height: 1.6; border: 1px solid transparent; white-space: nowrap; }
.badge--ok      { background: var(--cw-green-050); color: var(--cw-green); }
.badge--warn    { background: var(--cw-amber-050); color: var(--cw-amber); }
.badge--bad     { background: var(--cw-red-050);   color: var(--cw-red-700); }
.badge--info    { background: var(--cw-teal-050);  color: var(--cw-teal-700); }
.badge--neutral { background: var(--line-2);        color: var(--ink-2); }
.badge--navy    { background: var(--cw-navy-050);   color: var(--cw-navy); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot--ok { background: var(--cw-green); } .dot--warn { background: var(--cw-amber); }
.dot--bad { background: var(--cw-red); } .dot--neutral { background: var(--ink-3); }

/* ---- progress -------------------------------------------------------------- */
.meter { height: 8px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--cw-green); border-radius: 999px; }
.meter.is-warn > i { background: var(--cw-amber); }
.meter.is-bad > i { background: var(--cw-red); }

/* ---- alerts / flash --------------------------------------------------------- */
.alert { border: 1px solid; border-radius: var(--radius-s); padding: 11px 14px; margin-bottom: 16px;
    font-size: 13px; display: flex; gap: 10px; align-items: flex-start; }
.alert--success { background: var(--cw-green-050); border-color: #BEDCBA; color: #16301F; }
.alert--error   { background: var(--cw-red-050);   border-color: #E3B7BE; color: var(--cw-red-700); }
.alert--warn    { background: var(--cw-amber-050); border-color: #E7D3A6; color: #7D5000; }
.alert--info    { background: var(--cw-teal-050);  border-color: #9BD3DD; color: var(--cw-teal-700); }
.alert ul { margin: 4px 0 0; padding-left: 18px; }
.alert__x { margin-left: auto; background: none; border: none; cursor: pointer; color: inherit; font-size: 16px; opacity: .6; }

/* ---- timeline ------------------------------------------------------------ */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 16px 22px; border-left: 2px solid var(--line-2); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 2px; width: 10px; height: 10px;
    border-radius: 50%; background: var(--cw-teal); border: 2px solid var(--surface); }
.timeline .t-when { font-size: 11.5px; color: var(--ink-3); }
.timeline .t-what { font-weight: 600; }

/* ---- key/value ---------------------------------------------------------- */
.kv { display: grid; grid-template-columns: 190px 1fr; gap: 2px 16px; font-size: 13px; }
.kv dt { color: var(--ink-3); padding: 7px 0; }
.kv dd { margin: 0; padding: 7px 0; border-bottom: 1px solid var(--line-2); }
.kv dt:last-of-type, .kv dd:last-of-type { border-bottom: none; }
@media (max-width: 560px) { .kv { grid-template-columns: 1fr; } .kv dd { border: none; padding-top: 0; } }

/* ---- tabs -------------------------------------------------------------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tabs a { padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--ink-3);
    border-bottom: 2px solid transparent; }
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a.is-active { color: var(--cw-navy); border-bottom-color: var(--cw-navy); }

/* ---- dropdown menu ---------------------------------------------------------- */
.menu { position: relative; }
.menu__panel { position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius-s); box-shadow: var(--shadow-lg);
    padding: 6px; z-index: 50; display: none; }
.menu.is-open .menu__panel { display: block; }
.menu__panel a, .menu__panel button { display: flex; width: 100%; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 4px; font-size: 13px; color: var(--ink); background: none; border: none;
    cursor: pointer; text-align: left; }
.menu__panel a:hover, .menu__panel button:hover { background: var(--surface-2); text-decoration: none; }
.menu__sep { height: 1px; background: var(--line-2); margin: 6px 0; }

/* ---- modal ----------------------------------------------------------------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(16,40,58,.5); z-index: 60;
    display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px; }
.modal-backdrop[hidden] { display: none; }
.modal { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg);
    width: 100%; max-width: 520px; }
.modal__head { padding: 16px 20px; border-bottom: 1px solid var(--line-2); font-weight: 650; }
.modal__body { padding: 20px; }
.modal__foot { padding: 14px 20px; border-top: 1px solid var(--line-2); display: flex; gap: 10px; justify-content: flex-end; }

/* ---- misc ------------------------------------------------------------- */
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar form { display: flex; gap: 8px; align-items: center; }
.pagination { display: flex; gap: 4px; align-items: center; margin-top: 16px; font-size: 13px; }
.pagination a, .pagination span { padding: 6px 10px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink-2); }
.pagination .is-active { background: var(--cw-navy); color: #fff; border-color: var(--cw-navy); }
.pagination .is-disabled { opacity: .4; pointer-events: none; }
.stack > * + * { margin-top: 14px; }
.row-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tag-list { display: flex; gap: 6px; flex-wrap: wrap; }
.text-right { text-align: right; }
.nowrap { white-space: nowrap; }
.w-full { width: 100%; }
hr.sep { border: none; border-top: 1px solid var(--line-2); margin: 18px 0; }

/* ---- auth screen ----------------------------------------------------------- */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, var(--cw-navy-700), var(--cw-navy)); padding: 24px; }
.auth__card { background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-lg);
    width: 100%; max-width: 400px; padding: 30px 30px 26px; }
.auth__brand { text-align: center; margin-bottom: 22px; }
.auth__brand strong { display: block; color: var(--cw-navy); font-size: 16px; }
.auth__brand span { font-size: 12px; color: var(--ink-3); }

@media (max-width: 860px) {
    .sidebar { transform: translateX(-100%); transition: transform .2s; }
    .app.nav-open .sidebar { transform: none; }
    .main { margin-left: 0; }
    .app.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 35; }
}