/*
* DENR XI e-Admin Portal theme. Replaces AdminLTE's adminlte.min.css.
* Source design: travelleave.html prototype.
* Load order: Bootstrap 4.6 CSS -> plugin CSS -> this file (it overrides both).
*
* Sections
* 1. Design tokens
* 2. Base
* 3. App shell: topbar, sidebar, main
* 4. Sidebar menu (styles the existing AdminLTE .nav-sidebar markup)
* 5. Prototype components: page heading, panel, stat card, badge, tabs, form grid, buttons, tables, callout, toast
* 6. Bootstrap / AdminLTE compatibility: card, small-box, content-header, bg-gradient-*, form-control, btn, table, modal
* 7. Responsive
* 8. Print
*/
/* 1. Design tokens ------------------------------------------------------- */
:root{
--forest:#174d36; /* brand green: headings, active text */
--forest-deep:#103c2b; /* topbar background */
--leaf:#2d7651; /* primary buttons, active indicator, focus */
--mint:#eaf3ed; /* active nav background, icon tiles */
--gold:#c59a3d; /* callout border, accents */
--ink:#1e2a23; /* body text */
--muted:#68766e; /* secondary text */
--faint:#8b968f; /* tertiary text */
--line:#dfe6e0; /* borders */
--paper:#fff; /* panel background */
--canvas:#f3f5f1; /* page background */
--red:#b4453f; /* danger */
--blue:#2c6383; /* info / secondary action */
--btn-green:#4fae7a; /* button background (light green), white text */
--btn-green-hover:#3d9466;/* button hover / pressed */
--shadow:0 8px 24px rgba(26,54,38,.07);
--radius:8px;
--topbar-h:68px;
--sidebar-w:248px;
}
/* 2. Base ---------------------------------------------------------------- */
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body.ea-body{font-family:'DM Sans',system-ui,sans-serif;color:var(--ink);background:var(--canvas);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
.ea-body h1,.ea-body h2,.ea-body h3,.ea-body h4,.ea-body h5,.ea-body h6{font-family:Manrope,'DM Sans',sans-serif;color:#1f3026}
/* Links only; buttons made from keep their own white text. */
.ea-body a:not(.btn):not(.ea-btn):not(.dt-button){color:var(--leaf)}
.ea-body a:not(.btn):not(.ea-btn):not(.dt-button):hover{color:var(--forest-deep)}
.hidden{display:none!important}
/* 3. App shell ----------------------------------------------------------- */
.topbar{height:var(--topbar-h);background:var(--forest-deep);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 27px;position:sticky;top:0;z-index:1030;box-shadow:0 2px 12px #123b2b30}
.brand{display:flex;align-items:center;gap:13px;min-width:0;color:#fff!important;text-decoration:none!important}
.seal{width:42px;height:42px;border-radius:50%;border:1px solid #ffffff70;background:#fff;object-fit:cover;padding:2px;flex:none}
.brand-name{font:700 14px/1.25 Manrope,sans-serif}
.brand-sub{font-size:10px;opacity:.72;letter-spacing:.8px;text-transform:uppercase;margin-top:3px}
.top-actions{display:flex;align-items:center;gap:18px;position:relative}
.icon-button{position:relative;width:38px;height:38px;border:0;border-radius:6px;background:transparent;color:#fff;font-size:16px;display:inline-grid;place-items:center;cursor:pointer}
.icon-button:hover{background:#ffffff16}
.notification-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;border:2px solid var(--forest-deep);background:#e6b74e;border-radius:50%}
.notification-menu{position:absolute;right:120px;top:50px;width:290px;padding:14px;background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:7px;display:none}
.notification-menu.open{display:block}
.notification-menu h3{font:700 12px Manrope,sans-serif;margin:0 0 9px}
.notification-menu p{font-size:11px;color:var(--muted);padding:8px 0;border-top:1px solid #edf0ed;margin:0}
.profile{display:flex;align-items:center;gap:10px;padding-left:17px;border-left:1px solid #ffffff30;color:#fff!important;text-decoration:none!important}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#d8e9dd;color:var(--forest);font-weight:700;font-size:12px;overflow:hidden;flex:none}
.avatar img{width:100%;height:100%;object-fit:cover}
.profile-name{font-weight:600;font-size:12px}
.profile-role{font-size:10px;opacity:.72}
.mobile-menu{display:none}
.app-layout{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:calc(100vh - var(--topbar-h))}
.sidebar{background:#fff;border-right:1px solid var(--line);padding:22px 13px 20px;position:sticky;top:var(--topbar-h);height:calc(100vh - var(--topbar-h));overflow:auto;display:flex;flex-direction:column}
.side-label{padding:2px 11px 9px;color:#89948d;font-size:10px;text-transform:uppercase;letter-spacing:1.1px;font-weight:700}
.sidebar-bottom{margin-top:auto;padding:15px 10px 0;border-top:1px solid var(--line);color:#7b8880;font-size:10px}
.status-line{display:flex;align-items:center;gap:7px;color:#4d7259;margin-bottom:8px}
.status-line:before{content:'';width:7px;height:7px;border-radius:50%;background:#479863;box-shadow:0 0 0 3px #e8f3eb}
.sidebar-backdrop{display:none}
.main{min-width:0;padding:28px clamp(18px,3.3vw,48px) 54px;max-width:1600px;width:100%;margin:0 auto}
.app-footer{margin-top:40px;padding-top:15px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--muted)}
/* 4. Sidebar menu --------------------------------------------------------
* sidebar.blade.php keeps AdminLTE's markup:
* nav > ul.nav-sidebar > li.nav-item[.menu-open] > a.nav-link > i.nav-icon + p (+ i.right)
* > ul.nav-treeview > li.nav-item > a.nav-link
* The rules below give it the prototype's .nav-item look. */
.nav-list{display:grid;gap:3px;margin-bottom:6px}
.nav-item-link,.sidebar .nav-sidebar>.nav-item>.nav-link{display:flex;align-items:center;gap:12px;width:100%;min-height:41px;padding:9px 11px;border:0;background:transparent;color:#526158;text-align:left;border-radius:6px;font-size:12px;font-weight:600;text-decoration:none;transition:background .15s,color .15s}
.nav-item-link i,.sidebar .nav-sidebar .nav-icon{width:17px;text-align:center;font-size:14px;color:#758279;flex:none}
.nav-item-link:hover,.sidebar .nav-sidebar .nav-link:hover{background:#f2f6f2;color:var(--forest)}
.nav-item-link.is-active,.sidebar .nav-sidebar .nav-link.is-active{background:var(--mint);color:var(--forest);box-shadow:inset 3px 0 var(--leaf)}
.nav-item-link.is-active i,.sidebar .nav-sidebar .nav-link.is-active .nav-icon{color:var(--leaf)}
.sidebar nav{margin:0!important}
.sidebar .nav-sidebar{list-style:none;margin:0 0 3px;padding:0;display:block}
.sidebar .nav-sidebar .nav-item{list-style:none}
.sidebar .nav-sidebar p{margin:0;flex:1;display:flex;align-items:center;justify-content:space-between;gap:6px}
.sidebar .nav-sidebar .right{font-size:10px;transition:transform .2s;color:#9aa49d}
.sidebar .nav-sidebar .menu-open>.nav-link .right{transform:rotate(-90deg)}
.sidebar .nav-treeview{list-style:none;margin:2px 0 6px;padding:0 0 0 18px;display:none;border-left:1px solid var(--line);margin-left:19px}
.sidebar .menu-open>.nav-treeview{display:block}
.sidebar .nav-treeview .nav-link{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:5px;color:#5b6a60;font-size:11.5px;font-weight:500;text-decoration:none}
.sidebar .nav-treeview .nav-icon{font-size:7px;width:10px}
.sidebar .nav-sidebar .badge{font-size:9px}
/* 5. Prototype components ----------------------------------------------- */
.page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:23px}
.eyebrow{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--leaf);font-weight:700}
.page-title{font:800 25px/1.2 Manrope,sans-serif;margin:5px 0;color:#1f3026}
.page-description{color:var(--muted);font-size:12px;margin-top:6px}
.date-chip{border:1px solid var(--line);border-radius:6px;background:#fff;padding:8px 11px;color:#526158;font-size:11px;white-space:nowrap}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 2px 8px #193e2a08;margin-bottom:16px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 19px;border-bottom:1px solid var(--line)}
.panel-title{font:700 13px Manrope,sans-serif;margin:0}
.panel-caption{font-size:11px;color:var(--muted);margin-top:3px}
.panel-body{padding:18px 19px}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:17px}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;position:relative;min-height:104px}
.stat-label{font-size:11px;color:var(--muted);font-weight:600}
.stat-value{font:800 24px/1.25 Manrope,sans-serif;margin-top:9px}
.stat-note{font-size:10px;color:#859189;margin-top:3px}
.stat-icon{position:absolute;right:15px;top:15px;width:31px;height:31px;display:grid;place-items:center;border-radius:6px;background:var(--mint);color:var(--leaf)}
.ea-badge{display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:4px 8px;font-size:9px;font-weight:700;white-space:nowrap}
.ea-badge.pending{background:#fff4db;color:#916411}
.ea-badge.approved{background:#e6f3e9;color:#2c7144}
.ea-badge.rejected{background:#fbe8e7;color:#a43e39}
.ea-badge.neutral{background:#edf0ee;color:#657169}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:-2px 0 20px;overflow:auto}
.tab{position:relative;white-space:nowrap;background:transparent;border:0;padding:10px 13px;color:#68766e;font-size:11px;font-weight:700;text-decoration:none}
.tab.active{color:var(--forest)}
.tab.active:after{content:'';position:absolute;bottom:-1px;height:2px;background:var(--leaf);left:9px;right:9px}
.form-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px 15px}
.field{grid-column:span 6;min-width:0}
.field.third{grid-column:span 4}
.field.quarter{grid-column:span 3}
.field.wide{grid-column:span 8}
.field.full{grid-column:1/-1}
.field label,.field-label{display:block;color:#33443a;font-size:11px;font-weight:700;margin-bottom:5px}
.required{color:var(--red)}
.control{width:100%;min-height:39px;border:1px solid #cfd9d1;background:#fff;color:var(--ink);border-radius:5px;padding:8px 10px;outline:none;font-size:12px;transition:border .15s,box-shadow .15s}
.control:focus{border-color:#6f9a7b;box-shadow:0 0 0 3px #2d76511a}
.control[readonly],.control:disabled{background:#f3f5f3;color:#66736b}
.control.textarea{min-height:83px;resize:vertical}
.helper{font-size:10px;color:#79867e;margin-top:4px}
.helper.red{color:#ad4a42}
.control.is-invalid{border-color:var(--red)}
.control.is-invalid:focus{box-shadow:0 0 0 3px #b4453f22}
.field-error{font-size:11px;color:var(--red);margin-top:4px}
.section-label{grid-column:1/-1;padding:6px 0 0;border-top:1px solid #e8ede9;color:#526258;font-size:10px;text-transform:uppercase;letter-spacing:.7px;font-weight:700}
.upload-box{border:1px dashed #b8c8bc;background:#fafcf9;border-radius:5px;padding:12px}
.form-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:20px;padding-top:15px;border-top:1px solid #e8ede9}
.ea-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;border:1px solid transparent;border-radius:5px;padding:8px 13px;font-size:11px;font-weight:700;cursor:pointer;text-decoration:none}
.ea-btn.primary,.ea-btn.blue,.ea-btn.muted{background:var(--btn-green);border-color:var(--btn-green);color:#fff}
.ea-btn.primary:hover,.ea-btn.blue:hover,.ea-btn.muted:hover{background:var(--btn-green-hover);border-color:var(--btn-green-hover);color:#fff}
.ea-btn.danger{background:var(--red);color:#fff}
.ea-btn.small{min-height:29px;padding:5px 9px;font-size:10px}
.table-wrap{overflow:auto}
.table-empty{text-align:center;color:#7b8880;padding:30px 10px}
.callout{border-left:3px solid var(--gold);background:#fbf8ef;color:#675a37;padding:10px 12px;font-size:11px;margin:12px 0;border-radius:0 5px 5px 0}
.quick-actions{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.quick-action{display:flex;align-items:center;gap:11px;padding:14px 13px;border:1px solid var(--line);background:#fff;border-radius:6px;font-weight:600;font-size:12px;color:#3e5045!important;text-decoration:none!important}
.quick-action:hover{border-color:#9cb9a3;background:#f9fcf9}
.quick-action i{color:var(--leaf);font-size:15px;width:20px;text-align:center}
/* App tiles (dashboard modules): white panel, mint icon tile, title, text, action at the bottom. */
.app-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.ea-body a.app-tile,.app-tile{display:flex;flex-direction:column;gap:14px;min-height:190px;padding:20px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 2px 8px #193e2a08;color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.ea-body a.app-tile:hover{border-color:#9cb9a3;box-shadow:var(--shadow);transform:translateY(-2px);color:var(--ink)}
.ea-body a.app-tile:focus-visible{outline:3px solid #4fae7a66;outline-offset:2px}
.app-tile-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:10px;background:var(--mint);color:var(--leaf);font-size:20px;flex:none}
.app-tile-body{display:flex;flex-direction:column;gap:6px;flex:1}
.app-tile-title{font:700 15px/1.3 Manrope,sans-serif;color:#1f3026}
.app-tile-text{font-size:12px;line-height:1.55;color:var(--muted)}
.app-tile-text .ea-badge{margin-left:2px;vertical-align:1px}
.app-tile-link{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--leaf)}
.app-tile-link i{font-size:11px}
.app-tile.is-disabled{background:#fafcf9;cursor:default}
.app-tile.is-disabled .app-tile-icon{background:#edf0ee;color:#8b968f}
/* OLAPS dashboard leave balances (livewire/olaps-index.blade.php): up to five cards in one row. */
.stats-grid.olaps-balances{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.stat-unit{font-size:12px;font-weight:600;color:var(--muted)}
/* OLAPS approver dashboard (livewire/approver-dashboard.blade.php): stat cards act as tabs. */
.stats-grid.ad-tabs{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.ad-tab{display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.ad-tab .stat-label,.ad-tab .stat-value,.ad-tab .stat-note{display:block}
.ad-tab:hover{border-color:#9cb9a3}
.ad-tab:focus-visible{outline:3px solid #4fae7a66;outline-offset:2px}
.ad-tab.is-active{border-color:var(--leaf);box-shadow:0 0 0 2px #2d765122}
.ad-tab.is-active .stat-icon{background:var(--leaf);color:#fff}
.ad-search{width:min(300px,100%)}
@media(max-width:560px){.panel-head:has(.ad-search){flex-direction:column;align-items:stretch}.ad-search{width:100%}}
/* OLAPS leave review (livewire/viewleave.blade.php). */
.rv-status{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;margin-bottom:16px}
.rv-status.is-yours{border-color:var(--leaf);box-shadow:0 0 0 2px #2d765118}
.rv-status-text{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;min-width:0}
.rv-status-actions{display:flex;flex-wrap:wrap;gap:8px}
.rv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);gap:16px;align-items:start}
.rv-main,.rv-side{min-width:0}
.rv-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;margin:0}
.rv-dl.one{grid-template-columns:1fr}
.rv-dl dt{font-size:10.5px;font-weight:700;letter-spacing:.35px;text-transform:uppercase;color:var(--muted);margin:0 0 2px}
.rv-dl dd{margin:0;font-size:13px;color:var(--ink);overflow-wrap:anywhere}
.rv-dates{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.rv-date{font-size:11px;background:var(--mint);color:var(--forest);border-radius:5px;padding:4px 8px}
.rv-balance{margin-bottom:0}
.rv-doc{display:block;width:100%;height:70vh;min-height:420px;border:0;border-top:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius)}
.rv-person{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}
.rv-avatar{width:52px;height:52px;border-radius:50%;background:var(--mint);color:var(--leaf);display:grid;place-items:center;font:800 16px Manrope,sans-serif;overflow:hidden;flex:none}
.rv-avatar img{width:100%;height:100%;object-fit:cover}
.rv-name{font:700 14px Manrope,sans-serif;color:var(--ink)}
.rv-steps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.rv-step{display:flex;gap:10px;position:relative;padding-bottom:14px;font-size:12px}
.rv-step:not(:last-child)::before{content:"";position:absolute;left:10px;top:22px;bottom:2px;width:2px;background:var(--line)}
.rv-dot{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:10px;border:2px solid var(--line);background:var(--paper);color:#fff;position:relative;z-index:1}
.rv-step.done .rv-dot{background:var(--leaf);border-color:var(--leaf)}
.rv-step.current .rv-dot{border-color:var(--gold);box-shadow:0 0 0 3px #c59a3d33}
.rv-step.stopped .rv-dot{background:var(--red);border-color:var(--red)}
.rv-step.upcoming strong{color:var(--muted);font-weight:600}
@media(max-width:900px){.rv-grid{grid-template-columns:1fr}}
@media(max-width:560px){.rv-dl{grid-template-columns:1fr}.rv-status-actions{width:100%}.rv-status-actions .ea-btn{flex:1}}
/* OLAPS HR leave report (livewire/leave-report-page.blade.php). */
.lr-picked{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;font-size:13px}
.lr-results{list-style:none;margin:8px 0 0;padding:0;border:1px solid var(--line);border-radius:6px;max-height:320px;overflow:auto}
.lr-results li + li{border-top:1px solid var(--line)}
.lr-results button{display:block;width:100%;text-align:left;background:var(--paper);border:0;padding:9px 12px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer}
.lr-results button:hover,.lr-results button:focus-visible{background:var(--mint);outline:none}
.lr-results .lc-sub{display:block}
.lr-none{padding:10px 12px;font-size:12px;color:var(--muted)}
.lr-name{font:800 22px/1.25 Manrope,sans-serif;color:var(--forest);margin:4px 0 14px}
.lr-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
.lr-section{font:700 13px Manrope,sans-serif;color:var(--forest);margin:4px 0 10px}
.lr-num td:not(:first-child),.lr-num th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.lr-num tfoot th{border-top:2px solid var(--line);color:var(--ink);font-size:12px;text-transform:none;letter-spacing:0;background:transparent}
.lr-months{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;align-items:end}
.lr-month{display:grid;justify-items:center;gap:3px;font-size:10.5px;color:var(--muted)}
.lr-bar-wrap{display:flex;align-items:flex-end;width:100%;max-width:28px;height:90px;background:#f3f6f3;border-radius:4px;overflow:hidden}
.lr-bar{display:block;width:100%;background:var(--btn-green);border-radius:4px 4px 0 0}
.lr-month-n{font-weight:700;color:var(--ink);min-height:14px;font-variant-numeric:tabular-nums}
@media(max-width:760px){.lr-facts{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.lr-facts{grid-template-columns:1fr}.lr-months{gap:3px}.lr-bar-wrap{height:64px}}
@media print{.lr-head .panel-body{padding-left:0;padding-right:0}.lr-bar{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
/* OLAPS holiday calendar (livewire/holiday-manager.blade.php). */
.hm-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:flex-end}
.hm-year{width:auto;min-width:90px}
.hm-scopes{display:flex;flex-wrap:wrap;gap:8px 18px}
.hm-scope{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#33443a;margin:0;cursor:pointer}
/* Secondary button: white with a border, for Cancel / Close next to a green primary. */
.ea-btn.secondary{background:#fff;border-color:#cfd9d1;color:#33443a}
.ea-btn.secondary:hover{background:#f3f6f3;color:#1f3026}
/* OLAPS leave credits (livewire/leavecredits.blade.php): table sub-lines and the edit dialog. */
.lc-filters{margin:0}
.lc-sub{font-size:11px;color:var(--muted);margin-top:2px}
.lc-note{font-size:12px;color:var(--muted);margin:0 0 14px}
.lc-backdrop{position:fixed;inset:0;z-index:1050;background:#10271b73;display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px 16px;overflow:auto}
.lc-dialog{width:min(560px,100%);margin:0;box-shadow:0 24px 70px #10271b40}
.lc-dialog .icon-button{color:#56645b;width:32px;height:32px;font-size:14px}
.lc-dialog .icon-button:hover{background:#f2f6f2}
.lc-actions{display:flex;justify-content:flex-end;gap:8px;padding:14px 19px;border-top:1px solid var(--line)}
@media(max-width:560px){.lc-dialog .field{grid-column:1/-1}}
.toast-ea{position:fixed;right:23px;bottom:22px;background:#183e2e;color:#fff;padding:12px 16px;border-radius:6px;box-shadow:var(--shadow);font-size:12px;z-index:2000;opacity:0;transform:translateY(8px);pointer-events:none;transition:all .2s}
.toast-ea.show{opacity:1;transform:translateY(0)}
/* 6. Bootstrap / AdminLTE compatibility ---------------------------------
* Existing pages still use Bootstrap 4 + AdminLTE classes. These rules make
* them look like the prototype without editing ~180 views. */
.content-header{padding:0 0 14px}
.content-header h1{font:800 22px/1.2 Manrope,sans-serif;margin:0}
.content{padding:0}
.card{background:var(--paper);border:1px solid var(--line)!important;border-radius:var(--radius);box-shadow:0 2px 8px #193e2a08;margin-bottom:16px}
.card-header{background:#fff;border-bottom:1px solid var(--line);padding:15px 19px;font:700 13px Manrope,sans-serif;color:#1f3026}
.card-header .card-title{font:700 13px Manrope,sans-serif;margin:0;float:left}
.card-header:after{content:'';display:table;clear:both}
.card-tools{float:right}
.card-body{padding:18px 19px}
.card-footer{background:#fafcf9;border-top:1px solid var(--line);padding:12px 19px}
/* AdminLTE colour variants become a thin top accent instead of a solid header. */
.card-primary,.card-success,.card-info,.card-warning,.card-danger,.card-secondary,.card-dark{border-top:3px solid var(--leaf)!important}
.card-info{border-top-color:var(--blue)!important}
.card-warning{border-top-color:var(--gold)!important}
.card-danger{border-top-color:var(--red)!important}
.card-secondary,.card-dark{border-top-color:#657169!important}
.card-primary:not(.card-outline)>.card-header,.card-success:not(.card-outline)>.card-header,.card-info:not(.card-outline)>.card-header,.card-danger:not(.card-outline)>.card-header{background:#fff;color:#1f3026}
.card-img-overlay .card-title{font-family:Manrope,sans-serif}
/* small-box (AdminLTE dashboard tile) -> stat card */
.small-box{position:relative;display:block;background:#fff!important;color:var(--ink)!important;border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px 0;margin-bottom:16px;overflow:hidden}
.small-box>.inner h3{font:800 24px/1.25 Manrope,sans-serif;margin:0 0 4px;color:var(--ink)}
.small-box>.inner p{font-size:11px;color:var(--muted);font-weight:600;margin:0 0 12px}
.small-box .icon{position:absolute;right:15px;top:15px;width:34px;height:34px;display:grid;place-items:center;border-radius:6px;background:var(--mint);color:var(--leaf)}
.small-box .icon>i{font-size:15px!important;position:static!important}
.small-box>.small-box-footer{display:block;margin:0 -16px;padding:7px 16px;border-top:1px solid var(--line);background:#fafcf9;color:var(--leaf)!important;font-size:11px;font-weight:700;text-decoration:none}
.small-box.bg-info .icon{background:#e6eff5;color:var(--blue)}
.small-box.bg-warning .icon{background:#fff4db;color:#916411}
.small-box.bg-danger .icon{background:#fbe8e7;color:var(--red)}
/* AdminLTE gradient helpers used on the home tiles */
.bg-gradient-dark{background:linear-gradient(180deg,#24352b,#14231a)!important;color:#fff}
.bg-gradient-success{background:linear-gradient(180deg,var(--leaf),var(--forest))!important;color:#fff}
.img-circle{border-radius:50%}
.elevation-2,.elevation-3,.elevation-4{box-shadow:var(--shadow)}
/* Forms */
.form-control,.custom-select{border:1px solid #cfd9d1;border-radius:5px;font-size:13px;color:var(--ink);min-height:39px}
.form-control:focus,.custom-select:focus{border-color:#6f9a7b;box-shadow:0 0 0 3px #2d76511a}
.form-control[readonly],.form-control:disabled{background:#f3f5f3}
.form-group label,label{font-size:12px;font-weight:700;color:#33443a}
.select2-container--default .select2-selection--single,.select2-container--default .select2-selection--multiple{border-color:#cfd9d1!important;border-radius:5px!important;min-height:39px}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:37px}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:37px}
/* Buttons: light green with white text. Danger stays red so destructive actions stand out. */
.btn{border-radius:5px;font-size:12px;font-weight:700}
.btn-primary,.btn-success,.btn-info,.btn-warning,.btn-secondary,.btn-default,.btn-outline-primary,.btn-outline-success,.btn-outline-secondary{background:var(--btn-green);border:1px solid var(--btn-green);color:#fff}
.btn-primary:hover,.btn-success:hover,.btn-info:hover,.btn-warning:hover,.btn-secondary:hover,.btn-default:hover,.btn-outline-primary:hover,.btn-outline-success:hover,.btn-outline-secondary:hover,
.btn-primary:focus,.btn-success:focus,.btn-info:focus,.btn-warning:focus,.btn-secondary:focus,.btn-default:focus,.btn-outline-primary:focus,.btn-outline-success:focus,.btn-outline-secondary:focus,
.btn-primary:not(:disabled):not(.disabled):active,.btn-success:not(:disabled):not(.disabled):active{background:var(--btn-green-hover);border-color:var(--btn-green-hover);color:#fff}
.btn:focus{box-shadow:0 0 0 3px #4fae7a40}
/* Same look as .ea-btn.primary for and