/* ux-improvements.css
   Loaded LAST on every page (see fragments/head.html), so it can refine what
   auth.css, admin-dashboard.css and resident-dashboard.css define without
   editing those large files. Delete the <link> in head.html to switch all of
   this off at once.

   1. Larger text        - many labels were 11-12.5px, hard to read for older
                           residents (this portal's main users)
   2. Small style gaps   - styles the admin pages used but only the resident
                           stylesheet defined; the new "Claimed" status colour
   3. Phone layout       - wide tables become stacked cards; the top bar and
                           search bar fit a narrow screen
   4. Sidebar on phones  - Log out must stay reachable (FIX, at the end)
   ------------------------------------------------------------------------ */

/* ============================================================
   1. LARGER TEXT
   ============================================================ */

.field label            { font-size: 14px; }
.field-hint             { font-size: 12.5px; color: var(--ink-dim, #5b6b7c); margin-top: 5px; }
.topbar-sub             { font-size: 14px; }
.brand-eyebrow          { font-size: 11.5px; }
.nav-item               { font-size: 14px; }   /* 14.5px made "Document Requests" too wide for its badge - see the sidebar-badge block in section 2 */
.nav-badge              { font-size: 12px; }
.profile-name           { font-size: 14px; }
.profile-role           { font-size: 12px; }
.stat-label             { font-size: 13.5px; }
.panel-link             { font-size: 13.5px; }
.action-label           { font-size: 14px; }

/* tables */
.activity-table         { font-size: 14px; }
.activity-table th      { font-size: 12px; }
.detail-cell            { font-size: 13px; }
.ref-no                 { font-size: 13px; }
.doc-thumb-link         { font-size: 13px; }
.issue-category-badge   { font-size: 12.5px; }

/* The accessibility pass in auth.css asked for 12.5px status pills, but the
   dashboard stylesheets (loaded after it) reset them to 11px. Restore it. */
.status-pill            { font-size: 12.5px; padding: 5px 12px; }

/* buttons, inputs, tabs, messages */
.btn-sm                 { font-size: 13px; }
.remarks-input,
.resubmit-input         { font-size: 13px; }
.search-input           { font-size: 14px; }
.filter-tab             { font-size: 13.5px; }
.flash-message          { font-size: 14px; }
.empty-state            { font-size: 14px; }
.file-upload-box        { font-size: 14px; }

/* notification bell */
.notif-dropdown-head    { font-size: 14px; }
.notif-message          { font-size: 13.5px; }
.notif-time             { font-size: 12px; }
.notif-mark-all,
.notif-viewall          { font-size: 13px; }

/* announcements / updates / scholarship info */
.update-item .update-title,
.update-item .update-message { font-size: 14px; }
.update-item .update-meta    { font-size: 12.5px; }
.announcement-card p    { font-size: 13.5px; }
.announcement-meta      { font-size: 12.5px; }
.requirements-box p,
.requirements-list      { font-size: 14px; }

/* reports and map legend */
.report-status-list li  { font-size: 13px; }
.report-module-card h3  { font-size: 14.5px; }
.map-legend             { font-size: 13px; }

/* sign-in / landing details */
.role-text .desc,
.contact-row            { font-size: 12.5px; }
.status-note,
.foot-note              { font-size: 12px; }

/* ============================================================
   2. SMALL STYLE GAPS
   ============================================================ */

/* Bigger text can make a wide table a little wider than its panel on a tablet
   or small laptop; let the panel scroll sideways instead of stretching the
   whole page. (Phones use the card layout in section 3 instead.) */
.panel { overflow-x: auto; }

/* Used by the admin "Post New Announcement" form (3 columns via inline style)
   and by report labels, but only resident-dashboard.css defined them - so on
   the admin side the three fields stacked and the labels were unstyled. */
.doc-upload-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* "Export CSV" is a link, so it picked up the browser's underline and did not
   line up with the buttons beside it. Make it look and size like them. */
a.btn-sm { display: inline-flex; align-items: center; text-decoration: none; }

/* Reports page: shown only if changing the period takes over a quarter second. */
.dash-main.is-loading .panel { opacity: .55; transition: opacity .15s ease; }

/* SIDEBAR BADGES: appearing must never change the layout.
   The red number beside Document Requests / Barangay ID / Scholarships / Issue
   Reports used to sit IN the row, so when it appeared (a moment after the page
   loaded) it took ~38px from the label and "Document Requests" jumped from one
   line to two - and back on the next click. Now the badge floats over the right
   end of the row, and those four rows ALWAYS keep room for it, so the label has
   exactly the same width whether or not a number is showing. */
.side-nav .nav-item { position: relative; }
.side-nav .nav-badge {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 1px 6px;   /* a little tighter, so even a 3-digit number clears the label */
}
.side-nav a.nav-item[href="/admin/document-requests"],
.side-nav a.nav-item[href="/admin/barangay-id"],
.side-nav a.nav-item[href="/admin/scholarships"],
.side-nav a.nav-item[href="/admin/issue-reports"] { padding-right: 38px; }

/* Claimed status: a document / ID the resident has collected (calm blue-grey:
   finished). */
.status-pill.claimed { background: #e6e9f5; color: #3c4a8a; }

/* ============================================================
   3. PHONE LAYOUT  (screens up to 720px wide)
   ============================================================ */

@media screen and (max-width: 720px) {

    .panel { padding: 14px; }

    /* ---- tables: one stacked card per row ----
       A 9-column table can't fit a phone. Each row becomes a card, and each
       value shows its column heading above it (data-label, copied from the
       table header by the dashboard scripts). */
    .activity-table,
    .activity-table tbody { display: block; width: 100%; }

    /* the header row is now redundant - hide it visually, keep it for screen readers */
    .activity-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .activity-table tr {
        display: block;
        background: #ffffff;
        border: 1px solid var(--border, #e3ebf5);
        border-radius: 14px;
        padding: 4px 14px 8px;
        margin-bottom: 12px;
    }

    .activity-table td,
    .activity-table tr:last-child td {
        display: block;
        padding: 9px 0;
        text-align: left;
        border-bottom: 1px dashed var(--border, #e3ebf5);
    }
    .activity-table td:last-child,
    .activity-table tr:last-child td:last-child { border-bottom: none; }

    .activity-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        /* the reference-number cell uses a monospace font; the label must not inherit it */
        font-family: 'Inter', sans-serif;
        white-space: normal;
        margin-bottom: 3px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: var(--ink-dim, #5b6b7c);
    }

    /* the reference number acts as the card's title */
    .activity-table td.ref-no { font-size: 15px; }

    .detail-cell { max-width: none; }
    .id-photo-thumb { width: 64px; height: 64px; }

    /* action buttons and their reason boxes use the full card width */
    .action-btns { width: 100%; }
    .action-btns form { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
    .remarks-input,
    .resubmit-input { flex: 1 1 140px; width: auto; min-width: 0; }

    /* ---- search and filter rows ---- */
    .search-bar { flex-wrap: wrap; }
    .search-input { max-width: none; flex: 1 1 100%; }

    /* ---- top bar: keep the bell reachable ---- */
    .topbar { gap: 10px; }
    .topbar-heading h1 { font-size: 19px; }
    .profile-text { display: none; }

    /* the announcement form sets 3 columns inline; stack them on a phone */
    .doc-upload-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   4. FIX: sidebar - keep "Log out" reachable on phones and short screens
   On phones 100vh is taller than the visible screen (the browser's address
   bar takes space) and the sidebar could not scroll, so the Log out button at
   the bottom was cut off. 100dvh is the real visible height, and the sidebar
   now scrolls if its menu is taller than the screen.
   ============================================================ */
.sidebar {
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.sidebar-bottom {
    flex: none;
    padding-bottom: 16px;
}

@media screen and (max-width: 840px) {
    .sidebar {
        padding-bottom: 80px;   /* keeps Log out above the phone's browser bar */
    }
}

/* ============================================================
   5. FIX: sidebar logo must never flash an empty circle
   The dashed "waiting for image" circle from auth.css is hidden in the
   sidebar: the logo sits on a solid white disc, so even if the image is a
   few milliseconds late there is no visible blink.
   ============================================================ */
.sidebar .logo-circle.small {
    border: 0;
    background: #ffffff;
    box-shadow: 0 0 0 1px var(--border, #e3ebf5);
    flex: none;
}

.sidebar .logo-circle img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}