@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;700&display=swap');

:root {
    /* Brand colors */
    --color-primary:        #185FA5;
    --color-primary-light:  #E6F1FB;
    --color-primary-dark:   #0C447C;
    --color-primary-hover:  #1a6dbf;

    /* UI colors */
    --color-bg:             #EEF4FB;
    --color-card:           #ffffff;
    --color-border:         #dce8f5;
    --color-border-input:   #c5d8ef;

    /* Text colors */
    --color-text:           #1a1a1a;
    --color-text-muted:     #6b7280;
    --color-text-hint:      #9ca3af;

    /* Semantic colors */
    --color-success:        #16a34a;
    --color-success-light:  #dcfce7;
    --color-danger:         #dc2626;
    --color-danger-light:   #fee2e2;
    --color-warning:        #d97706;
    --color-warning-light:  #fef3c7;

    /* Typography */
    --font-main:            'Cairo', sans-serif;

    /* Layout */
    --border-radius:        5px;
    --border-radius-lg:     10px;
    --border-radius-pill:   999px;
    --navbar-height:        60px;
    --container-width:      1100px;

    /* Transitions */
    --transition:           0.2s ease;
}

/* ─── Reset ─────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

html {
    font-size:       16px;
    scroll-behavior: smooth;
}

body {
    font-family:      var(--font-main);
    background-color: var(--color-bg);
    color:            var(--color-text);
    direction:        rtl;
    line-height:      1.7;
    min-height:       100vh;
    user-select:      none;
}


input, textarea, select {
    user-select: text;
}

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

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

ul, ol {
    list-style: none;
}

button {
    cursor:      pointer;
    font-family: var(--font-main);
    border:      none;
    background:  none;
}

input, textarea, select {
    font-family: var(--font-main);
    font-size:   1rem;
    outline:     none;
}

/* ─── Typography ─────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-weight:  700;
    line-height:  1.3;
    color:        var(--color-text);
}

h1 { font-size: 2rem;    }
h2 { font-size: 1.5rem;  }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem;  }
h5 { font-size: 1rem;    }
h6 { font-size: 0.9rem;  }

p {
    font-size:   1rem;
    line-height: 1.7;
    color:       var(--color-text);
}

.text-muted {
    color:     var(--color-text-muted);
    font-size: 0.9rem;
}

.text-hint {
    color:     var(--color-text-hint);
    font-size: 0.8rem;
}

.text-primary {
    color: var(--color-primary);
}

.text-danger {
    color: var(--color-danger);
}

.text-success {
    color: var(--color-success);
}

.text-center { text-align: center; }
.text-right  { text-align: right;  }
.text-left   { text-align: left;   }

.font-bold   { font-weight: 700; }
.font-medium { font-weight: 500; }
.font-normal { font-weight: 400; }

/* ─── Layout & Container ─────────────────────────── */
.container {
    width:     100%;
    max-width: var(--container-width);
    margin:    0 auto;
    padding:   0 1.5rem;
}

.page-wrapper {
    min-height: calc(100vh - var(--navbar-height));
    padding-top: calc(var(--navbar-height) + 2rem);
    padding-bottom: 2rem;
    zoom: 1.5;
}

.page-center {
    min-height: calc(100vh - var(--navbar-height));
    display:    flex;
    align-items: center;
    justify-content: center;
    padding-top: var(--navbar-height);
}

/* Flex utilities */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { display: flex; flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.gap-1        { gap: 0.5rem;  }
.gap-2        { gap: 1rem;    }
.gap-3        { gap: 1.5rem;  }
.gap-4        { gap: 2rem;    }

/* Grid utilities */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

/* Spacing utilities */
.mt-1 { margin-top:    0.5rem; }
.mt-2 { margin-top:    1rem;   }
.mt-3 { margin-top:    1.5rem; }
.mt-4 { margin-top:    2rem;   }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem;   }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem;   }

/* ─── Navbar ─────────────────────────────────────── */
.navbar {
    position:         fixed;
    top:              0;
    right:            0;
    left:             0;
    height:           calc(var(--navbar-height) * 1.5);
    background-color: var(--color-card);
    border-bottom:    1px solid var(--color-border);
    z-index:          100;
}

.navbar__inner {
    height:          100%;
    max-width:       var(--container-width);
    margin:          0 auto;
    padding:         0 1.5rem;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    zoom:            1.5;
}

.navbar__logo {
    flex-shrink: 0;
}

.navbar__logo-img {
    height:     45px;
    width:      auto;
    display:    block;
    object-fit: contain;
}

.navbar__links {
    display:         flex;
    align-items:     center;
    gap:             0.25rem;
    flex:            1;
    justify-content: center;
}

.navbar__link {
    font-size:     0.95rem;
    font-weight:   500;
    color:         var(--color-text-muted);
    padding:       0.4rem 0.9rem;
    border-radius: var(--border-radius);
    transition:    background-color var(--transition), color var(--transition);
    white-space:   nowrap;
}

.navbar__link:hover {
    background-color: var(--color-primary-light);
    color:            var(--color-primary);
}

.navbar__link.active {
    background-color: var(--color-primary-light);
    color:            var(--color-primary);
    font-weight:      700;
}

.navbar__user {
    display:     flex;
    align-items: center;
    gap:         0.6rem;
}

.navbar__avatar {
    width:            34px;
    height:           34px;
    border-radius:    50%;
    background-color: var(--color-primary);
    color:            #fff;
    font-size:        0.85rem;
    font-weight:      700;
    display:          flex;
    align-items:      center;
    justify-content:  center;
}

.navbar__name {
    font-size:   0.95rem;
    font-weight: 500;
    color:       var(--color-text);
}

/* ─── Buttons ────────────────────────────────────── */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.4rem;
    font-family:     var(--font-main);
    font-size:       1rem;
    font-weight:     500;
    padding:         0.6rem 1.4rem;
    border-radius:   var(--border-radius);
    border:          1px solid transparent;
    transition:      background-color var(--transition),
                     color            var(--transition),
                     border-color     var(--transition),
                     opacity          var(--transition);
    white-space:     nowrap;
}

/* Primary */
.btn-primary {
    background-color: var(--color-primary);
    color:            #fff;
    border-color:     var(--color-primary);
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
    border-color:     var(--color-primary-hover);
}

/* Secondary */
.btn-secondary {
    background-color: var(--color-primary-light);
    color:            var(--color-primary);
    border-color:     var(--color-primary-light);
}

.btn-secondary:hover {
    background-color: #d0e6f8;
    border-color:     #d0e6f8;
}

/* Outline */
.btn-outline {
    background-color: transparent;
    color:            var(--color-primary);
    border-color:     var(--color-primary);
}

.btn-outline:hover {
    background-color: var(--color-primary-light);
}

/* Danger */
.btn-danger {
    background-color: var(--color-danger-light);
    color:            var(--color-danger);
    border-color:     var(--color-danger-light);
}

.btn-danger:hover {
    background-color: #fecaca;
    border-color:     #fecaca;
}

/* Sizes */
.btn-sm {
    font-size: 0.85rem;
    padding:   0.4rem 1rem;
}

.btn-lg {
    font-size: 1.1rem;
    padding:   0.8rem 2rem;
}

.btn-full {
    width: 100%;
}

/* Disabled */
.btn:disabled,
.btn.disabled {
    opacity:        0.5;
    cursor:         not-allowed;
    pointer-events: none;
}

/* ─── Cards ──────────────────────────────────────── */
.card {
    background-color: var(--color-card);
    border:           1px solid var(--color-border);
    border-radius:    var(--border-radius-lg);
    padding:          1.5rem;
}

.card-sm {
    padding: 1rem;
}

.card-lg {
    padding: 2rem;
}

/* Clickable card */
.card-clickable {
    cursor:     pointer;
    transition: border-color var(--transition),
                transform    var(--transition);
}

.card-clickable:hover {
    border-color: var(--color-primary);
    transform:    translateY(-2px);
}

/* Card parts */
.card__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   1rem;
    padding-bottom:  1rem;
    border-bottom:   1px solid var(--color-border);
}

.card__title {
    font-size:   1.1rem;
    font-weight: 700;
    color:       var(--color-text);
}

.card__body {
    font-size: 0.95rem;
    color:     var(--color-text-muted);
}

.card__footer {
    margin-top:   1rem;
    padding-top:  1rem;
    border-top:   1px solid var(--color-border);
    display:      flex;
    align-items:  center;
    justify-content: space-between;
}

/* Course card specifically */
.course-card {
    background-color: var(--color-card);
    border:           1px solid var(--color-border);
    border-radius:    var(--border-radius-lg);
    padding:          1.25rem;
    cursor:           pointer;
    transition:       border-color var(--transition),
                      transform    var(--transition);
    text-align:       center;
}

.course-card:hover {
    border-color: var(--color-primary);
    transform:    translateY(-2px);
}

.course-card__name {
    font-size:   1rem;
    font-weight: 700;
    color:       var(--color-text);
    margin-top:  0.5rem;
}

/* Stat card — admin dashboard */
.stat-card {
    background-color: var(--color-card);
    border:           1px solid var(--color-border);
    border-radius:    var(--border-radius-lg);
    padding:          1.25rem 1.5rem;
}

.stat-card__num {
    font-size:   2rem;
    font-weight: 700;
    color:       var(--color-primary);
    line-height: 1;
}

.stat-card__label {
    font-size:   0.9rem;
    color:       var(--color-text-muted);
    margin-top:  0.4rem;
}

/* ─── Forms & Inputs ─────────────────────────────── */
.form-group {
    display:        flex;
    flex-direction: column;
    gap:            0.4rem;
    margin-bottom:  1.25rem;
}

.form-label {
    font-size:   0.95rem;
    font-weight: 500;
    color:       var(--color-text);
}

.form-input {
    width:            100%;
    height:           44px;
    padding:          0 1rem;
    font-family:      var(--font-main);
    font-size:        1rem;
    color:            var(--color-text);
    background-color: var(--color-card);
    border:           1px solid var(--color-border-input);
    border-radius:    var(--border-radius);
    transition:       border-color var(--transition),
                      box-shadow   var(--transition);
}

.form-input:focus {
    border-color: var(--color-primary);
    box-shadow:   0 0 0 3px rgba(24, 95, 165, 0.12);
}

.form-input:disabled {
    background-color: var(--color-bg);
    color:            var(--color-text-muted);
    cursor:           not-allowed;
}

.form-input::placeholder {
    color: var(--color-text-hint);
}

/* Textarea */
.form-textarea {
    width:            100%;
    padding:          0.75rem 1rem;
    font-family:      var(--font-main);
    font-size:        1rem;
    color:            var(--color-text);
    background-color: var(--color-card);
    border:           1px solid var(--color-border-input);
    border-radius:    var(--border-radius);
    resize:           vertical;
    min-height:       100px;
    transition:       border-color var(--transition),
                      box-shadow   var(--transition);
}

.form-textarea:focus {
    border-color: var(--color-primary);
    box-shadow:   0 0 0 3px rgba(24, 95, 165, 0.12);
}

/* Select */
.form-select {
    width:            100%;
    height:           44px;
    padding:          0 1rem;
    font-family:      var(--font-main);
    font-size:        1rem;
    color:            var(--color-text);
    background-color: var(--color-card);
    border:           1px solid var(--color-border-input);
    border-radius:    var(--border-radius);
    cursor:           pointer;
    transition:       border-color var(--transition);
    appearance:       none;
}

.form-select:focus {
    border-color: var(--color-primary);
    box-shadow:   0 0 0 3px rgba(24, 95, 165, 0.12);
}

/* Input states */
.form-input.error,
.form-select.error,
.form-textarea.error {
    border-color: var(--color-danger);
}

.form-input.success,
.form-select.success,
.form-textarea.success {
    border-color: var(--color-success);
}

/* Helper text below input */
.form-hint {
    font-size: 0.8rem;
    color:     var(--color-text-hint);
}

.form-error {
    font-size: 0.8rem;
    color:     var(--color-danger);
}

/* Search input — admin tables */
.search-input {
    width:            100%;
    max-width:        320px;
    height:           40px;
    padding:          0 1rem;
    font-family:      var(--font-main);
    font-size:        0.95rem;
    color:            var(--color-text);
    background-color: var(--color-card);
    border:           1px solid var(--color-border-input);
    border-radius:    var(--border-radius-pill);
    transition:       border-color var(--transition);
}

.search-input:focus {
    border-color: var(--color-primary);
    box-shadow:   0 0 0 3px rgba(24, 95, 165, 0.12);
}

/* ─── Badges & Indicators ────────────────────────── */
.badge {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    font-size:       0.78rem;
    font-weight:     500;
    padding:         0.2rem 0.7rem;
    border-radius:   var(--border-radius-pill);
    white-space:     nowrap;
}

.badge-primary {
    background-color: var(--color-primary-light);
    color:            var(--color-primary-dark);
}

.badge-success {
    background-color: var(--color-success-light);
    color:            var(--color-success);
}

.badge-danger {
    background-color: var(--color-danger-light);
    color:            var(--color-danger);
}

.badge-warning {
    background-color: var(--color-warning-light);
    color:            var(--color-warning);
}

.badge-neutral {
    background-color: #f3f4f6;
    color:            var(--color-text-muted);
}

/* Video watched/unwatched indicator */
.video-indicator {
    width:         10px;
    height:        10px;
    border-radius: 50%;
    flex-shrink:   0;
}

.video-indicator.watched {
    background-color: var(--color-success);
}

.video-indicator.unwatched {
    background-color: var(--color-border-input);
}

/* Progress bar */
.progress-track {
    width:            100%;
    height:           6px;
    background-color: var(--color-primary-light);
    border-radius:    var(--border-radius-pill);
    overflow:         hidden;
}

.progress-fill {
    height:           100%;
    background-color: var(--color-primary);
    border-radius:    var(--border-radius-pill);
    transition:       width 0.4s ease;
}

/* Dot separator */
.dot-separator {
    width:            4px;
    height:           4px;
    border-radius:    50%;
    background-color: var(--color-text-hint);
    display:          inline-block;
    margin:           0 0.4rem;
    vertical-align:   middle;
}

/* ─── Tables ─────────────────────────────────────── */
.table-wrapper {
    width:            100%;
    overflow-x:       auto;
    border:           1px solid var(--color-border);
    border-radius:    var(--border-radius-lg);
    background-color: var(--color-card);
}

.table {
    width:           100%;
    border-collapse: collapse;
    font-size:       0.95rem;
}

.table thead {
    background-color: var(--color-bg);
    border-bottom:    1px solid var(--color-border);
}

.table thead th {
    padding:     0.9rem 1.25rem;
    font-size:   0.85rem;
    font-weight: 700;
    color:       var(--color-text-muted);
    text-align:  right;
    white-space: nowrap;
}

.table tbody tr {
    border-bottom: 1px solid var(--color-border);
    transition:    background-color var(--transition);
}

.table tbody tr:last-child {
    border-bottom: none;
}

.table tbody tr:hover {
    background-color: var(--color-primary-light);
}

.table tbody td {
    padding:     0.9rem 1.25rem;
    color:       var(--color-text);
    text-align:  right;
    white-space: nowrap;
}

/* Table actions cell */
.table-actions {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
}

/* Empty state — when table has no data */
.table-empty {
    text-align: center;
    padding:    3rem 1rem;
    color:      var(--color-text-muted);
    font-size:  0.95rem;
}

/* Table top bar — search + filter + action button */
.table-topbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             1rem;
    margin-bottom:   1rem;
}

/* ─── Modal & Popup ──────────────────────────────── */
.modal-overlay {
    position:         fixed;
    inset:            0;
    background-color: rgba(0, 0, 0, 0.45);
    z-index:          200;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    padding:          1rem;
    opacity:          0;
    visibility:       hidden;
    transition:       opacity      var(--transition),
                      visibility   var(--transition);
}

.modal-overlay.open {
    opacity:    1;
    visibility: visible;
}

.modal {
    background-color: var(--color-card);
    border-radius:    var(--border-radius-lg);
    border:           1px solid var(--color-border);
    width:            100%;
    max-width:        500px;
    max-height:       90vh;
    overflow-y:       auto;
    transform:        translateY(12px);
    transition:       transform var(--transition);
}

.modal-overlay.open .modal {
    transform: translateY(0);
}

.modal__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1.25rem 1.5rem;
    border-bottom:   1px solid var(--color-border);
}

.modal__title {
    font-size:   1.1rem;
    font-weight: 700;
    color:       var(--color-text);
}

.modal__close {
    width:            30px;
    height:           30px;
    border-radius:    var(--border-radius);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    color:            var(--color-text-muted);
    font-size:        1.2rem;
    cursor:           pointer;
    transition:       background-color var(--transition);
}

.modal__close:hover {
    background-color: var(--color-bg);
    color:            var(--color-text);
}

.modal__body {
    padding: 1.5rem;
}

.modal__footer {
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    gap:             0.75rem;
    padding:         1.25rem 1.5rem;
    border-top:      1px solid var(--color-border);
}

/* Toast notification — small popup message */
.toast {
    position:         fixed;
    bottom:           2rem;
    left:             50%;
    transform:        translateX(-50%) translateY(20px);
    background-color: var(--color-text);
    color:            #fff;
    font-size:        0.95rem;
    padding:          0.75rem 1.5rem;
    border-radius:    var(--border-radius-pill);
    z-index:          300;
    opacity:          0;
    visibility:       hidden;
    transition:       opacity      var(--transition),
                      visibility   var(--transition),
                      transform    var(--transition);
    white-space:      nowrap;
}

.toast.show {
    opacity:    1;
    visibility: visible;
    transform:  translateX(-50%) translateY(0);
}

.toast.toast-danger {
    background-color: var(--color-danger);
}

.toast.toast-success {
    background-color: var(--color-success);
}

/* ─── Utilities ──────────────────────────────────── */
.hidden   { display: none !important;       }
.visible  { display: block !important;      }
.w-full   { width: 100%;                    }
.h-full   { height: 100%;                   }
.relative { position: relative;             }
.absolute { position: absolute;             }
.overflow-hidden { overflow: hidden;        }

/* Divider */
.divider {
    width:            100%;
    height:           1px;
    background-color: var(--color-border);
    margin:           1.5rem 0;
}

/* Loading spinner */
.spinner {
    width:         28px;
    height:        28px;
    border:        3px solid var(--color-primary-light);
    border-top:    3px solid var(--color-primary);
    border-radius: 50%;
    animation:     spin 0.7s linear infinite;
    margin:        0 auto;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-overlay {
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         3rem;
    width:           100%;
}

/* Empty state */
.empty-state {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         3rem 1rem;
    text-align:      center;
    gap:             0.75rem;
}

.empty-state__title {
    font-size:   1.1rem;
    font-weight: 700;
    color:       var(--color-text);
}

.empty-state__text {
    font-size: 0.95rem;
    color:     var(--color-text-muted);
}


/* ─── Mobile hamburger & sidebar ────────────────── */
.hamburger {
    display:         none;
    flex-direction:  column;
    justify-content: center;
    gap:             5px;
    width:           40px;
    height:          40px;
    cursor:          pointer;
    padding:         8px;
    border-radius:   var(--border-radius);
    transition:      background-color var(--transition);
    flex-shrink:     0;
    background:      none;
    border:          none;
}

.hamburger:hover { background-color: var(--color-primary-light); }

.hamburger__bar {
    display:          block;
    width:            100%;
    height:           2px;
    background-color: var(--color-text);
    border-radius:    2px;
}

.nav-sidebar-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    background: rgba(0, 0, 0, 0.45);
    z-index:    150;
}

.nav-sidebar-overlay.open { display: block; }

.nav-sidebar {
    position:         fixed;
    top:              0;
    right:            0;
    width:            280px;
    max-width:        80vw;
    height:           100vh;
    height:           100dvh;
    background-color: var(--color-card);
    border-left:      1px solid var(--color-border);
    z-index:          160;
    display:          flex;
    flex-direction:   column;
    padding:          1.5rem;
    transform:        translateX(100%);
    transition:       transform 0.25s ease;
    overflow-y:       auto;
}

.nav-sidebar.open { transform: translateX(0); }

.nav-sidebar__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   1.25rem;
    padding-bottom:  1.25rem;
    border-bottom:   1px solid var(--color-border);
}

.nav-sidebar__logo {
    font-size:   1.2rem;
    font-weight: 700;
    color:       var(--color-primary);
}

.nav-sidebar__logo span { color: var(--color-text); }

.nav-sidebar__close {
    width:           32px;
    height:          32px;
    border-radius:   var(--border-radius);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--color-text-muted);
    font-size:       1.1rem;
    cursor:          pointer;
    background:      none;
    border:          none;
    transition:      background-color var(--transition);
}

.nav-sidebar__close:hover { background-color: var(--color-bg); }

.nav-sidebar__links {
    display:        flex;
    flex-direction: column;
    gap:            0.25rem;
    flex:           1;
}

.nav-sidebar__link {
    display:       block;
    padding:       0.8rem 1rem;
    font-size:     1rem;
    font-weight:   500;
    color:         var(--color-text-muted);
    border-radius: var(--border-radius);
    transition:    background-color var(--transition), color var(--transition);
}

.nav-sidebar__link:hover {
    background-color: var(--color-primary-light);
    color:            var(--color-primary);
}

.nav-sidebar__link.active {
    background-color: var(--color-primary-light);
    color:            var(--color-primary);
    font-weight:      700;
}

.nav-sidebar__footer {
    margin-top:  1rem;
    padding-top: 1rem;
    border-top:  1px solid var(--color-border);
}

/* ─── Responsive ─────────────────────────────────── */
@media (max-width: 768px) {
    h1 { font-size: 1.5rem;  }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.1rem;  }

    .container {
        padding: 0 1rem;
    }

    /* Reset desktop zoom so mobile isn't scaled 1.5× */
    .navbar {
        height: var(--navbar-height);
    }

    .navbar__inner {
        zoom: 1;
    }

    .page-wrapper {
        zoom:        1;
        padding-top: calc(var(--navbar-height) + 1.5rem);
    }

    .navbar__links {
        display: none;
    }

    /* Logout button moves to sidebar on mobile */
    .navbar__logout {
        display: none;
    }

    /* Logo shrinks so it never pushes action buttons off screen */
    .navbar__logo {
        flex-shrink: 1;
        min-width:   0;
        overflow:    hidden;
    }

    .navbar__logo-img {
        height:    32px;
        max-width: 150px;
        object-fit: contain;
    }

    /* Hamburger always stays fully visible */
    .hamburger {
        flex-shrink: 0;
    }

    .hamburger {
        display: flex;
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .modal {
        max-width:    100%;
        margin:       0 1rem;
        max-height:   85vh;
    }

    .table-topbar {
        flex-direction: column;
        align-items:    flex-start;
    }

    .search-input {
        max-width: 100%;
    }

    .modal__footer {
        flex-direction: column;
    }

    .modal__footer .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .btn-lg {
        font-size: 1rem;
        padding:   0.7rem 1.5rem;
    }

    .card {
        padding: 1rem;
    }

    .stat-card__num {
        font-size: 1.5rem;
    }
}