/**
 * The CRM's own look, in one place.
 *
 * Every page used to carry its own <style> block and its own idea of a blue, a border and a
 * button, so the same product looked like four products depending which screen you were on.
 * This file is loaded last, after each page's own styles, so it settles those arguments
 * without a single line of their markup being touched — which matters, because the names on
 * those elements are what the CRM's own JavaScript holds on to.
 *
 * The shop is Canada Furniture: red and white, so the CRM is too. The accent is used where a
 * person acts — the main button, the live tab, what has their attention — and nowhere else,
 * because a screen that shouts everywhere says nothing. The status colours stay their own:
 * red means delivery, amber means the customer is collecting, blue means no fixed day, and
 * those must keep meaning that on the board, on the calendar and here.
 *
 * Built for a dispatcher with the screen open all day: quiet ground, dense but unhurried
 * rows, figures that line up in columns, and text you can read at the end of that day.
 */

/* ---------------------------------------------------------------- the vocabulary
   These same names are used by every page's own stylesheet, so redefining them here is
   what carries the new look across all of them at once. */
:root {
    --brand:        #e51515;   /* read out of logo.png, not judged by eye */
    --brand-dark:   #b51010;
    --brand-tint:   #fdeaea;

    --primary:      #e51515;   /* pages say var(--primary) for their main action */
    --primary-hover:#b51010;

    --bg-body:      #f6f4f2;   /* warm, not the cold grey of a default admin panel */
    --bg-card:      #ffffff;
    --bg-sunken:    #faf8f7;

    --text-main:    #1b1a19;
    --text-muted:   #6f6a66;
    --border-color: #e7e2de;

    --radius:       8px;
    --radius-sm:    6px;
    --shadow:       0 1px 2px rgba(27, 26, 25, .05), 0 1px 1px rgba(27, 26, 25, .03);
    --shadow-lift:  0 6px 18px rgba(27, 26, 25, .10);

    --ok:    #15803d;
    --warn:  #b45309;
    --info:  #1d4ed8;
    --due:   #b91c1c;

    --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* ---------------------------------------------------------------- the page itself */
body {
    font-family: var(--font-sans);
    background: var(--bg-body);
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv05" 1;
}

.container { max-width: 1480px; }

h1, h2, h3, h4 { letter-spacing: -0.01em; text-wrap: balance; }
h2 { font-weight: 600; }

/* Figures belong in columns, so they are set to line up: an invoice number, a distance and a
   dollar amount are all read against the ones above and below them. */
td, th, .badge-optimo, .money, input[type="number"] {
    font-variant-numeric: tabular-nums;
}
.badge-optimo, code, .mono { font-family: var(--font-mono); font-size: .92em; letter-spacing: -0.01em; }

/* ---------------------------------------------------------------- the top bar */
.header {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--brand);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px 24px;
}
.header h2 { margin: 0; font-size: 16px; font-weight: 600; }
.header-center img { max-height: 44px; }

.btn-logout { color: var(--due); }
.btn-inbox, .btn-action-base {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    transition: border-color .12s ease, background .12s ease;
}
.btn-inbox:hover, .btn-action-base:hover { border-color: #cfc8c2; background: var(--bg-sunken); }

/* The row of links some pages use instead of nav boxes. */
.nav-links a {
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    color: var(--text-main);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    margin-left: 8px;
}
.nav-links a:hover { background: var(--bg-sunken); border-color: #cfc8c2; }

/**
 * The buttons the pages already have, brought into one family.
 *
 * Each screen was written at a different time and picked its own blue, green and orange. The
 * names stay exactly as they are — the CRM's own scripts hold on to some of them — and only
 * what they look like changes: one accent for the action a person came to the page to take,
 * everything else quiet so that one stands out.
 */
.btn-update, .drf-apply, .btn-show, .btn-green, .btn-route, .btn-auto,
button[type="submit"]:not(.btn-remove-item):not(.modal-close):not(.mini) {
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #fff;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background .12s ease;
}
.btn-update:hover, .drf-apply:hover, .btn-show:hover, .btn-green:hover,
.btn-route:hover, .btn-auto:hover,
button[type="submit"]:not(.btn-remove-item):not(.modal-close):not(.mini):hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
}

/* The quieter ones: a day that isn't today, a span of days, a second choice. */
.drf-quick, .arrow-btn, .btn-secondary, .drf-clear {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    border-radius: var(--radius-sm);
}
.drf-quick:hover, .arrow-btn:hover, .btn-secondary:hover { background: var(--bg-sunken); }

/* Whatever is currently chosen — a day, a tab — wears the accent. */
.active, .tab-btn.active, .drf-day.active {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}

/* ---------------------------------------------------------------- the section tiles */
.quick-nav { gap: 8px; margin-top: 14px; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.nav-box {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--brand);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    /* Trim: fourteen of these sit above the work itself, so every millimetre they take is a
       millimetre of the day's orders pushed off the screen. */
    padding: 8px 12px;
    gap: 0;
    font-size: 12.5px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.nav-box:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
/* One line each, so a long description can't make its tile taller than the rest of the row. */
.nav-box span {
    font-size: 10.5px;
    line-height: 1.35;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/**
 * Each section wears its own colour, deepest at the left and easing lighter across.
 *
 * The colours themselves are the ones the CRM has always used for these areas — people find
 * Returns by its orange and Routing by its purple — so only their weight has changed. Filling
 * the tile rather than just its edge is what the owner asked for, and the dark left-hand end
 * gives the row of them a spine to read along.
 *
 * Nothing in the markup changes: every one of these class names is already on the page.
 */
.nav-box {
    background: linear-gradient(100deg, #7d0a0a 0%, #d01212 34%, #f05656 100%);
    border-color: #b51010;
    border-left-color: #6b0909;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .12);
    box-shadow: 0 1px 2px rgba(27, 26, 25, .14);
}
.nav-box span { color: rgba(255, 255, 255, .86); }
.nav-box:hover { filter: brightness(1.07); box-shadow: var(--shadow-lift); }

.nav-box.box-red {
    background: linear-gradient(100deg, #7a1620 0%, #c62334 34%, #e8737e 100%);
    border-color: #a81c2a; border-left-color: #6a121b;
}
.nav-box.box-blue {
    background: linear-gradient(100deg, #0d2566 0%, #1d4ed8 34%, #6b8ded 100%);
    border-color: #173fae; border-left-color: #0a1d52;
}
.nav-box.box-green {
    background: linear-gradient(100deg, #08401f 0%, #15803d 34%, #4fb279 100%);
    border-color: #116632; border-left-color: #063318;
}
.nav-box.box-orange, .nav-box.box-amber {
    background: linear-gradient(100deg, #5e2a04 0%, #b45309 34%, #dd9147 100%);
    border-color: #904207; border-left-color: #4b2103;
}
.nav-box.box-purple {
    background: linear-gradient(100deg, #37117a 0%, #6d28d9 34%, #9f72e8 100%);
    border-color: #5820ae; border-left-color: #2c0d61;
}
.nav-box.box-dark {
    background: linear-gradient(100deg, #161d29 0%, #334155 34%, #63728a 100%);
    border-color: #283344; border-left-color: #111721;
}

/* ---------------------------------------------------------------- panels and cards */
.card, .panel, .table-wrap, .box {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.tile {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.tile .n { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.02em; }
.tile .l { color: var(--text-muted); }

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

/* ---------------------------------------------------------------- tables */
table { border-collapse: collapse; }
thead th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-sunken);
    border-bottom: 1px solid var(--border-color);
    /* The dispatcher scrolls a long day; the column names stay in view. */
    position: sticky;
    top: 0;
    z-index: 2;
}
tbody td { border-bottom: 1px solid #f2efec; }
tbody tr:hover td { background: #fbf9f8; }
tbody tr:last-child td { border-bottom: 0; }

/**
 * A row is coloured by its state — yellow waiting, grey delivered, red gone wrong.
 *
 * The owner reads the board by colour across the room, so the colour stays. It now comes from
 * here rather than from a style written onto every row by the page, which is what lets the
 * shade be tuned in one place — and a stripe down the left edge carries the same meaning for
 * anyone who doesn't separate these colours easily.
 */
.order-row td { background: var(--bg-card); }

.order-row.is-pending td            { background: #fdf6dd; }
.order-row.is-pending:hover td      { background: #fbf0c8; }
.order-row.is-pending td:first-child{ box-shadow: inset 3px 0 0 #e0b33c; }

/**
 * Delivered is grey, not green.
 *
 * Green sat as loudly on the board as the colours for work still to do, so a day that was
 * finished looked as busy as a day that had not started. Grey lets the eye pass over what is
 * done and land on what is not — and it is the same grey Google Calendar shows for these
 * orders, so the board and the calendar read alike.
 */
.order-row.is-delivered td, .order-row.is-completed td             { background: #dcdad7; }
.order-row.is-delivered:hover td, .order-row.is-completed:hover td { background: #d0cdc9; }
.order-row.is-delivered td:first-child,
.order-row.is-completed td:first-child { box-shadow: inset 3px 0 0 #616161; }   /* Google's Graphite */

.order-row.is-canceled td, .order-row.is-failed td             { background: #f8bcbc; }
.order-row.is-canceled:hover td, .order-row.is-failed:hover td { background: #f3a8a8; }
.order-row.is-canceled td:first-child,
.order-row.is-failed   td:first-child { box-shadow: inset 3px 0 0 var(--due); }

/* The two states that are genuinely in motion: on the van, and coming back. */
.order-row.is-out_for_delivery td            { background: #e6effd; }
.order-row.is-out_for_delivery:hover td      { background: #d9e6fb; }
.order-row.is-out_for_delivery td:first-child{ box-shadow: inset 3px 0 0 var(--info); }

.order-row.is-return_requested td, .order-row.is-returned_back td             { background: #fdeedd; }
.order-row.is-return_requested:hover td, .order-row.is-returned_back:hover td { background: #fbe4ca; }
.order-row.is-return_requested td:first-child,
.order-row.is-returned_back    td:first-child { box-shadow: inset 3px 0 0 var(--warn); }

.product-thumb, .thumb, .proof-img {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-sunken);
}

/* ---------------------------------------------------------------- small labels */
.badge, .pill, .badge-optimo {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .01em;
}
.badge-optimo {
    background: var(--bg-sunken);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 3px 9px;
}

/* ---------------------------------------------------------------- buttons */
button, .btn, input[type="submit"] { font-family: var(--font-sans); }
.btn-create, .btn-add, .btn-search, .btn-primary, .go {
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #fff;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: background .12s ease, border-color .12s ease;
}
.btn-create:hover, .btn-add:hover, .btn-search:hover, .btn-primary:hover, .go:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
}
.btn-open-modal {
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #fff;
    border-radius: var(--radius-sm);
    font-weight: 600;
}
.btn-open-modal:hover { background: var(--brand-dark); }

/* ---------------------------------------------------------------- forms */
input, select, textarea {
    font-family: var(--font-sans);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    background: var(--bg-card);
    transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-tint);
}
/* Keyboard users get the same ring on anything they can reach. */
a:focus-visible, button:focus-visible, .nav-box:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
.form-group label, .lbl {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    color: var(--text-muted);
}

/* ---------------------------------------------------------------- notices */
.alert, .banner {
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    box-shadow: var(--shadow);
}

/* ---------------------------------------------------------------- modals */
.modal-overlay { background: rgba(27, 26, 25, .45); backdrop-filter: blur(2px); }
.modal-content {
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 24px 60px rgba(27, 26, 25, .22);
}
.modal-close { color: var(--text-muted); }
.modal-close:hover { color: var(--text-main); }

/* ---------------------------------------------------------------- the dispatch board
   Its lanes all have to fit across the screen at once — the client asked for that
   specifically — so nothing here adds width. */
.dispatch-column {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.dispatch-column h4 { font-size: 13px; font-weight: 600; letter-spacing: -0.005em; }

/* ---------------------------------------------------------------- printing
   Invoices and manifests go out on paper: no tinted ground, no shadows, black on white. */
@media print {
    body { background: #fff; }
    .card, .panel, .table-wrap, .box, .header { box-shadow: none; border-color: #999; }
    .quick-nav, .nav-links, .btn-logout { display: none; }
}

/* A second action beside the main one: present, not competing. */
.btn-export, .btn-secondary-action {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    border-radius: var(--radius-sm);
    font-weight: 600;
}
.btn-export:hover { background: var(--bg-sunken); border-color: #cfc8c2; }

/* The sign-in page — the first thing anyone sees of the CRM. */
.login-box { border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 10px 30px rgba(27,26,25,.08); }
.btn-login { background: var(--brand); border-radius: var(--radius-sm); font-weight: 600; letter-spacing: .01em; }
.btn-login:hover { background: var(--brand-dark); }
.lang-btn.active { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-dark); }


/* ---------------------------------------------------------------- whose product this is
   Quiet, at the foot of the page, out of the way of the work — but on every screen, because
   this CRM is sold to shops whose staff look at it all day. */
.crm-footer {
    max-width: 1480px;
    margin: 26px auto 8px;
    padding: 14px 4px 0;
    border-top: 1px solid var(--border-color);
    text-align: center;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #9a938d;
}
.crm-footer a {
    color: #6f6a66;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid #ded7d1;
}
.crm-footer a:hover { color: var(--brand); border-bottom-color: var(--brand); }

/* The same line under the sign-in box, where there is no page to sit at the foot of. */
.made-by {
    text-align: center;
    margin: 16px auto 0;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8d8781;
}
.made-by a { color: #5c5854; text-decoration: none; font-weight: 700; border-bottom: 1px solid #cfc8c2; }
.made-by a:hover { color: var(--brand); border-bottom-color: var(--brand); }

/* Kept on paper as well: a printed invoice is where somebody outside the shop sees it. */
@media print {
    .crm-footer { border-top: 1px solid #ccc; color: #666; margin-top: 18px; padding-top: 8px; }
    .crm-footer a { color: #444; border: 0; }
}
/* The sign-in box and the line beneath it, stacked and centred together. */
.login-wrap { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; }
.login-wrap .login-box { width: 100%; box-sizing: border-box; }

/* The sign-in page stands on the brand colour, so its own pieces are dressed for it. */
.login-wrap { position: relative; z-index: 2; }
.made-by {
    width: 100%;
    box-sizing: border-box;
    margin-top: 12px;
    padding: 9px 10px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    color: rgba(255, 255, 255, .80);
}
.made-by a { color: #fff; border-bottom-color: rgba(255,255,255,.45); }
.made-by a:hover { color: #fff; border-bottom-color: #fff; }
.lang-btn { border: 1px solid var(--border-color); background: var(--bg-sunken); }
.lang-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }


/**
 * The sign-in page: the brand colour, with a delivery round drawn across it.
 *
 * Two routes, one bright and one behind, with the stops marked along the first — what this CRM
 * does, whatever the business sells. Drawn in the page rather than loaded as a picture, so the
 * screen costs nothing to open and looks the same on a slow shop connection as on a fast one.
 */
body.signin {
    background: linear-gradient(140deg, #7d0d10 0%, #c8191c 55%, #e33f43 100%);
    position: relative;
    overflow: hidden;
}
body.signin .bg-route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
body.signin .login-box {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 22px 60px rgba(60, 6, 8, .34);
}