:root {
  --ink: #202b27;
  --muted: #78827e;
  --line: #e8ebe7;
  --paper: #fff;
  --canvas: #f6f7f4;
  --green: #236b50;
  --green-deep: #174d3a;
  --green-soft: #edf5ee;
  --orange: #e5a358;
  --shadow: 0 8px 24px rgba(30, 45, 37, .045);
  --sans: 'Comfortaa', sans-serif;
  --display: 'Comfortaa', sans-serif;
}
* { box-sizing: border-box; }
html, body, button, input, select, textarea { font-family: 'Comfortaa', sans-serif; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--sans); font-size: 14px; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.app-shell { min-height: 100vh; }
.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at 80% 8%, #e8f1e7 0, transparent 34%), radial-gradient(ellipse at 10% 95%, #f2ebe0 0, transparent 35%), #f6f7f4; }
.login-card { width: min(100%, 410px); padding: 34px; border: 1px solid #e8ece7; border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: 0 18px 50px rgba(38,54,43,.09); }
.login-brand { padding: 0; margin-bottom: 38px; }
.login-eyebrow { margin: 0 0 8px; }
.login-card h1 { font-size: 27px; }
.login-subtitle { line-height: 1.55; }
.login-form { display: grid; gap: 15px; margin-top: 24px; }
.login-form label { display: grid; gap: 7px; color: #66746b; font-size: 10px; font-weight: 700; }
.login-form .form-control { min-height: 42px; font-size: 11px; }
.login-submit { min-height: 42px; margin-top: 2px; font-size: 11px; }
.login-submit span { margin-left: auto; }
.login-error { margin: -5px 0 0; color: #b65f56; font-size: 10px; }
.login-footnote { margin: 19px 0 0; color: #9aa49d; font-size: 9px; text-align: center; }
.sidebar { width: 248px; position: fixed; inset: 0 auto 0 0; z-index: 10; display: flex; flex-direction: column; background: #fff; border-right: 1px solid #e9ece8; padding: 26px 16px 18px; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 9px; }
.brand-mark { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; background: #eaf4eb; }
.brand-mark svg { width: 27px; height: 27px; fill: none; stroke: #26714f; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.brand-name { color: #25352d; font: 800 19px/1 var(--display); letter-spacing: -.9px; }
.brand-name > span { color: #55a76d; }
.brand-name small { display: block; color: #9ba49e; font: 700 8px/1.5 var(--sans); letter-spacing: 1.25px; margin-top: 5px; }
.sidebar-brand { display: grid; justify-items: start; gap: 9px; min-height: 54px; align-content: center; padding: 0 7px; }
.company-name-highlight { display: inline-flex; align-items: center; width: fit-content; padding: 4px 8px; border-radius: 5px; background: #fff0ab; color: #806000; font: 800 15px/1.2 var(--display); letter-spacing: -.25px; }
.login-branding { display: grid; justify-items: start; margin-bottom: 34px; }
.login-branding .company-name-highlight { padding: 6px 10px; font-size: 20px; }
.company-breadcrumb { padding: 5px 8px; border-radius: 5px; background: #fff0ab; color: #806000; font-size: 10px; font-weight: 800; }
.workspace-switcher { display: flex; align-items: center; gap: 10px; padding: 12px 10px; margin: 31px 0 30px; border: 1px solid #edf0ec; border-radius: 10px; }
.workspace-avatar { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; background: #efeee4; color: #78683d; font: 700 12px var(--display); }
.workspace-label { display: flex; flex-direction: column; flex: 1; gap: 3px; min-width: 0; }
.workspace-label strong { color: #806000; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.workspace-label small, .profile-row small { color: #929b96; font-size: 10px; }
.chevrons { color: #aab1ad; font-size: 10px; line-height: 7px; text-align: center; }
.nav-caption, .eyebrow { color: #9aa39e; font: 700 9px/1.4 var(--sans); letter-spacing: 1.3px; }
.nav-caption { margin: 0 12px 11px; }
.primary-nav { display: grid; gap: 4px; }
.nav-link { height: 42px; display: flex; align-items: center; gap: 13px; color: #68736d; padding: 0 12px; border-radius: 8px; font-size: 12px; font-weight: 600; transition: background .15s ease, color .15s ease; }
.nav-link:hover { background: #f7f9f6; color: var(--green); }
.nav-link.active { background: #eef5ee; color: #236b50; }
.nav-icon { width: 18px; color: #87928c; font-size: 17px; line-height: 1; text-align: center; }
.nav-link.active .nav-icon { color: #44875e; }
.nav-count { margin-left: auto; min-width: 20px; padding: 3px 5px; border-radius: 10px; background: #edf1ec; color: #68736d; font-size: 9px; text-align: center; }
.nav-dot { width: 7px; height: 7px; border-radius: 50%; margin-left: auto; background: #e5a358; }
.sidebar-bottom { margin-top: auto; }
.help-card { margin: 0 2px 20px; padding: 15px 14px; border-radius: 10px; background: #f6f8f3; }
.help-spark { display: block; color: #519464; font-size: 17px; margin-bottom: 8px; }
.help-card strong { font-size: 11px; }
.help-card p { margin: 5px 0 11px; color: #8a958e; font-size: 10px; line-height: 1.6; }
.text-button, .inline-link, .small-link { border: 0; background: none; padding: 0; color: #38805a; font-size: 10px; font-weight: 700; }
.text-button span, .inline-link span, .small-link span { margin-left: 4px; }
.profile-row { display: flex; align-items: center; gap: 9px; border-top: 1px solid #edf0ec; padding: 17px 5px 0; }
.profile-avatar { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: #edcbb9; color: #805543; font-size: 9px; font-weight: 700; }
.profile-row > span:nth-child(2) { display: grid; gap: 4px; flex: 1; }
.profile-row strong { font-size: 10.5px; }
.more-button { border: 0; color: #86918b; background: none; font-size: 19px; letter-spacing: 2px; }
.main-area { min-height: 100vh; margin-left: 248px; }
.topbar { min-height: 71px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 38px; background: rgba(255,255,255,.88); border-bottom: 1px solid #e9ece8; }
.breadcrumbs { display: flex; gap: 11px; align-items: center; color: #9aa39e; font-size: 11px; }
.breadcrumbs strong { color: #3a4640; font-weight: 600; }
.crumb-slash { color: #d1d6d2; }
.topbar-actions { display: flex; align-items: center; gap: 13px; }
.search-box { width: 180px; height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid #ecefeb; border-radius: 7px; color: #949e98; }
.search-box > span { font-size: 20px; line-height: 0; transform: rotate(-20deg); }
.search-box input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 10px; }
.search-box input::placeholder { color: #a8b0ab; }
.icon-button { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; border: 1px solid #ecefeb; background: #fff; color: #79847e; border-radius: 7px; }
.date-chip { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; color: #68746d; font-size: 10px; }
.calendar-icon { color: #43865f; font-size: 13px; }
.notification-button { width: 34px; height: 34px; font-size: 17px; }
.notification-button i { position: absolute; top: 6px; right: 7px; width: 5px; height: 5px; border-radius: 50%; background: #e6a45e; border: 1px solid white; }
.button { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border: 1px solid transparent; border-radius: 7px; font-weight: 700; font-size: 10.5px; transition: transform .12s ease, background .15s ease, border .15s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: #276b4f; color: #fff; box-shadow: 0 3px 8px rgba(39,107,79,.15); }
.button-primary:hover { background: #1e5d43; }
.button-primary > span { font-size: 15px; font-weight: 400; }
.button-outline { color: #536159; border-color: #e5e9e5; background: white; }
.button-outline:hover { border-color: #bdcfc3; color: #276b4f; }
.top-add { min-height: 34px; }
.mobile-menu { display: none; width: 34px; height: 34px; }
.content-wrap { max-width: 1500px; padding: 31px 38px 24px; margin: 0 auto; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.page-heading .eyebrow { margin: 0 0 7px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 6px; color: #26352d; font: 700 26px/1.2 var(--display); letter-spacing: -.8px; }
.wave { display: inline-block; vertical-align: 1px; margin-left: 3px; color: #e0a363; font-size: 18px; }
.heading-subtitle { margin: 0; color: #8c9690; font-size: 11.5px; }
.page-heading > .button { margin-bottom: 2px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-bottom: 21px; }
.stat-card { min-height: 129px; position: relative; overflow: hidden; padding: 16px 17px 13px; border: 1px solid #eaede9; border-radius: 9px; background: white; box-shadow: 0 2px 9px rgba(41,52,46,.018); }
.stat-green { background: #edf5ed; border-color: #e2eee2; }
.stat-top { display: flex; align-items: center; justify-content: space-between; color: #728079; font-size: 10px; font-weight: 600; }
.stat-icon { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; color: #56866a; background: rgba(255,255,255,.7); font-size: 12px; }
.stat-value { margin-top: 8px; color: #26382e; font: 700 27px/1.05 var(--display); letter-spacing: -.8px; }
.stat-value small { color: #99a39c; font: 500 12px var(--sans); letter-spacing: 0; margin-left: 3px; }
.stat-foot { display: flex; align-items: center; gap: 5px; margin-top: 9px; color: #929c96; font-size: 9px; position: relative; z-index: 1; }
.stat-indicator { width: 6px; height: 6px; border-radius: 50%; background: #6aaf76; }
.stat-good { color: #54a16b; font-weight: 700; }
.stat-neutral { padding: 2px 5px; border-radius: 4px; color: #71846e; background: #eff3e9; font-size: 8px; }
.stat-scribble { position: absolute; top: 15px; right: 39px; color: #c6dec4; font: 40px var(--display); transform: rotate(-25deg); opacity: .8; }
.mini-bars { position: absolute; right: 14px; bottom: 0; height: 40px; display: flex; align-items: end; gap: 3px; opacity: .68; }
.mini-bars i { width: 4px; border-radius: 3px 3px 0 0; background: #dceadd; height: 40%; }
.mini-bars i:nth-child(2), .mini-bars i:nth-child(9) { height: 65%; }.mini-bars i:nth-child(3), .mini-bars i:nth-child(7), .mini-bars i:nth-child(12) { height: 82%; }.mini-bars i:nth-child(4), .mini-bars i:nth-child(10) { height: 53%; }.mini-bars i:nth-child(5) { height: 94%; }.mini-bars i:nth-child(6) { height: 66%; }
.leave-orbit { position: absolute; right: 20px; bottom: 1px; color: #f1e7d8; font-size: 49px; line-height: 1; }
.pending-mark { position: absolute; right: 18px; bottom: 2px; color: #f2e7d9; font: 44px var(--display); letter-spacing: 4px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr); gap: 16px; }
.panel { border: 1px solid #e9ece8; border-radius: 9px; background: #fff; box-shadow: var(--shadow); }
.punch-panel, .team-panel, .attendance-panel, .leave-summary-panel { min-width: 0; }
.punch-panel, .team-panel { min-height: 300px; padding: 19px 20px 16px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-heading .eyebrow { margin: 0 0 5px; }
h2 { margin: 0; color: #2a3931; font: 700 15px/1.2 var(--display); letter-spacing: -.25px; }
.live-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 5px; background: #eef6ee; color: #63816b; font-size: 8px; font-weight: 700; letter-spacing: .7px; }
.live-pill i { width: 5px; height: 5px; background: #6aa671; border-radius: 50%; }
.punch-date { display: flex; align-items: center; gap: 10px; margin: 19px 0 17px; padding: 11px 12px; border-radius: 7px; background: #f8f9f6; }
.punch-date-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 7px; background: #e9f1e7; color: #4d8a5e; font-size: 16px; }
.punch-date > span:last-child { display: grid; gap: 3px; }
.punch-date strong { color: #4c5b52; font-size: 10px; font-weight: 700; }
.punch-date small { color: #9aa39d; font-size: 9px; }
.field-label { display: block; margin-bottom: 6px; color: #808a84; font-size: 9px; font-weight: 600; }
.form-control { min-height: 36px; width: 100%; padding: 0 10px; border: 1px solid #e5eae5; border-radius: 6px; outline: none; background-color: #fff; color: #526058; font-size: 10.5px; }
.form-control:focus { border-color: #8fb99a; box-shadow: 0 0 0 3px rgba(79,143,94,.1); }
.punch-status { display: flex; align-items: center; gap: 7px; margin: 14px 0 10px; color: #929b96; font-size: 9px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #c5cdc7; }
.punch-status.punched { color: #3c7c55; }.punch-status.punched .status-dot { background: #62a673; }
.punch-actions { display: flex; gap: 8px; }
.button-punch-in, .button-punch-out { flex: 1; min-height: 36px; color: #fff; background: #32805a; font-size: 10px; }
.button-punch-in:hover:not(:disabled) { background: #256d4c; }
.button-punch-out { color: #5c7363; background: #f0f5ef; }
.button-punch-in:disabled, .button-punch-out:disabled { cursor: not-allowed; color: #9ca59f; background: #f3f5f2; box-shadow: none; }
.break-punch-list { margin-top: 11px; border-top: 1px solid #eff1ee; }
.break-punch-row { min-height: 47px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid #eff1ee; }
.break-punch-row > span:first-child { display: grid; gap: 4px; }
.break-punch-row strong { color: #526057; font-size: 9px; }
.break-punch-row strong em { color: #9aa39d; font-size: 8px; font-style: normal; font-weight: 500; }
.break-punch-row small { color: #9aa39d; font-size: 8px; }
.break-punch-actions { display: flex; gap: 5px; }
.break-punch-actions .action-button { min-height: 25px; }
.manual-section-label { margin: 2px 0 -5px; color: #929d95; font-size: 8px; font-weight: 800; letter-spacing: 1px; }
.punch-hint { margin: 10px 0 0; color: #a0a9a3; font-size: 8.5px; }
.office-location-control { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px; border: 1px solid #33342b; border-radius: 7px; background: #20211b; }
.office-location-icon { color: #e1bd45; font-size: 16px; }
.office-location-copy { display: grid; flex: 1; gap: 3px; min-width: 0; }
.office-location-copy strong { color: #e8e2d0; font-size: 9px; }
.office-location-copy small { overflow: hidden; color: #a19d89; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.office-location-control .action-button { flex: 0 0 auto; border-color: #514629; background: #302d20; color: #e0c45a; }
.office-location-control .action-button:hover { border-color: #9e842f; background: #383019; color: #f0d15a; }
.small-link { font-size: 9px; }
.team-list { margin-top: 14px; }
.team-row { display: flex; align-items: center; gap: 9px; min-height: 44px; border-bottom: 1px solid #f0f2ef; }
.team-row:last-child { border-bottom: 0; }
.avatar { display: grid; place-items: center; flex: 0 0 auto; width: 29px; height: 29px; border-radius: 50%; font-size: 8px; font-weight: 700; }
.person-info { display: grid; flex: 1; gap: 3px; min-width: 0; }
.person-info strong { overflow: hidden; color: #4b5850; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.person-info small { color: #a0a9a3; font-size: 8px; }
.team-status { display: inline-flex; align-items: center; gap: 5px; color: #718078; font-size: 8px; white-space: nowrap; }
.team-status i { width: 5px; height: 5px; border-radius: 50%; background: #bdc7bf; }
.team-status.present i { background: #68a775; }.team-status.late i { background: #e0a257; }.team-status.leave i { background: #9b86c0; }
.panel-footer-link { display: flex; justify-content: space-between; width: 100%; margin-top: 7px; padding: 10px 1px 0; border: 0; border-top: 1px solid #eff1ee; background: none; color: #49845d; font-size: 9px; font-weight: 700; text-align: left; }
.attendance-panel, .leave-summary-panel { padding: 18px 20px 0; min-height: 231px; }
.panel-more { width: 27px; height: 27px; border: 0; color: #8d9891; font-size: 17px; letter-spacing: 2px; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { height: 38px; color: #9ba49e; font-size: 8px; font-weight: 700; letter-spacing: .7px; white-space: nowrap; }
td { height: 48px; color: #647168; font-size: 9px; border-top: 1px solid #f0f2ef; white-space: nowrap; }
.attendance-panel .table-wrap, .leave-summary-panel .table-wrap { margin-top: 12px; }
.table-employee { display: flex; align-items: center; gap: 8px; }
.table-employee .avatar { width: 26px; height: 26px; }
.table-employee strong { color: #4a584f; font-size: 9px; font-weight: 700; }
.table-employee-text { display: grid; gap: 2px; }
.table-employee-text small { color: #9aa49d; font-size: 8px; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 5px; font-size: 8px; font-weight: 700; }
.badge::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.badge-present, .badge-approved { color: #4c8b5b; background: #eef6ed; }
.badge-late, .badge-pending { color: #ae793a; background: #fcf4e8; }
.badge-missing, .badge-declined { color: #909993; background: #f1f3f1; }
.badge-leave { color: #8171aa; background: #f3f0f8; }
.leave-preview { margin-top: 13px; }
.leave-preview-row { display: flex; align-items: center; gap: 8px; min-height: 47px; border-bottom: 1px solid #f0f2ef; }
.leave-preview-row:last-child { border-bottom: 0; }
.leave-preview-dates { margin-left: auto; color: #8d9891; font-size: 8px; white-space: nowrap; }
.empty-mini { padding: 21px 5px; color: #a1aaa4; font-size: 9px; text-align: center; }
.page-foot { display: flex; justify-content: space-between; margin-top: 27px; color: #a4ada7; font-size: 8px; font-weight: 700; letter-spacing: .8px; }
.page-foot b { margin: 0 4px; color: #cbd2cd; }.page-foot i { margin-left: 3px; color: #daa56d; font-style: normal; }
.hidden { display: none !important; }
.heading-actions { display: flex; align-items: center; gap: 8px; }
.date-input { width: 139px; }
.compact-stats { margin-top: 1px; }
.compact-stats .stat-card { min-height: 105px; }
.compact-stats .stat-value { font-size: 24px; }
.full-panel { overflow: hidden; }
.full-panel .table-wrap { padding: 0 18px; }
.full-panel th { height: 48px; }
.full-panel td { height: 56px; }
.table-toolbar { padding: 17px 19px 12px; }
.panel-subtitle { margin: 5px 0 0; color: #9aa39e; font-size: 9px; }
.table-tools { display: flex; align-items: center; gap: 8px; }
.small-select { min-height: 32px; width: auto; min-width: 125px; font-size: 9px; }
.empty-state { padding: 32px 15px; color: #9aa39e; font-size: 11px; text-align: center; }
.heading-actions .form-control { min-height: 36px; }
.leave-tabs { display: flex; gap: 23px; align-items: center; margin: 4px 0 16px; border-bottom: 1px solid #e7ebe7; }
.leave-tab { position: relative; display: flex; align-items: center; gap: 7px; min-height: 39px; padding: 0 0 11px; border: 0; background: none; color: #8e9992; font-size: 10px; font-weight: 600; }
.leave-tab.active { color: #2a6e50; }.leave-tab.active::after { content: ''; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: #3d8459; }
.leave-tab span { min-width: 17px; padding: 3px 5px; border-radius: 8px; background: #f1f3f0; color: #828e86; font-size: 8px; text-align: center; }
.leave-tab.active span { background: #edf5ec; color: #4b8057; }
.row-actions { display: flex; justify-content: flex-end; gap: 5px; }
.action-button { min-height: 27px; padding: 0 8px; border: 1px solid #e8ece8; border-radius: 5px; background: #fff; color: #7b8780; font-size: 8px; font-weight: 700; }
.action-button:hover { border-color: #aac7af; color: #347c53; }
.action-button.approve { color: #387b50; }.action-button.decline:hover, .action-button.delete:hover { color: #b15f55; border-color: #e4bfba; }
.leave-note { display: flex; align-items: center; gap: 10px; margin-top: 17px; padding: 13px 15px; border-radius: 8px; background: #f1f5ec; }
.note-icon { color: #67976a; font-size: 18px; }.leave-note > span:last-child { display: grid; gap: 4px; }.leave-note strong { color: #5e725f; font-size: 9px; }.leave-note small { color: #97a294; font-size: 8px; }
.balance-panel, .balance-history-panel { margin-top: 16px; }
.balance-value { display: inline-flex; min-width: 31px; justify-content: center; padding: 5px 8px; border-radius: 6px; background: #f2f6ef; color: #52734f; font-size: 10px; font-weight: 700; }
.balance-type-heading { color: #7a8c79; font-weight: 800; }
.history-credit { color: #43834e; font-weight: 700; }
.history-debit { color: #9d6b47; font-weight: 700; }
.employee-summary { display: flex; align-items: center; gap: 12px; margin: -3px 0 15px; color: #97a19a; font-size: 10px; }.employee-summary strong { color: #34463b; font: 700 16px var(--display); margin-right: 4px; }.summary-divider { width: 1px; height: 16px; background: #dfe4df; }
.employee-row-actions { display: flex; justify-content: flex-end; gap: 5px; }
.report-filter-panel { display: flex; justify-content: space-between; align-items: center; gap: 22px; padding: 20px; margin-bottom: 16px; }
.report-filter-copy { display: flex; align-items: center; gap: 12px; min-width: 180px; }
.report-filter-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: #edf5ed; color: #508661; font-size: 19px; }
.report-filter-copy > span:last-child { display: grid; gap: 5px; }.report-filter-copy strong, .report-download-panel strong { color: #48574d; font-size: 11px; }.report-filter-copy small, .report-download-panel small { color: #99a29c; font-size: 9px; }
.report-controls { display: flex; align-items: end; gap: 8px; }
.report-controls label { display: grid; gap: 5px; color: #97a19a; font-size: 8px; font-weight: 700; letter-spacing: .8px; }
.report-controls .form-control { width: 135px; }
.range-dash { margin-bottom: 11px; color: #bdc5be; }
.report-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-bottom: 16px; }
.report-stat { display: grid; gap: 6px; padding: 16px 18px; border: 1px solid #e9ece8; border-radius: 9px; background: #fff; }
.report-stat span { color: #8e9991; font-size: 9px; font-weight: 600; }.report-stat strong { color: #2c3b32; font: 700 25px var(--display); letter-spacing: -.6px; }.report-stat small { color: #a0a9a3; font-size: 8px; }
.button-small { min-height: 31px; font-size: 9px; }
.report-download-panel { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 15px 18px; }.download-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 7px; background: #f2f5ef; color: #618e68; font-size: 17px; }.report-download-panel > span:nth-child(2) { display: grid; gap: 4px; flex: 1; }
.modal-backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: rgba(28,39,32,.36); backdrop-filter: blur(3px); }
.modal { width: min(100%, 465px); max-height: min(90vh, 740px); overflow: auto; padding: 23px; border: 1px solid rgba(255,255,255,.7); border-radius: 13px; background: #fff; box-shadow: 0 22px 80px rgba(22,38,28,.2); animation: modal-in .18s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }.modal-heading .eyebrow { margin-bottom: 5px; }.modal-heading h2 { font-size: 19px; }.modal-close { width: 29px; height: 29px; border: 0; background: #f5f7f4; color: #79847e; font-size: 21px; }
.modal-form { display: grid; gap: 13px; }.modal-form > label, .modal-form .form-row > label { display: grid; gap: 6px; color: #6d7a71; font-size: 9px; font-weight: 700; }.modal-form .form-control { min-height: 39px; font-size: 10.5px; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.optional-label { color: #9aa49d; font-size: 8px; font-weight: 500; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 7px; padding-top: 14px; border-top: 1px solid #eff2ef; }
.info-content p { color: #77837b; font-size: 11px; line-height: 1.7; }.info-content .button { margin-top: 5px; }
.toast { position: fixed; z-index: 40; right: 24px; bottom: 24px; max-width: min(390px, calc(100vw - 40px)); padding: 12px 16px; border: 1px solid #d9e7da; border-radius: 8px; background: #f4faf3; color: #3b7048; box-shadow: 0 8px 24px rgba(25,43,31,.1); font-size: 11px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: all .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.mobile-scrim { display: none; }
@media (max-width: 1100px) {
  .sidebar { width: 220px; }.main-area { margin-left: 220px; }.topbar { padding: 0 25px; }.content-wrap { padding: 27px 25px 22px; }.topbar-actions { gap: 8px; }.stats-grid { gap: 10px; }.stat-card { padding-left: 13px; padding-right: 13px; }.report-filter-panel { align-items: flex-start; flex-direction: column; }.report-controls { width: 100%; }
}
@media (max-width: 860px) {
  .sidebar { width: 230px; transform: translateX(-101%); transition: transform .2s ease; box-shadow: 10px 0 30px rgba(29,43,34,.08); }.sidebar.open { transform: translateX(0); }.main-area { margin-left: 0; }.topbar { padding: 0 20px; }.mobile-menu { display: inline-grid; }.breadcrumbs { margin-right: auto; }.dashboard-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }.topbar-actions .search-box { width: 140px; }.mobile-scrim.visible { display: block; position: fixed; inset: 0; z-index: 9; background: rgba(31,42,34,.22); }
}
@media (max-width: 650px) {
  .topbar { min-height: 62px; gap: 9px; padding: 0 13px; }.breadcrumbs { font-size: 10px; gap: 7px; }.topbar-actions { gap: 6px; }.search-box { display: none; }.date-chip { width: 34px; justify-content: center; padding: 0; overflow: hidden; }.date-chip #today-label { display: none; }.top-add { padding: 0 9px; font-size: 9px; }.notification-button { display: none; }.content-wrap { padding: 24px 14px 20px; }.page-heading { align-items: flex-start; flex-direction: column; margin-bottom: 19px; gap: 13px; }.page-heading > .button, .heading-actions { align-self: stretch; }.heading-actions { display: flex; flex-wrap: wrap; }.heading-actions .date-input { flex: 1 1 100%; }.page-heading h1 { font-size: 23px; }.heading-subtitle { font-size: 10.5px; }.stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin-bottom: 14px; }.stat-card { min-height: 117px; padding: 13px; }.stat-value { font-size: 24px; }.dashboard-grid { grid-template-columns: 1fr; gap: 12px; }.punch-panel, .team-panel { min-height: auto; }.team-panel { padding-bottom: 13px; }.attendance-panel, .leave-summary-panel { min-height: 220px; padding: 16px 14px 0; }.page-foot { font-size: 7px; }.page-foot span:last-child { text-align: right; }.compact-stats .stat-card { min-height: 96px; }.compact-stats .stat-value { font-size: 22px; }.full-panel .table-wrap { padding: 0 12px; }.table-toolbar { padding: 14px 13px 10px; }.table-toolbar h2 { font-size: 13px; }.full-panel th { height: 42px; }.full-panel td { height: 48px; }.leave-tabs { gap: 17px; overflow-x: auto; white-space: nowrap; }.leave-tab { font-size: 9px; }.report-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 6px; }.report-controls label .form-control { width: 100%; }.report-controls .button { grid-column: 1 / -1; }.range-dash { margin-bottom: 11px; }.report-stats { gap: 8px; }.report-stat { padding: 12px 10px; }.report-stat span { font-size: 8px; }.report-stat strong { font-size: 21px; }.report-stat small { font-size: 7px; }.report-download-panel { flex-wrap: wrap; padding: 13px; }.report-download-panel > button { flex-basis: 100%; }.date-input { width: auto; }.modal { padding: 19px; }.form-row { grid-template-columns: 1fr; gap: 12px; }.login-card { padding: 25px 20px; }
}
@media print {
  body { background: #fff; }.sidebar, .topbar, .page-heading > button, .heading-actions, .report-filter-panel, .report-download-panel, .page-foot { display: none !important; }.main-area { margin: 0; }.content-wrap { max-width: none; padding: 0; }.view-section { display: none !important; }#view-reports { display: block !important; }.report-stats { break-inside: avoid; }.panel { box-shadow: none; }
}

/* The Creativly dark charcoal and antique gold theme */
:root {
  --ink: #eee9d8;
  --muted: #aaa58e;
  --line: #38382f;
  --paper: #1d1e19;
  --canvas: #11120f;
  --green: #d1ab35;
  --green-deep: #a17e1d;
  --green-soft: #302b1c;
  --orange: #d5a64a;
  --shadow: 0 8px 24px rgba(0, 0, 0, .2);
}
body { background: var(--canvas); color: var(--ink); color-scheme: dark; }
.sidebar { background: #171813; border-color: #303129; }
.topbar { background: rgba(25, 26, 21, .96); border-color: #303129; }
.workspace-switcher, .profile-row { border-color: #33342b; }
.workspace-avatar { background: #373018; color: #e3c65c; }
.workspace-label strong { color: #e2c24b; }
.workspace-label small, .profile-row small { color: #999581; }
.nav-caption, .eyebrow { color: #999683; }
.nav-link { color: #b9b5a2; }
.nav-link:hover { background: #27271f; color: #e0bf45; }
.nav-link.active { background: #302b1c; color: #f0ce4d; }
.nav-icon, .nav-link.active .nav-icon { color: #c5a638; }
.nav-count { background: #34342b; color: #d1c9a9; }
.nav-dot { background: #dfba43; }
.help-card { background: #21221b; }
.help-spark, .calendar-icon { color: #ddbd4a; }
.help-card strong { color: #e8e2cc; }
.help-card p, .text-button { color: #b1ab93; }
.profile-row strong { color: #e8e2cc; }
.breadcrumbs { color: #a09d89; }
.breadcrumbs strong { color: #ede8d7; }
.company-name-highlight, .company-breadcrumb { background: #383019; color: #f0d05a; }
.company-name-highlight { box-shadow: inset 0 0 0 1px rgba(226, 191, 65, .12); }
.search-box, .icon-button { border-color: #3a3a30; background: #1d1e19; color: #c3bea9; }
.search-box input { color: #eee9d8; }
.search-box input::placeholder { color: #898775; }
.date-chip { color: #d5ceaf; }
.notification-button i { border-color: #1d1e19; background: #e1bd48; }
.button { color: #e9e3cc; }
.button-primary { background: #d2ae3d; color: #1a1912; box-shadow: 0 3px 10px rgba(186, 145, 29, .18); }
.button-primary:hover { background: #e0bf4c; color: #17160f; }
.button-outline { border-color: #494633; background: #20211b; color: #d6d0b8; }
.button-outline:hover { border-color: #9e842f; background: #2b291e; color: #f0d15a; }
.content-wrap { color: var(--ink); }
h1, h2 { color: #f0ecd9; }
.heading-subtitle { color: #aaa58f; }
.wave { color: #e1bd45; }
.stat-card { border-color: #34352c; background: #1b1c17; }
.stat-green { border-color: #484128; background: #242218; }
.stat-top { color: #c0baa4; }
.stat-icon { background: #2b2b22; color: #e2c04a; }
.stat-value { color: #f1ead4; }
.stat-value small, .stat-foot { color: #a8a38e; }
.stat-indicator { background: #d4ad39; }
.stat-good, .inline-link, .small-link { color: #dec04f; }
.stat-neutral { background: #363022; color: #d0bc70; }
.stat-scribble { color: #665a2b; }
.mini-bars i { background: #62562c; }
.leave-orbit, .pending-mark { color: #4b4430; }
.panel, .report-stat { border-color: #34352c; background: #1b1c17; box-shadow: var(--shadow); }
.live-pill { background: #343020; color: #e0c458; }
.live-pill i { background: #d5b23e; }
.punch-date { background: #24251e; }
.punch-date-icon { background: #373321; color: #e0c14e; }
.punch-date strong, .field-label { color: #d1cbb4; }
.punch-date small { color: #a19d88; }
.form-control { border-color: #414137; background-color: #20211b; color: #ece7d5; color-scheme: dark; }
.form-control:focus { border-color: #b49a3e; box-shadow: 0 0 0 3px rgba(193, 159, 47, .13); }
.form-control option { background: #20211b; color: #ece7d5; }
.punch-status { color: #a7a28e; }
.punch-status.punched { color: #e1c34f; }
.status-dot { background: #777565; }
.punch-status.punched .status-dot { background: #d8b53f; }
.button-punch-in { background: #c7a333; color: #1c1a11; }
.button-punch-in:hover:not(:disabled) { background: #ddba48; color: #1b190f; }
.button-punch-out { background: #302d20; color: #e0c45a; }
.button-punch-in:disabled, .button-punch-out:disabled { background: #292a23; color: #858371; }
.punch-hint, .person-info small, .panel-subtitle, .empty-mini { color: #a19d89; }
.team-row, td { border-color: #303129; }
.team-row { border-bottom-color: #303129; }
.person-info strong, .table-employee strong { color: #e8e2d0; }
.team-status { color: #bcb69d; }
.team-status i { background: #777565; }
.team-status.present i { background: #d1ad3e; }
.team-status.half i { background: #e0bd48; }
.team-status.in-progress i { background: #83a9a2; }
.team-status.late i { background: #e5a847; }
.team-status.leave i { background: #aa91d0; }
.panel-footer-link { border-color: #33342b; color: #dec04f; }
.panel-more { color: #c0baa4; }
th { color: #a8a48f; }
td { color: #cbc5ae; }
.table-employee-text small { color: #a19d89; }
.badge-present, .badge-approved { background: #353021; color: #e4ca62; }
.badge-half { background: #332d1c; color: #e0c45c; }
.badge-in-progress { background: #272b2b; color: #a5cbc5; }
.badge-late, .badge-pending { background: #392d1b; color: #e8b75b; }
.badge-missing, .badge-declined { background: #2a2b25; color: #b0ad9c; }
.badge-leave { background: #30283a; color: #c3afe0; }
.leave-preview-dates { color: #b7b19b; }
.page-foot { color: #8f8d7c; }
.page-foot b { color: #56564a; }
.page-foot i { color: #d9b844; }
.small-select { color: #e2dcc5; }
.leave-tabs { border-color: #38382f; }
.leave-tab { color: #a9a58f; }
.leave-tab.active { color: #e5c64f; }
.leave-tab.active::after { background: #d4b13d; }
.leave-tab span { background: #2d2e26; color: #c0baa3; }
.leave-tab.active span { background: #3a331f; color: #e4c951; }
.action-button { border-color: #454438; background: #22231d; color: #c6c0a8; }
.action-button:hover { border-color: #a58c36; color: #f0d257; }
.action-button.approve { color: #e3c34c; }
.action-button.decline:hover, .action-button.delete:hover { color: #e88c79; border-color: #885448; }
.leave-note { background: #25251d; }
.note-icon { color: #d8bb52; }
.leave-note strong { color: #e6ddbe; }
.leave-note small { color: #aaa58f; }
.balance-value { background: #343021; color: #e4cd73; }
.balance-type-heading { color: #e4ce75; }
.history-credit { color: #ddc653; }
.history-debit { color: #e0aa63; }
.employee-summary { color: #a9a58f; }
.employee-summary strong { color: #e9e3ce; }
.summary-divider { background: #44443a; }
.report-filter-panel { border-color: #34352c; background: #1b1c17; }
.report-filter-icon, .download-icon { background: #343021; color: #dfc252; }
.report-filter-copy strong, .report-download-panel strong { color: #e5dfca; }
.report-filter-copy small, .report-download-panel small { color: #a8a38e; }
.report-controls label { color: #a7a28d; }
.range-dash { color: #858271; }
.report-stat span, .report-stat small { color: #aaa58f; }
.report-stat strong { color: #eee7d1; }
.modal-backdrop { background: rgba(0, 0, 0, .68); }
.modal { border-color: #414137; background: #1b1c17; box-shadow: 0 22px 80px rgba(0, 0, 0, .55); }
.modal-heading h2 { color: #f0ecd9; }
.modal-close { background: #2c2d26; color: #d0c9ad; }
.modal-form > label, .modal-form .form-row > label { color: #d0c9b1; }
.modal-actions { border-color: #36372e; }
.info-content p { color: #c0baa5; }
.optional-label { color: #a7a28d; }
.break-punch-list, .break-punch-row { border-color: #38382f; }
.break-punch-row strong, .manual-section-label { color: #c0baa4; }
.break-punch-row strong em, .break-punch-row small { color: #a19d89; }
.break-cell { display: grid; gap: 3px; min-width: 112px; color: #bcb69d; font-size: 8px; line-height: 1.35; }
.toast { border-color: #655625; background: #292518; color: #f0d66a; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.login-screen { background: radial-gradient(ellipse at 80% 8%, #302c1b 0, transparent 34%), radial-gradient(ellipse at 10% 95%, #252116 0, transparent 35%), #11120f; }
.login-card { border-color: #39382e; background: #1b1c17; box-shadow: 0 18px 50px rgba(0, 0, 0, .36); }
.login-card h1 { color: #f0ecd9; }
.login-form label { color: #d0c9b1; }
.login-footnote { color: #a7a28d; }
.profile-avatar { background: #3c321d; color: #e4cd72; }
.mobile-scrim.visible { background: rgba(0, 0, 0, .58); }
@media print {
  body { background: #fff !important; color: #202b27 !important; color-scheme: light; }
  .panel, .stat-card, .report-stat { background: #fff !important; color: #202b27 !important; }
  h1, h2, td, th { color: #202b27 !important; }
}