/* =====================================================================
   Weldforce CRM + ERP — Design System
   Internal tool: dense, fast, legible. No decoration for its own sake.
   ===================================================================== */

:root {
    /* Forge Black / Steel Plate / Molten Amber — see design-system notes
       above each section. Variable NAMES are kept stable across the app on
       purpose (every component below already reads these), so re-theming is
       just changing the values here, not touching each component's CSS. */
    --color-sidebar: #14171B;
    --color-sidebar-hover: #262a30;
    --color-sidebar-text: #b7bec5;
    --color-sidebar-text-active: #ffffff;
    --color-bg: #EDEFF2;
    --color-surface: #ffffff;
    --color-border: #dcdfe4;
    --color-text: #3C434B;
    --color-text-muted: #6b7280;
    --color-accent: #E8871E;
    --color-accent-dark: #c96f10;
    --color-accent-contrast: #14171B;
    --color-info: #2F6FA8;
    --color-info-bg: #e9f1f8;
    --color-danger: #C1442E;
    --color-danger-bg: #fbeae6;
    --color-success: #2E7D32;
    --color-success-bg: #e8f3e9;
    --color-warning-bg: #fdf1e2;
    --color-warning-text: #8a5217;

    --font-display: 'Barlow Condensed', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

    --radius: 6px;
    --shadow-card: 0 1px 2px rgba(20, 23, 27, 0.05), 0 6px 16px -4px rgba(20, 23, 27, 0.1);
    --shadow-card-hover: 0 2px 4px rgba(20, 23, 27, 0.06), 0 10px 24px -6px rgba(20, 23, 27, 0.16);
    --sidebar-width: 230px;
    --transition-fast: 120ms ease;
}

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

html {
    /* A flat single hex reads dead on a full-height page — this gives the
       "steel plate" background real depth: a soft light wash top-left (like
       an overhead shop light) settling into a cooler plate tone toward the
       edges, fixed so it doesn't scroll with short pages. */
    background:
        radial-gradient(1100px 650px at 12% -8%, rgba(255,255,255,0.7), transparent 58%),
        linear-gradient(180deg, #EEF0F3 0%, #DFE2E7 100%);
    background-attachment: fixed;
    min-height: 100%;
}

body {
    margin: 0;
    padding: 0;
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Fixed px, not em — the same icon set shows up in a lot of different
   font-size contexts (sidebar links, stat cards, badges) and needs to stay
   visually consistent rather than scaling with whatever text sits next to
   it. Wins over the width/height="20" HTML attributes on the <svg> itself
   (those are just a fallback for the rare case this stylesheet fails to
   load — see includes/icons.php). */
.icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: -0.2em;
}

h1, h2, h3, h4, .display {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.01em;
    margin: 0 0 0.5rem;
    color: var(--color-text);
}

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

/* Reference numbers, amounts, dates, timestamps — anything that's a spec
   value rather than prose reads as more precise set in the mono face. */
.mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

button, input, select, textarea { font-family: inherit; font-size: inherit; }

/* ---------------------------------------------------------------------
   Layout shell
   --------------------------------------------------------------------- */

.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--color-sidebar);
    color: var(--color-sidebar-text);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 40;
    box-shadow: 2px 0 12px rgba(20, 23, 27, 0.18);
    transition: transform var(--transition-fast);
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sidebar__logo-chip {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border-radius: var(--radius);
    padding: 0.4rem 0.6rem;
    flex-shrink: 0;
}

.sidebar__logo-img {
    display: block;
    height: 28px;
    width: auto;
}

.sidebar__brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar__wordmark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.03em;
    color: #fff;
    line-height: 1.1;
}

.sidebar__subtitle {
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-sidebar-text);
    margin-top: 0.15rem;
}

.sidebar__nav {
    display: flex;
    flex-direction: column;
    padding: 0.9rem 0.6rem;
    gap: 0.1rem;
    flex: 1;
    overflow-y: auto;
}

.sidebar__link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius);
    color: var(--color-sidebar-text);
    font-weight: 500;
    font-size: 0.88rem;
    letter-spacing: 0.005em;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.sidebar__link-icon {
    color: #7d848d;
    transition: color var(--transition-fast);
}

.sidebar__link:hover {
    background: var(--color-sidebar-hover);
    color: var(--color-sidebar-text-active);
    text-decoration: none;
}
.sidebar__link:hover .sidebar__link-icon { color: var(--color-sidebar-text-active); }

.sidebar__link--active {
    background: linear-gradient(90deg, rgba(232, 135, 30, 0.16), rgba(232, 135, 30, 0.03) 65%);
    color: var(--color-sidebar-text-active);
    border-left-color: var(--color-accent);
    font-weight: 600;
}
.sidebar__link--active .sidebar__link-icon { color: var(--color-accent); }

.sidebar__user {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.9rem 1.1rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 0.85rem;
}

.sidebar__user-avatar {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(155deg, var(--color-accent), var(--color-accent-dark));
    color: var(--color-accent-contrast);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar__user-text { min-width: 0; }
.sidebar__user-name { color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__user-role { color: var(--color-sidebar-text); font-size: 0.78rem; margin-bottom: 0.3rem; }
.sidebar__logout { color: var(--color-accent); font-size: 0.85rem; }

.app-main {
    margin-left: var(--sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 2px 8px rgba(20, 23, 27, 0.05);
    padding: 0.9rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar__title {
    font-size: 1.5rem;
    margin: 0;
    position: relative;
    padding-bottom: 0.4rem;
}

.topbar__title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 42px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-dark));
    border-radius: 2px;
}

/* ---------------------------------------------------------------------
   Reminders bell — persistent, on every page (unlike the one-time
   dashboard popup in includes/reminders_popup.php), so due reminders,
   today's visits, and unread replies are always one click away instead of
   gone the moment the popup's "Got it" is clicked.
   --------------------------------------------------------------------- */

.reminders-bell {
    position: relative;
    margin-left: auto;
}

.reminders-bell__toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.reminders-bell__toggle:hover { background: var(--color-bg); border-color: #c8ccd2; }

.reminders-bell__badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--color-danger);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-surface);
}

.reminders-bell__panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 340px;
    max-width: calc(100vw - 2rem);
    max-height: 70vh;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card-hover);
    padding: 1rem;
    z-index: 50;
}

.reminders-bell__section-label {
    font-weight: 700;
    font-size: 0.8rem;
    margin: 0.75rem 0 0.4rem;
}
.reminders-bell__section-label:first-child { margin-top: 0; }

.reminders-bell__list {
    list-style: none;
    margin: 0 0 0.25rem;
    padding: 0;
}
.reminders-bell__list li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.85rem;
}
.reminders-bell__list li:last-child { border-bottom: none; }

@media (max-width: 560px) {
    .reminders-bell__panel { position: fixed; top: 60px; left: 1rem; right: 1rem; width: auto; }
}

.topbar__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 34px;
    height: 34px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
}

.topbar__toggle span {
    display: block;
    height: 2px;
    background: var(--color-text);
    margin: 0 6px;
}

.content {
    padding: 1.5rem;
    flex: 1;
}

/* Section headings inside content reuse the weld-seam accent line. */
.page-heading {
    position: relative;
    padding-bottom: 0.6rem;
    margin-bottom: 1.25rem;
}

.page-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-dark));
    border-radius: 2px;
}

/* Dashboard's greeting line sits directly under the topbar's own "Dashboard"
   title (with its own accent underline) — styled as a quiet subtitle rather
   than a second competing heading with a duplicate accent bar. */
.dashboard-greeting {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin: 0 0 1.5rem;
}

/* ---------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------- */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

/* Cards used as click targets (e.g. reports/index.php) get the same lift
   as a stat card, so the whole grid feels like one consistent system. */
a.card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}
a.card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
    border-color: #cdd2d8;
    text-decoration: none;
}

.card__title {
    font-size: 1.1rem;
    margin-bottom: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-grid {
    display: grid;
    align-items: stretch;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
    .card-grid--3, .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .card-grid--3, .card-grid--4 { grid-template-columns: 1fr; }
}

/* Small uppercase divider above a card-grid group — same treatment as a
   table header, so grouping reads as intentional structure, not a stray
   heading competing with the page title's own weld-seam underline. */
.section-label {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 0.6rem;
}
.section-label:not(:first-of-type) { margin-top: 0.4rem; }

.stat-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.15rem 1.25rem;
    box-shadow: var(--shadow-card);
    color: var(--color-text);
    transition: box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}

.stat-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
    border-color: #cdd2d8;
}

.stat-card__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    color: var(--color-text-muted);
}
.stat-card__icon .icon { width: 19px; height: 19px; }

.stat-card__body { min-width: 0; flex: 1; }

/* Weld-seam accent on the metrics that need attention today (overdue fees,
   fees due today, low stock) — a tinted icon badge and a whisper of warm
   background wash, not just a stray top line, so it reads as "considered"
   rather than a rule someone forgot to finish. */
.stat-card--featured {
    border-top: 3px solid var(--color-accent);
    background: linear-gradient(178deg, #ffffff 0%, #ffffff 65%, rgba(232, 135, 30, 0.05) 100%);
}
.stat-card--featured .stat-card__icon {
    background: linear-gradient(155deg, rgba(232, 135, 30, 0.22), rgba(232, 135, 30, 0.08));
    color: var(--color-accent-dark);
}

.stat-card__label {
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.stat-card__value {
    font-family: var(--font-display);
    font-size: 1.85rem;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: 0.005em;
}

.stat-card__value.mono { font-family: var(--font-mono); font-size: 1.55rem; font-weight: 500; }

/* A count riding the top-right corner (e.g. "3" installments due today)
   instead of a third stacked line — keeps every card in a row the same
   height regardless of which ones happen to have extra context to show. */
.stat-card__count {
    position: absolute;
    top: 0.7rem;
    right: 0.8rem;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn--primary {
    background: linear-gradient(178deg, #ee9433, var(--color-accent) 55%);
    color: var(--color-accent-contrast);
    box-shadow: 0 1px 2px rgba(20, 23, 27, 0.06), 0 2px 6px rgba(232, 135, 30, 0.28);
}
.btn--primary:hover {
    background: linear-gradient(178deg, #e88b28, var(--color-accent-dark) 55%);
    box-shadow: 0 1px 2px rgba(20, 23, 27, 0.08), 0 4px 10px rgba(232, 135, 30, 0.34);
}

.btn--secondary {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}
.btn--secondary:hover { background: var(--color-bg); border-color: #c8ccd2; }

.btn--danger {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border-color: #eec4bb;
}
.btn--danger:hover { background: #f6dbd3; }

.btn--sm { padding: 0.35rem 0.7rem; font-size: 0.8rem; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------------------------------------------------------------------
   Toolbar — a row that separates a filter control (left) from page
   actions (right), instead of every button living in one undifferentiated
   row. Stacks on narrow screens rather than wrapping into a button soup.
   --------------------------------------------------------------------- */

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.toolbar__group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar__group { justify-content: center; }
    .toolbar__group--filter { order: -1; }
}

/* Period switch — a real segmented control (one bordered pill, sections
   divided by hairlines) rather than a row of separate same-weight buttons,
   so "pick a time range" reads as one control, not four unrelated actions. */

.period-switch {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-surface);
}

.period-switch a {
    padding: 0.45rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    border-right: 1px solid var(--color-border);
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.period-switch a:last-child { border-right: none; }
.period-switch a:hover { background: var(--color-bg); color: var(--color-text); }

.period-switch a.is-active {
    background: var(--color-accent);
    color: var(--color-accent-contrast);
}

@media (max-width: 640px) {
    .period-switch { width: 100%; }
    .period-switch a { flex: 1; text-align: center; }
}

/* For a switch with many options (e.g. every scheduled CWB test date) rather
   than a fixed few (Week/Month/Year) — scrolls horizontally instead of
   squeezing every tab down to fit, or clipping under overflow:hidden. */
.period-switch--scroll {
    display: flex;
    overflow-x: auto;
    max-width: 100%;
}
.period-switch--scroll a {
    flex-shrink: 0;
}
@media (max-width: 640px) {
    .period-switch--scroll a { flex: none; }
}

/* Prev/Next — small round icon buttons, visually distinct from the
   segmented control they navigate rather than more of the same pill shape. */

.period-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.period-nav a {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    font-weight: 700;
    line-height: 1;
    transition: background var(--transition-fast);
}

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

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem 1.25rem;
}

.field { margin-bottom: 1rem; }

.field label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
}

.field .hint {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field input[type="number"],
.field input[type="password"],
.field select,
.field textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
}

.field textarea { resize: vertical; min-height: 80px; }

.phone-field-group {
    display: flex;
    gap: 0.5rem;
}

.phone-field-group .phone-country-select {
    flex: 0 0 auto;
    width: auto;
    max-width: 130px;
}

.phone-field-group input[type="tel"] {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 480px) {
    .phone-field-group { flex-wrap: wrap; }
    .phone-field-group .phone-country-select { max-width: 100%; flex-basis: 100%; }
}

/* Compact inline status-change dropdown on the leads list — a quick single-field
   update, not a full form field, so it's styled tighter than .field select. */
.status-select {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.85rem;
    max-width: 160px;
}

.field input.is-invalid,
.field select.is-invalid,
.field textarea.is-invalid {
    border-color: var(--color-danger);
    background: var(--color-danger-bg);
}

.field-error {
    color: var(--color-danger);
    font-size: 0.8rem;
    margin-top: 0.3rem;
}

.form-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

/* ---------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------- */

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

table.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
    font-size: 0.87rem;
}

.data-table th, .data-table td {
    text-align: left;
    padding: 0.5rem 0.65rem;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.data-table th {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    background: var(--color-bg);
}

.data-table .btn--sm { padding: 0.28rem 0.55rem; font-size: 0.76rem; }
.data-table .badge { padding: 0.15rem 0.5rem; font-size: 0.71rem; }
.data-table select.status-select { padding: 0.28rem 0.4rem; font-size: 0.8rem; max-width: 130px; }

/* Deliberately no zebra striping — reads more like a spec sheet than a
   spreadsheet; hover is the only row-level differentiation. */
.data-table tbody tr:hover { background: #fdf3e7; }

.truncate-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}

.data-table td.wrap { white-space: normal; }

/* ---------------------------------------------------------------------
   Pagination — rows-per-page selector, result summary, page links
   (ellipsis-truncated), and a jump-to-page box. See render_pagination()
   in includes/functions.php.
   --------------------------------------------------------------------- */

.pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.pagination__per-page,
.pagination__jump {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.pagination__per-page label,
.pagination__jump label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.pagination__per-page select {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.85rem;
}

.pagination__jump input[type="number"] {
    width: 4rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.85rem;
}

.pagination__summary {
    margin: 0;
    flex: 1;
    text-align: center;
    min-width: 140px;
}

.pagination__pages {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.pagination__ellipsis {
    color: var(--color-text-muted);
    padding: 0 0.15rem;
}

@media (max-width: 720px) {
    .pagination { justify-content: center; text-align: center; }
    .pagination__summary { order: -1; flex-basis: 100%; }
}

.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--color-text-muted);
}

.empty-state .btn { margin-top: 0.75rem; }

/* ---------------------------------------------------------------------
   Badges / status pills
   --------------------------------------------------------------------- */

.badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--color-bg);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    white-space: nowrap;
}

.badge--success { background: var(--color-success-bg); color: var(--color-success); border-color: #bcdcc0; }
.badge--danger  { background: var(--color-danger-bg); color: var(--color-danger); border-color: #eec4bb; }
.badge--warning { background: var(--color-warning-bg); color: var(--color-warning-text); border-color: #f0d3ac; }
.badge--accent  { background: #fdf1e2; color: var(--color-accent-dark); border-color: #f6d8ac; }
.badge--info    { background: var(--color-info-bg); color: var(--color-info); border-color: #c3d9ea; }

/* ---------------------------------------------------------------------
   Alerts / flash messages
   --------------------------------------------------------------------- */

.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: 0.9rem;
    border: 1px solid transparent;
}

.alert--success { background: var(--color-success-bg); color: var(--color-success); border-color: #bcdcc0; }
.alert--error, .alert--danger { background: var(--color-danger-bg); color: var(--color-danger); border-color: #eec4bb; }
.alert--warning { background: var(--color-warning-bg); color: var(--color-warning-text); border-color: #f0d3ac; }
.alert--info { background: var(--color-info-bg); color: var(--color-info); border-color: #c3d9ea; }

/* ---------------------------------------------------------------------
   Auth pages (login)
   --------------------------------------------------------------------- */

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-sidebar);
    padding: 1.5rem;
}

.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 2rem 1.75rem;
}

.auth-card__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.75rem;
}

.auth-card__logo {
    height: 56px;
    width: auto;
    margin-bottom: 0.9rem;
}

.auth-card__seam {
    width: 64px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-dark));
}

/* ---------------------------------------------------------------------
   Progress bars (attendance hours completed vs required)
   --------------------------------------------------------------------- */

.progress {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: var(--color-border);
    overflow: hidden;
}

.progress__bar {
    height: 100%;
    background: var(--color-accent);
    border-radius: 999px;
    transition: width var(--transition-fast);
}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */

@media (max-width: 900px) {
    .sidebar {
        transform: translateX(-100%);
    }
    .sidebar.is-open {
        transform: translateX(0);
    }
    .app-main { margin-left: 0; }
    .topbar__toggle { display: flex; }
}

@media (max-width: 560px) {
    .content { padding: 1rem; }
    .topbar { padding: 0.75rem 1rem; }
    .topbar__title { font-size: 1.25rem; }
}

/* ---------------------------------------------------------------------
   Charts (includes/charts.php) — hover-lighten on bars; a real value
   tooltip already comes from the SVG's native <title> element.
   --------------------------------------------------------------------- */
.chart-bar {
    transition: filter var(--transition-fast);
}
.chart-bar:hover,
.chart-bar:focus {
    filter: brightness(1.12);
    outline: none;
}
.chart-bar-link {
    cursor: pointer;
}
.chart-bar-link:hover .chart-bar {
    filter: brightness(1.12);
}
.chart-bar-link text {
    text-decoration: none;
}
.chart-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
    gap: 1.25rem;
}
@media (max-width: 900px) {
    .chart-grid { grid-template-columns: 1fr; }
}
.chart-grid .card {
    margin-bottom: 0;
}
/* Bar charts grow one row per category (e.g. a lead status, an expense
   category) — left unbounded, a chart with many categories would make its
   card (and its whole grid row, since cards stretch to match) balloon in
   height as more categories pick up data over time. Capping this and
   scrolling internally keeps every dashboard chart card the same size
   regardless of how many categories currently have data. */
.chart-scroll {
    max-height: 320px;
    overflow-y: auto;
}

/* ---------------------------------------------------------------------
   Chat thread — a lead's conversation, styled like a DM app instead of
   a plain log table: bubbles by direction, day dividers, an unread
   marker, composer pinned to the bottom.
   --------------------------------------------------------------------- */

.chat-channel-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.chat-channel-dot--whatsapp  { background: #25D366; }
.chat-channel-dot--messenger { background: #0084FF; }
.chat-channel-dot--instagram { background: #C13584; }
.chat-channel-dot--leadgen   { background: var(--color-text-muted); }

.chat-thread {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-height: 480px;
    overflow-y: auto;
    padding: 0.75rem 0.25rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.chat-day-divider {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.6rem 0 0.4rem;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.chat-day-divider::before, .chat-day-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.chat-unread-divider {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.4rem 0;
    color: var(--color-danger);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.chat-unread-divider::before, .chat-unread-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-danger-bg);
    border-top: 1px dashed #f3c6c2;
}

.chat-row {
    display: flex;
    padding: 0.1rem 0.6rem;
}
.chat-row--in { justify-content: flex-start; }
.chat-row--out { justify-content: flex-end; }

.chat-bubble {
    max-width: 72%;
    padding: 0.5rem 0.75rem;
    border-radius: 14px;
    font-size: 0.9rem;
    line-height: 1.4;
    word-wrap: break-word;
    white-space: pre-wrap;
    box-shadow: 0 1px 1px rgba(23, 27, 33, 0.05);
}
.chat-row--in .chat-bubble {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-bottom-left-radius: 4px;
    color: var(--color-text);
}
.chat-row--out .chat-bubble {
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    border-bottom-right-radius: 4px;
}

.chat-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.2rem;
    font-size: 0.68rem;
    color: var(--color-text-muted);
}
.chat-row--out .chat-meta { justify-content: flex-end; }

.chat-composer {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.chat-composer input[type="text"] {
    flex: 1;
    border-radius: 999px;
    padding: 0.6rem 1rem;
}
.chat-composer button {
    border-radius: 999px;
    padding: 0.6rem 1.3rem;
}

/* ---------------------------------------------------------------------
   Inbox — the leads-with-conversations list, sorted unread-first.
   --------------------------------------------------------------------- */

.inbox-list {
    display: flex;
    flex-direction: column;
}

.inbox-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
    transition: background var(--transition-fast);
}
.inbox-row:last-child { border-bottom: none; }
.inbox-row:hover { background: var(--color-bg); text-decoration: none; }
.inbox-row--unread { background: #fdf8ee; }
.inbox-row--unread:hover { background: #fbf1da; }

.inbox-avatar {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: #fff;
    position: relative;
}

.inbox-avatar__channel {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--color-surface);
}

.inbox-row__body {
    flex: 1;
    min-width: 0;
}

.inbox-row__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.inbox-row__name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inbox-row--unread .inbox-row__name { color: var(--color-text); }

.inbox-row__time {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}
.inbox-row--unread .inbox-row__time { color: var(--color-accent-dark); font-weight: 700; }

.inbox-row__preview {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.1rem;
}
.inbox-row--unread .inbox-row__preview { color: var(--color-text); font-weight: 500; }

.inbox-row__unread-dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-accent);
}

/* Print-friendly output for report pages (see exams/day_report.php) — hides
   app chrome and non-printable controls, leaving just the marked content. */
@media print {
    .sidebar, .topbar, .no-print {
        display: none !important;
    }
    .content {
        margin: 0 !important;
        padding: 0 !important;
    }
    .card {
        box-shadow: none !important;
        border: none !important;
    }
}