html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin: 0;
    margin-bottom: 60px;
    animation: fadeIn 0.35s ease-out forwards;
}

/* Focus ring */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 .1rem rgba(255,255,255,.35), 0 0 0 .25rem #258cfb;
}

/* Spinner overlay */
.spinner-container {
    position: fixed;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 2000; /* higher than dropdowns */
}

/* Keep navbar always above everything */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1200;
}

/* Dropdown menus above tables/cards */
.dropdown-menu {
    z-index: 1300;
}

/* If you use overlays/spinners, make sure they don't block nav unintentionally */
.loading-overlay {
    z-index: 2000;
}

.offcanvas-body {
    overflow-y: auto;
    max-height: calc(100vh - 56px); /* subtract header */
}


.pan-logo {
    height: 44px;
    width: auto;
}

.pan-offcanvas-body {
    overflow-y: auto;
}

/* Make sure offcanvas fills screen on mobile */
.offcanvas {
    height: 100vh;
}

    /* Optional: dropdowns look better inside offcanvas dark bg */
    .offcanvas .dropdown-menu {
        --bs-dropdown-bg: #212529;
        --bs-dropdown-link-color: #f8f9fa;
        --bs-dropdown-link-hover-bg: rgba(255,255,255,.08);
    }

/* Default (page-level Select2): stay UNDER modal backdrop */
.select2-container--open {
    z-index: 1049 !important;
}

/* Select2 inside modal: stay ABOVE modal content */
.modal .select2-container--open {
    z-index: 1060 !important;
}

/* Dashboard weather beside the Dermstrata logo */
.home-brand-weather {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.home-weather-chip {
    min-width: 210px;
    border: 1px solid rgba(13, 110, 253, .16);
    border-radius: 14px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .08);
    padding: .65rem .85rem;
    text-align: left;
}

.home-weather-chip .weather-temp {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
}

.home-weather-chip .weather-meta {
    font-size: .82rem;
    color: #6c757d;
}

body.dark-mode .home-weather-chip {
    background: rgba(17, 24, 39, .88);
    border-color: rgba(255, 255, 255, .12);
}

body.dark-mode .home-weather-chip .weather-meta {
    color: rgba(229, 231, 235, .72);
}

@media (max-width: 576px) {
    .home-brand-weather {
        gap: .65rem;
    }

    .home-weather-chip {
        width: min(92vw, 320px);
        text-align: center;
    }
}

/* Landscape kiosk layout for Time In, Time Out, Break Out, and Break In */
@media (orientation: landscape) {
    .page-wrap:has(.clock-card),
    .page-wrap:has(.break-card) {
        align-items: flex-start !important;
        min-height: auto !important;
        padding: .75rem !important;
    }

    .clock-card,
    .break-card {
        max-width: min(1280px, 100%) !important;
    }

    .clock-header,
    .break-header {
        padding: .8rem 1rem !important;
    }

    .clock-body,
    .break-body {
        padding: .85rem !important;
    }

    .clock-body > form.needs-validation,
    .break-body > form {
        display: grid !important;
        grid-template-columns: minmax(360px, .85fr) minmax(520px, 1.15fr) !important;
        gap: .85rem !important;
        align-items: start !important;
    }

    .clock-body > form.needs-validation > .section,
    .break-body > form > .section {
        margin-top: 0 !important;
    }

    .clock-body > form.needs-validation > .actions,
    .break-body > form > .actions {
        grid-column: 1 / -1;
        margin-top: 0 !important;
    }

    .clock-card .employee-avatar,
    .break-card .employee-avatar {
        width: 76px;
        height: 76px;
    }

    .clock-card .employee-preview,
    .break-card .employee-preview {
        grid-template-columns: 76px 1fr;
    }

    .clock-card .video-container {
        min-height: 280px !important;
    }
}

@media (orientation: landscape) and (max-height: 560px) {
    .clock-card .clock-sub,
    .break-card .break-sub,
    .clock-card .hint,
    .break-card .hint {
        font-size: .82rem;
    }

    .clock-card .section,
    .break-card .section {
        padding: .75rem;
    }

    .clock-card .video-container {
        min-height: 210px !important;
    }
}

@media (orientation: landscape) and (max-width: 960px) {
    .clock-body > form.needs-validation,
    .break-body > form {
        grid-template-columns: minmax(280px, .95fr) minmax(360px, 1.05fr) !important;
    }
}

/* Modern home dashboard */
body.modern-home-dashboard {
    background:
        radial-gradient(circle at 12% 0%, rgba(13, 110, 253, .10), transparent 34rem),
        radial-gradient(circle at 92% 18%, rgba(25, 135, 84, .10), transparent 28rem),
        linear-gradient(180deg, #f5f8fc 0%, #eef3f8 100%);
}

body.modern-home-dashboard .pan-main {
    padding-top: 1rem;
}

.home-command-center {
    display: grid;
    grid-template-columns: minmax(320px, .92fr) minmax(420px, 1.08fr);
    gap: 1rem;
    align-items: stretch;
    min-height: 330px;
    margin-bottom: 1rem;
}

.modern-home-dashboard .home-hero {
    position: relative;
    align-content: center;
    justify-items: start !important;
    text-align: left !important;
    gap: 1.15rem !important;
    min-height: 100%;
    margin: 0 !important;
    padding: clamp(1.25rem, 2.4vw, 2rem);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .78)),
        radial-gradient(circle at 0% 10%, rgba(13, 110, 253, .14), transparent 21rem),
        radial-gradient(circle at 95% 100%, rgba(132, 196, 65, .16), transparent 19rem);
    box-shadow: 0 18px 46px rgba(15, 23, 42, .10);
    overflow: hidden;
}

.modern-home-dashboard .home-hero::after {
    content: "";
    position: absolute;
    right: -4rem;
    bottom: -5rem;
    width: 16rem;
    height: 16rem;
    border: 1px solid rgba(13, 110, 253, .12);
    border-radius: 50%;
}

.home-kicker {
    display: grid;
    gap: .25rem;
    position: relative;
    z-index: 1;
}

.home-kicker span {
    color: #0d6efd;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.home-kicker strong {
    color: #172033;
    font-size: clamp(1.6rem, 3vw, 2.35rem);
    line-height: 1.05;
}

.modern-home-dashboard .home-brand-weather {
    justify-content: flex-start;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.modern-home-dashboard .home-logo {
    max-width: min(430px, 42vw) !important;
    filter: drop-shadow(0 10px 18px rgba(20, 62, 116, .10));
}

.modern-home-dashboard .home-weather-chip {
    min-width: 230px;
    border-color: rgba(13, 110, 253, .18);
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .10);
}

.modern-home-dashboard .home-time {
    position: relative;
    z-index: 1;
    display: inline-grid;
    gap: .15rem;
    padding: .75rem 1rem;
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: 16px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .07);
}

.modern-home-dashboard .quick-grid {
    grid-template-columns: repeat(12, 1fr) !important;
    gap: .8rem !important;
    margin: 0 !important;
    padding: 1rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 22px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 18px 46px rgba(15, 23, 42, .09);
}

.quick-grid-title {
    grid-column: 1 / -1;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    padding: .1rem .2rem .25rem;
}

.quick-grid-title span {
    color: #64748b;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
}

.quick-grid-title strong {
    color: #172033;
    font-size: 1.15rem;
}

.modern-home-dashboard .quick-tile {
    grid-column: span 6 !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.modern-home-dashboard .quick-tile.tile-6 {
    grid-column: span 6 !important;
}

.modern-home-dashboard .quick-btn {
    position: relative;
    align-items: flex-start !important;
    justify-content: space-between !important;
    min-height: 126px !important;
    height: 100%;
    padding: 1rem !important;
    border-radius: 16px !important;
    isolation: isolate;
    overflow: hidden;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .14);
}

.modern-home-dashboard .quick-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg, rgba(255, 255, 255, .22), transparent 48%);
}

.modern-home-dashboard .quick-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 42px rgba(15, 23, 42, .18);
}

.modern-home-dashboard .quick-icon {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .18);
    font-size: 1.9rem !important;
}

.modern-home-dashboard .tile-meta {
    font-size: .86rem !important;
    opacity: .82 !important;
    font-weight: 600 !important;
}

.modern-home-dashboard .home-archive-alert {
    border-radius: 16px !important;
    background: #fff4cf !important;
    border: 1px solid rgba(245, 158, 11, .22) !important;
    box-shadow: 0 12px 28px rgba(146, 64, 14, .10) !important;
}

.modern-home-dashboard .home-feature-panel {
    margin-top: 1rem;
}

.modern-home-dashboard #announcementSection > .d-flex:first-child,
.modern-home-dashboard .card-header {
    padding-inline: .15rem;
}

.modern-home-dashboard #announcementSection h4,
.modern-home-dashboard .card-header {
    color: #172033;
    font-size: 1.05rem;
}

.modern-home-dashboard #announcementSection .panel-card,
.modern-home-dashboard .home-panel-card {
    border: 1px solid rgba(15, 23, 42, .08) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .88) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .08) !important;
}

.modern-home-dashboard #announcementCarousel,
.modern-home-dashboard #announcementCarousel .carousel-item > div {
    border-radius: 18px;
    min-height: 300px;
}

.modern-home-dashboard .animated-background {
    background: linear-gradient(135deg, #0f65d8 0%, #15a0a3 52%, #8cc63f 100%) !important;
}

.modern-home-dashboard .code-day-card {
    border-radius: 18px !important;
    background: rgba(15, 23, 42, .32) !important;
}

.modern-home-dashboard .emp-card {
    border-radius: 14px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .07) !important;
}

.modern-home-dashboard .webcapture-image-wrap {
    border-radius: 14px;
    overflow: hidden;
    background: #111827 !important;
}

body.dark-mode.modern-home-dashboard {
    background:
        radial-gradient(circle at 12% 0%, rgba(13, 110, 253, .16), transparent 34rem),
        radial-gradient(circle at 92% 18%, rgba(25, 135, 84, .13), transparent 28rem),
        #0f172a;
}

body.dark-mode .home-kicker strong,
body.dark-mode .quick-grid-title strong,
body.dark-mode.modern-home-dashboard #announcementSection h4,
body.dark-mode.modern-home-dashboard .card-header {
    color: #e5e7eb;
}

body.dark-mode .modern-home-dashboard .home-hero,
body.dark-mode.modern-home-dashboard .home-hero,
body.dark-mode.modern-home-dashboard .quick-grid,
body.dark-mode.modern-home-dashboard .home-time,
body.dark-mode.modern-home-dashboard .home-panel-card {
    background: rgba(17, 24, 39, .88) !important;
    border-color: rgba(255, 255, 255, .10) !important;
}

@media (max-width: 1180px) {
    .home-command-center {
        grid-template-columns: 1fr;
    }

    .modern-home-dashboard .home-logo {
        max-width: min(420px, 70vw) !important;
    }
}

@media (max-width: 720px) {
    .modern-home-dashboard .home-hero,
    .modern-home-dashboard .quick-grid {
        border-radius: 18px;
        padding: 1rem;
    }

    .modern-home-dashboard .quick-tile,
    .modern-home-dashboard .quick-tile.tile-6 {
        grid-column: 1 / -1 !important;
    }

    .quick-grid-title {
        display: grid;
        align-items: start;
    }
}

/* Dashboard refinement */
body.modern-home-dashboard {
    background: linear-gradient(180deg, #f7fafc 0%, #edf2f7 100%);
}

body.modern-home-dashboard .pan-main {
    padding-inline: clamp(.75rem, 1.6vw, 1.35rem);
}

.home-command-center {
    grid-template-columns: minmax(340px, .9fr) minmax(380px, 1.1fr);
    gap: .85rem;
    min-height: auto;
}

.modern-home-dashboard .home-hero {
    justify-items: stretch !important;
    text-align: left !important;
    gap: .9rem !important;
    min-height: 252px;
    padding: clamp(1rem, 1.9vw, 1.45rem);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(246, 250, 255, .92)),
        linear-gradient(145deg, rgba(13, 110, 253, .08), rgba(25, 135, 84, .07));
    box-shadow: 0 14px 34px rgba(15, 23, 42, .09);
}

.modern-home-dashboard .home-hero::after,
.modern-home-dashboard .home-kicker {
    display: none !important;
}

.modern-home-dashboard .home-brand-weather {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(190px, auto);
    align-items: center;
    gap: .85rem;
    width: 100%;
}

.modern-home-dashboard .home-logo {
    width: 100%;
    max-width: 385px !important;
}

.modern-home-dashboard .home-weather-chip {
    min-width: 0;
    border-radius: 16px;
    padding: .85rem .95rem;
    background: #ffffff;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .08);
}

.modern-home-dashboard .weather-temp {
    font-size: 1.35rem;
    line-height: 1;
}

.modern-home-dashboard .weather-meta {
    color: #64748b;
    line-height: 1.25;
}

.modern-home-dashboard .home-time {
    justify-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    padding: .75rem 1rem;
    border-radius: 16px;
    background: #101827;
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .16);
}

.modern-home-dashboard .home-time .text-muted,
.modern-home-dashboard .home-time .small {
    display: none !important;
}

.modern-home-dashboard .home-time #dateTimeLabel {
    font-size: clamp(1rem, 1.75vw, 1.2rem);
    line-height: 1.25;
}

.modern-home-dashboard .quick-grid {
    grid-template-columns: repeat(5, minmax(74px, 1fr)) !important;
    align-content: start;
    gap: .65rem !important;
    padding: .9rem;
    border-radius: 18px;
}

.modern-home-dashboard .quick-tile,
.modern-home-dashboard .quick-tile.tile-6 {
    grid-column: span 1 !important;
}

.modern-home-dashboard .quick-btn {
    aspect-ratio: 1 / 1;
    min-height: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .45rem !important;
    padding: .7rem !important;
    border-radius: 14px !important;
    text-align: center;
    font-size: clamp(.82rem, 1vw, .95rem) !important;
    line-height: 1.12;
}

.modern-home-dashboard .quick-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 1.45rem !important;
}

.modern-home-dashboard .tile-meta {
    display: none !important;
}

.quick-grid-title {
    padding-bottom: .1rem;
}

.quick-grid-title strong {
    font-size: 1rem;
}

.modern-home-dashboard .today-attendance-panel .card-body {
    padding: .85rem;
}

.modern-home-dashboard .today-attendance-panel .table-responsive {
    overflow: visible;
}

.modern-home-dashboard .today-attendance-panel .input-group {
    max-width: 280px !important;
}

.modern-home-dashboard #employeesCards {
    --bs-gutter-x: .6rem;
    --bs-gutter-y: .6rem;
}

.modern-home-dashboard #employeesCards > [class*="col-"] {
    width: 50% !important;
    flex: 0 0 auto !important;
}

@media (min-width: 1500px) {
    .modern-home-dashboard #employeesCards > [class*="col-"] {
        width: 33.333333% !important;
    }
}

@media (max-width: 680px) {
    .modern-home-dashboard #employeesCards > [class*="col-"] {
        width: 100% !important;
    }
}

.modern-home-dashboard #employeesCards {
    --bs-gutter-x: .5rem !important;
    --bs-gutter-y: .5rem !important;
}

.modern-home-dashboard .emp-card {
    border-radius: 10px !important;
    padding: .55rem .6rem !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .05) !important;
}

.modern-home-dashboard .emp-card .emp-avatar,
.modern-home-dashboard .emp-card .emp-meta {
    display: none !important;
}

.modern-home-dashboard .emp-card > .d-flex {
    gap: 0 !important;
}

.modern-home-dashboard .emp-card .fw-bold {
    font-size: .84rem;
    line-height: 1.15 !important;
}

.modern-home-dashboard .emp-chip {
    white-space: nowrap;
    font-size: .72rem;
    font-weight: 800;
}

.modern-home-dashboard .emp-card .btn {
    border-radius: 8px;
    font-weight: 700;
    padding: .22rem .45rem;
    font-size: .78rem;
}

.modern-home-dashboard .emp-card .d-flex.gap-2.mt-3 {
    margin-top: .45rem !important;
}

.modern-home-dashboard .webcapture-panel .card-body {
    padding: .85rem;
}

.modern-home-dashboard #webCaptureCarouselUnique {
    overflow: hidden;
    border-radius: 16px;
    background: #0f172a;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.modern-home-dashboard .webcapture-image-wrap {
    display: grid;
    place-items: center;
    height: clamp(340px, 58vh, 760px);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, .96), rgba(30, 41, 59, .92)),
        linear-gradient(135deg, rgba(13, 110, 253, .18), rgba(25, 135, 84, .14));
}

.modern-home-dashboard .webcapture-image {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain !important;
    object-position: center center !important;
}

.modern-home-dashboard #webCaptureCarouselUnique .carousel-caption {
    right: auto;
    left: 1rem;
    bottom: 1rem;
    max-width: min(420px, calc(100% - 2rem));
    padding: .75rem .9rem !important;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 14px !important;
    background: rgba(15, 23, 42, .72) !important;
    backdrop-filter: blur(10px);
}

.modern-home-dashboard #webCaptureCarouselUnique .carousel-control-prev,
.modern-home-dashboard #webCaptureCarouselUnique .carousel-control-next {
    width: 3rem;
}

.modern-home-dashboard .activity-log-panel {
    overflow: hidden;
}

.modern-home-dashboard .activity-log-panel .card-body {
    padding: .85rem 1rem 1rem;
}

.modern-home-dashboard .activity-log-panel .dataTables_wrapper {
    display: grid;
    gap: .75rem;
}

.modern-home-dashboard .activity-log-panel .dataTables_length,
.modern-home-dashboard .activity-log-panel .dataTables_filter,
.modern-home-dashboard .activity-log-panel .dataTables_info,
.modern-home-dashboard .activity-log-panel .dataTables_paginate {
    color: #64748b;
    font-size: .88rem;
}

.modern-home-dashboard .activity-log-panel .dataTables_filter input,
.modern-home-dashboard .activity-log-panel .dataTables_length select {
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 10px;
    padding: .35rem .6rem;
    background: #fff;
}

.modern-home-dashboard #activityLogTable {
    margin: .2rem 0 .35rem !important;
    border-collapse: separate !important;
    border-spacing: 0 .45rem !important;
}

.modern-home-dashboard #activityLogTable thead th {
    border: 0;
    color: #64748b;
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.modern-home-dashboard #activityLogTable tbody tr {
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .055);
}

.modern-home-dashboard #activityLogTable tbody td {
    border-top: 1px solid rgba(15, 23, 42, .05);
    border-bottom: 1px solid rgba(15, 23, 42, .05);
    padding-block: .75rem;
}

.modern-home-dashboard #activityLogTable tbody td:first-child {
    border-left: 1px solid rgba(15, 23, 42, .05);
    border-radius: 12px 0 0 12px;
    font-weight: 700;
}

.modern-home-dashboard #activityLogTable tbody td:last-child {
    border-right: 1px solid rgba(15, 23, 42, .05);
    border-radius: 0 12px 12px 0;
    color: #64748b;
    white-space: nowrap;
}

body.dark-mode.modern-home-dashboard {
    background: #0f172a;
}

body.dark-mode.modern-home-dashboard .home-hero,
body.dark-mode.modern-home-dashboard .quick-grid,
body.dark-mode.modern-home-dashboard .home-weather-chip {
    background: rgba(17, 24, 39, .9) !important;
}

body.dark-mode.modern-home-dashboard .activity-log-panel .dataTables_filter input,
body.dark-mode.modern-home-dashboard .activity-log-panel .dataTables_length select,
body.dark-mode.modern-home-dashboard #activityLogTable tbody tr {
    background: #111827;
    color: #e5e7eb;
}

@media (orientation: landscape) and (max-height: 780px) {
    .home-command-center {
        grid-template-columns: minmax(310px, .82fr) minmax(440px, 1.18fr);
    }

    .modern-home-dashboard .home-hero {
        min-height: 218px;
    }

    .modern-home-dashboard .quick-grid {
        grid-template-columns: repeat(5, minmax(70px, 1fr)) !important;
    }

    .modern-home-dashboard .quick-btn {
        font-size: .8rem !important;
    }
}

@media (max-width: 1180px) {
    .home-command-center {
        grid-template-columns: 1fr;
    }

    .modern-home-dashboard .quick-grid {
        grid-template-columns: repeat(5, minmax(78px, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .modern-home-dashboard .home-brand-weather {
        grid-template-columns: 1fr;
    }

    .modern-home-dashboard .home-logo {
        max-width: min(350px, 88vw) !important;
    }

    .modern-home-dashboard .quick-grid {
        grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
    }

    .modern-home-dashboard .quick-tile,
    .modern-home-dashboard .quick-tile.tile-6 {
        grid-column: span 1 !important;
    }
}