/* =========================================================
   VORSHIA HRMS
   Modern Navy + White Design System
   ========================================================= */

:root {
    --navy: #0b1f3a;
    --navy-2: #123b68;
    --navy-3: #1a5b8d;
    --navy-light: #eaf3fb;

    --ink: #10243e;
    --muted: #6f8198;
    --muted-light: #94a5b7;

    --line: #e3ebf3;
    --soft: #f4f7fb;
    --soft-blue: #eef5fb;

    --white: #ffffff;

    --green: #138a72;
    --green-soft: #eaf8f2;

    --amber: #b66a05;
    --amber-soft: #fff3df;

    --red: #b23b3b;
    --red-soft: #fff0ef;

    --purple: #7455b7;
    --purple-soft: #f1edfc;

    --shadow: 0 10px 30px rgba(11, 31, 58, 0.06);
    --shadow-hover: 0 16px 38px rgba(11, 31, 58, 0.11);
    --shadow-large: 0 24px 70px rgba(11, 31, 58, 0.14);

    --gradient-navy: linear-gradient(
        135deg,
        #07192f 0%,
        #0b294b 48%,
        #165887 100%
    );

    --gradient-navy-soft: linear-gradient(
        135deg,
        #102a43 0%,
        #174d7b 100%
    );

    --gradient-page: linear-gradient(
        180deg,
        #f9fbfe 0%,
        #f4f7fb 100%
    );

    --radius: 20px;
    --radius-small: 12px;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(26, 91, 141, 0.07),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #f9fbfe 0%,
            #f4f7fb 100%
        );

    color: var(--ink);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 14px;
    line-height: 1.5;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

img {
    max-width: 100%;
    display: block;
}

.danger-button {
    background: var(--red-soft);
    color: var(--red);
}


/* =========================================================
   MAIN APPLICATION
   ========================================================= */

.app-shell {
    min-height: 100vh;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {
    background: var(--gradient-navy);

    border-right: 0;

    color: #fff;

    display: flex;
    flex-direction: column;

    left: 0;
    top: 0;

    min-height: 100vh;

    padding: 24px 16px;

    position: fixed;

    width: 245px;

    z-index: 20;

    box-shadow:
        8px 0 35px rgba(7, 25, 47, 0.08);

    overflow: hidden;
}

.sidebar::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background: rgba(56, 145, 212, 0.12);

    filter: blur(45px);

    top: -50px;
    right: -60px;

    pointer-events: none;
}


/* =========================================================
   BRAND
   ========================================================= */

.sidebar-brand {
    align-items: center;

    display: flex;

    gap: 12px;

    padding: 0 8px 28px;

    position: relative;

    z-index: 1;
}

.sidebar-brand img {
    width: 78px;
    height: 78px;

    padding: 8px;

    background: #fff;

    border: 2px solid rgba(255, 255, 255, 0.72);

    border-radius: 50%;

    object-fit: contain;
    object-position: center;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.18);
}

.sidebar-brand span {
    background: rgba(255, 255, 255, 0.11);

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 999px;

    color: #ffffff;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .08em;

    padding: 6px 9px;
}


/* =========================================================
   SIDEBAR USER
   ========================================================= */

.sidebar-user {
    align-items: center;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 16px;

    display: flex;

    gap: 10px;

    margin: 0 0 22px;

    padding: 12px;

    position: relative;

    z-index: 1;
}

.sidebar-user img,
.profile-chip img {
    width: 36px;
    height: 36px;

    border-radius: 50%;

    object-fit: cover;
}

.sidebar-user div {
    min-width: 0;
}

.sidebar-user strong,
.sidebar-user span {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.sidebar-user strong {
    color: #fff;

    font-size: 12px;
}

.sidebar-user span {
    color: #b7c9dc;

    font-size: 10px;

    margin-top: 2px;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.side-nav {
    flex: 1;

    position: relative;

    z-index: 1;
}

.nav-label {
    color: #84a1bc;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .14em;

    margin: 15px 10px 8px;
}

.side-nav a {
    align-items: center;

    border-radius: 13px;

    color: #b8cada;

    display: flex;

    font-size: 12px;

    font-weight: 600;

    gap: 12px;

    margin: 4px 0;

    padding: 12px;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.side-nav a:hover {
    background: rgba(255, 255, 255, 0.08);

    color: #fff;

    transform: translateX(2px);
}

.side-nav a.active {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0.09)
        );

    color: #fff;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 6px 18px rgba(0, 0, 0, 0.08);
}

.side-nav i {
    font-size: 17px;

    font-style: normal;

    text-align: center;

    width: 18px;
}

.notification-dot {
    background: #f06459;

    border: 2px solid rgba(7, 25, 47, .7);

    border-radius: 20px;

    color: #fff;

    font-size: 9px;

    margin-left: auto;

    padding: 1px 5px;
}


/* =========================================================
   SIDEBAR LOGOUT
   ========================================================= */

.sidebar-logout {
    border-top: 1px solid rgba(255, 255, 255, .10);

    color: #9fb2c7;

    font-size: 12px;

    padding: 18px 12px 0;

    position: relative;

    z-index: 1;
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.main-content {
    margin-left: 245px;

    min-height: 100vh;
}


/* =========================================================
   TOPBAR
   ========================================================= */

.topbar {
    align-items: center;

    background: rgba(249, 251, 254, .86);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border-bottom: 1px solid rgba(227, 235, 243, .7);

    display: flex;

    justify-content: space-between;

    padding: 24px 5% 18px;

    position: sticky;

    top: 0;

    z-index: 10;
}

.topbar h1 {
    font-size: 26px;

    letter-spacing: -.045em;

    margin: 1px 0 0;
}

.eyebrow {
    color: #7894ae;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .15em;

    margin: 0 0 4px;
}

.muted {
    color: var(--muted);
}

.topbar-actions {
    align-items: center;

    display: flex;

    gap: 12px;
}

.icon-button {
    align-items: center;

    background: #fff;

    border: 1px solid var(--line);

    border-radius: 13px;

    color: var(--navy);

    display: inline-flex;

    font-size: 20px;

    height: 42px;

    justify-content: center;

    position: relative;

    width: 42px;

    transition:
        box-shadow .2s ease,
        transform .2s ease;
}

.icon-button:hover {
    box-shadow: var(--shadow);

    transform: translateY(-1px);
}

.icon-button b {
    background: #e66c58;

    border: 2px solid #f9fbfe;

    border-radius: 50%;

    height: 8px;

    position: absolute;

    right: 7px;

    top: 7px;

    width: 8px;
}

.profile-chip {
    align-items: center;

    display: flex;

    font-size: 12px;

    font-weight: 700;

    gap: 8px;
}

.profile-chip img {
    border: 2px solid #fff;

    box-shadow:
        0 3px 10px rgba(11, 31, 58, .12);
}


/* =========================================================
   PAGE AREA
   ========================================================= */

.page-body {
    margin: 0 auto;

    max-width: 1400px;

    padding: 16px 5% 60px;
}

.hero-row {
    align-items: center;

    display: flex;

    justify-content: space-between;

    margin: 8px 0 26px;
}

.hero-row p {
    margin: 0;
}

.welcome-title {
    font-size: 26px;

    letter-spacing: -.05em;

    margin: 4px 0;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.button {
    align-items: center;

    border: 0;

    border-radius: 12px;

    display: inline-flex;

    font-size: 12px;

    font-weight: 700;

    gap: 9px;

    justify-content: center;

    padding: 11px 17px;

    transition:
        box-shadow .2s ease,
        transform .2s ease,
        background .2s ease;
}

.button:hover {
    box-shadow:
        0 10px 22px rgba(11, 31, 58, .13);

    transform: translateY(-2px);
}

.button.primary {
    background: var(--gradient-navy-soft);

    box-shadow:
        0 7px 18px rgba(11, 31, 58, .15);

    color: #fff;
}

.button.primary:hover {
    box-shadow:
        0 12px 25px rgba(11, 31, 58, .22);
}

.button.secondary {
    background: #edf4fa;

    color: var(--navy);
}

.button.wide {
    width: 100%;
}

.text-link {
    color: var(--navy-2);

    font-size: 11px;

    font-weight: 700;
}

.text-link.centered {
    display: block;

    margin: 22px auto 0;

    text-align: center;
}


/* =========================================================
   ALERTS
   ========================================================= */

.alert {
    border: 1px solid transparent;

    border-radius: 12px;

    font-size: 12px;

    margin-bottom: 16px;

    padding: 12px 15px;

    transition: opacity .3s;
}

.alert.success {
    background: var(--green-soft);

    border-color: #d8f0e6;

    color: #137457;
}

.alert.error {
    background: var(--red-soft);

    border-color: #f4d8d5;

    color: #a43535;
}

.alert.warning {
    background: #fff6e5;

    border-color: #f3e3bf;

    color: #9b610e;
}

.page-alert {
    margin: 0 5%;
}

.fade-out {
    opacity: .35;
}


/* =========================================================
   CARDS
   ========================================================= */

.card {
    background: rgba(255, 255, 255, .96);

    border: 1px solid rgba(227, 235, 243, .92);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    padding: 23px;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.card:hover {
    box-shadow: var(--shadow-hover);
}

.card-heading {
    align-items: flex-start;

    display: flex;

    justify-content: space-between;

    margin-bottom: 18px;
}

.card-heading h2,
.card h2 {
    font-size: 17px;

    letter-spacing: -.03em;

    margin: 2px 0;
}


/* =========================================================
   STATS
   ========================================================= */

.stats-grid {
    display: grid;

    gap: 14px;

    grid-template-columns: repeat(4, 1fr);

    margin-bottom: 18px;
}

.stat-card {
    align-items: center;

    background: #fff;

    border: 1px solid var(--line);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    display: flex;

    gap: 15px;

    padding: 19px;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.stat-card:hover {
    box-shadow: var(--shadow-hover);

    transform: translateY(-2px);
}

.stat-card strong,
.stat-card span {
    display: block;
}

.stat-card strong {
    font-size: 26px;

    letter-spacing: -.05em;
}

.stat-card span:not(.stat-icon) {
    color: var(--muted);

    font-size: 11px;

    margin-top: 2px;
}

.stat-icon {
    align-items: center;

    background: var(--navy-light);

    border-radius: 14px;

    display: flex;

    height: 42px;

    justify-content: center;

    position: relative;

    width: 42px;
}

.stat-icon:after {
    color: var(--navy);

    content: "";

    height: 9px;

    left: 16px;

    position: absolute;

    top: 16px;

    width: 9px;
}

.stat-icon.people {
    background: #e9f6f5;
}

.stat-icon.people:after {
    border: 2px solid #238a8a;

    border-radius: 50%;
}

.stat-icon.present {
    background: var(--green-soft);
}

.stat-icon.present:after {
    background: var(--green);

    border-radius: 50%;
}

.stat-icon.leave {
    background: var(--amber-soft);
}

.stat-icon.leave:after {
    background: #bd720b;

    border-radius: 3px;
}

.stat-icon.pending {
    background: var(--purple-soft);
}

.stat-icon.pending:after {
    border: 2px solid var(--purple);

    border-radius: 50%;
}


/* =========================================================
   DASHBOARD
   ========================================================= */

.dashboard-grid {
    display: grid;

    gap: 18px;

    grid-template-columns: 1.2fr 1fr;
}

.activity-card {
    min-height: 290px;
}

.pulse-row {
    align-items: center;

    background:
        linear-gradient(
            135deg,
            #f7fbff,
            #eef6fc
        );

    border: 1px solid #e6eff7;

    border-radius: 16px;

    display: flex;

    gap: 17px;

    padding: 20px;
}

.pulse-number {
    color: var(--navy);

    font-size: 45px;

    font-weight: 800;

    letter-spacing: -.08em;
}

.pulse-row strong,
.pulse-row span {
    display: block;
}

.pulse-row span {
    color: var(--muted);

    font-size: 11px;

    margin-top: 3px;
}

.mini-metrics {
    border-top: 1px solid var(--line);

    display: grid;

    grid-template-columns: 1fr 1fr;

    margin-top: 23px;

    padding-top: 20px;
}

.mini-metrics div + div {
    border-left: 1px solid var(--line);

    padding-left: 25px;
}

.mini-metrics span,
.mini-metrics small {
    display: block;
}

.mini-metrics span {
    font-size: 20px;

    font-weight: 800;
}

.mini-metrics small {
    color: var(--muted);

    font-size: 10px;

    margin-top: 3px;
}


/* =========================================================
   PEOPLE ROWS
   ========================================================= */

.person-row {
    align-items: center;

    display: flex;

    gap: 11px;

    margin: 13px 0;
}

.person-row img {
    border: 2px solid #fff;

    border-radius: 50%;

    box-shadow:
        0 3px 10px rgba(11, 31, 58, .10);

    height: 38px;

    object-fit: cover;

    width: 38px;
}

.person-row div {
    flex: 1;

    min-width: 0;
}

.person-row strong,
.person-row span {
    display: block;
}

.person-row strong {
    font-size: 12px;
}

.person-row span {
    color: var(--muted);

    font-size: 10px;

    margin-top: 2px;
}

.person-row .tag {
    margin-left: auto;
}

.person-row.compact {
    margin: 0;
}

.person-row.compact img {
    height: 32px;
    width: 32px;
}


/* =========================================================
   STATUS TAGS
   ========================================================= */

.tag {
    border-radius: 999px;

    display: inline-block;

    font-size: 9px;

    font-weight: 800;

    padding: 5px 9px;

    text-transform: capitalize;
}

.tag.blue,
.tag.present,
.tag.approved,
.tag.verified {
    background: #e8f3f8;

    color: #176480;
}

.tag.amber,
.tag.pending,
.tag.reviewed,
.tag.under-review {
    background: var(--amber-soft);

    color: #9d610b;
}

.tag.rejected,
.tag.inactive,
.tag.restricted,
.tag.late {
    background: var(--red-soft);

    color: #a33d3d;
}

.tag.active {
    background: var(--green-soft);

    color: #137457;
}

.tag.draft {
    background: #f0f2f5;

    color: #607086;
}


/* =========================================================
   PERSONAL / EMPLOYEE CARDS
   ========================================================= */

.personal-grid {
    display: grid;

    gap: 18px;

    grid-template-columns: repeat(2, 1fr);
}

.today-card {
    background: var(--gradient-navy);

    border: 0;

    color: #fff;

    box-shadow:
        0 20px 45px rgba(11, 31, 58, .18);
}

.today-card .eyebrow,
.today-card .muted {
    color: #bdd3e5;
}

.today-card h2 {
    font-size: 31px;

    margin-top: 25px;
}

.today-card .text-link {
    color: #fff;

    display: block;

    margin-top: 22px;
}

.balance-card .text-link {
    display: block;

    margin-top: 20px;
}

.balance-lines {
    display: flex;

    gap: 35px;

    margin: 25px 0 5px;
}

.balance-lines span,
.balance-lines strong {
    display: block;
}

.balance-lines span {
    color: var(--muted);

    font-size: 11px;
}

.balance-lines strong {
    font-size: 23px;

    margin-top: 3px;
}

.balance-lines small {
    color: var(--muted);

    font-size: 10px;

    font-weight: 500;
}


/* =========================================================
   EMPTY STATES
   ========================================================= */

.empty-state {
    align-items: center;

    color: var(--muted);

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-height: 130px;

    text-align: center;
}

.empty-state span {
    color: #abc0d4;

    font-size: 25px;
}

.empty-state p {
    font-size: 12px;
}

.empty-state.large {
    min-height: 300px;
}


/* =========================================================
   TABLES
   ========================================================= */

.table-card {
    overflow: hidden;

    padding-bottom: 8px;
}

.table-wrap {
    overflow-x: auto;
}

table {
    border-collapse: collapse;

    min-width: 680px;

    width: 100%;
}

th {
    color: #8d9fb3;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .08em;

    padding: 11px 8px;

    text-align: left;

    text-transform: uppercase;
}

td {
    border-top: 1px solid #edf2f6;

    color: #50657c;

    font-size: 11px;

    padding: 14px 8px;

    vertical-align: middle;
}

tbody tr {
    transition: background .2s ease;
}

tbody tr:hover {
    background: #f9fbfd;
}

td strong,
td span {
    display: block;
}

td strong {
    color: var(--ink);
}

.table-sub {
    color: #99a9bb;

    font-size: 10px;

    margin-top: 2px;
}

.kebab {
    color: var(--navy-2);

    font-size: 11px;

    font-weight: 700;
}


/* =========================================================
   SEARCH
   ========================================================= */

.search-input {
    background: #f7fafd;

    border: 1px solid var(--line);

    border-radius: 10px;

    font-size: 11px;

    outline: 0;

    padding: 10px 12px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

    width: 180px;
}

.search-input:focus {
    background: #fff;

    border-color: #7da7c6;

    box-shadow: 0 0 0 3px #eaf2f9;
}


/* =========================================================
   FORMS
   ========================================================= */

.form-card {
    margin-bottom: 18px;
}

.form-grid {
    display: grid;

    gap: 15px;

    grid-template-columns: repeat(2, 1fr);
}

label {
    color: #516981;

    display: flex;

    flex-direction: column;

    font-size: 11px;

    font-weight: 700;

    gap: 6px;
}

input,
select,
textarea {
    background: #fbfcfe;

    border: 1px solid #dbe5ee;

    border-radius: 10px;

    color: var(--ink);

    outline: 0;

    padding: 10px 11px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

input:hover,
select:hover,
textarea:hover {
    background: #fff;
}

input:focus,
select:focus,
textarea:focus {
    background: #fff;

    border-color: #6e9dbd;

    box-shadow: 0 0 0 3px #eaf2f9;
}

textarea {
    resize: vertical;
}

.span-2 {
    grid-column: span 2;
}

.form-actions {
    display: flex;

    grid-column: span 2;

    justify-content: flex-end;

    padding-top: 4px;
}


/* =========================================================
   AVATAR UPLOAD
   ========================================================= */

.avatar-upload {
    align-items: center;

    display: flex;

    gap: 12px;

    grid-column: span 2;
}

.avatar-upload label {
    align-items: center;

    cursor: pointer;

    display: flex;

    flex-direction: row;

    gap: 10px;
}

.avatar-upload img {
    border: 3px solid #eaf2f9;

    border-radius: 50%;

    box-shadow:
        0 5px 15px rgba(11, 31, 58, .08);

    height: 64px;

    object-fit: cover;

    width: 64px;
}

.avatar-upload span {
    color: var(--navy-2);

    font-size: 11px;
}

.avatar-upload input {
    display: none;
}


/* =========================================================
   PROFILE
   ========================================================= */

.profile-hero {
    align-items: center;

    display: flex;

    gap: 17px;

    margin-bottom: 18px;
}

.profile-large {
    border: 4px solid #fff;

    border-radius: 50%;

    box-shadow:
        0 8px 22px rgba(11, 31, 58, .12);

    height: 88px;

    object-fit: cover;

    width: 88px;
}

.profile-hero .tag {
    margin-left: auto;
}

.narrow-card {
    max-width: 600px;
}


/* =========================================================
   INLINE FORMS
   ========================================================= */

.inline-form,
.inline-upload {
    align-items: center;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}

.inline-form input,
.inline-form select {
    flex: 1;

    min-width: 160px;
}

.inline-upload > * {
    flex: 1;

    min-width: 150px;
}

.inline-upload .button {
    flex: 0;
}


/* =========================================================
   ATTENDANCE
   ========================================================= */

.attendance-hero {
    align-items: center;

    background: var(--gradient-navy);

    border: 0;

    color: #fff;

    display: flex;

    justify-content: space-between;

    margin-bottom: 18px;

    overflow: hidden;

    position: relative;
}

.attendance-hero::after {
    content: "";

    position: absolute;

    width: 230px;

    height: 230px;

    border-radius: 50%;

    background: rgba(85, 173, 232, .15);

    filter: blur(45px);

    right: -60px;

    top: -80px;

    pointer-events: none;
}

.attendance-hero .eyebrow,
.attendance-hero .muted {
    color: #bdd3e5;
}

.time-pill {
    background: rgba(255,255,255,.10);

    border: 1px solid rgba(255,255,255,.10);

    border-radius: 15px;

    padding: 15px 18px;

    text-align: center;
}

.time-pill span,
.time-pill small {
    display: block;
}

.time-pill span {
    font-size: 20px;

    font-weight: 800;
}

.time-pill small {
    color: #c8dce9;

    font-size: 10px;
}

.action-card {
    margin-bottom: 18px;
}

.capture-box {
    align-items: center;

    background: #f7fafd;

    border: 1px dashed #bfd1df;

    border-radius: 14px;

    display: flex;

    gap: 12px;

    padding: 14px;
}

.capture-icon {
    align-items: center;

    background: #e4f0f7;

    border-radius: 50%;

    color: var(--navy-2);

    display: flex;

    font-size: 22px;

    height: 42px;

    justify-content: center;

    width: 42px;

    flex-shrink: 0;
}

.capture-box strong,
.capture-box span {
    display: block;
}

.capture-box strong {
    font-size: 12px;
}

.capture-box span {
    color: var(--muted);

    font-size: 10px;

    margin-top: 3px;
}

.action-grid {
    display: flex;

    gap: 10px;

    margin-top: 15px;
}

.action-grid .button {
    flex: 1;
}


/* =========================================================
   LEAVE BALANCES
   ========================================================= */

.balance-strip {
    display: grid;

    gap: 1px;

    grid-template-columns: repeat(3, 1fr);

    margin-bottom: 18px;
}

.balance-strip > div {
    background: #fff;

    border: 1px solid var(--line);

    padding: 17px;
}

.balance-strip > div:first-child {
    border-radius: 16px 0 0 16px;
}

.balance-strip > div:last-child {
    border-radius: 0 16px 16px 0;
}

.balance-strip span,
.balance-strip strong,
.balance-strip small {
    display: block;
}

.balance-strip span {
    color: var(--muted);

    font-size: 10px;
}

.balance-strip strong {
    font-size: 19px;

    margin: 4px 0;
}

.balance-strip small {
    color: #97a7b7;

    font-size: 10px;
}


/* =========================================================
   DECISION FORMS
   ========================================================= */

.decision-form {
    align-items: center;

    display: flex;

    gap: 5px;

    min-width: 250px;
}

.decision-form input {
    font-size: 10px;

    padding: 6px;

    width: 100px;
}

.mini-button {
    background: #fff;

    border: 0;

    border-radius: 7px;

    font-size: 9px;

    font-weight: 800;

    padding: 7px;
}

.mini-button.approve {
    background: var(--green-soft);

    color: #137457;
}

.mini-button.reject {
    background: var(--red-soft);

    color: #a33d3d;
}

.table-input {
    max-width: 80px;

    padding: 6px;
}


/* =========================================================
   NOTIFICATIONS
   ========================================================= */

.notification-list {
    padding: 8px 23px;
}

.notification-row {
    align-items: flex-start;

    border-bottom: 1px solid var(--line);

    display: flex;

    gap: 13px;

    padding: 17px 0;
}

.notification-row:last-child {
    border: 0;
}

.notification-row.unread {
    background: #fbfdff;

    border-left: 3px solid var(--navy-2);

    margin: 0 -10px;

    padding-left: 10px;

    padding-right: 10px;
}

.notification-icon {
    align-items: center;

    background: #eaf2f9;

    border-radius: 12px;

    color: var(--navy);

    display: flex;

    font-size: 18px;

    height: 35px;

    justify-content: center;

    width: 35px;

    flex-shrink: 0;
}

.notification-row strong,
.notification-row p,
.notification-row small {
    display: block;
}

.notification-row p {
    color: var(--muted);

    font-size: 11px;

    margin: 3px 0;
}

.notification-row small {
    color: #9aaabd;

    font-size: 10px;
}


/* =========================================================
   LISTS
   ========================================================= */

.list-row {
    align-items: center;

    border-bottom: 1px solid var(--line);

    display: flex;

    justify-content: space-between;

    padding: 11px 0;
}

.list-row:last-child {
    border-bottom: 0;
}

.list-row strong,
.list-row span {
    display: block;
}

.list-row strong {
    font-size: 12px;
}

.list-row span {
    color: var(--muted);

    font-size: 10px;

    margin-top: 2px;
}

.holiday-list {
    margin-top: 18px;

    max-width: 600px;
}

.icon-button.danger {
    color: var(--red);
}


/* =========================================================
   LOGIN PAGE
   ========================================================= */

.auth-page {
    align-items: center;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(26, 91, 141, .20),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #07192f 0%,
            #0b294b 48%,
            #165887 100%
        );

    display: flex;

    justify-content: center;

    min-height: 100vh;

    padding: 20px;

    position: relative;

    overflow: hidden;
}

.auth-page::before {
    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background: rgba(74, 166, 226, .12);

    filter: blur(70px);

    right: -140px;

    top: -140px;

    pointer-events: none;
}

.auth-page::after {
    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    border-radius: 50%;

    background: rgba(255,255,255,.04);

    filter: blur(60px);

    left: -120px;

    bottom: -80px;

    pointer-events: none;
}

.auth-card {
    background: rgba(255,255,255,.97);

    border: 1px solid rgba(255,255,255,.65);

    border-radius: 28px;

    box-shadow: var(--shadow-large);

    max-width: 440px;

    padding: 38px;

    position: relative;

    width: 100%;

    z-index: 1;
}

.brand-lockup {
    align-items: flex-start;

    display: flex;

    flex-direction: column;

    gap: 9px;
}

.brand-lockup img {
    background: #fff;

    border: 3px solid #eef4fa;

    border-radius: 50%;

    box-shadow:
        0 8px 22px rgba(11, 31, 58, .12);

    height: 74px;

    object-fit: contain;

    object-position: center;

    padding: 7px;

    width: 74px;
}

.brand-lockup span {
    color: var(--muted);

    font-size: 10px;
}

.auth-heading {
    margin: 34px 0 24px;
}

.auth-heading h1 {
    color: var(--navy);

    font-size: 30px;

    letter-spacing: -.06em;

    margin: 3px 0 6px;
}

.stack {
    display: flex;

    flex-direction: column;

    gap: 15px;
}

.auth-footnote {
    color: #9aaabd;

    font-size: 10px;

    margin: 35px 0 0;

    text-align: center;
}


/* =========================================================
   ATTENDANCE CAMERA MODAL
   ========================================================= */

.camera-modal {
    position: fixed;

    inset: 0;

    z-index: 1000;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 16px;

    background: rgba(4, 18, 35, .78);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.camera-modal.open {
    display: flex;
}

.camera-modal-box {
    width: min(92vw, 430px);

    max-height: 92vh;

    overflow-y: auto;

    background: #fff;

    border-radius: 22px;

    padding: 16px;

    box-shadow:
        0 25px 70px rgba(0,0,0,.30);
}

.camera-modal-header {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 12px;
}

.camera-modal-header h2 {
    margin: 2px 0 0;

    font-size: 20px;

    color: var(--navy);
}

.camera-close {
    width: 34px;

    height: 34px;

    border: 0;

    border-radius: 50%;

    background: #eef4f8;

    color: var(--navy);

    font-size: 23px;

    line-height: 1;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    justify-content: center;
}

.camera-close:hover {
    background: #e1ebf3;
}

.camera-preview-wrap {
    position: relative;

    width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    border-radius: 16px;

    background: #07192f;
}

.camera-preview-wrap video,
.camera-preview-wrap img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;
}

/*
   Mirror live selfie preview so it behaves like a
   normal front-facing phone camera.
*/
.camera-preview-wrap video {
    transform: scaleX(-1);
}

.camera-preview-wrap img {
    object-fit: cover;

    transform: none;
}

/*
   Subtle face-position guide.
*/
.camera-preview-wrap::after {
    content: "";

    position: absolute;

    left: 17%;
    right: 17%;

    top: 10%;
    bottom: 10%;

    border: 2px solid rgba(255,255,255,.55);

    border-radius: 48%;

    pointer-events: none;

    box-shadow:
        0 0 0 9999px rgba(0,0,0,.06);
}

.camera-error {
    margin-top: 10px;

    padding: 10px 12px;

    border-radius: 10px;

    background: var(--red-soft);

    color: var(--red);

    font-size: 11px;

    line-height: 1.5;
}

.camera-actions {
    display: flex;

    gap: 8px;

    margin-top: 12px;
}

.camera-actions .button {
    flex: 1;

    min-height: 42px;
}

.camera-help {
    color: var(--muted);

    font-size: 9px;

    line-height: 1.5;

    margin: 10px 2px 0;

    text-align: center;
}


/* =========================================================
   MOBILE NAV
   ========================================================= */

.mobile-nav {
    display: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .sidebar {
        width: 220px;
    }

    .main-content {
        margin-left: 220px;
    }

    .sidebar-brand img {
        width: 68px;

        height: 68px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .topbar,
    .page-body {
        padding-left: 4%;

        padding-right: 4%;
    }

    .page-alert {
        margin-left: 4%;

        margin-right: 4%;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    body {
        font-size: 13px;
    }

    .sidebar {
        display: none;
    }

    .main-content {
        margin-left: 0;

        padding-bottom: 72px;
    }

    .topbar {
        padding: 18px 16px 13px;
    }

    .topbar h1 {
        font-size: 21px;
    }

    .topbar-actions {
        gap: 8px;
    }

    .profile-chip span {
        display: none;
    }

    .page-body {
        padding: 8px 15px 35px;
    }

    .hero-row {
        align-items: flex-start;

        gap: 15px;

        margin-bottom: 20px;
    }

    .hero-row .button {
        white-space: nowrap;
    }

    .welcome-title {
        font-size: 22px;
    }

    .stats-grid {
        gap: 9px;

        grid-template-columns: repeat(2, 1fr);
    }

    .stat-card {
        padding: 13px 11px;
    }

    .stat-card strong {
        font-size: 21px;
    }

    .stat-card span:not(.stat-icon) {
        font-size: 10px;
    }

    .stat-icon {
        height: 32px;

        width: 32px;
    }

    .stat-icon:after {
        left: 12px;

        top: 12px;
    }

    .personal-grid {
        grid-template-columns: 1fr;
    }

    .card {
        border-radius: 16px;

        padding: 18px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .span-2,
    .form-actions,
    .avatar-upload {
        grid-column: span 1;
    }

    .form-actions {
        justify-content: stretch;
    }

    .form-actions .button {
        width: 100%;
    }

    .profile-hero {
        align-items: flex-start;

        flex-wrap: wrap;
    }

    .profile-hero .tag {
        margin-left: 0;
    }

    .profile-large {
        height: 76px;

        width: 76px;
    }

    .balance-strip {
        grid-template-columns: 1fr;
    }

    .balance-strip > div {
        border-radius: 0 !important;
    }

    .balance-strip > div:first-child {
        border-radius: 15px 15px 0 0 !important;
    }

    .balance-strip > div:last-child {
        border-radius: 0 0 15px 15px !important;
    }

    .inline-upload,
    .inline-form {
        align-items: stretch;

        flex-direction: column;
    }

    .inline-upload > * {
        width: 100%;
    }

    .inline-upload .button {
        width: 100%;
    }

    .decision-form {
        align-items: stretch;

        flex-direction: column;

        min-width: 130px;
    }

    .decision-form input {
        width: 100%;
    }

    .capture-box {
        align-items: flex-start;

        flex-wrap: wrap;
    }

    .action-grid {
        flex-direction: column;
    }

    .mobile-nav {
        align-items: center;

        background: rgba(255,255,255,.97);

        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);

        border-top: 1px solid var(--line);

        bottom: 0;

        box-shadow:
            0 -8px 24px rgba(11, 31, 58, .07);

        display: flex;

        justify-content: space-around;

        left: 0;

        padding: 8px 8px 7px;

        position: fixed;

        right: 0;

        z-index: 30;
    }

    .mobile-nav a {
        align-items: center;

        color: #8b9bae;

        display: flex;

        flex-direction: column;

        font-size: 9px;

        font-weight: 700;

        gap: 2px;

        min-width: 55px;

        padding: 3px;
    }

    .mobile-nav a.active {
        color: var(--navy);
    }

    .mobile-nav i {
        font-size: 18px;

        font-style: normal;
    }

    .search-input {
        width: 120px;
    }

    .auth-page {
        padding: 15px;
    }

    .auth-card {
        border-radius: 24px;

        padding: 28px 22px;
    }

    .auth-heading {
        margin-top: 30px;
    }

    .auth-heading h1 {
        font-size: 27px;
    }

    .brand-lockup img {
        height: 68px;

        width: 68px;
    }


    /* -----------------------------------------------
       CAMERA ON MOBILE
       ----------------------------------------------- */

    .camera-modal {
        padding: 10px;
    }

    .camera-modal-box {
        width: min(94vw, 360px);

        max-height: 90vh;

        padding: 13px;

        border-radius: 20px;
    }

    .camera-preview-wrap {
        aspect-ratio: 4 / 3;

        border-radius: 14px;
    }

    .camera-modal-header h2 {
        font-size: 18px;
    }

    .camera-actions {
        gap: 7px;
    }

    .camera-actions .button {
        min-height: 40px;

        font-size: 11px;
    }

    .camera-help {
        font-size: 8.5px;
    }
}
/* =========================================================
   HRM EXPERIENCE V2 — NAVY MOTION SYSTEM
   Functional redesign layered over the existing component set.
   ========================================================= */
:root {
    --navy-ink: #07182d;
    --navy-main: #0b2a4d;
    --navy-mid: #124875;
    --navy-glow: rgba(43, 118, 179, .18);
    --surface: #ffffff;
    --surface-2: #f7faff;
    --surface-3: #eef4f9;
    --border-soft: rgba(15, 48, 82, .09);
    --shadow-soft: 0 14px 36px rgba(9, 34, 61, .07);
    --shadow-lift: 0 22px 50px rgba(7, 30, 55, .13);
}

body {
    background:
        radial-gradient(circle at 88% -6%, rgba(30, 101, 156, .12), transparent 28%),
        radial-gradient(circle at -12% 18%, rgba(18, 72, 117, .06), transparent 26%),
        #f5f8fc;
}

.sidebar {
    width: 264px;
    padding: 18px 14px 14px;
    background:
        radial-gradient(circle at 0% 0%, rgba(75, 158, 214, .18), transparent 24%),
        linear-gradient(180deg, #06182d 0%, #0a2748 56%, #0c335b 100%);
    box-shadow: 18px 0 44px rgba(5, 27, 49, .12);
}

.sidebar::before {
    content: "";
    position: absolute;
    inset: auto -80px 120px auto;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(55, 145, 210, .10);
    filter: blur(40px);
    pointer-events: none;
}

.sidebar-brand {
    padding: 4px 9px 20px;
}

.sidebar-brand img {
    width: 58px;
    height: 58px;
    padding: 6px;
    border-radius: 17px;
    box-shadow: 0 12px 24px rgba(0,0,0,.19);
    transition: transform .35s cubic-bezier(.2,.75,.2,1), box-shadow .35s ease;
}

.sidebar-brand:hover img {
    transform: translateY(-2px) rotate(-2deg);
    box-shadow: 0 18px 30px rgba(0,0,0,.24);
}

.sidebar-user {
    margin: 0 2px 16px;
    padding: 11px 12px;
    border-radius: 18px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(12px);
}

.side-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 2px 3px 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.25) transparent;
}

.side-nav::-webkit-scrollbar { width: 6px; }
.side-nav::-webkit-scrollbar-track { background: transparent; }
.side-nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.24);
    border-radius: 999px;
}

.side-nav .nav-label {
    margin: 18px 11px 7px;
    color: rgba(255,255,255,.42);
    letter-spacing: .13em;
    font-size: 10px;
    font-weight: 800;
}

.side-nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 47px;
    margin: 4px 0;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 14px;
    color: rgba(255,255,255,.70);
    transition: transform .28s cubic-bezier(.2,.75,.2,1), background .28s ease, border-color .28s ease, color .28s ease;
}

.side-nav a::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 99px;
    background: #7ac3f5;
    transform: scaleY(0);
    transition: transform .28s ease;
}

.side-nav a:hover {
    color: #fff;
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.08);
    transform: translateX(3px);
}

.side-nav a.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(91,174,229,.22), rgba(255,255,255,.07));
    border-color: rgba(154,211,246,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 26px rgba(3,16,30,.13);
}

.side-nav a.active::before { transform: scaleY(1); }

.side-nav a i {
    width: 24px;
    min-width: 24px;
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 15px;
    opacity: .95;
}

.sidebar-logout {
    margin-top: 8px;
    min-height: 46px;
    border-radius: 14px;
    flex-shrink: 0;
    transition: background .25s ease, transform .25s ease;
}

.sidebar-logout:hover {
    background: rgba(255,255,255,.07);
    transform: translateX(2px);
}

.main-content {
    margin-left: 264px;
    min-height: 100vh;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 12;
    min-height: 80px;
    padding: 16px 34px;
    background: rgba(247,250,253,.82);
    border-bottom: 1px solid rgba(11,42,77,.06);
    backdrop-filter: blur(18px);
}

.topbar > div:first-child h1 {
    letter-spacing: -.035em;
}

.page-body {
    max-width: 1500px;
    margin: 0 auto;
    padding: 28px 34px 48px;
}

.hero-row {
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 22px;
}

.hero-row h2,
.card-heading h2,
.roster-day b {
    letter-spacing: -.025em;
}

.hero-actions,
.inline-form,
.form-actions,
.month-switcher {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.card,
.stat-card {
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-soft);
    transition: transform .38s cubic-bezier(.2,.75,.2,1), box-shadow .38s ease, border-color .38s ease;
}

.card:hover,
.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
    border-color: rgba(18,72,117,.13);
}

.stat-card {
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
    border-radius: 19px;
}

.button {
    min-height: 44px;
    border-radius: 13px;
    font-weight: 750;
    letter-spacing: -.01em;
    transition: transform .25s cubic-bezier(.2,.75,.2,1), box-shadow .25s ease, background .25s ease, border-color .25s ease;
}

.button:hover:not(:disabled) {
    transform: translateY(-2px);
}

.button:active:not(:disabled) {
    transform: translateY(0) scale(.985);
}

.button.primary {
    box-shadow: 0 10px 20px rgba(11,42,77,.13);
}

input,
select,
textarea {
    border-radius: 12px !important;
    border-color: rgba(10,42,73,.12) !important;
    background: rgba(255,255,255,.95) !important;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(18,72,117,.48) !important;
    box-shadow: 0 0 0 4px rgba(18,72,117,.08) !important;
    transform: translateY(-1px);
    outline: none;
}

.table-wrap {
    border-radius: 14px;
    overflow-x: auto;
}

table tbody tr {
    transition: background .22s ease, transform .22s ease;
}

table tbody tr:hover {
    background: #f8fbfe;
}

.tag {
    border-radius: 999px;
    font-weight: 750;
    padding: 6px 9px;
}

.attendance-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
    margin: 0 0 18px;
}

.summary-card {
    padding: 18px 19px;
    min-height: 128px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    position: relative;
    overflow: hidden;
}

.summary-card::after {
    content: "";
    position: absolute;
    inset: auto -28px -45px auto;
    width: 115px;
    height: 115px;
    border-radius: 50%;
    background: rgba(18,72,117,.065);
}

.summary-card span { color: var(--muted); font-weight: 650; }
.summary-card strong { font-size: 30px; line-height: 1; letter-spacing: -.04em; }
.summary-card small { color: var(--muted-light); }

.attendance-live-rule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 18px 0 15px;
    padding: 14px 15px;
    border-radius: 15px;
    background: linear-gradient(90deg, #f3f8fd, #f9fbfe);
    border: 1px solid rgba(18,72,117,.08);
}

.attendance-live-rule div { display:flex; flex-direction:column; gap:2px; }
.attendance-live-rule div span { color: var(--muted); font-size:12px; }

.roster-toolbar {
    padding: 16px 18px;
    margin-bottom: 18px;
}

.roster-person {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    padding-left: 14px;
    border-left: 1px solid var(--line);
}

.roster-person img {
    width: 38px;
    height: 38px;
    border-radius: 12px;
}

.roster-person div { display:flex; flex-direction:column; gap:1px; }
.roster-person span { font-size:12px; color:var(--muted); }

.roster-editor-card { margin-bottom: 18px; }

.roster-calendar-card { overflow: hidden; }

.month-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 14px;
}

.month-nav strong { min-width: 130px; text-align:center; }

.roster-weekdays,
.roster-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0,1fr));
}

.roster-weekdays {
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
    background: #f7fafc;
}

.roster-weekdays span {
    padding: 10px 8px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    text-align: center;
}

.roster-grid {
    border: 1px solid var(--line);
    border-radius: 0 0 14px 14px;
    overflow: hidden;
}

.roster-day {
    position: relative;
    min-height: 132px;
    padding: 11px;
    background: #fff;
    border-right: 1px solid var(--line);
    border-top: 1px solid var(--line);
    transition: background .28s ease, transform .28s ease, box-shadow .28s ease;
}

.roster-day:nth-child(7n) { border-right: 0; }
.roster-day:hover { background:#fbfdff; z-index:2; }
.roster-day.empty { background:#f7f9fb; }

.roster-day-link { display:flex; flex-direction:column; height:100%; gap:7px; }
.roster-day-top { display:flex; align-items:center; justify-content:space-between; }
.roster-day-top strong { font-size:14px; }
.roster-day-top span { font-size:9px; color:var(--navy-mid); font-weight:800; text-transform:uppercase; }
.roster-day b { font-size:12px; line-height:1.3; }
.roster-day > .roster-day-link > span { color:var(--muted); font-size:11px; }
.roster-day small { color:var(--muted-light); font-size:10px; line-height:1.3; }
.roster-day.today { box-shadow: inset 0 3px 0 #277cb6; }
.roster-day.selected { background:#f2f8fd; }
.roster-day.working .roster-day-link::after,
.roster-day.weekly_off .roster-day-link::after,
.roster-day.leave .roster-day-link::after,
.roster-day.holiday .roster-day-link::after { content:""; width:28px; height:4px; border-radius:999px; margin-top:auto; }
.roster-day.working .roster-day-link::after { background:#2d8b72; }
.roster-day.weekly_off .roster-day-link::after { background:#8ea0b4; }
.roster-day.leave .roster-day-link::after { background:#b47b23; }
.roster-day.holiday .roster-day-link::after { background:#7455b7; }

.calendar-legend { display:flex; flex-wrap:wrap; gap:10px; font-size:11px; color:var(--muted); }
.calendar-legend span { display:flex; align-items:center; gap:6px; }
.calendar-legend i { width:8px; height:8px; border-radius:50%; display:block; }
.calendar-legend i.working { background:#2d8b72; }
.calendar-legend i.off { background:#8ea0b4; }
.calendar-legend i.leave { background:#b47b23; }

.decision-form { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.decision-form input { min-width:150px; padding:8px 10px; }

/* Motion primitives */
.motion-item {
    opacity: 0;
    transform: translateY(12px);
}
.motion-item.motion-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .55s ease, transform .55s cubic-bezier(.2,.75,.2,1);
}
.motion-item.motion-delay-1 { transition-delay: .06s; }
.motion-item.motion-delay-2 { transition-delay: .12s; }
.motion-item.motion-delay-3 { transition-delay: .18s; }
.motion-item.motion-delay-4 { transition-delay: .24s; }

@media (max-width: 1100px) {
    .attendance-summary-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .page-body { padding-inline: 24px; }
    .topbar { padding-inline: 24px; }
}

@media (max-width: 760px) {
    .main-content { margin-left: 0; }
    .topbar { min-height: 68px; padding: 12px 16px; }
    .page-body { padding: 18px 14px 34px; }
    .hero-row { align-items: flex-start; flex-direction: column; margin-bottom: 16px; }
    .hero-actions { width:100%; }
    .hero-actions .button { flex:1; }
    .attendance-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap:10px; }
    .summary-card { min-height: 110px; padding: 15px; }
    .summary-card strong { font-size:25px; }
    .roster-toolbar { padding: 13px; }
    .inline-form { align-items: stretch; }
    .inline-form label { flex:1 1 100%; }
    .roster-person { margin: 3px 0 0; padding: 10px 0 0; border-left:0; border-top:1px solid var(--line); width:100%; }
    .roster-weekdays span { font-size:9px; padding:8px 2px; }
    .roster-day { min-height: 104px; padding:8px; }
    .roster-day b { font-size:10px; }
    .roster-day > .roster-day-link > span { font-size:9px; }
    .roster-day small { display:none; }
    .calendar-legend { font-size:10px; }
    .attendance-live-rule { align-items:flex-start; flex-direction:column; }
    .month-switcher { width:100%; }
    .month-switcher input, .month-switcher .button { flex:1; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
    .motion-item { opacity:1; transform:none; }
}