/* ================================================================
   ClaudeTrack - global.css
   Site facelift - clean, modern design.
   All original class/ID names preserved for backward compatibility.
   No background-image textures - pure CSS throughout.
   ================================================================ */

/* -- CSS custom properties ------------------------------------- */
:root {
    --navy:        #1d3557;
    --blue:        #2d6ab0;
    --blue-mid:    #4e87c6;
    --blue-light:  #e8f0fc;
    --page-bg:     #f0f4f8;
    --card:        #ffffff;
    --border:      #dde4ee;
    --border-dark: #c5cfdd;
    --text:        #2c3e50;
    --muted:       #6b7c93;
    --th-bg:       #f3f6fa;
    --hover-row:   #e9f0fa;
    --sidebar-w:   200px;
    --content-w:   1100px;
    --radius:      4px;
}

/* -- Base reset ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: var(--text);
    background: var(--page-bg);
    margin: 0;
    padding: 0;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--navy); }
h1, h2, h3, h4 { margin: 0; }

/* -- #main ----------------------------------------------------- */
#main {
    width: var(--content-w);
    max-width: 100%;
    margin: 0 auto;
    background: var(--page-bg);
    box-shadow: 0 0 0 1px rgba(0,0,0,.06);
}

/* -- Top branding/header bar ----------------------------------- */
/* UAD 3.6 mandatory-date countdown pill (header) */
.uad36-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, #1d4ed8 0%, #2e5496 55%, #1e3a8a 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(30, 58, 138, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    cursor: default;
}
/* soft sheen sweeping across the pill */
.uad36-pill::after {
    content: "";
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    animation: uad36-sheen 6s ease-in-out infinite;
}
@keyframes uad36-sheen {
    0%   { left: -75%; }
    35%  { left: 125%; }
    100% { left: 125%; }
}
.uad36-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .9;
}
.uad36-units { display: inline-flex; align-items: baseline; gap: 2px; }
.uad36-num {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-left: 6px;
}
.uad36-unit { font-size: 10px; opacity: .75; }
/* post-deadline state */
.uad36-pill.uad36-live {
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 60%, #991b1b 100%);
    box-shadow: 0 2px 6px rgba(153, 27, 27, .4), inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* -- MISMO photo grid ------------------------------------------
   Shared by the order Photos tab, the standalone photo gallery and the
   comparable photo search. Lives here rather than in each view because it was
   originally copied into all three, which meant the cards stayed white on a
   dark page - structural colours must come from the theme variables so the
   grid follows dark mode. The small chips keep the light-tint/dark-text
   treatment used by .status-* above, which reads correctly in both themes. */
#photo-toolbar { margin: 4px 0 10px 0; }
#photo-search {
    width: 280px;
    padding: 5px 8px;
    font-size: 13px;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--text);
}
#photo-search-count { font-size: 12px; color: var(--muted); margin-left: 8px; }

#photo-grid { display: flex; flex-wrap: wrap; gap: 10px; }

.photo-card {
    width: 150px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px;
    background: var(--card);
}
.photo-card img {
    width: 100%;
    height: 105px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    background: var(--th-bg);
}
.photo-caption {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-top: 5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.photo-meta {
    margin-top: 3px;
    font-size: 10px;
    color: var(--muted);
    display: flex; flex-wrap: wrap; gap: 3px;
}
/* Chips carry a border, the way .status-* does. On a white card a pale fill
   alone is invisible - the tints here were 1.04-1.09 against it - so the border
   is what makes the chip read as a chip. The neutral chip's old --muted text was
   also only 3.93 on its fill, under the 4.5 that small text needs. */
.photo-meta span {
    background: #eef1f6;
    color: #334155;
    border: 1px solid #cbd5e1;
    border-radius: 3px;
    padding: 0 5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.photo-scope    { color: #1e40af; background: #dbeafe !important; border-color: #93c5fd; }
.photo-room     { color: #065f46; background: #d1fae5 !important; border-color: #6ee7b7; }
.photo-address  { color: #92400e; background: #fef3c7 !important; border-color: #fcd34d; }

#photo-none {
    display: none;
    font-size: 13px;
    color: var(--muted);
    padding: 10px 2px;
}
.photo-empty { font-size: 13px; color: var(--muted); }

/* -- Comparable photo search results ---------------------------- */
#photo-results { display: flex; flex-wrap: wrap; gap: 12px; }
.photo-hit {
    width: 176px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 7px;
    background: var(--card);
}
.photo-hit img {
    width: 100%;
    height: 122px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    background: var(--th-bg);
}
.photo-hit-addr {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-top: 6px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.photo-hit-loc {
    font-size: 11px;
    color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.photo-hit-meta {
    margin-top: 5px;
    font-size: 10px;
    display: flex; flex-wrap: wrap; gap: 3px; align-items: center;
}
.photo-hit-meta span {
    background: #eef1f6;
    color: #334155;
    border: 1px solid #cbd5e1;
    border-radius: 3px;
    padding: 0 5px;
}
.photo-hit-role  { color: #1e40af; background: #dbeafe !important; border-color: #93c5fd; font-weight: 600; }
.photo-hit-order { text-decoration: none; }
.photo-hit-order span { color: #065f46; background: #d1fae5 !important; border-color: #6ee7b7; }

/* A subject hit is the property itself rather than a comparable someone used,
   which changes what it means to the appraiser - so it is marked on the card,
   not just in the chip text. */
.photo-hit.is-subject {
    border-color: #f0b429;
    background: var(--hover-row);
    box-shadow: inset 3px 0 0 #f0b429;
}
/* border-color too, or the amber chip keeps the blue border it inherits from
   .photo-hit-role */
.photo-hit.is-subject .photo-hit-role { color: #92400e; background: #fef3c7 !important; border-color: #fcd34d; }

.photo-truncated {
    font-size: 12px;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radius);
    padding: 8px 10px;
    margin-bottom: 10px;
}

/* -- Standalone photo gallery header ---------------------------- */
/* The file number is part of the h1 text itself ("Photos | SG26-425956") so it
   inherits the title bar's own styling - no separate rule for it. */
.gallery-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; margin-bottom: 12px; flex-wrap: wrap;
}
.gallery-addr    { font-size: 14px; font-weight: 600; color: var(--text); }
.gallery-loc     { font-size: 12px; color: var(--muted); }
.gallery-counts  { font-size: 12px; color: var(--muted); margin-top: 4px; }
.gallery-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* -- Photo chips in dark mode ----------------------------------
   The light tints above would be glaring pale pills here, and the neutral chip
   would land on --th-bg over a --card surface, i.e. dark on dark. Dark mode
   gets its own fills and borders: fill 1.6-2.0 against the card so the chip
   reads as a chip, border 2.5-3.3 to sharpen the edge, and the label 5.4-7.3
   on its own fill, which the 10px chip text needs. */
html.dark-mode .photo-meta span,
html.dark-mode .photo-hit-meta span {
    background: #3d4a5c;
    color: #e5e7eb;
    border-color: #55677f;
}
html.dark-mode .photo-scope,
html.dark-mode .photo-hit-role       { color: #bfdbfe; background: #22497a !important; border-color: #2f6bb0; }
html.dark-mode .photo-room           { color: #a7f3d0; background: #0a5f49 !important; border-color: #10876a; }
html.dark-mode .photo-address        { color: #fde68a; background: #8a4010 !important; border-color: #b8571a; }
html.dark-mode .photo-hit-order span { color: #a7f3d0; background: #0a5f49 !important; border-color: #10876a; }

html.dark-mode .photo-hit.is-subject { background: #2a2418; }
html.dark-mode .photo-hit.is-subject .photo-hit-role { color: #fde68a; background: #8a4010 !important; border-color: #b8571a; }

html.dark-mode .photo-truncated {
    color: #fcd34d;
    background: #2a2418;
    border-color: #78350f;
}

@media (max-width: 768px) {
    .uad36-pill { display: none; } /* header wraps on small screens; hide to keep it tidy */
}

#header {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 18px 0 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    gap: 6px;
}
#header-logo { display: flex; align-items: center; flex-shrink: 0; padding: 4px 0; }
#header-logo img { display: block; height: 70px; width: auto; max-width: 280px; object-fit: contain; object-position: left center; }
#header a { color: var(--blue); text-decoration: none; }
#header a:hover { text-decoration: underline; }

/* -- Horizontal nav bar (#hnav) -------------------------------- */
#hnav {
    width: 100%;
    height: 42px;
    background: var(--blue);
    display: flex;
    align-items: center;
    padding: 0 6px;
}
#hnav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    flex: 1;
    height: 42px;
}
#hnav ul li { display: flex; align-items: stretch; }
#hnav ul li a {
    display: flex;
    align-items: center;
    padding: 0 14px;
    color: rgba(255,255,255,.82);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: color .15s, border-color .15s, background .15s;
    white-space: nowrap;
}
#hnav ul li a:hover {
    color: #fff;
    border-bottom-color: rgba(255,255,255,.65);
    background: rgba(0,0,0,.1);
}

/* Search box inside #hnav ------------------------- */
#search {
    display: flex;
    align-items: center;
    height: 42px;
    margin-left: auto;
    padding-right: 8px;
    flex-shrink: 0;
}
#search form { margin: 0; padding: 0; background: none; border: none; }
#search input[type=text] {
    width: 195px;
    height: 28px;
    line-height: 28px;
    font-size: 12px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 14px;
    background: rgba(255,255,255,.15);
    color: #fff;
    outline: none;
    transition: background .15s, border-color .15s;
}
#search input[type=text]::placeholder { color: rgba(255,255,255,.55); }
#search input[type=text]:focus {
    background: rgba(255,255,255,.25);
    border-color: rgba(255,255,255,.65);
}

/* -- Content wrapper ------------------------------------------- */
#content-wrapper {
    width: 100%;
    min-height: 760px;
    background: var(--page-bg);
    display: flex;
    align-items: stretch;
    padding-bottom: 24px;
}

/* -- Left sidebar ---------------------------------------------- */
#content-left {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--card);
    border-right: 1px solid var(--border);
    padding: 14px 0;
}
#content-left ul#vnav {
    list-style: none;
    margin: 0;
    padding: 0 8px;
}
#content-left ul#vnav li { margin-bottom: 2px; }
#content-left ul#vnav li a {
    display: block;
    padding: 7px 12px;
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s;
    border-left: 3px solid transparent;
}
#content-left ul#vnav li a:hover {
    background: var(--blue-light);
    color: var(--blue);
    text-decoration: none;
}
#content-left ul#vnav li.active a,
#content-left ul#vnav li.active a:hover {
    background: var(--blue-light);
    color: var(--blue);
    font-weight: 700;
    border-left-color: var(--blue);
}

/* -- Sub-menu (right-side action buttons on detail pages) ------- */
#subMenu {
    width: 190px;
    padding: 10px;
    float: right;
}
#subMenu ul#vnav { list-style: none; margin: 0; padding: 0; }
#subMenu ul#vnav li { margin-bottom: 5px; }
#subMenu ul#vnav li a,
.subMenuButton {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--blue);
    border: none;
    border-radius: var(--radius);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 8px;
    text-decoration: none;
    line-height: 20px;
    vertical-align: middle;
    cursor: pointer;
    transition: background .15s;
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
#subMenu ul#vnav li a:hover,
.subMenuButton:hover {
    background: #1d5494;
    color: #fff;
    text-decoration: none;
}

/* -- Main content area ----------------------------------------- */
#content-right {
    flex: 1;
    min-width: 0;          /* prevents flex child overflow */
    padding: 18px 22px;
}

/* Page headings */
#content-right h2, #content-right h3 { color: #1a2537; }
html.dark-mode #content-right h2,
html.dark-mode #content-right h3 { color: #f3f4f6; }

/* Page title bar */
#content-right h1 {
    display: block;
    background: var(--blue-mid);
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    padding: 10px 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
    width: auto;
}

/* -- Tables ---------------------------------------------------- */
#content-right table {
    margin: 0 !important;
    width: 100% !important;
    border-collapse: collapse;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
#content-right table.OrderInformation { width: 90% !important; border: 0; }
#content-right table.financial {
    margin: 0 !important;
    width: 100% !important;
    border-collapse: collapse;
}
#content-right table tr th {
    font-weight: 700;
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .03em;
    background: var(--th-bg);
    padding: 8px 10px;
    border: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}
#content-right table tr td {
    font-size: 12px;
    color: var(--text);
    padding: 8px 10px;
    border: 1px solid #eaeff6;
    vertical-align: top;
}
#content-right table tbody tr:nth-child(even) td { background: #e8edf5; }
#content-right table tr:hover td { background: var(--hover-row); }
#content-right table tr td img { padding: 0 7px; }

/* jQuery UI moves dialogs to <body> - outside #content-right - so dialog
   tables (e.g. the MISMO cross-check results popup) lose the zebra striping
   above. Mirror it here for light mode; the dark-mode counterpart already
   exists in the html.dark-mode section below. */
.ui-dialog table tbody tr:nth-child(even) td { background: #e8edf5; }
.ui-dialog table tbody tr:hover td { background: var(--hover-row); }

/* -- Forms ----------------------------------------------------- */
#content-right form { margin: 0; padding: 0; font-size: 12px; }
#content-right form label,
#content-right .label {
    float: left;
    width: 175px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    display: block;
    clear: left;
    line-height: 28px;
    vertical-align: middle;
}
#content-right .rocontent { line-height: 28px; vertical-align: middle; }
#content-right .content-container { margin: 0; }
#content-right form div { margin-top: 14px; }
#content-right input[type=text],
#content-right input[type=password] {
    height: 28px;
    line-height: 28px;
    padding: 0 8px;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    background: #fff;
    font-size: 12px;
    color: var(--text);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
#content-right input[type=text]:focus,
#content-right input[type=password]:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(45,106,176,.12);
}
#content-right textarea {
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    background: #fff;
    font-size: 12px;
    padding: 6px 8px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
#content-right textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(45,106,176,.12);
}

/* -- Tabs ------------------------------------------------------ */
#content-right ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 34px;
    border-bottom: 2px solid var(--blue-mid);
    width: 100%;
    display: flex;
}
#content-right ul.tabs li {
    float: left;
    height: 34px;
    line-height: 34px;
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    margin-right: 3px;
    background: #eef1f6;
    overflow: hidden;
    position: relative;
}
#content-right ul.tabs li a {
    text-decoration: none;
    color: var(--muted);
    display: block;
    font-size: 12px;
    font-weight: 600;
    padding: 0 16px;
    outline: none;
}
#content-right ul.tabs li a:hover { background: var(--blue-light); color: var(--blue); }
#content-right ul.tabs li.active,
#content-right ul.tabs li.active a:hover {
    background: #fff;
    border-bottom: 2px solid #fff;
}
#content-right ul.tabs li.active a { color: var(--blue); }
#content-right .tab_container {
    border: 1px solid var(--border);
    border-top: none;
    overflow: hidden;
    clear: both;
    float: left;
    width: 100%;
    background: #fff;
    margin: 0;
    border-radius: 0 0 var(--radius) var(--radius);
}
#content-right .tab_content { padding: 14px; }

/* -- Footer ---------------------------------------------------- */
#footer {
    clear: both;
    width: 100%;
    text-align: center;
    padding: 12px 0;
    font-size: 11px;
    color: var(--muted);
    border-top: 1px solid var(--border);
    background: var(--card);
}

/* -- Misc (#myResult, etc.) ------------------------------------ */
#myResult { border: 0; }
#myResult table { border: 0; }
#myResult table tr th,
#myResult table tr td { border: 0; }

/* -- Pagination ------------------------------------------------ */
.pagination {
    display: inline-block;
    float: right;
    font-weight: 600;
    font-size: 12px;
    margin: 0 0 12px 0;
    line-height: 28px;
}
.pagination a {
    display: inline-block;
    color: var(--blue);
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-left: 4px;
    font-weight: 600;
    font-size: 12px;
    transition: background .12s;
}
.pagination a:hover {
    background: var(--blue-light);
    text-decoration: none;
}
.results {
    display: inline-block;
    float: left;
    font-weight: 600;
    font-size: 12px;
    color: var(--muted);
    margin: 0 0 12px 0;
    line-height: 28px;
}

/* -- Order status badges --------------------------------------- */
.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: .02em;
    vertical-align: middle;
}
.status-open      { background: #e3f2fd; color: #0d47a1; border: 1px solid #90caf9; }  /* blue  - active/in-progress */
.status-completed { background: #e8f5e9; color: #1b5e20; border: 1px solid #81c784; }  /* green - done/delivered */
.status-cancelled { background: #fce4ec; color: #880e4f; border: 1px solid #f48fb1; }  /* pink  - cancelled */
.status-declined  { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }  /* red   - declined */
.status-pending   { background: #f3e5f5; color: #4a148c; border: 1px solid #ce93d8; }  /* purple- pending/payment */
.status-default   { background: #f5f5f5; color: #424242; border: 1px solid #bdbdbd; }  /* gray  - unassigned/waiting */
.status-scheduled { background: #fef9c3; color: #854d0e; border: 1px solid #fbbf24; }  /* yellow- scheduled */
.status-contact   { background: #ffedd5; color: #c2410c; border: 1px solid #fb923c; }  /* orange- left msg/no answer */
.status-hold      { background: #fef3c7; color: #92400e; border: 1px solid #f59e0b; }  /* amber - on hold/action req */
.status-deleted   { background: #1f1f1f; color: #9e9e9e; border: 1px solid #424242; }  /* dark  - deleted */

/* UAD 3.6 / new-URAR emphasis badge - same visual family as the header
   countdown pill (.uad36-pill): blue gradient, pill radius, sheen sweep.
   Works in both themes without a dark-mode override. */
.uad36-badge {
    display: inline-block;
    margin-left: 14px;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
    color: #fff;
    background: linear-gradient(135deg, #1d4ed8 0%, #2e5496 55%, #1e3a8a 100%);
    box-shadow: 0 2px 6px rgba(30, 58, 138, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
    position: relative;
    overflow: hidden;
}
.uad36-badge::after {
    content: "";
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    animation: uad36-sheen 6s ease-in-out infinite;
}

/* -- Alert messages -------------------------------------------- */
.errormessage {
    display: block;
    border: 1px solid #e57373;
    background: #fee3e3;
    color: #b71c1c;
    font-weight: 600;
    font-size: 12px;
    padding: 10px 14px;
    margin: 0 0 14px 0;
    border-radius: var(--radius);
}
.errormessage img { padding: 0 7px; vertical-align: middle; }
.successmessage {
    display: block;
    border: 1px solid #66bb6a;
    background: #e8f5e9;
    color: #1b5e20;
    font-weight: 600;
    font-size: 12px;
    padding: 10px 14px;
    margin: 0 0 14px 0;
    border-radius: var(--radius);
}
.successmessage img { padding: 0 7px; vertical-align: middle; }

/* -- Buttons --------------------------------------------------- */
.button,
a#button {
    display: inline-block;
    background: #5e7291;
    border: 1px solid #4a5a72;
    border-radius: var(--radius);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 16px;
    text-decoration: none;
    cursor: pointer;
    line-height: normal;
    vertical-align: middle;
    transition: background .15s, border-color .15s;
    box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.button:hover,
a#button:hover {
    background: #4a5a72;
    border-color: #374457;
    color: #fff;
    text-decoration: none;
}
.button:active,
a#button:active { position: relative; top: 1px; }

a.roundedButton {
    font-family: inherit;
    font-size: 12px;
    display: inline-block;
    color: #fff;
    background: var(--blue);
    padding: 6px 14px;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    text-decoration: none;
    transition: background .15s;
}
a.roundedButton:hover { background: #1d5494; color: #fff; text-decoration: none; }

/* -- User info block / role switcher -------------------------- */
.user-info-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.3;
    font-size: 11px;
}
.username-label { font-weight: 600; color: var(--text); }
.header-sep { margin: 0 6px; color: #ccc; }

.role-switcher { position: relative; }
.role-switcher-btn {
    background: var(--blue-light);
    border: 1px solid var(--border-dark);
    border-radius: 10px;
    color: var(--blue);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
    transition: background .15s;
    white-space: nowrap;
}
.role-switcher-btn:hover { background: #d4e4f7; }
.role-caret { font-size: 8px; }

.role-dropdown {
    display: none;
    position: fixed;
    right: 18px;
    top: auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    min-width: 165px;
    z-index: 9999;
    overflow: hidden;
}
.role-dropdown.open { display: block; }
.role-dropdown a {
    display: block;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    transition: background .12s;
    border-bottom: 1px solid var(--border);
}
.role-dropdown a:last-child { border-bottom: none; }
.role-dropdown a:hover { background: var(--blue-light); color: var(--blue); text-decoration: none; }
.role-dropdown a.role-current { color: var(--blue); background: var(--blue-light); }

.role-badge-static {
    background: var(--blue-light);
    border: 1px solid var(--border-dark);
    border-radius: 10px;
    color: var(--blue);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    white-space: nowrap;
}

/* Dark mode overrides for role switcher */
html.dark-mode .role-switcher-btn { background: #1e3a5f; border-color: #374151; color: #93c5fd; }
html.dark-mode .role-switcher-btn:hover { background: #263347; }
html.dark-mode .role-dropdown { background: #1f2937; border-color: #374151; }
html.dark-mode .role-dropdown a { color: #f3f4f6; border-color: #374151; }
html.dark-mode .role-dropdown a:hover { background: #1e3a5f; color: #93c5fd; }
html.dark-mode .role-dropdown a.role-current { background: #1e3a5f; color: #93c5fd; }
html.dark-mode .role-badge-static { background: #1e3a5f; border-color: #374151; color: #93c5fd; }
html.dark-mode .username-label { color: #f3f4f6; }

/* -- Dark-mode toggle button ----------------------------------- */
#dark-mode-btn {
    background: none;
    border: 1px solid rgba(0,0,0,.18);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 10px;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
    color: var(--muted);
}
#dark-mode-btn:hover { background: var(--blue-light); border-color: var(--border-dark); }

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

/* -- Filter bar ------------------------------------------------ */
.dash-filters {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.dash-filters label {
    font-weight: 600;
    font-size: 12px;
    color: var(--muted);
    margin-right: 4px;
}
.dash-filters select {
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--text);
    font-size: 13px;
}

/* -- KPI cards row --------------------------------------------- */
.dash-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.dash-kpi {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    text-align: center;
}
.dash-kpi-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
}
.dash-kpi-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
}
.dash-kpi-sub {
    font-size: 11px;
    margin-top: 4px;
}
.dash-kpi-sub.up   { color: #16a34a; }
.dash-kpi-sub.down { color: #dc2626; }
.dash-kpi-sub.flat { color: var(--muted); }

/* -- Chart grid ------------------------------------------------ */
.dash-chart-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 20px;
}
.dash-chart-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}
.dash-chart-card h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 10px;
}

/* -- Appraiser cards grid -------------------------------------- */
.dash-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 12px;
    border-bottom: 2px solid var(--blue);
    padding-bottom: 6px;
    display: inline-block;
}
.dash-appraiser-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.dash-appraiser-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
}
.dash-appraiser-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}
.dash-appraiser-office {
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 8px;
}
.dash-appraiser-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    font-size: 12px;
}
.dash-appraiser-stats dt {
    color: var(--muted);
    font-weight: 400;
}
.dash-appraiser-stats dd {
    margin: 0;
    font-weight: 600;
    color: var(--text);
    text-align: right;
}
.dash-appraiser-pct {
    font-size: 11px;
    margin-top: 6px;
    text-align: right;
}
.dash-appraiser-pct.up   { color: #16a34a; }
.dash-appraiser-pct.down { color: #dc2626; }

/* -- Office group headings (Group by Office view) -------------- */
.dash-office-group { margin-bottom: 16px; }
.dash-office-group-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--blue);
    padding: 4px 0 6px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}

/* -- Loading overlay ------------------------------------------- */
.dash-loading {
    text-align: center;
    padding: 40px;
    color: var(--muted);
    font-size: 13px;
}
.dash-loading::before {
    content: '';
    display: block;
    width: 28px;
    height: 28px;
    border: 3px solid var(--border);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: dash-spin .7s linear infinite;
    margin: 0 auto 10px;
}
@keyframes dash-spin { to { transform: rotate(360deg); } }

/* Charts are full-width (single column) by default */

/* ================================================================
   FEE MAP
   ================================================================ */
#feeMap {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    z-index: 0;
}
/* Solid background matching theme - tiles hidden on state view, shown on county drill-down */
.leaflet-container { background: #1a1a2e; }
html:not(.dark-mode) .leaflet-container { background: #dce4ec; }
#feeMapBack {
    margin: 10px 0;
    padding: 6px 16px;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--text);
    cursor: pointer;
    font-size: 13px;
}
#feeMapBack:hover { background: var(--blue-light); }

.fee-map-legend {
    padding: 8px 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 10px 0;
    display: inline-flex;
    gap: 4px;
    align-items: center;
    font-size: 12px;
    color: var(--text);
}
.fee-map-legend i {
    width: 18px;
    height: 14px;
    display: inline-block;
}
.fee-map-legend span {
    margin: 0 6px 0 2px;
    color: var(--muted);
}

.fee-map-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 13px;
}
.fee-map-table th {
    background: var(--th-bg);
    border-bottom: 2px solid var(--border);
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
}
.fee-map-table th:hover { background: var(--hover-row); }
.fee-map-table td {
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}
.fee-map-table tbody tr:hover td { background: var(--hover-row); }
.fee-map-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Dark mode overrides for Leaflet map controls */
html.dark-mode .leaflet-control-zoom a {
    background: #1f2937 !important;
    color: #f3f4f6 !important;
    border-color: #374151 !important;
}
html.dark-mode .leaflet-control-attribution {
    background: rgba(31, 41, 55, 0.85) !important;
    color: #9ca3af !important;
}
html.dark-mode .leaflet-control-attribution a { color: #60a5fa !important; }

/* ================================================================
   DARK MODE
   Applied by adding class="dark-mode" to <html> via JS toggle.
   ================================================================ */
html.dark-mode {
    --page-bg:     #111827;
    --card:        #1f2937;
    --border:      #374151;
    --border-dark: #4b5563;
    --text:        #f3f4f6;
    --muted:       #9ca3af;
    --th-bg:       #1a2537;
    --hover-row:   #263347;
    --blue-light:  #1e3a5f;
    --blue:        #60a5fa;
    --blue-mid:    #5b9bd5;
}

html.dark-mode body { color: var(--text); background: var(--page-bg); }

/* Header */
html.dark-mode #header {
    background: #1f2937;
    border-bottom-color: #374151;
}
/* Logo: invert black->white, hue-rotate preserves blue/red tones */
html.dark-mode #header-logo img {
    filter: invert(1) hue-rotate(180deg);
}
html.dark-mode #dark-mode-btn {
    border-color: rgba(255,255,255,.2);
    color: #d1d5db;
}
html.dark-mode #dark-mode-btn:hover { background: #374151; }

/* Nav bar - keep blue but deepen it */
html.dark-mode #hnav { background: #1d3557; }

/* Sidebar */
html.dark-mode #content-left {
    background: #1f2937;
    border-right-color: #374151;
}

/* Main background */
html.dark-mode #main { background: var(--page-bg); }
html.dark-mode #content-wrapper { background: var(--page-bg); }

/* Footer */
html.dark-mode #footer {
    background: #1f2937;
    border-top-color: #374151;
}

/* Inputs & textareas */
html.dark-mode #content-right input[type=text],
html.dark-mode #content-right input[type=password],
html.dark-mode #content-right textarea,
html.dark-mode #content-right select {
    background: #111827;
    border-color: #374151;
    color: #f3f4f6;
}
html.dark-mode #content-right input[type=text]:focus,
html.dark-mode #content-right input[type=password]:focus,
html.dark-mode #content-right textarea:focus,
html.dark-mode #content-right select:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96,165,250,.18);
}

/* Tables */
html.dark-mode #content-right table { border-color: #374151; }
html.dark-mode #content-right table tr th { border-color: #374151; color: var(--text); background: var(--th-bg); }
html.dark-mode #content-right table tr td { border-color: #2a3347; color: var(--text); }
html.dark-mode #content-right table tbody tr:nth-child(even) td { background: #1a2537; }
html.dark-mode #content-right table tr:hover td { background: #263347; }

/* -- Audit log expandable detail rows -------------------------- */
/* Inline styles on detail rows use hardcoded light-mode colors;
   override them with !important so dark mode wins.                */
html.dark-mode .login-detail-row,
html.dark-mode .clone-detail-row,
html.dark-mode .audit-detail-row { background-color: #1a2537 !important; }

html.dark-mode .login-detail-row td,
html.dark-mode .clone-detail-row td,
html.dark-mode .audit-detail-row td { color: #d1d5db !important; }

html.dark-mode .login-summary-row:hover td,
html.dark-mode .clone-summary-row:hover td,
html.dark-mode .audit-group-row:hover td { background-color: #263347 !important; }

/* -- Dashboard: permissions grid in admin ---------------------- */
html.dark-mode .permissions-grid th { background: #1e3a5f !important; color: #93c5fd; }
html.dark-mode .permissions-grid tr:hover td { background-color: #263347 !important; }

/* Form inputs - exclude native <select> to avoid breaking selectBox plugin */
html.dark-mode input[type=text],
html.dark-mode input[type=password],
html.dark-mode input[type=email],
html.dark-mode input[type=number],
html.dark-mode input[type=date],
html.dark-mode textarea { background: #1f2937; color: var(--text); border-color: #374151; }
html.dark-mode input[type=text]::placeholder,
html.dark-mode textarea::placeholder { color: var(--muted); }

/* selectBox custom widget dark mode (replaces native select) */
html.dark-mode .selectBox-dropdown { background: #1f2937; color: var(--text); border-color: #374151; }
html.dark-mode .selectBox-dropdown .selectBox-arrow { border-color: #374151; background: #263347; }
html.dark-mode .selectBox-dropdown-menu { background: #1f2937; border-color: #374151; }
html.dark-mode .selectBox-dropdown-menu li a { color: var(--text); }
html.dark-mode .selectBox-dropdown-menu li.selectBox-hover a { background: #263347; }

/* Tabs */
html.dark-mode #content-right ul.tabs li {
    background: #1a2537;
    border-color: #374151;
}
html.dark-mode #content-right ul.tabs li a { color: #9ca3af; }
html.dark-mode #content-right ul.tabs li a:hover { background: #1e3a5f; color: #60a5fa; }
html.dark-mode #content-right ul.tabs li.active,
html.dark-mode #content-right ul.tabs li.active a:hover {
    background: #1f2937;
    border-bottom-color: #1f2937;
}
html.dark-mode #content-right ul.tabs li.active a { color: #60a5fa; }
html.dark-mode #content-right .tab_container {
    background: #1f2937;
    border-color: #374151;
}

/* Form cards (Create Order, Comp Search) */
html.dark-mode .order-card,
html.dark-mode .comp-search-card {
    background: #1f2937;
    border-color: #374151;
}

/* Status badges */
html.dark-mode .status-open      { background: #1e3a5f; color: #93c5fd; border-color: #2563eb; }
html.dark-mode .status-completed { background: #14532d; color: #86efac; border-color: #16a34a; }
/* .uad36-badge needs no dark-mode override - the gradient pill style reads
   correctly on both themes (same treatment as .uad36-pill in the header). */
html.dark-mode .status-cancelled { background: #4c0519; color: #fda4af; border-color: #dc2626; }
html.dark-mode .status-declined  { background: #450a0a; color: #fca5a5; border-color: #b91c1c; }
html.dark-mode .status-pending   { background: #2e1065; color: #d8b4fe; border-color: #7c3aed; }
html.dark-mode .status-default   { background: #374151; color: #d1d5db; border-color: #6b7280; }
html.dark-mode .status-scheduled { background: #422006; color: #fde68a; border-color: #d97706; }
html.dark-mode .status-contact   { background: #431407; color: #fdba74; border-color: #ea580c; }
html.dark-mode .status-hold      { background: #451a03; color: #fcd34d; border-color: #f59e0b; }
html.dark-mode .status-deleted   { background: #111827; color: #6b7280; border-color: #374151; }

/* Alert messages */
html.dark-mode .errormessage  { background: #450a0a; border-color: #b91c1c; color: #fca5a5; }
html.dark-mode .successmessage { background: #14532d; border-color: #15803d; color: #86efac; }

/* jQuery UI dialog */
html.dark-mode .ui-dialog { background: #1f2937; border-color: #374151; }
html.dark-mode .ui-dialog-titlebar {
    background: #111827;
    border-color: #374151;
    color: #f3f4f6;
}
html.dark-mode .ui-dialog-content { background: #1f2937; color: #f3f4f6; }
html.dark-mode .ui-widget-content { background: #1f2937; color: #f3f4f6; border-color: #374151; }
html.dark-mode .ui-widget-header  { background: #111827; color: #f3f4f6; border-color: #374151; }
html.dark-mode .ui-state-default,
html.dark-mode .ui-button { background: #374151; color: #f3f4f6; border-color: #4b5563; }
html.dark-mode .ui-state-hover,
html.dark-mode .ui-button:hover { background: #4b5563; color: #fff; }
html.dark-mode .ui-dialog-titlebar-close { background: #374151; border-color: #4b5563; color: #d1d5db; }
html.dark-mode .ui-dialog a,
html.dark-mode .ui-widget-content a,
html.dark-mode .ui-dialog table td a,
html.dark-mode .ui-dialog-content table a { color: #60a5fa !important; }
html.dark-mode .ui-dialog a:hover,
html.dark-mode .ui-widget-content a:hover,
html.dark-mode .ui-dialog table td a:hover,
html.dark-mode .ui-dialog-content table a:hover { color: #93bbfd !important; }
html.dark-mode .ui-dialog table th,
html.dark-mode .ui-dialog-content table th {
    background: #1a2537 !important;
    color: #9ca3af !important;
    border-color: #374151 !important;
}
html.dark-mode .ui-dialog table td {
    background: #1f2937;
    color: #f3f4f6;
    border-color: #2a3347;
}
html.dark-mode .ui-dialog table tbody tr:nth-child(even) td { background: #1a2537; }
html.dark-mode .ui-dialog table tbody tr:hover td { background: #263347; }

/* Submenus & buttons stay readable */
html.dark-mode #subMenu ul#vnav li a,
html.dark-mode .subMenuButton { background: #1d5494; }

/* Google lookup section */
html.dark-mode #google-lookup-section {
    background: #1a2537;
    border-color: #374151;
    color: #d1d5db;
}

/* -- Dark mode scrollbars (Webkit/Blink) ---------------------- */
html.dark-mode ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark-mode ::-webkit-scrollbar-track { background: #1f2937; }
html.dark-mode ::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 5px; border: 2px solid #1f2937; }
html.dark-mode ::-webkit-scrollbar-thumb:hover { background: #6b7280; }
html.dark-mode ::-webkit-scrollbar-corner { background: #1f2937; }

/* -- Dark mode flatpickr calendar ----------------------------- */
html.dark-mode .flatpickr-calendar {
    background: #1f2937 !important;
    border-color: #374151 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.4) !important;
}
html.dark-mode .flatpickr-months,
html.dark-mode .flatpickr-month { background: #111827 !important; color: #f3f4f6 !important; }
html.dark-mode .flatpickr-months .flatpickr-prev-month,
html.dark-mode .flatpickr-months .flatpickr-next-month { color: #9ca3af !important; fill: #9ca3af !important; }
html.dark-mode .flatpickr-months .flatpickr-prev-month:hover,
html.dark-mode .flatpickr-months .flatpickr-next-month:hover { color: #f3f4f6 !important; fill: #f3f4f6 !important; }
html.dark-mode .flatpickr-months .flatpickr-prev-month svg,
html.dark-mode .flatpickr-months .flatpickr-next-month svg { fill: inherit !important; }
html.dark-mode .flatpickr-current-month .flatpickr-monthDropdown-months { background: #111827 !important; color: #f3f4f6 !important; }
html.dark-mode .flatpickr-current-month input.cur-year { color: #f3f4f6 !important; }
html.dark-mode .flatpickr-weekdays { background: #111827 !important; }
html.dark-mode span.flatpickr-weekday { color: #6b7280 !important; background: #111827 !important; }
html.dark-mode .flatpickr-day {
    color: #d1d5db !important;
    border-color: transparent !important;
}
html.dark-mode .flatpickr-day:hover {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #fff !important;
}
html.dark-mode .flatpickr-day.selected,
html.dark-mode .flatpickr-day.selected:hover {
    background: #3b82f6 !important;
    border-color: #2563eb !important;
    color: #fff !important;
}
html.dark-mode .flatpickr-day.today {
    border-color: #60a5fa !important;
}
html.dark-mode .flatpickr-day.prevMonthDay,
html.dark-mode .flatpickr-day.nextMonthDay { color: #4b5563 !important; }
html.dark-mode .flatpickr-day.flatpickr-disabled { color: #374151 !important; }
html.dark-mode .flatpickr-weekend { background-color: #1a2537 !important; }

/* ================================================================
   MOBILE RESPONSIVE - max-width: 768px
   ================================================================ */
@media (max-width: 768px) {

    /* -- Header: stack logo + user info ----------------------- */
    #header {
        flex-wrap: wrap;
        padding: 6px 10px;
        gap: 4px;
    }
    #header-logo img { height: 45px; max-width: 180px; }
    .user-info-block { font-size: 11px; }
    .header-sep { margin: 0 3px !important; }
    #dark-mode-btn { font-size: 16px !important; padding: 2px !important; }

    /* -- Nav: hamburger toggle -------------------------------- */
    #hnav {
        flex-wrap: wrap;
        height: auto;
        padding: 0;
        position: relative;
    }
    #hnav ul {
        display: none;
        flex-direction: column;
        width: 100%;
        height: auto;
    }
    #hnav ul.mobile-open { display: flex; }
    #hnav ul li a {
        padding: 10px 16px;
        border-bottom: 1px solid rgba(255,255,255,.1);
        font-size: 13px;
    }
    #hnav-toggle {
        display: flex !important;
        align-items: center;
        padding: 8px 12px;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        background: none;
        border: none;
    }

    /* -- Search bar: full width below nav --------------------- */
    #search { width: 100%; padding: 6px 10px; }
    #search input[type="text"] { width: 100%; }

    /* -- Sidebar: collapse, show as horizontal strip ---------  */
    #content-wrapper { flex-direction: column; }
    #content-left {
        width: 100%;
        min-height: auto;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 6px 0;
        overflow-x: auto;
    }
    #content-left ul#vnav {
        display: flex;
        flex-wrap: nowrap;
        gap: 2px;
        padding: 0 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #content-left ul#vnav li { flex-shrink: 0; margin-bottom: 0; }
    #content-left ul#vnav li a {
        white-space: nowrap;
        padding: 5px 10px;
        font-size: 11px;
    }

    /* -- Main content ---------------------------------------- */
    #content-right { padding: 10px; }
    #content-right h1 { font-size: 14px; padding: 8px 12px; }

    /* -- Tabs: scrollable ------------------------------------ */
    ul.tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0;
    }
    ul.tabs li { flex-shrink: 0; }
    ul.tabs li a { font-size: 11px; padding: 6px 8px; white-space: nowrap; }

    /* -- Tables: horizontal scroll --------------------------- */
    .tab_content { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #content-right table { min-width: 600px; }

    /* -- Forms: stack labels ---------------------------------- */
    .label, .rocontent { float: none; width: 100%; }
    .label { margin-bottom: 2px; }
    .rocontent { margin-bottom: 10px; }
    input.text-box, select, textarea { width: 100% !important; max-width: 100%; }

    /* -- Footer ---------------------------------------------- */
    #footer { font-size: 11px; padding: 10px; text-align: center; }

    /* -- Calendar: full width -------------------------------- */
    #calendar-filter-bar { flex-direction: column; align-items: flex-start; }
    #calendar-legend { flex-wrap: wrap; font-size: 11px; }
    .fc-toolbar { flex-wrap: wrap; }
    .fc-toolbar .fc-left,
    .fc-toolbar .fc-center,
    .fc-toolbar .fc-right { display: block; text-align: center; margin-bottom: 6px; }

    /* -- Drop zones: smaller padding ------------------------ */
    #file-drop-zone, #xml-drop-zone { padding: 14px 10px; }
    #file-drop-icon, #xml-drop-icon { font-size: 22px; }
    #file-drop-text, #xml-drop-text { font-size: 12px; }

    /* -- Online users widget -------------------------------- */
    #onlineUsersDropdown { right: -20px; min-width: 160px; }
}

/* Hide hamburger on desktop */
#hnav-toggle { display: none; }