/* Hikmah brand: logo red #E5372E on charcoal #424242 — light surfaces carry the logo, dark surfaces frame them. */
:root {
    --brand: #e5372e;
    --brand-dark: #c22a22;
    --brand-soft: #fdeceb;
    --ink: #424242;
    --ink-dark: #2e2e2e;
    --ink-darker: #232323;
    --bs-primary: #e5372e;
    --bs-primary-rgb: 229, 55, 46;
    --bs-link-color: #c22a22;
    --bs-link-color-rgb: 194, 42, 34;
    --bs-link-hover-color: #9e211b;
    --bs-body-color: #2f2f2f;
    --sidebar-w: 240px;
}

html { font-size: 15px; }
body { background: #f4f6f8; min-height: 100vh; }

.btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: var(--brand-dark); --bs-btn-active-bg: var(--brand-dark); --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); }
.btn-outline-primary { --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-active-bg: var(--brand); }
.text-bg-primary { background-color: var(--brand) !important; }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: #f19a95; box-shadow: 0 0 0 .2rem rgba(229, 55, 46, .2); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--ink); }
.nav-pills .nav-link { color: var(--ink); }
.nav-tabs .nav-link { color: var(--ink); }
.nav-tabs .nav-link.active { color: var(--brand-dark); border-top: 3px solid var(--brand); font-weight: 600; }
.pagination { --bs-pagination-color: var(--ink); --bs-pagination-active-bg: var(--ink); --bs-pagination-active-border-color: var(--ink); }

/* Light top bar carries the logo; a red rule underlines it */
.app-navbar { background: #fff; border-bottom: 3px solid var(--brand); box-shadow: 0 1px 6px rgba(0,0,0,.08); min-height: 60px; }
.app-navbar .brand-logo { height: 34px; width: auto; display: block; }
.app-navbar .brand-sub { font-size: .72rem; color: #7a7a7a; letter-spacing: .04em; border-left: 1px solid #ddd; padding-left: .6rem; margin-left: .6rem; line-height: 1.1; }
.app-navbar .btn-nav { color: var(--ink); border: 1px solid #d9d9d9; background: #fff; }
.app-navbar .btn-nav:hover, .app-navbar .btn-nav:focus { color: #fff; background: var(--ink); border-color: var(--ink); }
.app-navbar .btn-nav-accent { color: #fff; background: var(--ink); border: 1px solid var(--ink); }
.app-navbar .btn-nav-accent:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.app-navbar .navbar-toggler { color: var(--ink); border: 0; }
@media (max-width: 575.98px) { .app-navbar .brand-logo { height: 26px; } }

/* Tap targets at least 44 px (Section 5) */
.tap, .btn, .form-control, .form-select, .nav-link, .dropdown-item, .page-link { min-height: 44px; }
.btn-sm.tap, .btn-sm { min-height: 38px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; }
.notif-badge:empty { display: none; }

/* Admin shell */
.app-body { display: flex; }
.app-main { flex: 1 1 auto; min-width: 0; }
/* Dark charcoal sidebar (desktop and the mobile slide-out) */
.admin-sidebar { --bs-offcanvas-bg: var(--ink-dark); --bs-offcanvas-color: #e6e6e6; background: var(--ink-dark); }
.admin-sidebar .offcanvas-header { border-bottom: 1px solid rgba(255,255,255,.08); }
@media (min-width: 992px) {
    /* Bootstrap's .offcanvas-lg sets background transparent !important at this width, so restate it. */
    .admin-sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); min-height: calc(100vh - 63px); position: sticky; top: 63px; align-self: flex-start;
        background-color: var(--ink-dark) !important; }
}
.admin-sidebar .nav-link { color: #e4e4e4; display: flex; align-items: center; gap: .65rem; padding: .55rem 1.1rem; border-left: 3px solid transparent; }
.admin-sidebar .nav-link i { font-size: 1.1rem; width: 1.2rem; text-align: center; color: #b5b5b5; }
.admin-sidebar .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.admin-sidebar .nav-link.active { background: rgba(229,55,46,.14); border-left-color: var(--brand); color: #fff; font-weight: 600; }
.admin-sidebar .nav-link.active i { color: var(--brand); }
.admin-sidebar .nav-section { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #a8a8a8; padding: .9rem 1.1rem .3rem; }

/* Employee shell */
.employee-container { max-width: 1100px; margin: 0 auto; }
.employee-topnav { background: #fff; border-bottom: 1px solid #e3e7eb; }
.employee-topnav a { display: inline-block; padding: .7rem .9rem; color: #445; text-decoration: none; border-bottom: 3px solid transparent; }
.employee-topnav a.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.pb-nav { padding-bottom: 72px; }
@media (min-width: 992px) { .pb-nav { padding-bottom: 0; } }
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 62px; background: #fff; border-top: 1px solid #dde2e6; display: flex; z-index: 1030; padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .72rem; color: #667; text-decoration: none; min-height: 44px; }
.bottom-nav a i { font-size: 1.25rem; }
.bottom-nav a.active { color: var(--brand); font-weight: 600; }

/* Cards */
.card { border: 1px solid #e3e7eb; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.card-header { background: #fff; font-weight: 600; }
.stat-card .stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.stat-card .stat-label { color: #6c757d; font-size: .82rem; }
.page-title { font-size: 1.35rem; font-weight: 600; margin-bottom: .75rem; }

/* Punch */
.punch-card { background: linear-gradient(135deg, var(--ink) 0%, var(--ink-darker) 100%); color: #fff; border: 0; border-top: 4px solid var(--brand); }
.punch-card .btn-light { background: var(--brand); border-color: var(--brand); color: #fff; }
.punch-card .btn-light:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.punch-card .clock { font-size: 2.4rem; font-weight: 700; letter-spacing: .02em; }
.punch-btn { min-height: 64px; font-size: 1.15rem; font-weight: 600; border-radius: .8rem; }
.punch-type .btn { min-height: 48px; }
.btn-check:checked + .btn-punch-type { background: #fff; color: var(--brand); border-color: #fff; font-weight: 600; }
.btn-punch-type { color: #fff; border-color: rgba(255,255,255,.6); }
.btn-punch-type:hover { background: rgba(255,255,255,.15); color: #fff; }

/* Attendance grid */
tr.row-red > td, .text-red { color: #c62828 !important; }
tr.row-red > td:first-child { box-shadow: inset 3px 0 0 #c62828; }
tr.row-unmatched > td { background: #fff8e1 !important; }
.late-flag { color: #c62828; font-weight: 600; }
.punch-chips { font-size: .82rem; color: #556; }

/* Punch log with location */
.punch-log { list-style: none; margin: 0; padding: 0; font-size: .84rem; text-align: left; }
.punch-log li { padding: .15rem 0; }
.punch-log li + li { border-top: 1px dashed #e3e7eb; }
.punch-dir { display: inline-block; min-width: 2.2rem; font-weight: 600; font-size: .75rem; text-transform: uppercase; }
.punch-dir.in { color: #1b7f3b; }
.punch-dir.out { color: #c62828; }
.punch-place { color: #445; overflow-wrap: anywhere; }
.punch-place a { color: inherit; text-decoration: underline dotted; }
@media (max-width: 767.98px) { table.table-stack td.td-punches { display: block; text-align: left; } table.table-stack td.td-punches::before { display: block; margin-bottom: .2rem; } }

/* Wide grids become stacked cards below 768 px (Section 5) */
@media (max-width: 767.98px) {
    table.table-stack thead { display: none; }
    table.table-stack, table.table-stack tbody, table.table-stack tr, table.table-stack td { display: block; width: 100%; }
    table.table-stack tr { background: #fff; border: 1px solid #e3e7eb; border-radius: .6rem; margin-bottom: .65rem; padding: .35rem .6rem; }
    table.table-stack td { border: 0 !important; padding: .25rem 0 !important; display: flex; justify-content: space-between; gap: 1rem; text-align: right; }
    table.table-stack td::before { content: attr(data-label); font-weight: 600; color: #6c757d; text-align: left; flex: 0 0 auto; }
    table.table-stack td[data-label=""]::before { content: none; }
    table.table-stack td.td-actions { justify-content: flex-end; flex-wrap: wrap; }
    tr.row-red { border-left: 4px solid #c62828 !important; }
    .table-responsive { overflow: visible; }
}

.table > :not(caption) > * > * { vertical-align: middle; }
.table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: #5c6670; background: #f8fafb; white-space: nowrap; }

/* Login: plain white page; the card carries the logo with a thin red top rule */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: #fff; }
.login-card { width: 100%; max-width: 420px; }
.login-card .card { border: 1px solid #e6e6e6; border-top: 4px solid var(--brand); border-radius: .9rem; overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.08) !important; }
.login-logo { padding: 1.6rem 1.5rem 1.1rem; text-align: center; border-bottom: 1px solid #eee; }
.login-logo img { width: 100%; max-width: 300px; height: auto; }
.login-logo .tagline { margin-top: .6rem; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #7a7a7a; }
.login-foot { text-align: center; color: #8a8a8a; font-size: .78rem; margin-top: 1rem; }

.map-pick { height: 320px; border-radius: .5rem; border: 1px solid #dde2e6; }
.payslip-box { border: 1px solid #e3e7eb; border-radius: .5rem; }
.payslip-box .row-line { display: flex; justify-content: space-between; padding: .3rem 0; border-bottom: 1px dashed #edf0f2; }
.payslip-box .row-line:last-child { border-bottom: 0; }
.net-box { background: var(--brand-soft); border-radius: .5rem; padding: .9rem 1rem; font-size: 1.2rem; font-weight: 700; display: flex; justify-content: space-between; }
.small-muted { font-size: .82rem; color: #6c757d; }
pre.log { white-space: pre-wrap; font-size: .78rem; max-height: 200px; overflow: auto; }