html { -webkit-text-size-adjust: 100%; }
    /* Global spacing reset for sidebar layout */
    body { padding-top: 0; padding-bottom: 0; background-color: #f8f9fa; }

    /* Mobile-friendly tap targets */
    @media (max-width: 576px) {
      .btn, .form-control, .form-select { min-height: 44px; }
      /* Prevent iOS zoom on focus and improve readability */
      input, select, textarea { font-size: 16px; }
    }

    /* Reduce 300ms tap delay on some browsers */
    button, .btn, label.btn { touch-action: manipulation; }
    label.btn { -webkit-tap-highlight-color: rgba(0,0,0,.05); }

    /* Attendance status radios: instant visual feedback without JS */
    .att-status { display: flex; flex-wrap: wrap; gap: .5rem; }
    .att-status input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
    .att-status label.btn { user-select: none; }
    .att-status input[type="radio"]:focus + label.btn { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
    .att-status input[type="radio"]:checked + label.btn.btn-outline-success {
      background-color: var(--bs-success); border-color: var(--bs-success); color: #fff;
    }
    .att-status input[type="radio"]:checked + label.btn.btn-outline-danger {
      background-color: var(--bs-danger); border-color: var(--bs-danger); color: #fff;
    }
    .att-status input[type="radio"]:checked + label.btn.btn-outline-warning {
      background-color: var(--bs-warning); border-color: var(--bs-warning); color: var(--bs-dark);
    }
    .att-status input[type="radio"]:checked + label.btn.btn-outline-info {
      background-color: var(--bs-info); border-color: var(--bs-info); color: #042a2b;
    }

    /* Bigger, thumb-friendly status buttons on phones */
    @media (max-width: 576px) {
      .att-status label.btn {
        padding: .6rem .9rem;
        font-weight: 600;
        min-width: 4.25rem;
        text-align: center;
      }
      .student-card .form-label { font-size: .95rem; }
    }

    /* Card header layout on small screens: stack name and controls */
    @media (max-width: 576px) {
      .student-card .card-body > .d-flex { flex-direction: column; gap: .75rem; }
      .student-card .learner-col { width: 100%; }
      .student-card .status-col { width: 100%; }
      .student-name { font-weight: 600; font-size: 1rem; word-break: break-word; }
    }

    /* Sticky action bar: ensure clickable above all overlays and safe area */
    .action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100; }
    .action-bar .inner { padding-bottom: calc(.5rem + env(safe-area-inset-bottom)); }

    /* Table action buttons wrap nicely on phones */
    td.actions .btn { margin: 0 .25rem .25rem 0; }

    /* Sticky filter bars inside pages (under the navbar) */
    .sticky-filter { position: sticky; top: 0; z-index: 1020; background: var(--bs-body-bg); padding-top: .25rem; }
    /* Secondary sticky bar that sits below the page header */
    .sticky-filter-2 { position: sticky; top: 3.25rem; z-index: 1019; background: var(--bs-body-bg); }

    /* Period chips layout for phones */
    .periods-wrap { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .25rem; }
    .period-chip { flex: 0 0 auto; min-width: 8.5rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .5rem; }
    .period-chip .title { font-weight: 600; }
    .period-chip .sub { font-size: .75rem; color: var(--bs-secondary-color); margin-top: -2px; }
    .chip-group { display:flex; gap:.35rem; flex-wrap:wrap; justify-content:center; margin-top:.35rem; }
    .chip-group input[type="radio"]{ position:absolute; opacity:0; width:0; height:0; }
    .chip-group label.btn{ padding:.35rem .5rem; font-weight:600; }
    .period-chip .time { margin-top:.35rem; }
    @media (max-width:576px){ .period-chip{ min-width:7.5rem; } }

    /* Apply the same selected-state styles to chip groups */
    .chip-group input[type="radio"]:checked + label.btn.btn-outline-success {
      background-color: var(--bs-success); border-color: var(--bs-success); color: #fff;
    }
    .chip-group input[type="radio"]:checked + label.btn.btn-outline-danger {
      background-color: var(--bs-danger); border-color: var(--bs-danger); color: #fff;
    }
    .chip-group input[type="radio"]:checked + label.btn.btn-outline-warning {
      background-color: var(--bs-warning); border-color: var(--bs-warning); color: var(--bs-dark);
    }
    .chip-group input[type="radio"]:checked + label.btn.btn-outline-info {
      background-color: var(--bs-info); border-color: var(--bs-info); color: #042a2b;
    }
    /* Distinct, high-contrast tint for PM periods on phones */
    .period-chip.pm {
      background: linear-gradient(to bottom, rgba(255,193,7,.16), rgba(255,193,7,.08)); /* amber */
      border-left: 4px solid rgba(255,193,7,.7);
    }
    .period-chip.pm .sub { color: #d97706; }
    /* Viewing date highlight */
    .viewing-date { display:flex; align-items:center; gap:.5rem; padding:.35rem .6rem; border:1px solid var(--bs-border-color); border-radius:.5rem; background: var(--bs-body-bg); }
    .viewing-date .date-main { font-weight:700; font-size:1.05rem; }
    .viewing-date .dow { color: var(--bs-secondary-color); font-size:.95rem; }
    @media (max-width:576px){ .viewing-date .date-main{ font-size:1.1rem; } }

    /* Sidebar Styling */
    .sidebar { 
        height: 100vh; 
        position: sticky; 
        top: 0; 
        background: #212529; 
        color: white; 
        padding: 1.5rem 1rem; 
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        box-shadow: 4px 0 10px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    .sidebar-brand {
        color: white;
        text-decoration: none;
        font-size: 1.5rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 1rem;
        padding-left: 0.5rem;
    }
    .sidebar-brand:hover { color: #e0e0e0; }

    .nav-group-label {
        font-size: 0.75rem;
        text-transform: uppercase;
        color: #6c757d;
        margin-top: 1.5rem;
        margin-bottom: 0.5rem;
        padding-left: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    .sidebar .nav-link { 
        color: rgba(255,255,255,0.8); 
        text-decoration: none; 
        display: flex; 
        align-items: center;
        gap: 12px;
        padding: 0.75rem 0.75rem; 
        border-radius: 8px;
        transition: all 0.2s ease;
        font-weight: 500;
    }

    .sidebar .nav-link:hover { 
        color: white; 
        background: rgba(255,255,255,0.1); 
        transform: translateX(3px);
    }

    .sidebar .nav-link.active {
        background: #0d6efd;
        color: white;
        box-shadow: 0 4px 6px rgba(13, 110, 253, 0.3);
    }

    .sidebar .nav-link i {
        font-size: 1.2rem;
        width: 24px;
        text-align: center;
    }

    .user-profile {
        margin-top: auto;
        padding-top: 1rem;
        border-top: 1px solid rgba(255,255,255,0.1);
    }

    .logout-btn {
        background: none;
        border: none;
        color: #adb5bd;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0.5rem 0.75rem;
        width: 100%;
        text-align: left;
        cursor: pointer;
        border-radius: 6px;
        transition: color 0.2s;
    }
    .logout-btn:hover {
        color: #dc3545;
        background: rgba(220, 53, 69, 0.1);
    }

    /* Main Content Area */
    main {
        min-height: 100vh;
        padding: 2rem !important;
    }

    /* Attendance Form Improvements */
    .sticky-header {
        position: sticky;
        top: 0;
        background: #f8f9fa;
        z-index: 900;
        padding-bottom: 1rem;
        border-bottom: 1px solid #dee2e6;
        margin-bottom: 1rem;
    }

    .period-chip {
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 0.5rem;
        background: #fff;
        min-width: 140px;
    }

    .period-chip.pm {
        background: #fff8e1; /* Light yellow for PM */
        border-color: #ffe082;
    }

    .chip-group .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }

    .fab-save {
        position: fixed;
        bottom: 2rem;
        right: 2rem;
        z-index: 1050;
        border-radius: 50px;
        padding: 1rem 2rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        font-weight: bold;
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* Sidebar Submenu Chevron Rotation */
    .sidebar .nav-link .bi-chevron-down {
        transition: transform 0.3s ease;
    }
    .sidebar .nav-link.collapsed .bi-chevron-down {
        transform: rotate(-90deg);
    }