/*
 * Global Flutter / Material 3 design system.
 * Presentation-only: routes, forms, element names, event handlers and permissions stay unchanged.
 */
:root {
    --m3-primary: #2456d9;
    --m3-primary-dark: #173b9f;
    --m3-primary-container: #e0e8ff;
    --m3-secondary: #006c61;
    --m3-secondary-container: #c6f1ea;
    --m3-tertiary: #765b00;
    --m3-surface: #ffffff;
    --m3-surface-low: #f7f8fc;
    --m3-surface-container: #f0f2f8;
    --m3-outline: #d9e1ef;
    --m3-outline-strong: #b9c6dd;
    --m3-on-surface: #1b273f;
    --m3-on-surface-variant: #66738a;
    --m3-shadow: 0 8px 24px rgba(27, 49, 91, .09);
    --m3-shadow-lg: 0 18px 42px rgba(27, 49, 91, .14);
    --m3-radius: 22px;
    --m3-radius-small: 15px;
}

html { scroll-behavior: smooth; }

body.flutter-material-app,
body.flutter-material-auth,
body.flutter-material-guest,
body.flutter-material-legacy {
    color: var(--m3-on-surface);
    background:
        radial-gradient(circle at 97% -5%, rgba(97, 141, 255, .14), transparent 28rem),
        radial-gradient(circle at 3% 34%, rgba(39, 193, 159, .10), transparent 25rem),
        #f7f8fc;
}

/* Application shell */
body.flutter-material-app .main-navbar {
    padding: .5rem 0 .85rem;
    background: linear-gradient(135deg, #edf1ff 0%, #effaf8 52%, #e9f2ff 100%);
    box-shadow: 0 2px 18px rgba(26, 51, 98, .08);
}

body.flutter-material-app .main-navbar-shell {
    width: min(1480px, calc(100% - 26px));
    border: 1px solid rgba(88, 107, 153, .14);
    border-radius: 0 0 28px 28px;
    background: rgba(255, 255, 255, .93);
    box-shadow: var(--m3-shadow-lg);
    backdrop-filter: blur(15px);
}

body.flutter-material-app .main-navbar .container { min-height: 62px; }

body.flutter-material-app .navbar-brand .brand-logo {
    border-radius: 18px;
    background: #ecf1ff;
    box-shadow: 0 7px 15px rgba(30, 68, 154, .12);
}

/* Header identity: the portal always makes the active institution/directorate clear. */
body.flutter-material-app .navbar-brand {
    gap: .72rem;
}

body.flutter-material-app .brand-copy {
    gap: .16rem;
    max-width: min(340px, 29vw);
}

body.flutter-material-app .brand-title {
    color: #152d5a;
    font-size: 1.03rem;
    font-weight: 900;
    letter-spacing: -.02em;
}

body.flutter-material-app .brand-workspace-label {
    display: inline-flex;
    align-items: center;
    gap: .34rem;
    width: fit-content;
    max-width: 100%;
    min-height: 21px;
    padding: .1rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #45607f;
    font-size: .67rem;
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
}

body.flutter-material-app .brand-workspace-label i {
    color: var(--m3-primary);
    font-size: .68rem;
}

body.flutter-material-app .brand-workspace-label > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

body.flutter-material-app .navbar-nav .nav-link {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding-inline: .82rem;
    color: #334561;
    font-weight: 700;
}

body.flutter-material-app .navbar-nav .nav-link:hover,
body.flutter-material-app .navbar-nav .nav-link:focus,
body.flutter-material-app .navbar-nav .nav-link.active {
    color: #173b96;
    background: var(--m3-primary-container);
}

body.flutter-material-app .navbar-nav .nav-link.active::after,
body.flutter-material-app .navbar-nav .show > .nav-link::after { display: none; }

body.flutter-material-app .navbar-user {
    display: inline-flex;
    align-items: center;
    gap: .48rem;
    min-height: 48px;
    max-width: 220px;
    padding: .32rem .62rem !important;
    border: 1px solid rgba(50, 84, 151, .14);
    border-radius: 18px !important;
    background: linear-gradient(135deg, #f8faff, #edf7f5);
    box-shadow: 0 5px 13px rgba(42, 64, 116, .08);
    text-align: right;
}

body.flutter-material-app .navbar-user::after { margin-inline-start: .18rem; }

body.flutter-material-app .navbar-user-avatar {
    display: inline-grid;
    place-items: center;
    flex: 0 0 31px;
    width: 31px;
    height: 31px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--m3-primary), #5b8cff);
    color: #fff;
    box-shadow: 0 5px 10px rgba(36, 86, 217, .23);
}

body.flutter-material-app .navbar-user-copy {
    display: grid;
    min-width: 0;
    line-height: 1.12;
}

body.flutter-material-app .navbar-user-welcome {
    color: #6a7890;
    font-size: .58rem;
    font-weight: 700;
}

body.flutter-material-app .navbar-user-name {
    overflow: hidden;
    color: #1d3156;
    font-size: .72rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.flutter-material-app .navbar-nav .dropdown-menu,
.flutter-material-app .dropdown-menu {
    padding: .5rem;
    border: 1px solid var(--m3-outline);
    border-radius: 18px;
    background: rgba(255, 255, 255, .98);
    box-shadow: var(--m3-shadow-lg);
}

body.flutter-material-app .navbar-nav .dropdown-item,
.flutter-material-app .dropdown-item {
    min-height: 40px;
    display: flex;
    align-items: center;
    border-radius: 12px;
    font-weight: 600;
}

body.flutter-material-app .navbar-nav .dropdown-item:hover,
.flutter-material-app .dropdown-item:hover,
.flutter-material-app .dropdown-item:focus {
    background: var(--m3-primary-container);
    color: #173b96;
}

body.flutter-material-app .main-content-wrapper {
    padding-top: 1rem;
    padding-bottom: 2rem;
}

/* Shared components, including all institution, wilaya, ministry and employee pages. */
.flutter-material-app .card,
.flutter-material-auth .card,
.flutter-material-legacy .card,
.flutter-material-guest .card {
    border: 1px solid var(--m3-outline);
    border-radius: var(--m3-radius);
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--m3-shadow);
    overflow: hidden;
}

.flutter-material-app .card-header,
.flutter-material-auth .card-header,
.flutter-material-legacy .card-header,
.flutter-material-guest .card-header {
    min-height: 58px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e2e8f2;
    background: #f4f6fc;
    color: var(--m3-on-surface);
    font-weight: 800;
}

.flutter-material-app .card-header.bg-primary,
.flutter-material-app .card-header.text-bg-primary,
.flutter-material-auth .card-header.bg-primary,
.flutter-material-legacy .card-header.bg-primary {
    border: 0;
    background: linear-gradient(135deg, #1d46b4 0%, #286adf 58%, #20aebb 100%) !important;
    color: #fff !important;
}

.flutter-material-app .card-header.bg-success,
.flutter-material-app .card-header.text-bg-success,
.flutter-material-auth .card-header.bg-success,
.flutter-material-legacy .card-header.bg-success {
    border: 0;
    background: linear-gradient(135deg, #007566, #0a9b82) !important;
    color: #fff !important;
}

.flutter-material-app .card-header.bg-secondary,
.flutter-material-app .card-header.text-bg-secondary,
.flutter-material-legacy .card-header.bg-secondary {
    border: 0;
    background: linear-gradient(135deg, #2b3d59, #4b6383) !important;
    color: #fff !important;
}

.flutter-material-app .card-header.bg-light,
.flutter-material-app .card-header.bg-white { background: #f6f8fd !important; }

.flutter-material-app .btn,
.flutter-material-auth .btn,
.flutter-material-legacy .btn,
.flutter-material-guest .btn {
    border-radius: 14px;
    font-weight: 700;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.flutter-material-app .btn:not(.btn-sm),
.flutter-material-auth .btn:not(.btn-sm),
.flutter-material-legacy .btn:not(.btn-sm),
.flutter-material-guest .btn:not(.btn-sm) { min-height: 43px; }

.flutter-material-app .btn:hover,
.flutter-material-auth .btn:hover,
.flutter-material-legacy .btn:hover,
.flutter-material-guest .btn:hover { transform: translateY(-1px); box-shadow: 0 7px 16px rgba(32, 57, 111, .14); }

.flutter-material-app .btn-primary,
.flutter-material-auth .btn-primary,
.flutter-material-legacy .btn-primary,
.flutter-material-guest .btn-primary {
    border-color: var(--m3-primary);
    background: var(--m3-primary);
}

.flutter-material-app .btn-primary:hover,
.flutter-material-app .btn-primary:focus,
.flutter-material-auth .btn-primary:hover,
.flutter-material-legacy .btn-primary:hover,
.flutter-material-guest .btn-primary:hover {
    border-color: var(--m3-primary-dark);
    background: var(--m3-primary-dark);
}

.flutter-material-app .btn-outline-primary,
.flutter-material-auth .btn-outline-primary,
.flutter-material-legacy .btn-outline-primary {
    border-color: #b9c9f4;
    color: #204caf;
    background: #f5f7ff;
}

.flutter-material-app .btn-outline-primary:hover,
.flutter-material-auth .btn-outline-primary:hover,
.flutter-material-legacy .btn-outline-primary:hover { background: var(--m3-primary-container); color: #173b96; }

.flutter-material-app .form-control,
.flutter-material-app .form-select,
.flutter-material-auth .form-control,
.flutter-material-auth .form-select,
.flutter-material-legacy .form-control,
.flutter-material-legacy .form-select,
.flutter-material-guest input,
.flutter-material-guest select,
.flutter-material-guest textarea {
    min-height: 46px;
    border: 1px solid var(--m3-outline-strong);
    border-radius: 14px;
    background: #fff;
    color: var(--m3-on-surface);
    box-shadow: none;
}

.flutter-material-app textarea.form-control,
.flutter-material-auth textarea.form-control,
.flutter-material-legacy textarea.form-control,
.flutter-material-guest textarea { min-height: 100px; }

.flutter-material-app .form-control:focus,
.flutter-material-app .form-select:focus,
.flutter-material-auth .form-control:focus,
.flutter-material-auth .form-select:focus,
.flutter-material-legacy .form-control:focus,
.flutter-material-legacy .form-select:focus,
.flutter-material-guest input:focus,
.flutter-material-guest select:focus,
.flutter-material-guest textarea:focus {
    border-color: #4e78e5;
    box-shadow: 0 0 0 .22rem rgba(55, 104, 222, .15);
}

.flutter-material-app .form-check-input:checked,
.flutter-material-auth .form-check-input:checked,
.flutter-material-legacy .form-check-input:checked { background-color: var(--m3-primary); border-color: var(--m3-primary); }

.flutter-material-app .table-responsive,
.flutter-material-auth .table-responsive,
.flutter-material-legacy .table-responsive {
    border: 1px solid var(--m3-outline);
    border-radius: 18px;
    background: #fff;
}

.flutter-material-app .table,
.flutter-material-auth .table,
.flutter-material-legacy .table { margin-bottom: 0; }

.flutter-material-app .table > :not(caption) > * > *,
.flutter-material-auth .table > :not(caption) > * > *,
.flutter-material-legacy .table > :not(caption) > * > * { border-color: #e0e7f1; vertical-align: middle; }

.flutter-material-app .table thead th,
.flutter-material-auth .table thead th,
.flutter-material-legacy .table thead th {
    border-bottom-width: 1px;
    background: #eef3ff;
    color: #28446f;
    font-weight: 800;
}

.flutter-material-app .table-hover tbody tr:hover > *,
.flutter-material-auth .table-hover tbody tr:hover > *,
.flutter-material-legacy .table-hover tbody tr:hover > * { background: #f3f6ff; }

.flutter-material-app .alert,
.flutter-material-auth .alert,
.flutter-material-legacy .alert,
.flutter-material-guest .alert {
    border-radius: 18px;
    box-shadow: 0 5px 14px rgba(31, 53, 94, .05);
}

.flutter-material-app .badge,
.flutter-material-auth .badge,
.flutter-material-legacy .badge,
.flutter-material-guest .badge { border-radius: 999px; padding: .42em .7em; }

.flutter-material-app .modal-content,
.flutter-material-auth .modal-content,
.flutter-material-legacy .modal-content,
.flutter-material-guest .modal-content {
    border: 1px solid rgba(147, 160, 188, .2);
    border-radius: 26px;
    box-shadow: 0 24px 56px rgba(27, 48, 89, .22);
    overflow: hidden;
}

.flutter-material-app .modal-header,
.flutter-material-auth .modal-header,
.flutter-material-legacy .modal-header {
    min-height: 62px;
    border-bottom-color: #e3e8f2;
    background: #f5f7fd;
}

.flutter-material-app .modal-footer,
.flutter-material-auth .modal-footer,
.flutter-material-legacy .modal-footer { border-top-color: #e3e8f2; background: #fbfcff; }

.flutter-material-app .list-group-item,
.flutter-material-auth .list-group-item,
.flutter-material-legacy .list-group-item {
    border-color: #e1e7f1;
    background: transparent;
}

.flutter-material-app .pagination .page-link,
.flutter-material-auth .pagination .page-link,
.flutter-material-legacy .pagination .page-link {
    min-width: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline: .12rem;
    border: 0;
    border-radius: 12px;
    color: #31548d;
    background: #eef2fb;
}

.flutter-material-app .pagination .active .page-link,
.flutter-material-auth .pagination .active .page-link,
.flutter-material-legacy .pagination .active .page-link { background: var(--m3-primary); color: #fff; }

.flutter-material-app .nav-pills .nav-link,
.flutter-material-auth .nav-pills .nav-link,
.flutter-material-legacy .nav-pills .nav-link { border-radius: 999px; color: #3c5378; font-weight: 700; }
.flutter-material-app .nav-pills .nav-link.active,
.flutter-material-auth .nav-pills .nav-link.active,
.flutter-material-legacy .nav-pills .nav-link.active { background: var(--m3-primary); }

/* Public and authentication pages */
.flutter-material-auth .auth-page-main,
.flutter-material-guest .min-h-screen {
    padding-block: clamp(1rem, 4vw, 3rem);
}

.flutter-material-auth .selection-card,
.flutter-material-auth .public-card,
.flutter-material-auth .wilaya-card,
.flutter-material-auth .specialized-shell,
.flutter-material-auth .login-card {
    border: 1px solid var(--m3-outline);
    border-radius: 28px;
    box-shadow: var(--m3-shadow-lg);
}

.flutter-material-auth .selection-card {
    border-radius: 24px;
    box-shadow: var(--m3-shadow);
}

.flutter-material-auth .selection-card:hover {
    color: #1b46ac;
    transform: translateY(-4px);
    box-shadow: var(--m3-shadow-lg);
}

.flutter-material-auth .card-action {
    border-radius: 14px;
    background: #eef2ff;
    color: #284a8e;
}

.flutter-material-auth .ministry-brandbar,
.flutter-material-auth .ministry-head {
    border-radius: 0 0 25px 25px;
    border-bottom: 0 !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 12px 28px rgba(28, 53, 99, .11);
    backdrop-filter: blur(14px);
}

.flutter-material-guest .min-h-screen > div:last-child {
    border: 1px solid var(--m3-outline);
    border-radius: 24px;
    box-shadow: var(--m3-shadow-lg);
}

/* Legacy administration shell */
.flutter-material-legacy .sidebar {
    min-height: 100vh;
    border-radius: 0 28px 28px 0;
    background: linear-gradient(180deg, #1d46b4, #173583);
    box-shadow: 8px 0 24px rgba(24, 52, 117, .16);
}

.flutter-material-legacy .sidebar .nav-link {
    margin: .18rem .55rem;
    border-radius: 14px;
    color: rgba(255, 255, 255, .9);
}

.flutter-material-legacy .sidebar .nav-link:hover,
.flutter-material-legacy .sidebar .nav-link.active { background: rgba(255, 255, 255, .18); color: #fff; }

.flutter-material-legacy .content { padding: 1.25rem; }

@media (max-width: 991.98px) {
    body.flutter-material-app .main-navbar-shell { width: calc(100% - 14px); border-radius: 0 0 24px 24px; }
    body.flutter-material-app .main-navbar .container {
        position: relative;
        display: flex;
        min-height: 66px;
        align-items: center;
    }
    html[dir="rtl"] body.flutter-material-app .main-navbar .container {
        padding-left: 4.6rem;
        padding-right: .75rem;
    }
    html[dir="ltr"] body.flutter-material-app .main-navbar .container {
        padding-left: .75rem;
        padding-right: 4.6rem;
    }
    body.flutter-material-app .navbar-brand {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: .65rem;
    }
    html[dir="rtl"] body.flutter-material-app .navbar-brand {
        justify-content: flex-start;
        margin-left: auto;
        margin-right: 0;
    }
    html[dir="ltr"] body.flutter-material-app .navbar-brand {
        justify-content: flex-start;
        margin-right: auto;
        margin-left: 0;
    }
    body.flutter-material-app .navbar-toggler {
        position: absolute;
        top: 50%;
        z-index: 2;
        margin: 0;
        transform: translateY(-50%);
    }
    html[dir="rtl"] body.flutter-material-app .navbar-toggler {
        left: .72rem;
        right: auto;
    }
    html[dir="ltr"] body.flutter-material-app .navbar-toggler {
        right: .72rem;
        left: auto;
    }
    html[dir="rtl"] body.flutter-material-app .brand-copy {
        text-align: right;
        align-items: flex-start;
    }
    html[dir="ltr"] body.flutter-material-app .brand-copy {
        text-align: left;
        align-items: flex-start;
    }
    html[dir="rtl"] body.flutter-material-app .brand-workspace-label {
        text-align: right;
        justify-content: flex-start;
    }
    html[dir="ltr"] body.flutter-material-app .brand-workspace-label {
        text-align: left;
        justify-content: flex-start;
    }
    body.flutter-material-app .navbar-collapse { margin-top: .55rem; padding: .65rem; border-radius: 21px; background: #f4f6fd; }
    body.flutter-material-app .navbar-nav .nav-link { min-height: 48px; border-radius: 15px; }
    body.flutter-material-app .brand-copy { max-width: min(62vw, 310px); }
    body.flutter-material-app .brand-title { font-size: .94rem; }
    body.flutter-material-app .brand-workspace-label {
        align-items: flex-start;
        max-height: 2.9rem;
        padding-top: .22rem;
        padding-bottom: .22rem;
        font-size: clamp(.54rem, 2.2vw, .64rem);
        white-space: normal;
    }
    body.flutter-material-app .brand-workspace-label > span {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-height: 1.34;
        text-overflow: clip;
    }
    body.flutter-material-app .navbar-user { width: 100%; max-width: none; min-height: 52px; }
    .flutter-material-app .card,
    .flutter-material-auth .card,
    .flutter-material-legacy .card { border-radius: 20px; }
}

@media (max-width: 575.98px) {
    .flutter-material-app .main-content-wrapper { padding-bottom: 1rem; }
    .flutter-material-app .card,
    .flutter-material-auth .card,
    .flutter-material-legacy .card,
    .flutter-material-guest .card { border-radius: 18px; }
    .flutter-material-app .card-header,
    .flutter-material-auth .card-header,
    .flutter-material-legacy .card-header { min-height: 54px; padding: .65rem .8rem; }
    .flutter-material-app .table-responsive,
    .flutter-material-auth .table-responsive,
    .flutter-material-legacy .table-responsive { border-radius: 14px; }
    .flutter-material-app .modal-content,
    .flutter-material-auth .modal-content,
    .flutter-material-legacy .modal-content,
    .flutter-material-guest .modal-content { border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .flutter-material-app *, .flutter-material-auth *, .flutter-material-legacy *, .flutter-material-guest * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* ========================================================
   FLUTTER NATIVE STAFF DASHBOARD STYLES (Material 3 Mobile)
   ======================================================== */
.flutter-staff-dashboard {
    font-family: 'Cairo', system-ui, -apple-system, sans-serif;
    color: #1a2c38;
}

/* 1. Hero Profile Card */
.flutter-staff-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #093444 0%, #0F5E7A 45%, #147185 80%, #1EC3B3 100%);
    border-radius: 24px;
    padding: 20px 18px;
    color: #ffffff;
    box-shadow: 0 14px 32px rgba(15, 94, 122, 0.22);
    margin-bottom: 16px;
}

.flutter-staff-hero::before {
    content: "";
    position: absolute;
    top: -50px;
    left: -50px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(30, 195, 179, 0.25) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.flutter-staff-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    position: relative;
    z-index: 2;
}

.flutter-staff-avatar-wrap {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.20);
    border: 2px solid rgba(255, 255, 255, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #ffffff;
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.flutter-staff-online-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 15px;
    height: 15px;
    background: #10B981;
    border: 2.5px solid #0F5E7A;
    border-radius: 50%;
    box-shadow: 0 0 8px #10B981;
}

.flutter-staff-hero-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.flutter-hero-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.32);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.15rem;
    position: relative;
    backdrop-filter: blur(6px);
    transition: all 0.2s ease;
}

.flutter-hero-icon-btn:hover,
.flutter-hero-icon-btn:active {
    background: rgba(255, 255, 255, 0.32);
    color: #ffffff;
    transform: scale(0.96);
}

.flutter-staff-hero-name {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.35;
    margin: 0 0 3px 0;
    color: #ffffff;
}

.flutter-staff-hero-subname {
    font-size: 0.85rem;
    opacity: 0.92;
    margin-bottom: 8px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.flutter-staff-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    position: relative;
    z-index: 2;
}

.flutter-staff-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 0.78rem;
    font-weight: 700;
    color: #ffffff;
}

/* 2. Quick Stat Cards Grid */
.flutter-staff-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.flutter-stat-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 14px 14px 12px;
    border: 1px solid #e7edf5;
    box-shadow: 0 4px 14px rgba(15, 45, 75, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 95px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.flutter-stat-card:active {
    transform: scale(0.97);
}

.flutter-stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.flutter-stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.flutter-stat-card.blue .flutter-stat-icon {
    background: #e6f3fa;
    color: #0b69a3;
}

.flutter-stat-card.emerald .flutter-stat-icon {
    background: #e6f9f3;
    color: #0d9472;
}

.flutter-stat-card.amber .flutter-stat-icon {
    background: #fef7e7;
    color: #d97706;
}

.flutter-stat-card.purple .flutter-stat-icon {
    background: #f3effe;
    color: #7c3aed;
}

.flutter-stat-num {
    font-size: 1.35rem;
    font-weight: 900;
    color: #112233;
    line-height: 1.2;
}

.flutter-stat-label {
    font-size: 0.76rem;
    font-weight: 700;
    color: #64748b;
    margin-top: 2px;
}

/* 3. Duty Spotlight Card */
.flutter-duty-spotlight {
    border-radius: 22px;
    padding: 18px 16px;
    margin-bottom: 16px;
    position: relative;
    box-shadow: 0 8px 24px rgba(15, 94, 122, 0.10);
    border: 1px solid #c9e4ed;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #ffffff 100%);
}

.flutter-duty-spotlight.is-today {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 50%, #ffffff 100%);
    border: 1.5px solid #f97316;
    box-shadow: 0 10px 28px rgba(249, 115, 22, 0.16);
}

.flutter-spotlight-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
}

.flutter-duty-spotlight.is-today .flutter-spotlight-badge {
    background: #ea580c;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.3);
}

.flutter-duty-spotlight:not(.is-today) .flutter-spotlight-badge {
    background: #0F5E7A;
    color: #ffffff;
}

.flutter-spotlight-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f2c42;
    margin-bottom: 4px;
}

.flutter-spotlight-timing {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #0369a1;
    font-weight: 700;
    font-size: 0.88rem;
    margin-bottom: 6px;
}

.flutter-spotlight-location {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #475569;
    font-size: 0.84rem;
    font-weight: 600;
    margin-bottom: 12px;
}

/* 4. Quick Action Grid & Modern Mobile Cards */
.flutter-action-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.flutter-action-card,
.flutter-action-tile {
    background: #ffffff;
    border-radius: 18px;
    padding: 14px 12px 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 104px;
    text-decoration: none;
    color: #1e293b;
    font-weight: 700;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    text-align: right;
    position: relative;
    overflow: hidden;
}

button.flutter-action-card,
button.flutter-action-tile {
    border: 1px solid #e2e8f0;
    background: #ffffff;
    cursor: pointer;
    font-family: inherit;
    padding: 14px 12px 12px;
}

.flutter-action-card:active,
.flutter-action-tile:active {
    transform: scale(0.97);
    background: #f8fafc;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

.flutter-action-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    width: 100%;
}

.flutter-action-arrow {
    font-size: 0.82rem;
    color: #94a3b8;
    transition: transform 0.2s ease, color 0.2s ease;
}

.flutter-action-card:active .flutter-action-arrow,
.flutter-action-tile:active .flutter-action-arrow {
    transform: translateX(-3px);
    color: #0F5E7A;
}

.flutter-action-card-body,
.flutter-action-tile-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    min-width: 0;
}

.flutter-action-title,
.flutter-action-tile-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: #0f2c42;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.flutter-action-sub,
.flutter-action-tile-sub {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.flutter-action-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* 5. Section Headers */
.flutter-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.flutter-section-header h5 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f2c42;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 6. Shift Timeline Cards */
.flutter-shift-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 14px;
    border: 1px solid #e6ecf2;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
    margin-bottom: 10px;
    transition: all 0.2s ease;
}

.flutter-shift-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.flutter-shift-day-pill {
    padding: 4px 10px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #1e293b;
    font-weight: 800;
    font-size: 0.82rem;
}

.flutter-shift-point {
    font-weight: 800;
    font-size: 0.94rem;
    color: #0f2c42;
    margin-bottom: 2px;
}

.flutter-shift-sub {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 600;
}

.flutter-shift-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #edf2f7;
}

/* 7. Deputy managerial card */
.flutter-deputy-card {
    background: linear-gradient(135deg, #0d3880 0%, #155bb5 50%, #10859c 100%);
    border-radius: 22px;
    padding: 16px;
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(13, 56, 128, 0.2);
    margin-bottom: 16px;
}

.flutter-deputy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 12px;
}

.flutter-deputy-tile {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    padding: 10px 12px;
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 0.82rem;
    transition: all 0.2s ease;
}

.flutter-deputy-tile:active {
    background: rgba(255, 255, 255, 0.24);
    color: #ffffff;
}

/* 8. Active Swap & Leave Cards */
.flutter-request-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 14px;
    border: 1px solid #e6ecf2;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
    margin-bottom: 10px;
}