/* removed debug overrides */
:root{
--bg:#f7f9fc;--panel:#ffffff;--panel-2:#f1f5fb;--text:#0f172a;--muted:#475569;--border:#d8deee;
--purple:#6b5bff;--blue:#2563eb;--pink:#ec4899;--shadow:0 12px 24px rgba(16,24,40,.08),0 4px 10px rgba(16,24,40,.06)
}
/* (dashboard-specific calendar and upcoming events styles moved to css/pages/dashboard.css) */
/* Grid utility for full-width panels */
.grid > .full-span{grid-column:1 / -1}
/* Utility */
.pull-right{float:right}
*{box-sizing:border-box}
body{margin:0;background: linear-gradient(179deg, #0f172a, #0f172a);box-shadow:2px 0 8px rgba(16,24,40,.04);font-family:Inter,Segoe UI,Arial,sans-serif;overflow-x:hidden}
.layout{display:flex;min-height: 110vh;}
.sidebar{width:230px;background:#ffffff;display:flex;padding:28px 3px;border-right:1px solid var(--border);justify-content: space-evenly;flex-wrap: wrap;flex-direction: row;align-items: flex-start;align-content: flex-start;}
.sidebar{background: linear-gradient(180deg, #fc7601, #ffffff);box-shadow:2px 0 8px rgba(16,24,40,.04)}
.brand{color:var(--text);font-weight:800;margin-bottom:26px;margin-left: 14px;font-size:20px}
aside.sidebar nav > a[href="/"] { padding: 2px 14px !important; }
/* .sidebar nav a{display:flex;align-items:center;gap:10px;color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:12px;margin-bottom:6px;transition:all .2s} */
.sidebar nav > a { padding: 8px 10px; border-radius: 8px; margin: 2px 4px; color: var(--text-1); text-decoration: none; display:flex; align-items:center; gap:8px; box-sizing:border-box; min-height:36px; width: calc(100% - 8px); border:1px solid transparent; }
.sidebar .section-label{margin:8px 10px 6px 10px;font-size:11px;font-weight:700;color:#94a3b8;letter-spacing:.04em;text-transform:uppercase}
.sidebar nav > a:first-child{margin-top:0 !important;background:#f1f5fb;color:#0f172a;border-color:#c9d6ff}
.sidebar nav a.active{background:#eef2ff;color:#0f172a;border-color:#c9d6ff}
.sidebar nav > a:hover {background: #ffffff;}
/* Subtle active state (no box-shadow to avoid width shift) */
/* keep same visuals without extra outline */
.sidebar nav a:focus,.sidebar nav a:active{outline:none;box-shadow:none}
.nav-group{margin-bottom:0px}
.nav-parent{width:100%;text-align:left;background:transparent;border:1px solid transparent;color:var(--muted);padding:10px 14px;border-radius:12px;cursor:pointer;display:flex;justify-content:flex-start;align-items:center; box-sizing:border-box;}
.nav-parent .caret{transition:transform .25s ease}
.nav-group.open .nav-parent{background:#eef2ff;color:#0f172a;border-color:#c9d6ff}
.nav-group.open .caret{transform:rotate(180deg)}
.nav-children{max-height:0;opacity:0;overflow:hidden;padding-left:8px;margin-top:0px;transition:max-height .3s ease,opacity .25s ease, transform .25s ease;transform:translateY(-6px);pointer-events:none;border-radius:8px;border:1px solid transparent;background:transparent}
.nav-group.open .nav-children{max-height:500px;opacity:1;transform:translateY(0);pointer-events:auto;border-color:#d8deee;background:#ffffff}
/* Child links look like dropdown items */
.sidebar nav .nav-children a{border-radius:8px;margin:2px 6px;padding: 8px 14px;}
/* Light theme: white dropdown surface */
body.theme-light .nav-group.open .nav-children{background:#ffffff;border-color:#d8deee}
/* Staggered link reveal on mobile open */
.sidebar nav a{transition:opacity .28s ease, transform .28s ease}
body.sidebar-opening .sidebar nav a{opacity:0;transform:translateX(-8px)}
body.sidebar-open .sidebar nav a{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 40ms),padding;}
.logout{margin-top:auto}
.content{flex:1;padding: 76px 10px 0px 10px;transition:transform .3s ease;max-width:100%;min-width:0;box-sizing:border-box;overflow-x:hidden}
.topbar{display:flex;justify-content:space-between;align-items:center;position:fixed;top:0;left:0;right:0;height: 60px;z-index:900;background: #fc7601;/* border-bottom:1px solid var(--border); */padding:0 0;}
.topbar .left{margin-left: 26px; display:flex;align-items:center;gap:16px}
.topbar .center{flex:1;display:flex;align-items:center;justify-content:center;padding:0 16px;pointer-events:none}
.topbar .center .ph-title{font-weight:700;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-title{font-weight:800}
.search{position:relative;background:#ffffff;border:1px solid #d8deee;border-radius:12px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 18px rgba(0, 0, 0, 0.06);transition:all .3s ease;overflow:visible;z-index:951;}
.search:focus-within{box-shadow:0 10px 22px rgba(16,24,40,.1)}
.search:focus-within{box-shadow:0 10px 22px rgba(16,24,40,.1)}
/* Hover animation state toggled by JS for cursor-over animation */
.search.hover{box-shadow:0 14px 32px rgba(0,0,0,.5); transform:translateY(-1px)}
/* Also support pure CSS hover for reliability */
.search:hover{box-shadow:none; transform:none}
/* Icon (pure CSS, no HTML changes) */
.search::before{content:"";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;transition:transform .3s ease,opacity .3s ease;opacity:.95;background-color:#94a3b8;-webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center / contain;mask:url("data:image/svg+xml;utf8,") no-repeat center / contain}
.search:focus-within::before{transform:translateY(-50%) scale(1.1);opacity:1;background-color:#93c5fd}
/* Icon reacts on hover too */
.search.hover::before{transform:translateY(-50%) scale(1.08); opacity:1; background-color:#93c5fd}
.search:hover::before{transform:translateY(-50%); opacity:.95; background-color:#94a3b8}
.search input{all:unset;color:var(--text);font-size:16px;min-width: 60px;width:100%;padding: 8px 12px 8px 46px;background:#ffffff;border:1px solid #d8deee;border-radius: 10px;caret-color: #2563eb;transition:border-color .2s ease, box-shadow .2s ease}
.search input::placeholder{color:#94a3b8}
.search input:focus{outline:none;border-color:#a9b8ff;box-shadow:inset 0 0 0 1px rgba(59,130,246,.25), 0 0 0 2px rgba(59,130,246,.18)}
/* Input gains subtle emphasis on hover state */
.search.hover input{border-color:rgba(59,130,246,.45); box-shadow:inset 0 0 0 1px rgba(59,130,246,.25)}
.search:hover input{border-color:#d8deee; box-shadow:none}
/* Keep dark pill even in light theme to match reference */
.search button{all:unset;background:#eef2ff;padding:0 10px;cursor:pointer}
.search-suggest{position:absolute;left:0;right:0;top:100%;margin-top:6px;background:var(--panel);border:1px solid #3a4169;border-radius:12px;box-shadow:var(--shadow);z-index:950;overflow:hidden;display:none}
body.theme-light .search-suggest{border:1px solid #d8deee}
.search-suggest.open{display:block}
.search-suggest .item{padding:10px 12px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--text)}
.search-suggest .item.active{background:#3a4169;color:#fff}
body.theme-light .search-suggest .item.active{background:#eef2ff;color:#0f172a}
.topbar .right{margin-right: 26px; display:flex;align-items:center;gap:12px}
.toggle{width:40px;height:40px;border-radius:999px;background:#ffffff;border:1px solid var(--border);position:relative;transition:background .2s ease,transform .2s ease;color:#0f172a;display:inline-flex;align-items:center;justify-content:center}
.topbar .left .toggle{width:40px;height:40px;border-radius:999px;background:#ffffff;border:1px solid var(--border);color:#0f172a;display:inline-flex;align-items:center;justify-content:center;box-shadow:none}
.topbar .left .toggle:hover{transform:none}
.toggle:hover{transform:none}
.toggle span{position:absolute;left:4px;top:4px;width:18px;height:18px;border-radius:50%;background:#c8ccff;transition:left .2s ease}
/* Theme toggle visuals (right toggle) */
body.theme-light .topbar .right .toggle{background:#d6defc}
body.theme-light .topbar .right .toggle span{left:24px;background:#5b6bff}
.user{width:80px;height:30px;border-radius:12%;background:linear-gradient(135deg,#ffd36e,#ff77c6);display:flex;align-items:center;justify-content:center;font-weight:700}
/* Icon buttons in topbar (search, bell, etc.) */
.topbar .right .break-toggle{
padding:0 12px 0 12px;
gap:6px;
width:auto;
min-width:0;
border-radius:999px;
background:#ffffff;
border:1px solid var(--border);
color:#0f172a;
}
.topbar .right .break-toggle.is-on{
background:#dcfce7;
border-color:#22c55e;
}
.break-toggle .break-label{font-size:12px;font-weight:600;color:#0f172a;transition:color .2s ease}
.break-toggle .break-state{font-size:12px;font-weight:700;color:#6b7280;min-width:26px;text-align:left}
.break-toggle .break-timer{font-size:11px;font-weight:500;color:#6b7280;min-width:42px;text-align:right}
.break-toggle .break-switch{width:32px;height:18px;border-radius:999px;background:#e5e7eb;position:relative;display:inline-flex;align-items:center;padding:2px;transition:background .2s ease;flex-shrink:0}
.break-toggle .break-switch::before{content:"";width:14px;height:14px;border-radius:999px;background:#ffffff;box-shadow:0 1px 2px rgba(15,23,42,.25);transform:translateX(0);transition:transform .2s ease}
.break-toggle.is-on .break-switch{background:#22c55e}
.break-toggle.is-on .break-switch::before{transform:translateX(12px)}
.break-toggle.is-on .break-label{color:#16a34a}
.break-toggle.is-on .break-state{color:#16a34a}
/* Responsive visibility helpers */
.show-mobile{display:inline-flex}
.show-desktop{display:none}
@media(min-width:1201px){
.show-mobile{display:none}
.show-desktop{display:inline-flex}
}
.page{ display:block;animation:fadeInUp .4s ease both; width:100%; max-width:100%; min-width:0; box-sizing:border-box}
/* Large rounded grey canvas like the reference */
body.theme-light .page{background:#f8fafc;border-radius:22px;padding:18px;border:1px solid rgba(15,23,42,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);max-width:100%;overflow:hidden}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px;padding:2px 2px;}
.card{background:var(--panel);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:none}
.card .label{color:var(--muted);font-size:12px;font-weight:600}
.card .value{font-size:26px;font-weight:800;margin-top:6px}
.card.purple{background:linear-gradient(180deg,#2c2f54, #2a2f47); outline:2px solid var(--purple);padding:5px 5px;}
.card.blue{background:linear-gradient(180deg,#25365b, #2a2f47); outline:2px solid var(--blue);padding:5px 5px;}
.card.pink{background:linear-gradient(180deg,#4a2b4a, #2a2f47); outline:2px solid var(--pink);padding:5px 5px;}
/* Light theme card text tweaks for contrast */
body.theme-light .card{background:#eef2f6;border:1px solid #d7deea}
body.theme-light .card .label{color:#5b6478;padding:2px;margin-left:10px}
/* Subtle tinted accents for card variants in light mode */
body.theme-light .card.purple,body.theme-light .card.blue,body.theme-light .card.pink{color:#0f172a;background:#ffffff;border:1px solid #dfe5f2;outline:0}
body.theme-light .card.purple .label,body.theme-light .card.blue .label,body.theme-light .card.pink .label{color:#6a7280}
.grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:18px;width:100%;box-sizing:border-box;align-items:stretch}
.grid > .panel{height:100%}
.grid > *{min-width:0}
.panel{border-radius:19px;padding:15px 9px;box-shadow:var(--shadow);transition:box-shadow .2s ease,transform .2s ease;animation:fadeIn .35s ease both; --text:#000;}
.panel h3{margin:0 0 12px 0; --text:#fff;padding:10px}
.message-container{margin-bottom:12px}
.panel.info{border-left:4px solid #4aa8ff}
.panel.success{border-left:4px solid #28a745}
.panel.error{border-left:4px solid #ff5252}
/* Subtle hover elevation for panels */
.panel:hover{transform:none}
.table{width:100%;border-collapse:collapse;text-align: left;}
/* Allow wide tables to scroll inside panels, not the page */
.panel{overflow-x:auto}
/* Treat generic page children as panels if templates didn't use .panel */
.page > form,
.page > div.auto-panel,
.page > div.section,
.page > div:not(.message-container):not(.grid):not(.cards):not(.panel){
background:var(--panel);
border-radius:16px;
padding:16px 18px;
box-shadow:var(--shadow);
margin-bottom:18px;
}
/* If a table is a direct child, keep spacing consistent */
.page > div > table,
.page > form > table{width:100%;border-collapse:collapse}
/* --- Global form look (matches Add Employee page) --- */
/* Grids inside any page/form */
.panel form .grid, .page form .grid, .content form .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:900px){ .panel form .grid, .page form .grid, .content form .grid{grid-template-columns:1fr} }
/* Field container blocks inside forms (support common wrappers) */
.panel form .grid .btn,
.page form .grid .btn,
.page form .form-group,
.page form > .row > div,
.page form > div.field,
.page form > div.form-row{background:#ffffff;border:1px solid #d8deee;border-radius: 10px;padding: 8px;cursor:default;box-shadow:none;transform:none;gap: 0px;}
.panel form .grid .btn:hover,
.page form .grid .btn:hover{transform:none;background:#ffffff}
.page form label,.panel form label{display:block;font-weight:500;margin-bottom:1px;color: #eef2ff;color: black;height: 10px;display: flex;flex-direction: row;margin-left:10px;padding:10px;justify-content: flex-start;align-content: center;flex-wrap: wrap;align-items: flex-end;}
.page form input[type="text"],
.page form input[type="email"],
.page form input[type="number"],
.page form input[type="date"],
.page form input[type="file"],
.page form select,
.page form textarea,
.panel form input[type="text"],
.panel form input[type="email"],
.panel form input[type="number"],
.panel form input[type="date"],
.panel form input[type="file"],
.panel form select,
.panel form textarea{width:100%;padding: 2px 2px;border:1px solid #d8deee;border-radius:10px;background: rgb(155 255 235 / 35%);color:#0f172a;outline:none;transition:border-color .15s ease, box-shadow .15s ease}
.page form textarea,.panel form textarea{min-height:110px;resize:vertical}
.page form input:focus,
.page form select:focus,
.page form textarea:focus,
.panel form input:focus,
.panel form select:focus,
.panel form textarea:focus{border-color:#a9b8ff;box-shadow:0 0 0 3px rgba(59,130,246,.15)}
/* Keep action buttons styled as pills outside field containers */
.panel form .actions .btn,.panel form > .btn,.page form .actions .btn,.page form > .btn{cursor:pointer;margin-left: 11px; padding:7px}
.table th,.table td{padding:10px 12px;border-bottom:1px solid #cfd6ea;color:#1b1e2b}
.table a{color:var(--blue);text-decoration:none}
/* Light theme table text for readability */
body.theme-light .table th,body.theme-light .table td{border-bottom:1px solid #cfd6ea}
body.theme-light .table a{color:#1d4ed8}
/* Generic icon button (used for notification bell, etc.) */
.icon-btn{
display:inline-flex;
width: 44px;
height: 34px;
border-radius: 11px;
border:1px solid var(--border);
background:#ffffff;
color: #0f172a;
cursor:pointer;
/* padding:0; */
flex-direction: row;
align-items: center;
}
.icon-btn:hover{
background:#ffffff;
}
/* Idle mode label chip ("Idle: Auto/Manual" in headers) */
.idle-mode-chip{
display:inline-flex;
align-items:center;
gap: 2px;
font-size:11px;
color:#000000;
border: 1px solid var(--border);
height: 34px;
/* width: 75px; */
border-radius: 12px;
padding: 4px;
}
.widget{display:grid;grid-template-columns:1fr;gap:12px}
.currency{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:10px}
.btn:hover{transform:none}
.chart{height:180px;border-radius:14px;background:linear-gradient(180deg,#eef2ff,#f8faff);display:flex;align-items:center;justify-content:center;color:#475569}
.progress{display:grid;gap:10px;border-radius:99px}
.rounded-circle {
border-radius: 50% !important;
margin-right: 10px;
}
.table-dark {
color: #fff;
background-color: #f870ef;
}
.bar{height:10px;border-radius:6px;background:#3a4169;position:relative}
.bar .fill{position:absolute;left:0;top:0;height:100%;border-radius:6px}
.fill.blue{background:#4aa8ff;width:52%}
.fill.cyan{background:#6bd2ff;width:21%}
.fill.pink{background:#ff77c6;width:74%}
/* Light visuals for charts and progress */
body.theme-light .chart{background:linear-gradient(180deg,#eef2ff,#f8faff);color:#475569}
body.theme-light .bar{background:#e6ebf5}
body.theme-light .fill.blue{background:#3b82f6}
body.theme-light .fill.cyan{background:#38bdf8}
body.theme-light .fill.pink{background:#ec4899}
/* (login-card styles moved to css/pages/login.css) */
/* Logout button styles */
.logout-btn {
background-color: #e74c3c !important;
color: #fff !important;
border: 2px solid #b03a2e !important;
padding: 2px 8px !important;
border-radius: 6px !important;
cursor: pointer !important;
font-weight: bold !important;
transition: background 0.2s, box-shadow 0.2s !important;
display: inline-block !important;
text-align: center !important;
text-decoration: none !important;
box-shadow: 0 2px 8px rgba(231,76,60,0.15);
margin: 16px 0;
margin-left: 14px;
}
.logout-btn:hover {
background-color: #e74c3c !important;
color: #fff !important;
box-shadow: 0 2px 8px rgba(231,76,60,0.15);
}
.calendar{height:260px;background:#1f2336;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#8aa;box-shadow:inset 0 0 0 1px #323861}
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* Reveal-on-scroll utility (applied via JS) */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease, transform .5s cubic-bezier(.2,.6,.2,1)}
.reveal.in-view{opacity:1;transform:translateY(0); padding: 1px}
/* Ripple effect (JS sets --rx/--ry; no extra DOM nodes required) */
.ripple{position:relative}
.ripple:after{content:"";position:absolute;left:calc(var(--rx,50%) - 0px);top:calc(var(--ry,50%) - 0px);width:0;height:0;border-radius:9999px;background:rgba(255,255,255,.25);transform:translate(-50%,-50%);pointer-events:none}
.ripple.dark:after{background:rgba(0,0,0,.15)}
.rippling:after{animation:ripple .6s ease-out forwards}
@keyframes ripple{0%{width:0;height:0;opacity:.6}100%{width:600px;height:600px;opacity:0}}
/* Responsive sidebar (off-canvas on small screens) */
@media(max-width:1200px){
.layout{position:relative}
.sidebar{position:fixed;left:0;top:0;bottom:0;z-index:1000;transform:translateX(-100%);transition:transform .35s cubic-bezier(.22,.61,.36,1);overflow-y:auto;-webkit-overflow-scrolling:touch}
body.sidebar-open .sidebar{transform:none}
body.sidebar-open{overflow:hidden}
.layout::after{content:"";position:fixed;inset:0;background:linear-gradient(rgba(3,8,20,.2),rgba(3,8,20,.35));backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:900}
body.sidebar-open .layout::after{opacity:1;pointer-events:auto}
}
/* Fixed sidebar on desktop like a master page */
@media(min-width:1201px){
.sidebar{position:fixed;left:0;top:0;bottom:0;height:auto;overflow:auto;-webkit-overflow-scrolling:touch}
.layout{padding-left:230px}
.topbar{left:230px}
}
/* (reverted) no desktop collapsed state */
/* --- Option A: Raise breakpoint to 1600px using body flag .bp-1600 --- */
@media(max-width:1600px){
body.bp-1600 .layout{position:relative}
body.bp-1600 .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:1000;transform:translateX(-100%);transition:transform .35s cubic-bezier(.22,.61,.36,1)}
body.bp-1600.sidebar-open .sidebar{transform:none}
body.bp-1600.sidebar-open{overflow:hidden}
body.bp-1600 .layout::after{content:"";position:fixed;inset:0;background:linear-gradient(rgba(3,8,20,.2),rgba(3,8,20,.35));backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:900}
body.bp-1600.sidebar-open .layout::after{opacity:1;pointer-events:auto}
}
/* --- Option B: Always use drawer at all widths with .drawer-all --- */
body.drawer-all .layout{position:relative}
body.drawer-all .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:1000;transform:translateX(-100%);transition:transform .35s cubic-bezier(.22,.61,.36,1)}
body.drawer-all.sidebar-open .sidebar{transform:none}
body.drawer-all .layout::after{content:"";position:fixed;inset:0;background:linear-gradient(rgba(3,8,20,.2),rgba(3,8,20,.35));backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:900}
body.drawer-all.sidebar-open .layout::after{opacity:1;pointer-events:auto}
/* remove desktop padding when drawer-all */
@media(min-width:1201px){
body.drawer-all .layout{padding-left:0}
body.drawer-all .topbar{left:0}
}
/* --- Option C: Fixed on desktop with subtle attention pulse on toggle --- */
@keyframes sidebarPulse{0%{box-shadow:2px 0 18px rgba(0,0,0,.35)}60%{box-shadow:6px 0 28px rgba(0,0,0,.5)}100%{box-shadow:2px 0 18px rgba(0,0,0,.35)}}
@media(min-width:1201px){
body.sidebar-pulse .sidebar{animation:sidebarPulse .6s ease}
}
/* Responsive grids */
@media(max-width:1200px){.cards{grid-template-columns:1fr}.grid{grid-template-columns:1fr}}
@media(max-width:700px){
.search input{min-width:0;width:160px}
.cards{grid-template-columns:1fr}
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
*{animation:none !important;transition:none !important}
}
/* ================= Standardized Utilities ================= */
/* Buttons */
.btn{--btn-bg:#ffffff;--btn-fg:#0f172a;--btn-bd:#d8deee;--btn-radius:10px;--btn-pad:10px 14px;
background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd);border-radius:var(--btn-radius);padding:var(--btn-pad);cursor:pointer;user-select:none}
.btn.primary{--btn-bg:#2563eb;--btn-fg:#fff}
.btn.ghost{--btn-bg:#ffffff;--btn-bd:#d8deee;color:#0f172a}
.btn.outline{--btn-bg:transparent;--btn-bd:#2563eb;color:#2563eb}
.btn.danger{--btn-bg:#e11d48;--btn-fg:#fff}
.btn.small{--btn-pad:6px 10px;--btn-radius:8px;font-size:12px;background-color:red}
.btn.large{--btn-pad:12px 18px;--btn-radius:12px;font-weight:600}
body.theme-light .btn{--btn-bg:#fff;--btn-fg:#0f172a;--btn-bd:#d8deee;border-radius:999px;padding: 7px;}
body.theme-light .btn.primary{background-color:#2563eb;border-color:#2563eb;color:#ffffff;padding:7px;width: 230px;align-items: center}
body.theme-light .btn.ghost{background-color:#ffffff;border-color:#d8deee;color:#0f172a;margin-bottom:10px; padding:7px}
.btn:disabled{opacity:.6;cursor:not-allowed}
h4 {
color:black;
display: block;
margin-block-start: 1.33em;
margin-block-end: 1.33em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
unicode-bidi: isolate;
margin-left: 10px;
margin-top: 0px;
margin-bottom: 5px;
}
/* Inputs */
.input,.select,.textarea{width:100%;padding:10px 12px;border:1px solid #d8deee;border-radius:10px;background:#ffffff;color:#0f172a;outline:none}
.input:focus,.select:focus,.textarea:focus{border-color:#a9b8ff;box-shadow:0 0 0 3px rgba(147,162,255,.2)}
.input.error,.select.error,.textarea.error{border-color:#f87171;box-shadow:0 0 0 3px rgba(248,113,113,.2)}
body.theme-light .input,body.theme-light .select,body.theme-light .textarea{border:1px solid #d8deee;background:#fff;color:#0f172a}
/* Panel header */
.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px; margin-left:10px; margin-top:10px}
.panel-header .title{color:black;font-size:18px;font-weight:700}
.panel-header .actions{display:flex;gap:8px}
/* Tables */
.table.sticky thead th{position:sticky;top:0;background:var(--panel);z-index:1}
.table.zebra tbody tr:nth-child(odd){background:rgba(255,255,255,.02)}
body.theme-light .table.zebra tbody tr:nth-child(odd){background:#f8fafc}
.table.compact th,.table.compact td{padding:6px 10px}
.table.bordered{border:1px solid #3a4169;border-radius:12px;overflow:hidden}
body.theme-light .table.bordered{border-color:#d8deee}
/* Leave Applications table (employee portal) */
.table-leaves{
font-size:14px;
}
.table-leaves thead th{
background:#f9fafb;
text-transform:uppercase;
letter-spacing:.03em;
font-weight:600;
}
.table-leaves tbody tr:hover{
background:transparent;
}
.table-leaves td:last-child,
.table-leaves th:last-child{
text-align:center;
}
/* Shared employee cell + status badges (used across attendance/employees/dashboard) */
.emp-cell{display:flex;align-items:center;gap:10px}
.avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}
.avatar.placeholder{display:flex;align-items:center;justify-content:center;background:#e2e8f0;color:#475569;font-weight:700}
.emp-cell .meta{display:flex;flex-direction:column;gap:2px}
.emp-cell .name{font-weight:600;color:#0f172a}
.emp-cell .email{font-size:12px;color:#64748b}
.status{padding:4px 8px;border-radius:999px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.status.active{background:#ecfdf3;color:#16a34a;border:1px solid #bbf7d0}
.status.inactive{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}
.status.resigned{background:#fff7ed;color:#f59e0b;border:1px solid #fde68a}
.status.onboarding{background:#f0f9ff;color:#0369a1;border:1px solid #bae6fd}
/* Density helpers */
.density-compact .card,.density-compact .panel{padding:12px}
.density-compact .btn{--btn-pad:8px 12px}
.density-compact .table th,.density-compact .table td{padding:6px 8px}
/* Sidebar icon sizing and alignment */
.sidebar .icon{display:inline-flex;align-items:center;justify-content:center;margin-right:10px;flex:0 0 auto}
.sidebar .icon svg{width:16px;height:16px;display:block;stroke:currentColor;fill:none;stroke-width:2}
/* Increase specificity and ensure sizing applies for all links and buttons */
.sidebar nav a .icon svg,
.sidebar .nav-parent .icon svg{width:16px !important;height:16px !important}
/* In collapsed mode, center icons and remove extra spacing */
@media(min-width:1201px){
/* no collapsed state adjustments */
}
/* ================= Page-scoped styles moved to css/pages/*.css ================= */
/* ===========================
🌙 True Dark Theme Extension
=========================== */
:root.theme-dark {
--bg: #0d0f17;
--panel: #1b1f2e;
--panel-2: #23263a;
--text: #e6e9f5;
--muted: #a5acc6;
--border: #2d3047;
--purple: #6b5bff;
--blue: #4aa8ff;
--pink: #ff77c6;
--shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
}
/* Dark-mode general visuals */
body.theme-dark {
background: var(--bg);
color: var(--text);
transition: background 0.3s ease, color 0.3s ease;
}
/* Sidebar + Topbar */
body.theme-dark .sidebar {
background: linear-gradient(180deg, #1a1b29, #141622);
border-right: 1px solid var(--border);
}
body.theme-dark .brand {
color: var(--text);
}
body.theme-dark .sidebar nav a {
color: var(--muted);
}
body.theme-dark .sidebar nav a.active {
background: #2b2f45;
color: #fff;
}
/* Topbar */
body.theme-dark .topbar {
background: #1a1b29;
border-bottom: 1px solid var(--border);
}
body.theme-dark .icon-btn {
background: #1f2230;
border-color: #2a2e45;
color: #aab0d6;
}
body.theme-dark .icon-btn:hover {
background: #1f2230;
color: #aab0d6;
}
/* Panels, Cards */
body.theme-dark .panel,
body.theme-dark .card {
background: var(--panel);
border: 1px solid var(--border);
box-shadow: var(--shadow);
}
body.theme-dark .card .label {
color: var(--muted);
}
body.theme-dark .card .value {
color: #fff;
}
/* Tables */
body.theme-dark .table th,
body.theme-dark .table td {
color: #dbe2ff;
border-color: #2a2e45;
}
body.theme-dark .table tbody tr:nth-child(odd) {
background: #1a1d28;
}
/* Buttons */
body.theme-dark .btn {
background: #22263a;
border: 1px solid #2e3350;
color: #e6e9f5;
}
body.theme-dark .btn.primary {
background: linear-gradient(135deg, #4a59ff, #6b5bff);
border-color: #5c66ff;
color: #fff;
}
body.theme-dark .btn:hover {
transform: none;
}
/* Forms */
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea {
background: #1f2336;
border: 1px solid #2d3150;
color: #e6e9f5;
}
body.theme-dark input:focus,
body.theme-dark select:focus,
body.theme-dark textarea:focus {
border-color: #6b5bff;
box-shadow: 0 0 0 3px rgba(107, 91, 255, 0.3);
}
/* Scrollbars */
body.theme-dark ::-webkit-scrollbar {
width: 10px;
}
body.theme-dark ::-webkit-scrollbar-thumb {
background: #3a3d58;
border-radius: 10px;
}
body.theme-dark ::-webkit-scrollbar-thumb:hover {
background: #3a3d58;
}
/* Chart.js tweaks */
body.theme-dark canvas {
background: transparent;
}
.form-control-sm {
height: calc(1.5em + .5rem + 2px);
padding: .25rem .5rem;
font-size: .875rem;
line-height: 1.5;
border-radius: .2rem;
width: 60px;
}