/* Nathana Platform theme on top of Tabler (all assets self-hosted). */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../vendor/plex/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("../vendor/plex/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../vendor/plex/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("../vendor/plex/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }

:root, [data-bs-theme=light] {
  /* Brand: petrol blue on deep ink */
  --nh-primary: #1d5f7a;
  --nh-primary-rgb: 29, 95, 122;
  --nh-ink: #14222d;
  --nh-ink-2: #1c2e3b;
  --nh-surface: #f4f6f7;

  --tblr-primary: var(--nh-primary);
  --tblr-primary-rgb: var(--nh-primary-rgb);
  --tblr-primary-text: #164a60;
  --tblr-primary-lt: #e8f0f3;
  --tblr-primary-lt-rgb: 232, 240, 243;
  --tblr-link-color: var(--nh-primary);
  --tblr-link-color-rgb: var(--nh-primary-rgb);
  --tblr-link-hover-color: #164a60;
  --tblr-font-sans-serif: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tblr-body-bg: var(--nh-surface);
  --tblr-border-radius: 6px;
  --tblr-card-border-radius: 8px;
}
body { font-feature-settings: "tnum" 0; letter-spacing: 0; }
.btn-primary { --tblr-btn-bg: var(--nh-primary); --tblr-btn-border-color: var(--nh-primary); --tblr-btn-hover-bg: #174d63; --tblr-btn-hover-border-color: #174d63; --tblr-btn-active-bg: #133f52; }
.btn-outline-primary { --tblr-btn-color: var(--nh-primary); --tblr-btn-border-color: var(--nh-primary); --tblr-btn-hover-bg: var(--nh-primary); --tblr-btn-hover-border-color: var(--nh-primary); }
.form-check-input:checked { background-color: var(--nh-primary); border-color: var(--nh-primary); }
.form-control:focus, .form-select:focus { border-color: #7fa9bb; box-shadow: 0 0 0 .2rem rgba(var(--nh-primary-rgb), .15); }

/* ---- Sidebar ---------------------------------------------------------- */
.navbar-vertical.navbar-expand-lg { background: var(--nh-ink); }
.navbar-vertical .navbar-nav .nav-link { color: #b9c7d2; border-radius: 6px; margin: 1px 8px; padding: .38rem .65rem; }
.navbar-vertical .navbar-nav .nav-link:hover { color: #fff; background: var(--nh-ink-2); }
.navbar-vertical .navbar-nav .nav-link.active { color: #fff; background: rgba(var(--nh-primary-rgb), .55); }
.navbar-vertical .nav-link-icon { color: #8aa0b0; }
.navbar-vertical .nav-link.active .nav-link-icon, .navbar-vertical .nav-link:hover .nav-link-icon { color: #fff; }
.nav-group { color: #6f8494; font-size: .75rem; font-weight: 500; padding: .8rem 1.15rem .25rem; }
.brand { display: flex; align-items: center; gap: .65rem; color: #fff !important; text-decoration: none; padding: .25rem 0; }
.brand-mark { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: .95rem; letter-spacing: .02em;
  color: #fff; background: linear-gradient(140deg, #2c7c9c, var(--nh-primary) 55%, #164a60); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.brand-text { line-height: 1.15; }
.brand-text b { display: block; font-size: 1rem; font-weight: 600; }
.brand-text small { color: #8aa0b0; font-size: .75rem; }

/* ---- Page header ------------------------------------------------------ */
.top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 1.25rem; }
.top h1, .page-title { font-size: 1.4rem; font-weight: 600; margin: .1rem 0 .15rem; color: var(--tblr-body-color); }
.top > div > a.muted, .backlink { font-size: .85rem; color: var(--tblr-secondary); }
.top .muted { color: var(--tblr-secondary); }
h1 { font-size: 1.4rem; font-weight: 600; }
h3 { font-size: .85rem; font-weight: 600; color: var(--tblr-secondary); margin: 1rem 0 .4rem; }
.muted { color: var(--tblr-secondary); }
small { color: var(--tblr-secondary); }

/* ---- Cards (".panel" is the app's card) -------------------------------- */
.panel { background: var(--tblr-bg-surface, #fff); border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-card-border-radius);
  box-shadow: 0 1px 2px rgba(20, 34, 45, .04); padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.panel > h2:first-child { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 1rem; font-weight: 600;
  margin: -1.1rem -1.25rem 1rem; padding: .85rem 1.25rem; border-bottom: 1px solid var(--tblr-border-color); }
.panel > h2:first-child:last-child { border-bottom: 0; margin-bottom: -1.1rem; }
.panel h2 { font-size: 1rem; font-weight: 600; }
.panel > table:last-child, .panel > .table-wrap:last-child > table { margin-bottom: -.4rem; }
.panel.table-wrap { overflow-x: auto; }
.grid { display: grid; gap: 1rem; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid > .panel { margin-bottom: 0; }
.grid + .panel, .grid + .grid { margin-top: 1rem; }

/* Stat tiles */
.stat { display: flex; gap: .9rem; align-items: center; background: var(--tblr-bg-surface, #fff); border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-card-border-radius); padding: 1rem 1.1rem; color: inherit; text-decoration: none !important; transition: border-color .15s; }
.stat:hover { border-color: #9db8c5; }
.stat .ti { font-size: 1.35rem; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; background: var(--tblr-primary-lt); color: var(--nh-primary); flex: none; }
.stat b { display: block; font-size: 1.6rem; line-height: 1.1; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat span { color: var(--tblr-secondary); font-size: .85rem; }
.stat.stat-warn .ti { background: #fdf3e1; color: #b26b00; }

/* Key/value lists */
dl.kv { display: grid; grid-template-columns: 165px 1fr; gap: .45rem 1rem; margin: 0; }
dl.kv dt { color: var(--tblr-secondary); font-weight: 400; font-size: .875rem; }
dl.kv dd { margin: 0; }

/* Tables */
.panel table:not(.table) { width: 100%; }
.table { margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .55rem .6rem; }
.table thead th { font-size: .75rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--tblr-secondary); background: #f8fafb; white-space: nowrap; }
.panel > .table:first-child, .panel > h2 + .table { margin-top: -.35rem; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table tfoot td { font-weight: 600; border-top: 2px solid var(--tblr-border-color-dark, #c9d1d8); border-bottom: 0; }
.table-wrap { overflow-x: auto; }

/* Status badges */
.badge { font-weight: 500; font-size: .75rem; padding: .3em .6em; border-radius: 999px; background: #eef1f3; color: #5b6b78; vertical-align: middle; }
.s-active, .s-approved, .s-in_xero, .s-exported, .s-ok { background: #e3f3ea; color: #1b7340; }
.s-submitted, .s-onboarding, .s-in_progress, .s-issued, .s-invited, .s-pending, .s-open { background: #e5eff4; color: #1d5f7a; }
.s-rejected, .s-void, .s-cancelled, .s-bad { background: #fbe9e7; color: #b42318; }
.s-draft, .s-candidate, .s-warn { background: #fdf3e1; color: #94590a; }
.s-ended, .s-inactive, .s-closed, .s-filled { background: #eef1f3; color: #5b6b78; }
.days-bad { color: #b42318; font-weight: 600; }
.days-warn { color: #94590a; font-weight: 600; }
.tag { display: inline-block; background: #eef3f5; color: #35576a; border-radius: 4px; padding: 0 .4rem; font-size: .75rem; margin: 2px 3px 2px 0; }

/* Messages */
.messages { list-style: none; padding: 0; margin: 0 0 1rem; }
.messages li { padding: .7rem 1rem; border-radius: 6px; margin-bottom: .5rem; background: #e5eff4; color: #164a60; border: 1px solid #c8dbe3; }
.messages li.success { background: #e3f3ea; color: #1b7340; border-color: #bfe3cd; }
.messages li.error { background: #fbe9e7; color: #b42318; border-color: #f5c6c1; }
.messages li.warning { background: #fdf3e1; color: #94590a; border-color: #f2d7a6; }

/* Buttons not yet given Bootstrap classes (e.g. allauth pages) */
button:not(.btn):not(.navbar-toggler):not(.btn-close):not(.ts-control *) { display: inline-flex; align-items: center; gap: .35rem; font: inherit; font-weight: 500;
  font-size: .875rem; padding: .45rem .9rem; border-radius: 6px; border: 1px solid var(--nh-primary); background: var(--nh-primary); color: #fff; cursor: pointer; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
form.inline { display: inline; }
.btn .ti { font-size: 1.05rem; margin-right: .3rem; }
.btn-sm .ti { font-size: .95rem; margin-right: .2rem; }

/* Inputs not rendered through the |bs filter */
input[type=text]:not(.form-control):not(.ts-input *), input[type=email]:not(.form-control), input[type=number]:not(.form-control),
input[type=date]:not(.form-control), input[type=password]:not(.form-control), input[type=search]:not(.form-control),
input[type=tel]:not(.form-control), input[type=url]:not(.form-control), input[type=file]:not(.form-control),
select:not(.form-select):not(.ts-hidden-accessible), textarea:not(.form-control) {
  font: inherit; font-size: .875rem; width: 100%; max-width: 560px; padding: .45rem .7rem; border: 1px solid var(--tblr-border-color);
  border-radius: 6px; background: #fff; color: var(--tblr-body-color); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: #7fa9bb; box-shadow: 0 0 0 .2rem rgba(var(--nh-primary-rgb), .15); }
label { font-weight: 500; font-size: .875rem; margin-bottom: .3rem; }
.form-label { font-weight: 500; }
.form-hint, .helptext { display: block; color: var(--tblr-secondary); font-size: .8rem; margin-top: .3rem; font-weight: 400; }
.errorlist { list-style: none; padding: 0; margin: .3rem 0; color: #b42318; font-size: .82rem; }
ul.errorlist.nonfield { background: #fbe9e7; padding: .6rem .9rem; border-radius: 6px; }
.form-fields > div { margin-bottom: 1rem; }
.form-fields ul:not(.errorlist) { list-style: none; padding: 0; margin: 0; }
.form-fields ul:not(.errorlist) li label { font-weight: 400; display: flex; align-items: center; gap: .4rem; }
.form-fields .form-control, .form-fields .form-select { max-width: 560px; }
.form-fields textarea.form-control { max-width: none; }
.filters { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.filters > div > label { display: block; }
.filters input, .filters select { width: auto; min-width: 150px; }
.filters input[type=search] { min-width: 280px; }
input.qty { width: 92px; text-align: right; }
input.wide { max-width: none; }
.ts-grid td { vertical-align: middle; }
.ts-grid tr.weekend td { background: #f8fafb; color: var(--tblr-secondary); }

/* Onboarding / contracts */
.contract-text { white-space: pre-wrap; font-family: "IBM Plex Sans", serif; font-size: .95rem; line-height: 1.65; background: #fff;
  border: 1px solid var(--tblr-border-color); padding: 1.5rem 1.75rem; border-radius: 8px; max-height: 60vh; overflow-y: auto; max-width: 78ch; }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { display: flex; justify-content: space-between; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--tblr-border-color); }
.checklist li:last-child { border-bottom: 0; }
.tick { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; align-items: center; justify-content: center; font-size: .78rem;
  margin-right: .6rem; background: #eef1f3; color: var(--tblr-secondary); font-weight: 600; }
.tick.done { background: #1b7340; color: #fff; }
.secret { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .04em; }
.empty-note { color: var(--tblr-secondary); padding: .35rem 0; margin: 0; }
.activity { border-top: 1px solid var(--tblr-border-color); padding: .7rem 0; }

/* Top bar user menu */
.topbar { background: #fff; border-bottom: 1px solid var(--tblr-border-color); min-height: 56px; }
.avatar-initials { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--tblr-primary-lt);
  color: var(--nh-primary); font-weight: 600; font-size: .8rem; }

/* Sign-in pages */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 440px) 1fr; background: #fff; }
.auth-side { background: var(--nh-ink); color: #c8d4dd; padding: 2.5rem; display: flex; flex-direction: column; justify-content: space-between; }
.auth-side h2 { color: #fff; font-size: 1.5rem; font-weight: 600; line-height: 1.3; margin: 0 0 .75rem; max-width: 20ch; }
.auth-side p { color: #9fb1be; max-width: 34ch; }
.auth-side .foot { font-size: .8rem; color: #6f8494; }
.auth-main { display: grid; place-items: center; padding: 2rem 1.25rem; background: var(--nh-surface); }
.auth-card { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--tblr-border-color); border-radius: 10px; padding: 2rem; box-shadow: 0 6px 24px rgba(20,34,45,.06); }
.auth-card h1 { font-size: 1.3rem; margin-bottom: .4rem; }
.auth-card input:not([type=checkbox]):not([type=radio]) { max-width: none; }
.auth-card form p { margin-bottom: .9rem; }
.auth-card button:not(.btn) { width: 100%; justify-content: center; padding: .6rem; }
.auth-card ul { padding-left: 1.1rem; }

/* Portal (contractors and approvers) */
.portal-nav { background: var(--nh-ink); }
.portal-nav .nav-link { color: #c8d4dd !important; }
.portal-nav .nav-link:hover { color: #fff !important; }

@media (max-width: 991.98px) {
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  dl.kv { grid-template-columns: 1fr; gap: .15rem; }
  dl.kv dd { margin-bottom: .5rem; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-side { display: none; }
}
@media print { .navbar, .topbar, .actions, .portal-nav { display: none !important; } .page-wrapper { margin: 0 !important; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.activity-body { white-space: pre-wrap; font-size: .85rem; color: var(--tblr-secondary); margin-top: .25rem; max-height: 6.5em; overflow: hidden; }
.form-section { font-size: .95rem; font-weight: 600; color: var(--tblr-body-color); margin: 1.5rem 0 .75rem; padding-top: 1.25rem; border-top: 1px solid var(--tblr-border-color); }
.card-body > .form-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.row .form-control, .row .form-select { max-width: none; }
.allauth-manage > h1 { margin-bottom: 1rem; }
.allauth-manage > form, .allauth-manage > p, .allauth-manage > ul { background: #fff; border: 1px solid var(--tblr-border-color); border-radius: 8px; padding: 1.1rem 1.25rem; }
.allauth-manage ul { list-style: none; padding-left: 1.25rem; }
.allauth-manage img, .allauth-manage svg { max-width: 220px; height: auto; }