/* =============================================================================
   TAMS — Sales Pulse 365 skin
   -----------------------------------------------------------------------------
   Purely cosmetic. This sheet re-colours TAMS with the Sales Pulse 365 design
   language (dark-green ink, teal accent, gold highlight, Bebas/DM Sans/Space
   Mono type scale). It changes colour, gradient, radius, shadow and type only —
   never display, position, flow or z-index of interactive chrome — so every
   existing behaviour (accordions, popups, modals, dropzone, tables) keeps
   working exactly as before.

   Loaded LAST from layouts/base.blade.php. Because many TAMS pages carry their
   own <style> blocks inside <body> (which win on document order), the visual
   declarations here are marked !important. Layout-affecting properties are
   deliberately left alone.
   ============================================================================= */

:root {
    /* ---- Sales Pulse 365 core palette ---- */
    --sp-ink: #1A3A2A;
    /* sidebar / darkest green   */
    --sp-ink-2: #1f6e54;
    /* mid green                 */
    --sp-ink-3: #008e7a;
    /* bright green              */
    --sp-teal: #00B49A;
    /* primary accent            */
    --sp-teal-d: #0f766e;
    --sp-gold: #F0B429;
    /* secondary accent          */
    --sp-gold-s: #fbbf24;

    --sp-page-bg: #f5f7f6;
    --sp-card-bg: #ffffff;
    --sp-line: #e3ebe7;
    --sp-text: #16211d;
    --sp-text-2: #5d726a;
    --sp-sub-on-dark: #bfe0d6;

    /* ---- Signature gradients ---- */
    --sp-hero: linear-gradient(120deg, #1A3A2A 0%, #1f6e54 55%, #008e7a 100%);
    --sp-band: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    --sp-accent-line: linear-gradient(90deg, #00B49A 0%, #F0B429 100%);

    /* ---- Elevation ---- */
    --sp-shadow-sm: 0 1px 2px rgba(16, 32, 26, .06);
    --sp-shadow: 0 1px 2px rgba(16, 32, 26, .06), 0 8px 24px rgba(16, 32, 26, .08);
    --sp-shadow-lg: 0 2px 4px rgba(16, 32, 26, .08), 0 18px 40px rgba(16, 32, 26, .12);

    --sp-radius: 16px;
    --sp-radius-sm: 10px;

    --sp-font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sp-font-display: 'Bebas Neue', Impact, sans-serif;
    --sp-font-mono: 'Space Mono', ui-monospace, monospace;
}

/* -----------------------------------------------------------------------------
   1. Page canvas + base type
   -------------------------------------------------------------------------- */
body {
    background: var(--sp-page-bg) !important;
    color: var(--sp-text);
    font-family: var(--sp-font) !important;
}

/* -----------------------------------------------------------------------------
   1b. THE SIDEBAR OFFSET — one source of truth
   -----------------------------------------------------------------------------
   Historically each page pushed itself clear of the fixed rail with its own
   `margin-left: 225px` on .dash-container. Anything a page rendered OUTSIDE
   that wrapper — a hero band, a toolbar, a stray row — started at x=0 and slid
   underneath the rail (this is what clipped the "Add Employee" hero on
   /broadcast).

   The offset now lives on <main> instead, so EVERY child of the page is clear
   of the rail whether or not it opted in. The per-page margins are zeroed to
   stop them stacking on top of it. `.sp-has-rail` is set on <body> only when
   the rail renders, so guest and error screens are unaffected.
   -------------------------------------------------------------------------- */
body.sp-has-rail main {
    padding-left: 230px;
    box-sizing: border-box;
}

/* Neutralise the legacy per-page offsets now that <main> owns the job.
   These are the four wrapper classes TAMS pages use to clear the rail
   (.dash-container 225px, .main-content / .main-content-wrapper 250px,
   .tabcontent 260px) — left in place they would stack on top of the
   padding above and push content 450px+ to the right. */
body.sp-has-rail .dash-container,
body.sp-has-rail .main-content,
body.sp-has-rail .main-content-wrapper,
body.sp-has-rail .tabcontent {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Thirteen pages also hard-code `width: calc(100% - 254px)` as an INLINE style
   on the same wrapper — a second copy of the offset, sized against the old
   full-width <main>. Inside the padded <main> that subtracts the rail twice and
   strands ~254px of dead space down the right-hand edge of the page.
   `!important` is what lets a stylesheet beat an inline style, and `auto` lets
   the wrapper fill the content column the way a block element should. */
body.sp-has-rail .dash-container,
body.sp-has-rail .main-content,
body.sp-has-rail .main-content-wrapper,
body.sp-has-rail .tabcontent {
    width: auto !important;
    max-width: none !important;
}

body.sp-has-rail .tr-triple-nav {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}

/* The "Asset Record" band used `left: 255px` to clear the old rail. Inside an
   offset <main> that would push it a second time. */
body.sp-has-rail .tr-second-nav {
    left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* …but once it becomes position:fixed on scroll it leaves <main>'s padding
   behind, so it has to clear the rail on its own again. */
body.sp-has-rail .tr-second-nav.fixed-header {
    left: 230px !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
}

/* Mobile: the rail slides off-canvas, so the page reclaims the full width. */
@media (max-width: 991px) {

    body.sp-has-rail main,
    body.sp-has-rail .dash-container,
    body.sp-has-rail .main-content,
    body.sp-has-rail .main-content-wrapper,
    body.sp-has-rail .tabcontent {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    body.sp-has-rail .tr-second-nav.fixed-header {
        left: 0 !important;
    }

    /* No rail to butt against on mobile — the hero is a free-floating card
       again, so give it back its leading radius. */
    :where(.tr-second-nav, .my-activity-title, .page-header, .ml-page-header,
        .settings-hero, .mld-header, .module-header, .page-band, .sp-auto-hero) {
        border-radius: var(--sp-radius) !important;
    }
}

/* -----------------------------------------------------------------------------
   2. Header hierarchy
   -----------------------------------------------------------------------------
   TAMS grew a dozen bespoke header classes, each with its own gradient. They
   are normalised here onto the two Sales Pulse levels so the whole app reads
   as one system. Only paint is changed — inner markup and layout are untouched.

     Tier 1 — page hero .......... deep green gradient, one per screen
     Tier 2 — section band ....... teal gradient, repeats down the page
   -------------------------------------------------------------------------- */

/* ---- Tier 1: page hero -------------------------------------------------
   Square on the leading edge, rounded on the trailing edge: the band butts
   straight up against the sidebar rail, so a radius there only exposes a
   sliver of page background and reads as a misalignment. On mobile the rail
   slides away and the hero gets its left radius back (see below). */
:where(.tr-second-nav,
    .my-activity-title,
    .page-header,
    .ml-page-header,
    .settings-hero,
    .mld-header,
    .module-header,
    .page-band,
    .sp-auto-hero) {
    background: var(--sp-hero) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 var(--sp-radius) var(--sp-radius) 0 !important;
    box-shadow: var(--sp-shadow) !important;
    font-family: var(--sp-font) !important;
}

/* ---- Tier 2: section band ---------------------------------------------- */
:where(.modern-card-header,
    .section-header,
    .mlc-section-header,
    .contract-section-header,
    .qual-section-header,
    .reloc-section-header) {
    background: var(--sp-band) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--sp-radius-sm) !important;
    font-family: var(--sp-font) !important;
}

/* ---- Shared: titles, chips, subtitles on any band ---------------------- */
:where(.tr-second-nav, .my-activity-title, .page-header, .ml-page-header,
    .settings-hero, .mld-header, .module-header, .modern-card-header,
    .section-header, .mlc-section-header) :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--sp-font-display) !important;
    letter-spacing: .5px !important;
    color: #fff !important;
    font-weight: 400 !important;
    margin: 0 !important;
}

.modern-card-header h5 {
    font-size: 20px !important;
    line-height: 1.1 !important;
}

/* The hero title on pages that use a plain <div> rather than a heading. */
.settings-hero .sh-title,
.mld-header .mld-title,
.ml-page-header .title {
    font-family: var(--sp-font-display) !important;
    font-weight: 400 !important;
    letter-spacing: .5px !important;
    font-size: 25px !important;
    color: #fff !important;
}

/* Icon chip that leads a band. */
.modern-card-header h5 i,
.settings-hero .sh-ic,
.my-activity-title>i:first-child,
.section-header>i:first-child {
    background: rgba(255, 255, 255, .14) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 12px !important;
    color: #fff !important;
}

/* Subtitles / helper copy sitting on a band. */
:where(.tr-second-nav, .my-activity-title, .page-header, .ml-page-header,
    .settings-hero, .mld-header, .modern-card-header,
    .section-header) :where(.sub, .subtitle, .header-subtitle, .sh-sub, small, p) {
    color: var(--sp-sub-on-dark) !important;
}

/* ---- The "Asset Record" top bar --------------------------------------- */
.tr-second-nav {
    border-bottom: none !important;
}

.tr-second-nav .tr-username,
.tr-second-nav .current-asset-display>div,
.tr-second-nav .current-asset-display,
.tr-second-nav>div>div {
    color: #fff !important;
}

.tr-second-nav .tr-username {
    font-family: var(--sp-font-display) !important;
    font-size: 22px !important;
    letter-spacing: .6px !important;
    font-weight: 400 !important;
}

.tr-second-nav .user-section {
    background: rgba(255, 255, 255, .12) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 10px !important;
}

.tr-second-nav .user-section span i {
    color: var(--sp-gold) !important;
}

/* Muted text on the band has to lift off the dark green. */
.tr-second-nav .text-muted {
    color: var(--sp-sub-on-dark) !important;
}

/* Selects and inputs living inside the band keep their own light surface. */
.tr-second-nav .form-control,
.tr-second-nav .form-select,
.tr-second-nav select {
    background: rgba(255, 255, 255, .96) !important;
    color: var(--sp-text) !important;
    border: 1px solid rgba(255, 255, 255, .35) !important;
    border-radius: var(--sp-radius-sm) !important;
}

/* Buttons dropped into a hero stay legible on the gradient. */
:where(.tr-second-nav, .my-activity-title, .modern-card-header, .page-header) .btn:not(.btn-close) {
    background: rgba(255, 255, 255, .14) !important;
    border: 1px solid rgba(255, 255, 255, .24) !important;
    color: #fff !important;
}

:where(.tr-second-nav, .my-activity-title, .modern-card-header, .page-header) .btn:not(.btn-close):hover {
    background: rgba(255, 255, 255, .24) !important;
}

/* Pills / counters on a hero use the mono face, Sales Pulse style. */
:where(.tr-second-nav, .my-activity-title, .modern-card-header, .page-header) :where(.badge, .pill, .count-badge) {
    background: rgba(255, 255, 255, .16) !important;
    color: #fff !important;
    border-radius: 20px !important;
    font-family: var(--sp-font-mono) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
}

/* -----------------------------------------------------------------------------
   3. Cards & surfaces
   -------------------------------------------------------------------------- */
.modern-card,
.card,
.notification-dropdown,
.create-quote {
    background: var(--sp-card-bg) !important;
    border: 1px solid var(--sp-line) !important;
    border-radius: var(--sp-radius) !important;
    box-shadow: var(--sp-shadow-sm) !important;
}

.modern-card:hover,
.card:hover {
    box-shadow: var(--sp-shadow) !important;
}

/* Bootstrap card headers that are NOT one of the hero bands above. */
.card>.card-header,
.card-header,
.title {
    background: var(--sp-band) !important;
    color: #fff !important;
    border: none !important;
}

.card>.card-header h1,
.card>.card-header h2,
.card>.card-header h3,
.card>.card-header h4,
.card>.card-header h5,
.card>.card-header h6,
.card-header h5,
.card-header h6 {
    color: #fff !important;
    margin: 0 !important;
}

/* Upload / dashed drop zones pick up the teal accent instead of the old indigo. */
.upload-section-container {
    background: linear-gradient(135deg, #f3faf8 0%, #eef6f3 100%) !important;
    border: 2px dashed #c7e3da !important;
    border-radius: 14px !important;
}

.upload-section-container:hover {
    border-color: var(--sp-teal) !important;
    box-shadow: var(--sp-shadow-sm) !important;
}

.upload-section-title {
    color: var(--sp-ink) !important;
    font-family: var(--sp-font-display) !important;
    letter-spacing: .4px !important;
    font-weight: 400 !important;
}

.upload-section-title i {
    color: var(--sp-teal) !important;
}

.upload-instructions {
    border-left: 4px solid var(--sp-teal) !important;
    border-radius: var(--sp-radius-sm) !important;
}

.upload-instructions i {
    color: var(--sp-teal) !important;
}

.upload-card {
    border: 2px solid var(--sp-line) !important;
    border-radius: 12px !important;
}

.upload-card:hover {
    border-color: var(--sp-teal) !important;
    box-shadow: var(--sp-shadow) !important;
}

/* -----------------------------------------------------------------------------
   4. Forms
   -------------------------------------------------------------------------- */
.form-control,
.form-select {
    border-color: var(--sp-line) !important;
    border-radius: var(--sp-radius-sm) !important;
    color: var(--sp-text) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--sp-teal) !important;
    box-shadow: 0 0 0 3px rgba(0, 180, 154, .15) !important;
    outline: none !important;
}

.form-label i {
    color: var(--sp-teal) !important;
}

.input-group-text {
    background: var(--sp-band) !important;
    color: #fff !important;
    border-color: transparent !important;
}

.radio-option input[type="radio"],
input[type="checkbox"] {
    accent-color: var(--sp-teal) !important;
}

.form-check-input:checked {
    background-color: var(--sp-teal) !important;
    border-color: var(--sp-teal) !important;
}

.required::after,
.text-danger {
    color: #e5484d !important;
}

/* -----------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
    border-radius: var(--sp-radius-sm) !important;
    font-family: var(--sp-font) !important;
    font-weight: 600 !important;
}

.btn-primary,
.btn-success,
.btn-active {
    background: var(--sp-band) !important;
    border: none !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-active:hover {
    background: linear-gradient(135deg, #0f766e, #115e59) !important;
    color: #fff !important;
}

.btn-warning {
    background: linear-gradient(135deg, var(--sp-gold), #d99a12) !important;
    border: none !important;
    color: #3a2b06 !important;
}

.btn-outline-success {
    border: 1px solid var(--sp-teal) !important;
    color: var(--sp-teal) !important;
    background: transparent !important;
}

.btn-outline-success:hover {
    background: var(--sp-teal) !important;
    color: #fff !important;
}

.bg-primary,
.bg-success {
    background: var(--sp-band) !important;
}

.text-primary,
.text-success {
    color: var(--sp-teal-d) !important;
}

/* Ordinary links pick up the teal. */
a:not(.btn):not(.nav-link):not(.dash-link):not(.sp-link):not(.sp-sub-link):not(.tr-bg-sidenav-item a) {
    color: var(--sp-teal-d);
}

a:not(.btn):not(.nav-link):not(.dash-link):not(.sp-link):not(.sp-sub-link):hover {
    color: var(--sp-ink-2);
}

/* Floating AI assist bubble. */
.ai-assist {
    background: var(--sp-teal) !important;
    box-shadow: 0 6px 18px rgba(0, 180, 154, .35) !important;
}

/* -----------------------------------------------------------------------------
   6. Tables
   -------------------------------------------------------------------------- */
.table>thead,
.table>thead>tr>th,
.table thead th {
    background: var(--sp-ink) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .12) !important;
    font-family: var(--sp-font) !important;
    font-weight: 600 !important;
    letter-spacing: .02em !important;
}

.table>tbody>tr:hover>td {
    background: #f1f7f4 !important;
}

.table-card .card-header {
    background: var(--sp-band) !important;
}

/* Numeric cells read better in the mono face, matching Sales Pulse. */
.table td.num,
.table td.amount,
.sp-mono {
    font-family: var(--sp-font-mono) !important;
}

/* -----------------------------------------------------------------------------
   7. Tabs, pagination, progress
   -------------------------------------------------------------------------- */
.nav-tabs .active,
.nav-tabs .nav-link.active,
.nav-tabs .nav-link-tabs.active {
    background: var(--sp-ink) !important;
    color: #fff !important;
    border-color: transparent !important;
}

.tr-20 {
    background: linear-gradient(to right, var(--sp-ink) 50%, #eef2f0 50%) !important;
    background-size: 200% 100% !important;
    background-position: right bottom !important;
}

.tr-20:hover {
    background-position: left bottom !important;
    color: #fff !important;
}

.page-item.active .page-link {
    background-color: var(--sp-teal) !important;
    border-color: var(--sp-teal) !important;
    color: #fff !important;
}

.page-link {
    color: var(--sp-teal-d) !important;
}

#progressbar .active {
    color: var(--sp-teal-d) !important;
}

#progressbar li.active:before,
#progressbar li.active:after,
#progressbar li.qualified:before,
#progressbar li.qualified:after,
#progressbar li.won:before,
#progressbar li.won:after {
    background: var(--sp-teal) !important;
}

.progress-bar {
    background: var(--sp-band) !important;
}

/* -----------------------------------------------------------------------------
   8. Right-hand asset action rail (IQ/OQ/PQ, CMC/AMC, Calibrations …)
   -------------------------------------------------------------------------- */
.right-nav-fixed .tr-bg-sidenav-item {
    background: var(--sp-ink) !important;
    color: #fff !important;
    border-left: 3px solid var(--sp-teal) !important;
    border-radius: 10px 0 0 10px !important;
    box-shadow: var(--sp-shadow-sm) !important;
}

.right-nav-fixed .tr-bg-sidenav-item:hover {
    background: var(--sp-ink-2) !important;
    border-left-color: var(--sp-gold) !important;
}

.right-nav-fixed .tr-bg-sidenav-item span,
.right-nav-fixed .tr-bg-sidenav-item a {
    color: #fff !important;
}

.right-nav-fixed .tr-bg-sidenav-item i {
    color: var(--sp-gold) !important;
}

/* -----------------------------------------------------------------------------
   9. Modals, toasts, misc chrome
   -------------------------------------------------------------------------- */
.modal-content {
    border: none !important;
    border-radius: var(--sp-radius) !important;
    box-shadow: var(--sp-shadow-lg) !important;
    overflow: hidden !important;
}

.modal-header {
    background: var(--sp-hero) !important;
    color: #fff !important;
    border-bottom: none !important;
}

.modal-header .modal-title {
    color: #fff !important;
    font-family: var(--sp-font-display) !important;
    letter-spacing: .5px !important;
    font-weight: 400 !important;
}

.modal-header .btn-close {
    filter: invert(1) grayscale(1) brightness(2) !important;
}

.tams-toast.success {
    background: linear-gradient(135deg, var(--sp-teal), var(--sp-ink-2)) !important;
}

.search-span {
    background: var(--sp-teal) !important;
}

.user-section {
    border: 1px solid rgba(0, 180, 154, .35) !important;
    border-radius: 10px !important;
}

.user-section span i {
    color: var(--sp-teal) !important;
}

/* Thin top progress bar used during navigation. */
#sp-nav-bar {
    background: var(--sp-accent-line) !important;
}

/* -----------------------------------------------------------------------------
   10. Print — strip the dark bands so reports stay readable on paper.
   -------------------------------------------------------------------------- */
@media print {

    .tr-second-nav,
    .my-activity-title,
    .settings-hero,
    .page-header,
    .ml-page-header,
    .mld-header,
    .modern-card-header,
    .section-header,
    .card-header,
    .modal-header,
    .table thead th {
        background: #ffffff !important;
        color: #16211d !important;
        box-shadow: none !important;
    }

    .sp-side,
    .sp-mobile-btn,
    .right-nav-fixed,
    .ai-assist {
        display: none !important;
    }

    body.sp-has-rail main,
    body.sp-has-rail .dash-container,
    body.sp-has-rail .main-content,
    body.sp-has-rail .main-content-wrapper,
    body.sp-has-rail .tabcontent {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
}
