/* ============================================================
   Fincharts on Nova ERP v2 — minimal app extensions.
   style.css (Nova) is untouched; this file only adds the few
   structures Fincharts needs that the template does not ship:
   collapsible sidebar groups, "coming soon" tags, key/value
   lists, the org tree and a few layout helpers.
   Colours come exclusively from Nova's CSS variables.
   ============================================================ */

/* ---------- Brand ---------- */
.sidebar .brand .name small{display:block;font-size:10.5px;font-weight:500;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}

/* ---------- Collapsible sidebar groups ---------- */
.nav details{margin-bottom:2px}
.nav details > summary{list-style:none;display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:13px;
  color:var(--text-2);font-size:14px;font-weight:500;cursor:pointer;user-select:none}
.nav details > summary::-webkit-details-marker{display:none}
.nav details > summary:hover{background:var(--surface-2);color:var(--text)}
.nav details > summary svg{width:18px;height:18px;flex:0 0 18px;color:var(--muted)}
.nav details > summary .chev{margin-left:auto;width:14px;height:14px;flex:0 0 14px;transition:transform .2s var(--ease)}
.nav details[open] > summary .chev{transform:rotate(90deg)}
.nav details[open] > summary{color:var(--text)}
.nav .sub{padding:2px 0 6px 18px;border-left:1px solid var(--line);margin-left:22px}
.nav .sub a{padding:8px 12px;font-size:13.5px;border-radius:11px}
.nav .sub .sub-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding:10px 12px 4px;font-weight:600}
.nav .soon{margin-left:auto;font-size:10px;font-weight:600;color:var(--muted);background:var(--surface-2);padding:2px 7px;border-radius:6px;letter-spacing:.03em}
.nav a.active .soon{background:rgba(255,255,255,.2);color:#fff}
.nav .count{margin-left:auto;font-size:11px;font-weight:600;color:#fff;background:var(--rose);padding:1px 7px;border-radius:9px}

/* ---------- Topbar notifications ---------- */
.notif-menu{min-width:320px;max-width:92vw}
.notif-menu .n-item{display:block;padding:10px 13px;border-radius:11px;color:var(--text)}
.notif-menu .n-item:hover{background:var(--surface-2)}
.notif-menu .n-item .t{font-size:13.5px;font-weight:500}
.notif-menu .n-item .w{font-size:12px;color:var(--muted)}
.notif-menu .n-item.unread .t::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:7px;vertical-align:middle}

/* ---------- Page helpers ---------- */
.card.pad{padding:24px}
.grid.pad{padding:24px}
.stack > * + *{margin-top:20px}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.filters .field{margin-bottom:0;min-width:160px}
.filters .field input,.filters .field select{padding:9px 12px;font-size:13.5px}
.kv{display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:10px 18px;font-size:14px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-weight:500;word-break:break-word}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
.nowrap{white-space:nowrap}
.help-block{font-size:13px;color:var(--text-2)}
.inline-form{display:inline}
.w-100{width:100%}
.mt-12{margin-top:12px}.mb-12{margin-bottom:12px}.mb-18{margin-bottom:18px}.mb-24{margin-bottom:24px}
.pre{white-space:pre-wrap;word-break:break-word;background:var(--surface-2);border-radius:var(--radius-sm);padding:12px 14px;font-size:12.5px;max-height:320px;overflow:auto}
.table-wrap table td .muted{font-size:12.5px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;border:1px solid var(--line);border-radius:var(--radius-pill);padding:3px 10px;color:var(--text-2);background:var(--surface)}
.modal.wide{width:min(94vw,760px);max-height:92vh;overflow:auto}
.form-grid .full{grid-column:1 / -1}

/* ---------- Org tree (hierarchy summary) ---------- */
.tree,.tree ul{list-style:none;margin:0;padding:0}
.tree ul{margin-left:18px;border-left:1px dashed var(--line);padding-left:14px}
.tree li{padding:6px 0}
.tree .node{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.tree .node .role{font-size:11.5px;color:var(--muted)}

/* ---------- Auth extras ---------- */
.auth .alert{margin-bottom:18px}
.otp-input{letter-spacing:.5em;text-align:center;font-size:22px!important;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

@media(max-width:640px){.hide-mobile{display:none!important}}

/* ---------- Print ---------- */
@media print{.sidebar,.topbar,.footer,.no-print{display:none!important}.main{margin-left:0!important}}