/* ===========================================================================
   cr-app.css — this shop's own styles
   ---------------------------------------------------------------------------
   Loaded immediately AFTER cr.css, so these rules win on equal specificity
   without needing !important.

   Kept separate from cr.css on purpose. That file is 12,106 lines and its own
   header says "OneUI theme, customized" - vendor code. Rules mixed into it are
   impossible to tell from the theme's own six months from now, and would be
   lost if the theme were ever replaced.

   Cache: cr.css is linked with ?v=20. This one carries its own version, so the
   two can be bumped independently.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   Dashboard furniture
   Shared by all three dashboards so they cannot drift apart visually.
   --------------------------------------------------------------------------- */

.dash-tile { background: #fff; border: 1px solid #e4e7ed; border-radius: 6px;
             padding: 14px; margin-bottom: 14px; }
.dt-label { display: block; font-size: 13px; color: #7b8494; margin-bottom: 4px; }
.dt-value { display: block; font-size: 26px; font-weight: 600; line-height: 1.1; }
.dt-value.is-action { color: #b06f12; }
.dt-sub   { display: block; font-size: 12px; color: #8a919e; margin-top: 3px; }


/* ---- Eight tiles across ---------------------------------------------------

   Bootstrap 3 has no eighth-width column, so .dash-tiles becomes a flex row at
   12.5% per tile. The col-sm-3 classes stay on the divs so anything else
   relying on them still works; flex-basis overrides the width they would set.

   THE CLEARFIX HAS TO GO. .dash-tiles is also Bootstrap's .row, which carries
   :before and :after with display:table. Under display:flex those pseudo-
   elements become FLEX ITEMS - two invisible children in the row - and the
   eight tiles wrap. That is what broke the layout the first time; the rules
   themselves were right.

   Breakpoints: 8 across desktop, 4 tablet, 2 phone - the same 2-up the tiles
   already used at that width.
   --------------------------------------------------------------------------- */

.dash-tiles {
    display: flex; flex-wrap: wrap;
    margin-left: -5px; margin-right: -5px; margin-bottom: 6px;
    /* Belt and braces: whatever the children do, the row itself cannot make
       the page wider than its container. */
    max-width: calc(100% + 10px);
}
.dash-tiles:before,
.dash-tiles:after { display: none !important; }

.dash-tiles > [class*="col-"] {
    /* box-sizing MUST be stated. Eight tiles at 12.5% is exactly 100%, so any
       padding counted OUTSIDE that pushes the row past its container - and
       #main-container has overflow-x:hidden, so the surplus is CLIPPED rather
       than scrollable. That is the content cut off mid-word at the right edge.

       Bootstrap sets border-box globally, but cr.css re-declares content-box
       for some elements, and relying on which one wins here is exactly the
       kind of thing that works until it does not. */
    box-sizing: border-box;
    flex: 0 0 12.5%; max-width: 12.5%;
    width: auto; float: none;
    padding-left: 5px; padding-right: 5px;
}
/* 1199px was too high: a 1114px window - an ordinary laptop, not a small
   screen - dropped straight to four across. Eight now holds down to 1000px,
   below which four is genuinely the right call: at 12.5% of 1000px a tile is
   115px, and the labels stop fitting. */
@media (max-width: 999px) {
    .dash-tiles > [class*="col-"] { flex-basis: 25%; max-width: 25%; }
}
@media (max-width: 767px) {
    .dash-tiles > [class*="col-"] { flex-basis: 50%; max-width: 50%; }
}

/* Some tiles are links, some are not. Same box either way, so the row reads as
   one set of numbers rather than two. */
.dash-tile-link { display: block; text-decoration: none; color: inherit; }
.dash-tile-link:hover,
.dash-tile-link:focus {
    text-decoration: none; color: inherit;
    border-color: #c9d4e2; background: #f8fbff;
}

/* At 12.5% the labels are narrow. Wrap rather than clip, with a two-line
   minimum so the numbers stay aligned across the row. */
/* Eight tiles at 12.5% of a 1100px window is ~130px each, so the padding and
   type have to come down or the labels wrap to three lines. Full size again
   below 1000px, where there are only four across. */
.dash-tiles .dt-label { white-space: normal; line-height: 1.2; min-height: 2.4em; font-size: 12px; }
.dash-tiles .dash-tile { padding: 10px 10px 12px; }
.dash-tiles .dt-value { font-size: 22px; }
.dash-tiles .dt-sub { font-size: 11px; }
@media (max-width: 999px) {
    .dash-tiles .dt-label { font-size: 13px; min-height: 0; }
    .dash-tiles .dash-tile { padding: 14px; }
    .dash-tiles .dt-value { font-size: 26px; }
}


/* ---- Panels --------------------------------------------------------------- */

.dash-empty { color: #8a919e; font-style: italic; margin: 0; padding: 8px 0; }
.dash-note  { font-size: 12px; color: #8a919e; margin: 8px 0 0; }
.dash-tel   { display: block; font-size: 13px; }
.dash-machine { display: block; font-size: 12px; color: #8a919e; }

/* Paired panels: equal height so the two do not stagger when one is longer. */
@media (min-width: 992px) {
    .dash-col { min-height: 260px; }
}

.dash-bench { display: block; text-align: center; padding: 14px 8px;
              border: 1px solid #e4e7ed; border-radius: 6px; margin-bottom: 12px;
              text-decoration: none; color: inherit; }
.dash-bench:hover { background: #f4f8fd; text-decoration: none; color: inherit; }
.db-num { display: block; font-size: 24px; font-weight: 600; }
.db-lab { display: block; font-size: 12px; color: #7b8494; }

/* The oldest-job notice needs room on both sides. Sitting tight against the
   tiles above and the table below, it read as part of one of them rather than
   as its own warning. */
.dash-oldest { margin: 26px 0 26px; }

/* A block header carrying a button should be the same height as one that does
   not. Left alone, the options row sits below the title and that block stands
   proud of the ones beside it. */
.block-header.dash-head { display: flex; align-items: center; justify-content: space-between; }
.block-header.dash-head .block-title { margin: 0; }
.block-header.dash-head .block-options { float: none; margin: 0; padding: 0; }

/* THE CLEARFIX HAS TO GO - the same trap as .dash-tiles above.
 *
 * .block-header carries :before and :after with display:table. Under
 * display:flex they become FLEX ITEMS - two invisible children - so
 * space-between distributes FOUR things across the row and pushes the title
 * inward. That is the header that reads as centred instead of left-aligned,
 * on every dashboard using .dash-head. */
.block-header.dash-head:before,
.block-header.dash-head:after { display: none !important; }

/* block-content-full resets the BOTTOM padding only; .block-content still
 * carries 20px on top. A table inside therefore starts 20px below its own
 * header, which is the gap under "Selling this week" and "Technicians". */
.block-content.block-content-full { padding-top: 0; }

/* And the table inside one needs no bottom margin of its own. Bootstrap gives
 * .table margin-bottom:20px, block-content-full adds padding-bottom:20px, and
 * the two stack into a 40px band under the last row. */
.block-content.block-content-full > .table:last-child { margin-bottom: 0; }

/* A whole block that is a link. Keeps the card's own look and adds a hover,
   rather than turning blue and underlined like body text. */
.ow-block { display: block; text-decoration: none; color: inherit; }
.ow-block:hover, .ow-block:focus { text-decoration: none; color: inherit; border-color: #c9d6e8; }
.ow-block:hover .block-title { color: #245682; }


/* ---- The overdue count in a block header ----------------------------------

   Sits in .block-options, which cr.css floats right and the header's own
   clearfix contains - the same mechanism the Money page uses. A pill because
   red text on the header's grey gradient reads washed out at 12px.
   --------------------------------------------------------------------------- */

.dash-flag { height: 24px; line-height: 24px; }
.dash-flag .df-pill {
    display: inline-block; height: 22px; line-height: 20px;
    background: #fff; border: 1px solid rgba(0,0,0,.06);
    border-radius: 4px; padding: 0 9px;
    color: #c0392b; font-size: 12px; font-weight: 700;
    text-transform: none; letter-spacing: normal;
}


/* ---- Collected ------------------------------------------------------------

   A bigger target than the rest, and confirmed. It records the day the machine
   left, which technician pay accrues on - a stray tap pays somebody for the
   wrong week.
   --------------------------------------------------------------------------- */

.collected-btn { font-size: 15px; padding: 9px 20px; font-weight: 600; }
@media (max-width: 767px) {
    .collected-btn { width: 100%; font-size: 17px; padding: 13px; }
}


/* ---- Phone ---------------------------------------------------------------- */

@media (max-width: 767px) {
    .dt-value { font-size: 22px; }
    .content .btn-xs { padding: 8px 12px; font-size: 14px; }
}

/* ---- Parts waiting to be ordered ------------------------------------------

   A strip, not a banner. One part is an errand; the full-width bordered block
   this replaced was sized for a crisis.

   Weight grows with the number: amber while it is fresh, red once the oldest
   has sat three days. A technician who cannot work is the thing being
   reported, so it should get louder rather than always shout.
   --------------------------------------------------------------------------- */

.parts-strip {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    background: #FAEEDA;
    border: 1px solid #FAC775;
    /* The solid left edge is what makes this read as a status strip rather
       than a tinted box - it is the one thing carried over from the old
       banner, which had a 4px amber border for the same reason. */
    border-left: 4px solid #E08C0A;
    border-radius: 4px;
    padding: 10px 14px; margin-bottom: 14px;
    text-decoration: none; color: #633806; font-size: 13px;
}
.parts-strip:hover, .parts-strip:focus {
    text-decoration: none; color: #633806;
    background: #F7E6C9; border-color: #EF9F27;
}
.parts-strip.is-old {
    background: #FBEAE8; border-color: #F0B0AA;
    border-left-color: #C0392B;
    color: #7A2820;
}
.parts-strip.is-old:hover, .parts-strip.is-old:focus { background: #F8DEDB; border-color: #E08C84; }

/* Icon beside the text, not above it.
   .ps-line is display:block so two named parts stack - which also pushed the
   icon onto its own line. A flex row with the icon as its own item fixes both:
   the icon sits left, the stacked lines to its right. */
.parts-strip .ps-what { display: flex; align-items: flex-start; min-width: 0; }
.parts-strip .ps-icon { flex: 0 0 auto; margin-right: 8px; opacity: .8;
                        line-height: 1.5; }
.parts-strip .ps-body { min-width: 0; }
.parts-strip strong { font-weight: 600; }
/* The machine and the trailing words are context, not the message - quieter so
   the part name carries. */
.parts-strip .ps-ctx,
.parts-strip .ps-tail { opacity: .72; }
/* Each named part on its own line. Two side by side ran to nearly the full
   width and the second became unreadable. */
.parts-strip .ps-line { display: block; }
.parts-strip .ps-line + .ps-line { margin-top: 3px; }
.parts-strip .ps-sep  { opacity: .45; margin: 0 2px; }

.parts-strip .ps-old {
    margin-left: 10px; font-weight: 600; white-space: nowrap;
}
.parts-strip .ps-also {
    margin-left: 10px; opacity: .6; white-space: nowrap;
}
.parts-strip .ps-go {
    font-weight: 600; white-space: nowrap; color: #854F0B;
}
.parts-strip.is-old .ps-go { color: #A5342A; }

@media (max-width: 767px) {
    /* The arrow drops under the text rather than squeezing the part name to
       two characters. */
    .parts-strip { display: block; }
    .parts-strip .ps-go { display: block; margin-top: 6px; }
    .parts-strip .ps-old,
    .parts-strip .ps-also { margin-left: 0; display: block; margin-top: 3px; }
}


/* ---- Warranty panel on the invoice ----------------------------------------

   Two payers on one invoice. The split table states which part each owes,
   because a single "balance" figure hides exactly the thing that matters here.
   --------------------------------------------------------------------------- */

.warr-flag { height: 24px; line-height: 24px; }
.warr-flag .wf-pill {
    display: inline-block; height: 22px; line-height: 20px;
    border-radius: 4px; padding: 0 9px;
    font-size: 12px; font-weight: 700;
    text-transform: none; letter-spacing: normal;
    background: #fff; border: 1px solid rgba(0,0,0,.06);
}
.warr-flag .wf-owed    { color: #B06F12; }
.warr-flag .wf-settled { color: #1D9E75; }

.warr-split { margin-bottom: 14px; max-width: 520px; }
.warr-split td { padding: 5px 10px 5px 0; border: 0; }
.warr-split .warr-who { font-size: 12px; color: #8a919e; padding-left: 12px; }
/* A rule above the customer's line, so the subtraction reads as arithmetic
   rather than as four unrelated numbers. */
.warr-split .warr-total td { border-top: 1px solid #e4e7ed; padding-top: 8px; }

.warr-note {
    background: #EAF6EF; border: 1px solid #BFE3CE; border-radius: 4px;
    padding: 9px 12px; font-size: 13px; color: #1D6B45; margin: 0 0 14px;
}
.warr-note.warr-wait { background: #FAEEDA; border-color: #FAC775; color: #633806; }

.warr-form .form-group { margin-bottom: 10px; }
.warr-form h4 { font-size: 15px; }

@media (max-width: 767px) {
    .warr-form .btn { display: block; width: 100%; font-size: 17px; padding: 13px; }
    .warr-split { width: 100%; }
    .warr-split .warr-who { display: none; }
}


/* ---- Warranty work tag ----------------------------------------------------

   One label, used on the repair screen and in every invoice list, so a
   warranty job looks the same wherever it appears.
   --------------------------------------------------------------------------- */

.warranty-tag {
    display: inline-block; height: 22px; line-height: 20px;
    background: #EFEBFB; border: 1px solid #C9BCF0;
    border-radius: 4px; padding: 0 9px;
    color: #4B3B8F; font-size: 12px; font-weight: 600;
    text-transform: none; letter-spacing: normal; white-space: nowrap;
}
/* In a table cell it sits next to text, so it needs no height of its own. */
td .warranty-tag { height: auto; line-height: 1.5; padding: 1px 7px; font-size: 11px; }

/* The read-only view of the intake facts, for technicians. */
.if-read { margin: 0; }
.if-read dt { font-size: 12px; color: #8a919e; font-weight: normal; margin-top: 8px; }
.if-read dt:first-child { margin-top: 0; }
.if-read dd { margin: 0 0 2px; }
.if-form .form-group { margin-bottom: 10px; }
@media (max-width: 767px) {
    .if-form .btn { display: block; width: 100%; font-size: 17px; padding: 13px; }
}

/* The read-only intake facts on the invoice screen. */
.inv-facts label { font-size: 12px; color: #8a919e; font-weight: normal; margin-bottom: 2px; }
.inv-facts .if-val { margin: 0 0 10px; font-size: 14px; }


/* ---- Equipment panel on the customer page ---------------------------------
   Two groups when the customer belongs to a firm, each row tagged. A customer
   with no business sees one plain list and never meets the concept.
   --------------------------------------------------------------------------- */

.eq-group { font-size: 12px; color: #7b8494; margin: 14px 0 6px;
            text-transform: uppercase; letter-spacing: .02em; }
.eq-group:first-child { margin-top: 0; }
.eq-group-business { color: #4B3B8F; }
.eq-group strong { font-weight: 600; text-transform: none; letter-spacing: normal; font-size: 13px; }

.eq-tag { display: inline-block; margin-left: 8px; border-radius: 4px; padding: 1px 7px;
          font-size: 11px; font-weight: 600; white-space: nowrap; }
.eq-tag-business { background: #EFEBFB; border: 1px solid #C9BCF0; color: #4B3B8F; }
.eq-tag-personal { background: #F1EFE8; border: 1px solid #D3D1C7; color: #5F5E5A; }

.eq-table { margin-bottom: 4px; }

@media (max-width: 767px) {
    #eq-form-block .btn { display: block; width: 100%; font-size: 17px; padding: 13px; }
    .eq-tag { margin-left: 0; }
}


/* ---- Customer list actions ------------------------------------------------
   Three things the front desk does constantly get full-size buttons; the rest
   goes behind More. Eight buttons on a row meant none stood out, and at phone
   width they wrapped into a block taller than the customer's own details.
   --------------------------------------------------------------------------- */

.cust-actions { display: flex; gap: 6px; justify-content: flex-end;
                align-items: center; flex-wrap: nowrap; }
.cust-actions .btn-lg { font-size: 14px; padding: 10px 16px; white-space: nowrap; }
/* The cell no longer needs nowrap - the flex row handles it, and nowrap there
   forced the table wider than the page. */
.actions-cell { white-space: normal; }

.cust-more .dropdown-menu { min-width: 200px; }
.cust-more .dropdown-menu > li > a { padding: 9px 16px; font-size: 14px; }
.cust-more .dropdown-menu .fa-fw { margin-right: 6px; color: #8a919e; }

@media (max-width: 767px) {
    /* Stacked and full width - four across at phone width leaves each too
       narrow to read, let alone hit. */
    .cust-actions { flex-wrap: wrap; justify-content: stretch; }
    .cust-actions .cust-act, .cust-more { flex: 1 1 100%; }
    .cust-actions .btn-lg { width: 100%; font-size: 17px; padding: 13px; }
    .cust-more .dropdown-menu { width: 100%; }
}