/* ==========================================================================
   polish.css — finish pass over the original layout.
   --------------------------------------------------------------------------
   Ground rules for anything added here:
     - Nothing moves. Same screens, same order, same wording, same colours.
     - Only spacing, sizing, contrast, focus and small-screen behaviour change.
   Loaded last so it can refine app.min.css without editing the reconstruction.
   ========================================================================== */

/* ---------- top navigation ---------------------------------------------
   Bootstrap 4 lays .navbar-nav out as a COLUMN unless it sits inside a
   .navbar-expand-* wrapper, which this markup deliberately does not use. Left
   alone the menu stacks vertically and overlaps the logo. */
#topnav .navbar-nav { flex-direction: row; flex-wrap: nowrap; align-items: center; }
#topnav .nav-item   { flex: 0 0 auto; }
#topnav .nav-link   { white-space: nowrap; }

.topbar .container-fluid { flex-wrap: nowrap; }
.logo-box { flex: 0 0 auto; width: auto; max-width: 210px; margin-right: 18px; }
.logo-box img { max-height: 52px; width: auto; }

/* Status pills must never break across two lines ("Revok ed"). */
.btn { white-space: nowrap; }

/* ---------- dashboard stat cards ---------------------------------------- */
.widget-box-three .card-body { padding: 18px 20px; }
.widget-title  { font-size: 12.5px; letter-spacing: .04em; color: var(--body-fg); margin: 0 0 6px; }
.widget-count  { font-size: 26px; font-weight: 700; color: var(--th-fg); margin: 0; }
.widget-count .mdi { font-size: 18px; vertical-align: middle; }
.stat-icon .mdi { font-size: 34px; opacity: .85; }
a.widget-box-three { text-decoration: none; transition: box-shadow .15s ease; }
a.widget-box-three:hover { box-shadow: 0 2px 10px rgba(0,0,0,.07); }

/* ---------- rhythm ------------------------------------------------------ */
.content-page      { padding: 28px 0 56px; }
.card              { margin-bottom: 20px; }
.card-body         { padding: 22px 24px; }
.card + .card      { margin-top: 0; }
.page-title-box    { padding: 4px 0 18px; }
.page-title-box .page-title { font-size: 19px; letter-spacing: .01em; }

/* Action buttons in the page header shouldn't crowd each other. */
.page-title-box .float-right > .btn,
.page-title-box .float-right > a.btn { margin-left: 8px; }

/* A heading inside a card wants breathing room under it. */
.card-body > h4:first-child { margin-bottom: 18px; font-size: 17px; color: var(--th-fg); }

/* ---------- controls ---------------------------------------------------- */
.btn {
  padding: .45rem 1.05rem;
  font-size: 14px;
  line-height: 1.5;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.btn-sm { padding: .25rem .65rem; font-size: 12.5px; }

/* Visible keyboard focus — the template had none, which fails accessibility
   and makes tabbing through a long form impossible to follow. */
.btn:focus-visible,
.form-control:focus-visible,
a:focus-visible,
.cb-value:focus-visible + label {
  outline: 2px solid var(--brand-pink);
  outline-offset: 2px;
  box-shadow: none;
}

.form-control { padding: .45rem .75rem; height: auto; font-size: 14px; }
.form-control::placeholder { color: #aab2b8; }
.form-control:disabled, .form-control[readonly] { background: #f7f8fa; }

label { font-weight: 500; }
.form-group { margin-bottom: 16px; }

/* Required-field marker reads as part of the label, not an error. */
label:after { content: ""; }

/* ---------- tables ------------------------------------------------------ */
.table thead th {
  font-size: 12.5px;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: #FAFBFC;
  border-bottom: 1px solid #e9ecef;
  padding: 11px 12px;
  vertical-align: middle;
}
.table td { font-size: 14px; }
.table-striped tbody tr:nth-of-type(odd)  { background: #FCFCFD; }
.table tbody tr:hover                     { background: #F6F7FB; }

/* Long free-text columns shouldn't stretch a table off the page.
   `break-word`, not `anywhere`: with the real converter list loaded, `anywhere`
   chopped phone numbers and email addresses mid-character ("95350492 79",
   "7thskydesig ns@gmail.c om"), which is exactly the data someone is scanning
   the row for. break-word only breaks a word that genuinely cannot fit. */
.table td { max-width: 340px; overflow-wrap: break-word; }

/* Data that must never be broken across lines to be read or copied. */
.table td.nowrap, .table .cell-mobile, .table .cell-email { white-space: nowrap; }

/* A wide table scrolls inside its own box rather than crushing every column.
   Postal addresses are long; the columns beside them should not pay for it. */
.table-people { min-width: 1180px; }
.table-people td { vertical-align: middle; }
.table-people .cell-address { min-width: 240px; font-size: 13px; color: var(--muted, #6B7280); }

/* Tables with a dozen-plus columns (the invoice queues) fit on a laptop
   instead of pushing their action column past the right-hand edge, where
   nobody scrolls to find it. Narrower screens still scroll as before. */
.table-compact thead th { font-size: 11.5px; padding: 9px 8px; }
.table-compact td       { font-size: 13px;   padding: 8px; }

/* DataTables chrome */
.dataTables_wrapper .dataTables_filter input { margin-left: 6px; }
.dataTables_wrapper .dataTables_length select { margin: 0 6px; }
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { padding-top: 14px; }
.page-link  { color: var(--body-fg); }
.page-item.active .page-link { background: var(--brand-pink); border-color: var(--brand-pink); }

/* ---------- status pill ------------------------------------------------- */
.cb-value + label { vertical-align: middle; }

/* ---------- empty states ------------------------------------------------ */
.dataTables_empty { padding: 28px 12px !important; color: #9aa3aa; }

/* ---------- notifications ---------------------------------------------- */
.dropdown-lg .noti-scroll { overscroll-behavior: contain; }

/* ---------- small screens ----------------------------------------------
   The original is desktop-only. These rules keep every screen usable on a
   phone without moving anything on a desktop. */
.nav-toggle { display: none; background: none; border: 0; font-size: 26px; color: var(--body-fg); padding: 4px 10px; }

@media (max-width: 991.98px) {
  body { padding-top: 0; }

  .topbar { position: static; height: auto; padding: 10px 0; }
  .topbar .container-fluid { flex-wrap: wrap; }

  .logo-box { flex: 1 1 auto; width: auto; }
  .logo-box img { max-height: 42px; }

  .nav-toggle { display: inline-block; order: 3; margin-left: auto; }
  .topbar-right { order: 2; margin-left: auto; }

  /* Menu collapses behind the toggle instead of spilling across the page. */
  #topnav { order: 4; flex: 0 0 100%; display: none; margin-top: 8px; border-top: 1px solid #eef0f4; }
  #topnav.open { display: block; }
  #topnav .navbar-nav { display: block; flex-direction: column; flex-wrap: wrap; }
  .topbar .container-fluid { flex-wrap: wrap; }
  .logo-box { max-width: none; }
  #topnav .nav-link { padding: 12px 6px; border-bottom: 1px solid #f4f5fa; }

  /* Sub-menus open inline rather than floating off-screen. */
  #topnav .dropdown-menu { position: static; float: none; box-shadow: none; padding-left: 14px; }
  #topnav .dropdown-submenu > .dropdown-menu { left: 0; margin-top: 0; }

  .content-page { padding: 18px 0 40px; }
  .card-body { padding: 16px; }

  /* Page title and its action button stack instead of colliding. */
  .page-title-box .page-title,
  .page-title-box .float-right { float: none !important; display: block; }
  .page-title-box .float-right { margin-top: 12px; }
  .page-title-box .float-right > .btn { margin: 0 8px 8px 0; }

  /* Comfortable touch targets. */
  .btn, .form-control { min-height: 44px; }
  .btn-sm { min-height: 34px; }
  .table-icon, .table-action-btn { display: inline-block; padding: 6px; }

  /* Wide tables scroll inside their own box, never the page. */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .table td { max-width: none; white-space: nowrap; }

  .dropdown-lg { width: calc(100vw - 32px); }
  .account-page .card { margin: 0 12px; }
}

@media (max-width: 575.98px) {
  body { font-size: 15px; }
  .page-title-box .page-title { font-size: 17px; }
  .form-row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
}

/* ---------- print ------------------------------------------------------- */
@media print {
  .topbar, .footer, .page-title-box .float-right, .btn { display: none !important; }
  .card { border: 0; }
}

/* ========================================================================
   ADS LED brand chrome
   ------------------------------------------------------------------------
   The frame goes dark, the working canvas stays light.

   Everything below is colour, weight and spacing. Not one control moves,
   changes label, or leaves the page - a user who knew the old portal sits
   down at this one and finds every button exactly where they left it.

   Palette and typeface are ADS LED's own, from adsled.in.
   ==================================================================== */

/* ---------- the bar ---------- */
.topbar {
  background: var(--brand-ink);
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 6px 24px -12px rgba(11,15,26,.5);
}
/* The wordmark is wide and short (1638x544). Sizing by height and letting
   width follow keeps it crisp and stops it dominating the bar. */
.logo-box img { height: 40px; width: auto; max-height: none; max-width: 100%; }
.logo-box { flex: 0 0 200px; width: 200px; }

#topnav .nav-link,
.topbar-right .nav-link { color: rgba(255,255,255,.76); }

#topnav .nav-link:hover,
#topnav .nav-item.active > .nav-link,
.topbar-right .nav-link:hover { color: #fff; }

/* The active item is marked by a red underline rather than red text: one
   accent, used once, where the eye is already looking. */
#topnav .nav-link { position: relative; border-radius: 7px; transition: color .15s, background .15s; }
#topnav .nav-link:hover { background: rgba(255,255,255,.06); }
#topnav .nav-item.active > .nav-link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px;
  height: 2px; background: var(--brand-red); border-radius: 2px;
}

/* Menus that drop out of a dark bar stay dark - a white panel hanging off
   black reads as a rendering fault. */
#topnav .dropdown-menu {
  background: #141A28; border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.8); border-radius: 10px; padding: 6px;
}
#topnav .dropdown-item { color: rgba(255,255,255,.8); border-radius: 6px; padding: 9px 14px; }
#topnav .dropdown-item:hover { background: rgba(255,255,255,.08); color: #fff; }
#topnav .dropdown-toggle::after { opacity: .55; }

.notification-list .dropdown-menu { background: #141A28; border: 1px solid rgba(255,255,255,.08); }
.notification-list .noti-title { color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
.notification-list .notify-item { color: rgba(255,255,255,.78); border-bottom: 1px solid rgba(255,255,255,.05); }
.notification-list .notify-item:hover { background: rgba(255,255,255,.06); }
.notification-list .notify-details { color: #fff; }
.notification-list .notify-item small { color: var(--brand-muted); }

.nav-toggle { color: #fff; }

/* ---------- the canvas ---------- */
.page-title-box .page-title { font-weight: 600; letter-spacing: -.015em; color: var(--brand-ink); }
.card-body { padding: 22px 24px; }
.footer { color: var(--brand-muted); font-size: 13px; }

/* ---------- stat cards ---------- */
.widget-box-three { transition: transform .15s ease, box-shadow .15s ease; }
.widget-box-three:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(11,15,26,.05), 0 16px 32px -18px rgba(11,15,26,.4); }
.widget-title { color: var(--brand-muted); font-weight: 600; letter-spacing: .07em; }
.widget-count { color: var(--brand-ink); font-weight: 700; letter-spacing: -.02em;
                font-variant-numeric: tabular-nums; }

/* ---------- tables ---------- */
.table thead th { background: #FAFBFC; color: var(--brand-ink); border-bottom: 1px solid var(--rule); }
.table td, .table th { border-color: var(--rule); }
.table-striped tbody tr:nth-of-type(odd) { background: #FCFCFD; }
.table tbody tr:hover { background: #F4F6F9; }

/* Status pills: quieter, and readable rather than shouted. */
.table .btn-sm { border-radius: 999px; font-size: 12px; font-weight: 600; padding: 4px 12px;
                 letter-spacing: .01em; min-height: 0; }

/* ---------- forms ---------- */
.form-control { border-radius: 8px; border-color: #DDE1E8; }
.form-control:focus { border-color: var(--brand-red); box-shadow: 0 0 0 3px rgba(237,28,36,.12); }
label { color: var(--brand-ink); font-weight: 500; font-size: 14px; }

/* ---------- pagination ---------- */
.page-item.active .page-link { background: var(--brand-red); border-color: var(--brand-red); }
.page-link { border-radius: 7px; margin: 0 2px; border-color: var(--rule); }

/* ---------- the signed-out pages ----------
   Dark ground, the wordmark at a sensible size above a single white card.
   The logo is 3:1 and would otherwise render at its intrinsic 1638px. */
.account-page { background: var(--brand-ink); min-height: 100vh; }
.account-page .account-logo { margin: 8vh 0 30px; }
.account-page .account-logo img { height: 62px; width: auto; max-width: 76%; }
.account-page .card { background: #fff; border: 0; border-radius: 14px;
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.75); }
.account-page .footer { color: rgba(255,255,255,.45); position: static;
  text-align: center; padding: 26px 0 34px; }
.account-page label { font-size: 13.5px; }
.account-page .account-logo img { height: 70px; }

/* Anything OUTSIDE the white card sits on the dark ground and must be light
   enough to read there. Bootstrap's muted grey is not. */
.account-page .container > :not(.card):not(.account-logo),
.account-page .text-muted,
.account-page .account-copyright { color: rgba(255,255,255,.72); }
.account-page .container a:not(.btn) { color: #FF6B72; }
.account-page .container a:not(.btn):hover { color: #fff; }
.account-page .card a:not(.btn) { color: var(--brand-red); }
.account-page .card a:not(.btn):hover { color: var(--brand-red-dark); }

@media (max-width: 575.98px) {
  .account-page .account-logo { margin: 5vh 0 24px; }
  .account-page .account-logo img { height: 44px; }
}

@media (max-width: 991.98px) {
  #topnav { background: var(--brand-ink); }
  #topnav .nav-link { border-bottom: 1px solid rgba(255,255,255,.07); border-radius: 0; }
  #topnav .dropdown-menu { background: transparent; border: 0; box-shadow: none; }
}

/* ---------- archived warranties ----------
   History carried over from the previous portal. Marked in a neutral slate so
   it reads as "older record", never as a status like Pending or Rejected -
   those carry meaning in the workflow and this does not. */
.badge-archive {
  background: #EDF0F4; color: #5A6478; border: 1px solid #DDE2EA;
  font-weight: 600; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle;
}
.alert-archive {
  background: #F4F6F9; border: 1px solid var(--rule); border-left: 3px solid var(--brand-muted);
  color: var(--body-fg); border-radius: 10px; padding: 14px 18px; margin-bottom: 18px;
}
.alert-archive strong { color: var(--brand-ink); }
.alert-archive .mdi { color: var(--brand-muted); margin-right: 6px; }

/* ---------- archive coverage ---------- */
.archive-progress { height: 8px; background: #E8EBF0; border-radius: 999px; overflow: hidden; }
.archive-progress-bar { height: 100%; background: var(--brand-red); border-radius: 999px;
                        transition: width .3s ease; }
.archive-progress-figure { font-size: 30px; font-weight: 700; color: var(--brand-ink);
                           letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* Bootstrap's own .nav-link.active blue beats the brand class on these pills. */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link { background: var(--brand-red); color: #fff; border-radius: 7px; }
.nav-pills .nav-link { border-radius: 7px; font-weight: 500; }

/* Toasts clear the fixed top bar instead of landing on top of the bell and
   account icons, which made both unclickable while a message was showing. */
.toast-top-right { top: 98px; right: 18px; }
#toast-container > div { border-radius: 10px; opacity: 1; box-shadow: 0 14px 34px -14px rgba(11,15,26,.55); }
.toast-success { background-color: #178054; }
.toast-error   { background-color: #C8151C; }
.toast-warning { background-color: #B87A00; }

@media (max-width: 991.98px) { .toast-top-right { top: 12px; } }

/* ---------- system update output ---------- */
.update-output {
  background: #0B0F1A; color: #E6E9EF; border-radius: 8px; padding: 14px 16px;
  font-size: 12.5px; line-height: 1.6; max-height: 320px; overflow: auto;
  white-space: pre-wrap; word-break: break-word;
}