/* TechSarwar CRM -- a small, utilitarian styling layer. No build step, no framework. */

:root {
    --navy: #1f3864;
    --navy-dark: #16294a;
    --teal: #0f8b8d;
    --teal-light: #dceeee;
    /* ink/muted/line/paper and the accent pair below are now the same
       neutral/blue tones as the F&O tokens further down this file (--fo-*),
       so list pages, their embedded sub-cards, and the not-yet-converted
       plain forms all read as one consistent palette alongside the FastTab
       pages. --navy/--teal are kept as-is for the brand chrome (top bar,
       login, dashboard) which this pass doesn't touch. */
    --ink: #323130;
    --muted: #605e5c;
    --line: #e0e0e0;
    --paper: #f3f2f1;
    --card: #ffffff;
    --good-bg: #e3f6e6;
    --good-fg: #1c7a34;
    --warn-bg: #fdf1d6;
    --warn-fg: #8a5b00;
    --bad-bg: #fbe2e2;
    --bad-fg: #a3282a;
    --neutral-bg: #eef1f5;
    --neutral-fg: #46505c;
    --accent-bg: #eff6fc;
    --accent-fg: #004e8c;
    --radius: 8px;
    --shadow: 0 1px 2px rgba(20, 30, 50, 0.06), 0 1px 1px rgba(20, 30, 50, 0.04);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--fo-font);
    font-size: 13px;
    line-height: 1.4;
}

a { color: var(--fo-accent); text-decoration: none; }
a:hover { color: var(--fo-accent-hover); text-decoration: underline; }

/* ---------- Top bar ---------- */
.topbar {
    background: var(--navy);
    color: #fff;
}
.topbar-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 28px;
    height: 58px;
}
/* Matches .page-wide below, so the top bar's edges stay aligned with the
   wide record-list pages' content on very wide windows. */
.topbar-inner.topbar-inner-wide { max-width: none; width: 98vw; }
.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 17px;
    color: #fff;
    white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand-mark {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--teal);
    display: inline-block;
    flex: none;
}
.brand-thin { font-weight: 400; opacity: 0.75; margin-left: 2px; }
.brand-logo {
    height: 26px;
    width: auto;
    max-width: 140px;
    display: block;
    flex: none;
    object-fit: contain;
}

.nav {
    display: flex;
    gap: 4px;
    flex: 1;
    overflow-x: auto;
}
.nav a {
    color: rgba(255,255,255,0.78);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
}
.nav a:hover { color: #fff; text-decoration: none; background: rgba(255,255,255,0.08); }
.nav a.active { color: #fff; background: rgba(255,255,255,0.14); font-weight: 600; }

/* Hamburger toggle -- hidden by default (the nav just shows inline as it
   always has); the @media (max-width: 640px) block below is what actually
   turns this into a working menu button on a phone-width screen. Kept in
   the DOM at every width so the same markup/script works everywhere. */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    flex: none;
}
.nav-toggle:hover { background: rgba(255,255,255,0.08); }
.nav-toggle-bar {
    display: block;
    width: 20px;
    height: 2px;
    margin: 0 auto;
    background: #fff;
    border-radius: 2px;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    font-size: 14px;
}
.topbar-user a { color: rgba(255,255,255,0.8); }
.topbar-user a:hover { color: #fff; text-decoration: none; }
.username { font-weight: 600; }
.topbar-user a.active-link { color: #fff; text-decoration: underline; }
.logout-link { opacity: 0.85; }
.logout-link:hover { opacity: 1; }

/* ---------- Page shell ---------- */
.page {
    max-width: 1600px;
    margin: 0 auto;
    padding: 28px 20px 60px;
}
/* Pages built around a wide data table (Contacts, Leads, Opportunities,
   Activities, Tasks) get room to grow all the way to the viewport instead
   of being capped at the standard page width, so their tables can render
   every column without a horizontal scrollbar on typical screens. */
.page-wide { max-width: none; width: 98vw; }
.page-head { margin-bottom: 20px; }
.page-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-head h1 { margin: 0 0 4px; font-size: 20px; color: var(--fo-text); }
.page-sub { margin: 0; color: var(--muted); font-size: 14px; max-width: 62ch; }

/* ---------- Flash messages ---------- */
.flash {
    padding: 10px 14px;
    border-radius: var(--radius);
    margin-bottom: 18px;
    font-size: 14px;
    border: 1px solid transparent;
}
.flash-success { background: var(--good-bg); color: var(--good-fg); border-color: #bfe6c6; }
.flash-error { background: var(--bad-bg); color: var(--bad-fg); border-color: #f0bcbc; }
.flash-info { background: var(--accent-bg); color: var(--accent-fg); border-color: #c7e0f4; }

/* ---------- Cards ---------- */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 2px;
    box-shadow: none;
    padding: 20px;
}
.card-title { margin: 0 0 14px; font-size: 15px; color: var(--fo-text); }
.card + .card { margin-top: 20px; }

/* ---------- Stat tiles ---------- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
.stat-tile {
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--teal);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow);
}
.stat-label {
    font-size: 12px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}
.stat-value { font-size: 26px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.stat-good { color: var(--good-fg); }
.stat-warn { color: var(--warn-fg); }
.stat-bad { color: var(--bad-fg); }

/* ---------- Dashboard columns ---------- */
.dash-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    align-items: start;
}

.funnel-card { margin-bottom: 16px; }
.funnel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 4px 0 8px;
}
.funnel-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.funnel-track {
    width: 100%;
    max-width: 520px;
    display: flex;
    justify-content: center;
}
.funnel-bar {
    height: 34px;
    border-radius: 3px;
    clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
    transition: width 0.2s ease;
}
.funnel-caption { display: flex; align-items: baseline; gap: 8px; }
.funnel-stage-name { font-size: 13px; font-weight: 600; color: var(--navy); }
.funnel-stage-meta { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.funnel-lost-note {
    margin: 12px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
@media (max-width: 560px) {
    .funnel-caption { flex-direction: column; align-items: center; gap: 0; text-align: center; }
}

.stage-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.stage-table th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--muted);
    padding: 6px 8px;
    border-bottom: 1px solid var(--line);
}
.stage-table td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.stage-bar-cell { position: relative; min-width: 140px; }
.stage-bar {
    display: block;
    height: 18px;
    background: var(--teal);
    border-radius: 3px;
    opacity: 0.85;
}
.stage-bar-label {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mini-list li {
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--paper);
    border-left: 3px solid var(--line);
}
.mini-item-bad { border-left-color: var(--bad-fg); background: var(--bad-bg); }
.mini-item-warn { border-left-color: var(--warn-fg); background: var(--warn-bg); }
.mini-title { display: block; font-size: 14px; font-weight: 600; }
.mini-meta { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.mini-heading {
    margin: 14px 0 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
}
.mini-heading:first-child { margin-top: 0; }

.empty-note { color: var(--muted); font-size: 14px; }

/* ---------- Attachments ---------- */
.attachment-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.attachment-list li {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 9px 10px;
    border-radius: 6px;
    border-bottom: 1px solid var(--line);
}
.attachment-list li:last-child { border-bottom: none; }
.attachment-name { font-weight: 600; }
.attachment-meta { font-size: 12.5px; color: var(--muted); flex: 1; }
.attachment-delete { margin-left: auto; }
.attachment-upload-form {
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.attachment-upload-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.attachment-upload-row input[type=file] {
    flex: 1 1 220px;
    padding: 6px 0;
    border: none;
    width: auto;
}
.attachment-upload-row select { width: auto; flex: 0 1 220px; }
.attachment-upload-row .btn { flex: none; }

/* ---------- Opportunity Products ---------- */
.products-total-row td {
    font-weight: 700;
    color: var(--navy);
    border-bottom: none;
    border-top: 1px solid var(--line);
}
.product-add-form {
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.product-add-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.product-add-row select { flex: 1 1 240px; }
.product-add-row input[type=number] { width: auto; flex: 0 1 120px; }
.product-add-row .btn { flex: none; }

/* ---------- "Add Lines" blank grid (Timesheet lines) ---------- */
.lines-grid { table-layout: fixed; }
.lines-grid th:nth-child(1), .lines-grid td:nth-child(1) { width: 130px; }
.lines-grid th:nth-child(6), .lines-grid td:nth-child(6) { width: 90px; }
.lines-grid th:last-child, .lines-grid td:last-child { width: 64px; }
.lines-grid td {
    padding: 5px 6px;
    vertical-align: top;
}
.lines-grid input, .lines-grid select {
    width: 100%;
    box-sizing: border-box;
    font-size: 13px;
    padding: 5px 6px;
    border: 1px solid var(--line);
    border-radius: 2px;
    font-family: var(--fo-font);
}
.lines-grid-row.has-error td input, .lines-grid-row.has-error td select {
    border-color: var(--fo-required);
}
.lines-grid-error-row td { font-size: 12px; }

/* ---------- Checkbox lists (Segments on a Marketing Executive, Marketing Executives on a User) ---------- */
.checkbox-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
}
.checkbox-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    cursor: pointer;
}
.checkbox-item input { margin: 0; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 2px;
    font-family: var(--fo-font);
    font-size: 13px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--fo-accent); color: #fff; }
.btn-primary:hover { background: var(--fo-accent-hover); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--paper); }
.btn-danger { background: var(--fo-required); color: #fff; }
.btn-danger:hover { background: #a4262c; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn-block { width: 100%; justify-content: center; }

.link-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--fo-accent);
    cursor: pointer;
}
.link-btn:hover { color: var(--fo-accent-hover); text-decoration: underline; }
.link-btn-danger { color: var(--fo-required); }

/* ---------- Tables ---------- */
/* Every list page's table card is a fixed, centered width -- a consistent
   frame regardless of how many columns a given page happens to show.
   max-width: 100% keeps it from overflowing a narrower window (the
   @media (max-width: 640px) block below drops it to full-width on a
   phone), and the table itself fills that frame edge to edge. */
.table-card {
    padding: 0;
    overflow: hidden;
    width: 1300px;
    max-width: 100%;
    margin: 0 auto;
}
.table-card table { width: 100%; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead tr { background: var(--fo-bg-muted); }
th {
    position: relative;
    text-align: left;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    white-space: nowrap;
    border-bottom: 1px solid var(--line);
}

/* Click-to-sort column headers -- see sort_header() in includes/functions.php. */
.sort-link {
    color: inherit;
    text-decoration: none;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}
.sort-link:hover { color: var(--fo-accent); text-decoration: underline; }
.sort-arrow { font-size: 8px; color: var(--fo-accent); vertical-align: 1px; }

/* Drag-to-resize column handles -- added to each <th> by the script in
   includes/footer.php once the table's natural column widths are known.
   Dragging one sets that column's width explicitly (table-layout: fixed
   redistributes the rest), so records can be scanned without any column
   feeling too cramped or too wide. */
.col-resize-handle {
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 2;
    touch-action: none;
}
.col-resize-handle:hover,
.col-resizing .col-resize-handle {
    background: rgba(15, 42, 77, 0.15);
}
body.col-resizing { cursor: col-resize; user-select: none; }
.col-resize-reset {
    display: block;
    margin: 0 0 8px auto;
    padding: 14px 14px 0;
    font-size: 12px;
}

/* Column chooser -- lets a User show/hide optional columns on any list
   page's table (Contacts/Leads/Opportunities/Activities/Tasks), added by
   the script in includes/footer.php right alongside column resizing. The
   button always shows (unlike "Reset column widths" above, which only
   appears once something's actually been customized); the panel itself is
   appended to <body> and positioned with JS rather than living inside the
   table card, so it's never clipped by .table-card's own overflow:hidden. */
.col-chooser {
    display: flex;
    justify-content: flex-end;
    padding: 14px 14px 0;
}
.col-chooser-btn {
    font-size: 12px;
    padding: 5px 12px;
}
.col-chooser-panel[hidden] {
    display: none; /* higher specificity than .col-chooser-panel alone -- an author rule of equal
                       specificity to the browser's own [hidden]{display:none} would otherwise win by
                       source order and defeat toggling panel.hidden from JS (same issue as
                       .select-all-banner[hidden] below). */
}
.col-chooser-panel {
    position: fixed;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(20, 30, 50, 0.18);
    min-width: 180px;
    max-width: min(260px, calc(100vw - 32px));
    max-height: min(320px, calc(100vh - 32px));
    overflow-y: auto;
}
.col-chooser-panel-title {
    margin: 0 0 2px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
}
td {
    padding: 7px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
tbody tr:hover { background: var(--fo-bg-muted); }
.cell-sub { font-size: 12px; color: var(--muted); }
.cell-wrap { max-width: 320px; white-space: normal; }
.row-actions { white-space: nowrap; display: flex; gap: 10px; }
.inline-form { display: inline; margin: 0; }
.row-muted { opacity: 0.7; }
.row-done td { opacity: 0.55; }
.text-strike { text-decoration: line-through; }
.row-bad td:first-child { border-left: 3px solid var(--bad-fg); }
.row-bad { background: var(--bad-bg); }
.row-warn { background: var(--warn-bg); }

.select-cell { width: 30px; }
.select-cell input[type="checkbox"],
.row-checkbox { width: 16px; height: 16px; cursor: pointer; }

.task-check-cell { width: 34px; }
.check-btn {
    width: 22px; height: 22px;
    border-radius: 2px;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--good-fg);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.check-btn:hover { border-color: var(--fo-accent); }

/* ---------- Badges ---------- */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: var(--neutral-bg);
    color: var(--neutral-fg);
    border: none;
}
.badge-good { background: var(--good-bg); color: var(--good-fg); }
.badge-bad { background: var(--bad-bg); color: var(--bad-fg); }
.badge-warn { background: var(--warn-bg); color: var(--warn-fg); }
.badge-accent { background: var(--accent-bg); color: var(--accent-fg); }
.badge-muted { background: var(--neutral-bg); color: var(--muted); }
.badge-neutral { background: var(--neutral-bg); color: var(--neutral-fg); }

select.stage-select {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    cursor: pointer;
    font: inherit;
    padding-right: 22px;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 9px top 55%, right 4px top 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.stage-select-form { display: inline-block; }

/* ---------- Import ---------- */
.type-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.type-tabs a {
    padding: 7px 14px;
    border-radius: 2px;
    background: var(--neutral-bg);
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
}
.type-tabs a:hover { background: var(--accent-bg); text-decoration: none; }
.type-tabs a.active { background: var(--fo-accent); color: #fff; }
code {
    background: var(--neutral-bg);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12.5px;
}

/* ---------- Filters ---------- */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.filter-bar select {
    width: auto;
    min-width: 150px;
    font-size: 13px;
    padding: 7px 10px;
}
.filter-clear {
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
}
.filter-bar input[type=search] {
    width: auto;
    min-width: 200px;
    font-size: 13px;
    padding: 7px 10px;
}

/* ---------- F&O-style "Add filter" builder ----------
   Replaces a long always-visible row of filter dropdowns (Contacts, Leads,
   Opportunities, Tasks, Activities) with add-as-needed filter chips. See the
   .fo-filter-bar script in includes/footer.php for the behavior; this is
   just the chip/pool/button look. */
.fo-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.fo-filter-search {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fo-filter-search input[type=search] {
    width: auto;
    min-width: 220px;
    font-size: 13px;
    padding: 6px 10px;
}
.fo-filter-rows {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* A single filter chip: [Filter type select | value control | remove]. The
   two selects sit flush against each other with one shared border so the
   pair reads as one control split into "field" and "value" halves. */
.fo-filter-row {
    display: flex;
    align-items: stretch;
    height: 30px;
    border: 1px solid var(--fo-input-border-light);
    border-radius: 2px;
    background: #fff;
    overflow: hidden;
}
.fo-filter-type-select {
    font-family: var(--fo-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--fo-label);
    background: var(--fo-bg-muted);
    border: none;
    border-right: 1px solid var(--fo-input-border-light);
    padding: 0 8px;
    height: 100%;
    max-width: 160px;
}
.fo-filter-value-slot {
    display: flex;
    align-items: stretch;
    min-width: 0;
}
.fo-filter-value-slot .fo-filter-template { display: flex; }
.fo-filter-value-slot select,
.fo-filter-value-slot input {
    font-family: var(--fo-font);
    font-size: 13px;
    border: none;
    padding: 0 8px;
    height: 100%;
    background: #fff;
    color: var(--fo-text);
    min-width: 110px;
}
.fo-filter-value-slot .checkbox-item {
    padding: 0 10px;
    font-size: 13px;
    white-space: nowrap;
}
.fo-filter-row select:focus,
.fo-filter-row input:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--fo-accent);
}
.fo-filter-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    flex: none;
    border: none;
    border-left: 1px solid var(--fo-input-border-light);
    background: var(--fo-bg-muted);
    color: var(--fo-label);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
.fo-filter-remove:hover { background: var(--bad-bg); color: var(--fo-required); }

.fo-add-filter-btn { font-size: 13px; padding: 6px 12px; }
.fo-filter-templates,
.fo-filter-templates[hidden] { display: none; }

/* ---------- Pagination ---------- */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--muted);
}
.pagination-links {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pagination-disabled {
    color: var(--line);
}
.pagination-page {
    white-space: nowrap;
}
/* A second copy of pagination_links() at the top of a list's table card
   (Contacts) -- flip the divider to the bottom instead of the top so it
   doesn't double up against the card's own border right above it. */
.pagination-top .pagination {
    border-top: none;
    border-bottom: 1px solid var(--line);
}

/* "All 50 on this page are selected -- select all N that match your
   filters" banner above a list table (Contacts' Export Selected). Hidden
   by default; shown by the bulk-export-form script in footer.php. */
.select-all-banner[hidden] {
    display: none; /* higher specificity than .select-all-banner alone -- an author rule of equal
                       specificity to the browser's own [hidden]{display:none} would otherwise win by
                       source order and defeat toggling banner.hidden from JS */
}
.select-all-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--accent-bg);
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    color: var(--fo-text);
}

/* ---------- Record numbers ---------- */
.record-number {
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}
/* Record number now doubles as the link to that record's edit page. */
.record-number-link { text-decoration: none; }
.record-number-link:hover .record-number { color: var(--fo-accent); text-decoration: underline; }

/* ---------- Forms ---------- */
.form-card { max-width: 680px; }
.stacked-form { display: flex; flex-direction: column; gap: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row { display: flex; flex-direction: column; gap: 6px; }
label { font-size: 13px; font-weight: 600; color: var(--ink); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea {
    font: inherit;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    width: 100%;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--fo-accent);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.15);
}
textarea { resize: vertical; }
.form-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.form-actions .btn-danger { margin-left: auto; }

/* A grouped sub-section within a form, e.g. Task Action Details. */
.form-fieldset {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
    margin: 0;
}
.form-fieldset legend {
    padding: 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
}
.form-fieldset .cell-sub { margin: -8px 0 0; }

/* ---------- Login page ---------- */
.login-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper);
}
.login-card {
    background: #fff;
    border-radius: 12px;
    padding: 36px 32px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
/* Centered above the username/password fields -- a styled wordmark (no
   logo image file exists in assets/, so this is the "logo" by default; if
   assets/logo.* is ever added, logo_path() picks it up automatically and
   this same centered layout just displays that image instead). */
.login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 22px;
    color: var(--navy);
    margin-bottom: 26px;
    text-align: center;
}
.login-brand .brand-mark {
    width: 14px;
    height: 14px;
}
.login-brand .brand-logo {
    height: 56px;
    max-width: 240px;
}
.login-form { display: flex; flex-direction: column; gap: 6px; }
.login-form label { margin-top: 10px; }

@media (max-width: 900px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .dash-columns { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .topbar-inner { gap: 14px; }
}

/* ---------- Task Calendar (task_calendar.php) ---------- */
.calendar-card { padding: 16px; }
.calendar-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.calendar-nav-btn { padding: 6px 12px; font-size: 14px; line-height: 1; }
.calendar-today-btn { margin-left: auto; }
.calendar-title { margin: 0; font-size: 17px; color: var(--navy); min-width: 160px; text-align: center; }
.calendar-scroll { overflow-x: auto; }
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(120px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    min-width: 760px;
}
.calendar-dow {
    background: var(--neutral-bg);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 8px 10px;
    text-align: center;
}
.calendar-day {
    background: var(--card);
    min-height: 104px;
    padding: 6px 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.calendar-day-outside { background: var(--paper); }
.calendar-day-outside .calendar-day-num { color: var(--muted); }
.calendar-day-today { box-shadow: inset 0 0 0 2px var(--teal); }
.calendar-day-num { font-size: 12.5px; font-weight: 600; color: var(--ink); padding: 0 2px; }
.calendar-day-tasks {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-y: auto;
    max-height: 110px;
}
.calendar-task {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 6px;
    border-radius: 5px;
    background: var(--neutral-bg);
    color: var(--ink);
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.calendar-task:hover { background: var(--accent-bg); text-decoration: none; }
.calendar-task-done { opacity: 0.55; text-decoration: line-through; }
.calendar-task-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.calendar-task-dot-bad { background: var(--bad-fg); }
.calendar-task-dot-warn { background: var(--warn-fg); }
.calendar-task-dot-muted { background: var(--muted); }
.calendar-task-dot-neutral { background: var(--neutral-fg); }
.calendar-task-dot-accent { background: var(--accent-fg); }
.calendar-task-dot-good { background: var(--good-fg); }
.calendar-task-label { overflow: hidden; text-overflow: ellipsis; }

/* True phone breakpoint -- the 900px query above is tuned for tablet/narrow-
   desktop reflow, this one is for an actual phone. The nav and account
   links move behind the hamburger toggle instead of horizontally scrolling
   (900px's .username{display:none} was a half-measure for the same problem
   and is superseded by this, not layered with it), and anything that used
   to force a row to overflow (filter controls, admin tabs, page actions)
   stacks full-width instead. */
@media (max-width: 640px) {
    .nav-toggle { display: flex; }
    .nav {
        display: none;
        position: absolute;
        top: 58px;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 2px;
        background: var(--navy-dark);
        padding: 10px 14px 14px;
        box-shadow: var(--shadow);
        overflow-x: visible;
        z-index: 20;
    }
    .nav.nav-open { display: flex; }
    .nav a { padding: 10px 12px; }
    .topbar-inner { position: relative; gap: 10px; }
    .topbar-user { gap: 8px; }
    .username { display: inline; }

    .filter-bar { flex-direction: column; align-items: stretch; }
    .filter-bar select,
    .filter-bar input[type=search] {
        width: 100%;
        min-width: 0;
    }
    .filter-clear { text-align: center; }

    /* No room to "shrink and center" on a phone -- every table needs its
       own horizontal scroll here regardless, so go back to filling the
       screen edge-to-edge instead of forcing a 480px-wide card to overflow
       a ~375px viewport. */
    .table-card { width: 100%; min-width: 0; max-width: 100%; }

    .fo-filter-bar { flex-direction: column; align-items: stretch; }
    .fo-filter-search { flex-direction: column; align-items: stretch; }
    .fo-filter-search input[type=search] { width: 100%; min-width: 0; }
    .fo-filter-rows { flex-direction: column; align-items: stretch; }
    .fo-filter-row { height: auto; }
    .fo-filter-type-select { max-width: none; flex: 1 1 auto; }
    .fo-filter-value-slot { flex: 1 1 auto; }
    .fo-filter-value-slot select,
    .fo-filter-value-slot input { width: 100%; min-width: 0; }

    .page-head-actions { flex-direction: column; align-items: stretch; width: 100%; }
    .page-head-actions .btn { width: 100%; justify-content: center; }

    .type-tabs { flex-wrap: wrap; }
    .type-tabs a { flex: 1 1 auto; text-align: center; }

    .calendar-toolbar { flex-wrap: wrap; justify-content: center; }
    .calendar-today-btn { margin-left: 0; order: 4; width: 100%; }
    .calendar-title { order: 2; width: 100%; }
}

/* =====================================================================
   F&O-style record forms -- Dynamics 365 Finance & Operations Unified
   Interface look (FastTabs: flat collapsible sections, dense multi-column
   field grid, compact controls). Scoped entirely under .fo-form-card so
   none of this leaks into the rest of the site (list filter bars, the
   simpler forms that still use .form-card/.form-row/.form-grid above).
   Currently used by: contact_form.php, lead_form.php, opportunity_form.php,
   campaign_form.php, task_form.php.
   ===================================================================== */
:root {
    --fo-font: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --fo-bg: #ffffff;
    --fo-bg-muted: #f3f2f1;
    --fo-border: #e0e0e0;
    --fo-input-border: #a19f9d;
    --fo-input-border-light: #bcbab9;
    --fo-text: #323130;
    --fo-label: #605e5c;
    --fo-accent: #0078d4;
    --fo-accent-hover: #106ebe;
    --fo-required: #d13438;
}

.fo-form-card {
    background: var(--fo-bg);
    border: 1px solid var(--fo-border);
    border-radius: 2px;
    box-shadow: var(--shadow);
    max-width: 1180px;
    font-family: var(--fo-font);
    color: var(--fo-text);
    font-size: 13px;
    overflow: hidden;
}
.fo-form-card .flash { margin: 16px 16px 0; }

/* ---------- FastTabs ---------- */
.fasttab { border-bottom: 1px solid var(--fo-border); }
.fasttab:last-of-type { border-bottom: none; }

.fasttab-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--fo-bg-muted);
    border: none;
    border-top: 1px solid var(--fo-border);
    border-bottom: 1px solid var(--fo-border);
    margin-top: -1px;
    padding: 9px 16px;
    cursor: pointer;
    font-family: var(--fo-font);
    text-align: left;
    color: var(--fo-text);
}
.fasttab:first-child .fasttab-header { border-top: none; margin-top: 0; }
.fasttab-header:hover { background: #ebebeb; }
.fasttab-header:focus-visible { outline: 2px solid var(--fo-accent); outline-offset: -2px; }

.fasttab-chevron {
    display: inline-block;
    width: 10px;
    flex: 0 0 auto;
    font-size: 10px;
    color: var(--fo-label);
    transition: transform 0.1s ease-in-out;
    transform: rotate(0deg);
}
.fasttab.is-open .fasttab-chevron { transform: rotate(90deg); }

.fasttab-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--fo-text);
}
.fasttab-summary {
    margin-left: auto;
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--fo-label);
}

.fasttab-body {
    padding: 16px;
    display: none;
    flex-direction: column;
    gap: 18px;
}
.fasttab.is-open .fasttab-body { display: flex; }

/* ---------- Field groups within a FastTab ---------- */
.fo-group-title {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fo-label);
}
.fo-group + .fo-group { padding-top: 14px; border-top: 1px solid var(--fo-border); }

.fo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px 16px;
}
.fo-grid.fo-grid-wide { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }

.fo-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fo-field.fo-span-2 { grid-column: span 2; }
.fo-field.fo-span-full { grid-column: 1 / -1; }

.fo-field label {
    font-family: var(--fo-font);
    font-size: 11px;
    font-weight: 600;
    color: var(--fo-label);
    margin-bottom: 1px;
}
.req-mark { color: var(--fo-required); font-weight: 700; margin-left: 2px; }

.fo-field input[type=text],
.fo-field input[type=email],
.fo-field input[type=password],
.fo-field input[type=number],
.fo-field input[type=date],
.fo-field input[type=url],
.fo-field select,
.fo-field textarea {
    font-family: var(--fo-font);
    font-size: 13px;
    height: 28px;
    padding: 4px 8px;
    border: 1px solid var(--fo-input-border);
    border-radius: 1px;
    background: #fff;
    color: var(--fo-text);
    width: 100%;
}
.fo-field textarea { height: auto; min-height: 54px; padding-top: 6px; }
.fo-field select { height: 28px; }

.fo-field input:focus,
.fo-field select:focus,
.fo-field textarea:focus {
    outline: none;
    border: 2px solid var(--fo-accent);
    padding: 3px 7px;
}
.fo-field textarea:focus { padding-top: 5px; }

/* Required fields: a solid red left-border accent on the control itself,
   in addition to the red asterisk on the label. */
.fo-field.is-required input,
.fo-field.is-required select,
.fo-field.is-required textarea {
    border-left: 3px solid var(--fo-required);
    padding-left: 6px;
}
.fo-field.is-required input:focus,
.fo-field.is-required select:focus,
.fo-field.is-required textarea:focus {
    border-left: 3px solid var(--fo-required);
    padding-left: 5px;
}

/* Read-only / disabled fields: flat, no border box, muted fill. */
.fo-field input[readonly],
.fo-field input[disabled],
.fo-field select[disabled],
.fo-field textarea[readonly] {
    background: var(--fo-bg-muted);
    border-color: transparent;
    color: var(--fo-label);
}

.fo-field.fo-checkbox-field { flex-direction: column; align-items: flex-start; gap: 4px; }
.fo-checkbox-row { display: flex; align-items: center; gap: 8px; }
.fo-checkbox-row + .fo-checkbox-row { margin-top: 4px; }
.fo-field.fo-checkbox-field label { margin-bottom: 0; font-size: 13px; color: var(--fo-text); text-transform: none; letter-spacing: normal; }
.fo-field.fo-checkbox-field input[type=checkbox],
.fo-field.fo-checkbox-field input[type=radio] { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; }

.fo-help { margin: 2px 0 0; font-size: 11px; color: var(--fo-label); line-height: 1.4; }
.fo-help a { color: var(--fo-accent); }

/* A read-only value shown inline (not an editable control), e.g. the
   Task's "Linked License Group" link, or the Partner Center lead block. */
.fo-readonly-value {
    display: flex;
    align-items: center;
    min-height: 28px;
    font-size: 13px;
    color: var(--fo-text);
    background: var(--fo-bg-muted);
    padding: 0 8px;
    border: 1px solid transparent;
}

/* Sub-cards embedded inside a FastTab body (Attachments, Products, Items,
   License Group, mini-lists) -- a lighter inset box so they read as
   "included content" rather than another field group. */
.fo-subcard {
    border: 1px solid var(--fo-border);
    border-radius: 2px;
    padding: 14px 16px;
    background: #fafafa;
}
.fo-subcard .card-title { font-size: 13px; margin-bottom: 10px; }

.fo-form-actions-wrap {
    padding: 14px 16px;
    background: var(--fo-bg-muted);
    border-top: 1px solid var(--fo-border);
}

@media (max-width: 640px) {
    .fo-grid { grid-template-columns: 1fr; }
    .fo-field.fo-span-2, .fo-field.fo-span-full { grid-column: 1 / -1; }
}