/* ============================================================================
   AE Modern Skin (POC)  —  clean & minimal
   ----------------------------------------------------------------------------
   A CSS-only reskin layer over the existing Bootstrap 3 / Metronic 3 markup.
   It changes NO views: it only restyles the class names already in the DOM.
   Loaded LAST (after the brand theme) and only when the ui_skin cookie /
   ?skin=modern flag is set, so it is fully toggleable and off by default.

   Brand colours are preserved and reused as accents:
     #255568  brand dark teal-blue   |   #1caf9a  brand teal accent
   ========================================================================== */

/* Geist Variable (Vercel, SIL OFL) — self-hosted, single variable file covering
   weights 100–900. url() is relative to this file (/Content/), so it resolves to
   /Content/fonts/geist/Geist-Variable.woff2. */
@font-face {
    font-family: 'Geist';
    src: url('fonts/geist/Geist-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Inter Variable (SIL OFL) — self-hosted weight-axis variable file (100–900),
   latin subset. Resolves to /Content/fonts/inter/Inter-Variable.woff2. */
@font-face {
    font-family: 'Inter';
    src: url('fonts/inter/Inter-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Commit Mono (Eigil Nikolajsen, free licence) — self-hosted static faces.
   Commit Mono ships as static weights (no variable file), so regular (400) and
   bold (700) are declared separately. Resolves to /Content/fonts/commit-mono/. */
@font-face {
    font-family: 'Commit Mono';
    src: url('fonts/commit-mono/CommitMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Commit Mono';
    src: url('fonts/commit-mono/CommitMono-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --ae-primary: #255568;
    --ae-primary-600: #1f4859;
    --ae-accent: #0B5FFF;
    --ae-accent-600: #428bca;
    --ae-accent-tint: rgba(28, 175, 154, .14);
    --ae-bg: #ffffff;
    --ae-surface: #ffffff;
    --ae-border: #e7eaef;
    --ae-border-strong: #d7dce3;
    --ae-text: #2b3440;
    --ae-text-muted: #6b7683;
    --ae-radius: 8px;
    --ae-radius-sm: 6px;
    --ae-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
    --ae-shadow-md: 0 6px 16px rgba(16,24,40,.08);
    /* Active UI font. Switch between the self-hosted faces by changing the first name:
       'Inter' or 'Geist'. Body uses 400, headings 600 (set below). */
    --ae-font: 'Inter', ui-sans-serif, system-ui, sans-serif;
    /* Monospace font for code / preformatted content. */
    --ae-mono: 'Commit Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---- Base / typography ------------------------------------------------- */
body {
    font-family: var(--ae-font);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ae-text);
    background: var(--ae-bg) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.page-container, .page-content, .page-content-wrapper, .page-content-body {
    background: var(--ae-bg) !important;
}

h1, h2, h3, h4, h5, .page-title, .caption {
    color: var(--ae-primary);
    font-weight: 600;
    letter-spacing: -.01em;
}

a { color: var(--ae-accent-600); }
a:hover, a:focus { color: var(--ae-primary); }

/* ---- Monospace / code -------------------------------------------------- */
code, kbd, samp, pre, tt, .mono {
    font-family: var(--ae-mono);
}
code, kbd {
    font-size: .875em;
    background: #f3f5f8 !important;
    color: var(--ae-primary) !important;
    border: 0 !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
}
pre {
    font-size: .875em;
    background: #f7f9fb !important;
    border: 1px solid var(--ae-border) !important;
    border-radius: var(--ae-radius-sm) !important;
}

/* ---- Page header bar (breadcrumb / title strip) ------------------------ */
.page-head, .page-bar {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 4px 0 10px;
}
.page-bar .page-breadcrumb > li > a,
.page-bar .page-breadcrumb > li > i { color: var(--ae-text-muted) !important; }

/* ---- Cards: Bootstrap panels + Metronic portlets/notes ----------------- */
.panel,
.portlet,
.portlet.light,
.note,
.well {
    background: var(--ae-surface) !important;
    border: 1px solid var(--ae-border) !important;
    border-radius: var(--ae-radius) !important;
    box-shadow: var(--ae-shadow) !important;
    background-image: none !important;
}

.panel-heading,
.portlet > .portlet-title,
.portlet.light > .portlet-title {
    background: transparent !important;
    background-image: none !important;
    border-bottom: 1px solid var(--ae-border) !important;
    border-radius: var(--ae-radius) var(--ae-radius) 0 0 !important;
    color: var(--ae-primary) !important;
    padding: 14px 18px !important;
    min-height: 0 !important;
    box-shadow: none !important;
}
.panel-title,
.portlet-title .caption {
    font-weight: 600 !important;
    font-size: 15px !important;
    color: var(--ae-primary) !important;
}
.panel-body, .portlet-body { padding: 18px !important; }

/* ---- Buttons: flatten, square, soften the colours ---------------------- */
.btn {
    border-radius: 2px !important;   /* almost fully squared corners */
    background-image: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    font-weight: 500 !important;
    padding: 7px 15px !important;
    transition: filter .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn:hover { filter: brightness(.96); }
.btn:active { filter: brightness(.92); }

/* Soft, low-emphasis colour variants. The Metronic theme colours action
   buttons with solid saturated fills via .green.btn / .blue.btn / .red.btn
   (base hues #38c597 / #4b8df8 / #d84a38). Recast each as a light translucent
   tint of the SAME hue, with the colour carried by the text + a faint border
   instead of a loud fill. Same meaning, far less shouting.
   Bootstrap's .btn-* variants get the matching treatment for consistency. */
.btn.green, .btn-success {
    background: rgba(56,197,151,.13) !important;
    border: 1px solid rgba(56,197,151,.30) !important;
    color: #157a5a !important;
    text-shadow: none !important;
}
.btn.green:hover, .btn.green:focus, .btn.green:active, .btn.green.active,
.btn-success:hover, .btn-success:focus, .btn-success:active {
    background: rgba(56,197,151,.20) !important;
    color: #157a5a !important;
}
.btn.blue, .btn-primary, .btn-info {
    background: rgba(75,141,248,.13) !important;
    border: 1px solid rgba(75,141,248,.30) !important;
    color: #2563c9 !important;
    text-shadow: none !important;
}
.btn.blue:hover, .btn.blue:focus, .btn.blue:active, .btn.blue.active,
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-info:hover, .btn-info:focus, .btn-info:active {
    background: rgba(75,141,248,.20) !important;
    color: #2563c9 !important;
}
.btn.red, .btn-danger {
    background: rgba(216,74,56,.13) !important;
    border: 1px solid rgba(216,74,56,.32) !important;
    color: #b0342a !important;
    text-shadow: none !important;
}
.btn.red:hover, .btn.red:focus, .btn.red:active, .btn.red.active,
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
    background: rgba(216,74,56,.20) !important;
    color: #b0342a !important;
}
/* Purple carries the "other action" role (send, set, refresh, process) and grey the
   low-emphasis one (back, cancel, clear). Metronic fills these solid (#8e44ad and
   #e5e5e5); recast both as the same soft tint so all five colours read as one family. */
.btn.purple {
    background: rgba(142,68,173,.12) !important;
    border: 1px solid rgba(142,68,173,.30) !important;
    color: #7326a0 !important;
    text-shadow: none !important;
}
.btn.purple:hover, .btn.purple:focus, .btn.purple:active, .btn.purple.active {
    background: rgba(142,68,173,.19) !important;
    color: #7326a0 !important;
}
.btn.grey {
    background: rgba(16,24,40,.05) !important;
    border: 1px solid var(--ae-border-strong, #d7dce3) !important;
    color: var(--ae-text-muted, #6b7683) !important;
    text-shadow: none !important;
}
.btn.grey:hover, .btn.grey:focus, .btn.grey:active, .btn.grey.active {
    background: rgba(16,24,40,.09) !important;
    color: var(--ae-text, #2b3440) !important;
}

/* Bare submit / action buttons that carry NO .btn class — e.g.
   <input type="submit" value="Search"> — are missed by every rule above, so the
   skin left them looking native. Catch them by element instead of by class and
   give them the same flat, squared shape plus the soft green (Approve) tint by
   default. No !important here, so an explicit colour/.btn class still wins and
   buttons that opt into blue/red keep their colour. */
input[type="submit"],
button[type="submit"],
button:not([type]):not(.btn) {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 2px;
    background-image: none;
    text-shadow: none;
    box-shadow: none;
    font-weight: 500;
    padding: 7px 15px;
    cursor: pointer;
    transition: filter .12s ease, background-color .12s ease, border-color .12s ease;
}
input[type="submit"]:not(.blue):not(.red):not(.green):not([class*="btn-"]),
button[type="submit"]:not(.blue):not(.red):not(.green):not([class*="btn-"]),
button:not([type]):not(.btn):not(.blue):not(.red):not(.green):not([class*="btn-"]) {
    background: rgba(56,197,151,.13);
    border: 1px solid rgba(56,197,151,.30);
    color: #157a5a;
}
input[type="submit"]:not(.blue):not(.red):not(.green):not([class*="btn-"]):hover,
button[type="submit"]:not(.blue):not(.red):not(.green):not([class*="btn-"]):hover,
button:not([type]):not(.btn):not(.blue):not(.red):not(.green):not([class*="btn-"]):hover {
    background: rgba(56,197,151,.20);
    color: #157a5a;
}
input[type="submit"]:focus,
button[type="submit"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--ae-accent-tint);
}

/* Neutral default button → clean white with subtle border (not a brand colour) */
.btn-default, .btn.white {
    background: var(--ae-surface) !important;
    border: 1px solid var(--ae-border-strong) !important;
    color: var(--ae-text) !important;
}
.btn-default:hover { background: #f3f5f8 !important; }

/* Primary keeps whatever brand colour the theme set; only reshaped above.
   Give focus a consistent accent ring. */
.btn:focus, .btn:active:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--ae-accent-tint) !important;
}

/* ---- Forms ------------------------------------------------------------- */
.form-control {
    border: 1px solid var(--ae-border-strong) !important;
    border-radius: var(--ae-radius-sm) !important;
    box-shadow: none !important;
    color: var(--ae-text);
    height: 38px;
    padding: 7px 12px;
    transition: border-color .12s ease, box-shadow .12s ease;
}
textarea.form-control { height: auto; }
.form-control:focus {
    border-color: var(--ae-accent) !important;
    box-shadow: 0 0 0 3px var(--ae-accent-tint) !important;
}
.control-label, label { color: var(--ae-text); font-weight: 500; }
.input-group-addon {
    background: #f3f5f8 !important;
    border: 1px solid var(--ae-border-strong) !important;
    border-radius: var(--ae-radius-sm) !important;
    color: var(--ae-text-muted) !important;
}

/* ---- Tables ------------------------------------------------------------ */
.table { color: var(--ae-text); }
.table > thead > tr > th {
    background: #f7f9fb !important;
    border-bottom: 1px solid var(--ae-border-strong) !important;
    color: var(--ae-text-muted) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11.5px;
    letter-spacing: .03em;
    padding: 11px 14px;
}
.table > tbody > tr > td {
    border-top: 1px solid var(--ae-border) !important;
    padding: 11px 14px;
    vertical-align: middle;
}
.table-hover > tbody > tr:hover { background: var(--ae-accent-tint) !important; }
.table-bordered, .table-bordered > tbody > tr > td, .table-bordered > thead > tr > th {
    border-color: var(--ae-border) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) { background: #fafbfc !important; }

/* ---- Badges, labels, alerts ------------------------------------------- */
.badge, .label {
    border-radius: 999px !important;
    font-weight: 600 !important;
    padding: 3px 9px !important;
    text-shadow: none !important;
}
.alert {
    border: 1px solid var(--ae-border) !important;
    border-radius: var(--ae-radius) !important;
    box-shadow: none !important;
}

/* ---- Dropdowns / modals ------------------------------------------------ */
.dropdown-menu {
    border: 1px solid var(--ae-border) !important;
    border-radius: var(--ae-radius) !important;
    box-shadow: var(--ae-shadow-md) !important;
    padding: 6px !important;
}
.dropdown-menu > li > a {
    border-radius: var(--ae-radius-sm) !important;
    padding: 8px 12px !important;
    color: var(--ae-text) !important;
}
.dropdown-menu > li > a:hover { background: var(--ae-accent-tint) !important; color: var(--ae-primary) !important; }
.modal-content {
    border: 0 !important;
    border-radius: var(--ae-radius) !important;
    box-shadow: 0 20px 48px rgba(16,24,40,.22) !important;
}
.modal-header, .modal-footer { border-color: var(--ae-border) !important; }

/* ---- Top navbar: flatten, keep brand colour, add soft depth ------------ */
.page-header.navbar {
    background-image: none !important;
    border-bottom: 0 !important;
    box-shadow: 0 1px 3px rgba(16,24,40,.10) !important;
}

/* ---- Sidebar: subtle, with a teal accent on the active item ------------ */
.page-sidebar, .page-sidebar-menu {
    background-image: none !important;
}
.page-sidebar-menu > li > a { transition: background-color .12s ease; }
.page-sidebar-menu > li.active > a,
.page-sidebar-menu > li.active.open > a {
    box-shadow: inset 3px 0 0 var(--ae-accent) !important;
}

/* ---- Tabs -------------------------------------------------------------- */
.nav-tabs { border-bottom: 1px solid var(--ae-border) !important; }
.nav-tabs > li > a { border: 0 !important; color: var(--ae-text-muted) !important; border-radius: 0 !important; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--ae-primary) !important;
    border: 0 !important;
    border-bottom: 2px solid var(--ae-accent) !important;
    background: transparent !important;
}

/* ---- Pagination -------------------------------------------------------- */
.pagination > li > a, .pagination > li > span {
    color: var(--ae-text);
    border-color: var(--ae-border) !important;
}
.pagination > .active > a, .pagination > .active > span {
    background: var(--ae-primary) !important;
    border-color: var(--ae-primary) !important;
}