@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* Assore blue (dominant brand colour, sampled from the logo).
       Overridden at runtime by <brand-theme/> from appsettings Branding.Theme. */
    --botash-primary: #103890;
    --botash-primary-80: rgb(12 42 110);   /* #0C2A6E darker blue - topbar / gradients */
    --botash-primary-50: rgb(120 140 190); /* mid tint */
    --botash-primary-20: rgb(207 214 232); /* light tint / borders */
    /* Highlight = light-blue facet from the logo (hover fills, links) */
    --botash-highlight: #50A8D8;
    --botash-highlight-80: rgba(80, 168, 216, 0.8);
    --botash-highlight-50: rgba(80, 168, 216, 0.5);
    --botash-highlight-20: rgba(80, 168, 216, 0.2);
    /* Assore red - secondary brand accent (active states, key CTAs) */
    --botash-accent-red: #E30613;
    /* Ink / near-black (wordmark colour) */
    --botash-black: #181818;
    --botash-black-80: rgba(24, 24, 24, 0.8);
    --botash-black-50: rgba(24, 24, 24, 0.5);
    --botash-black-20: rgba(24, 24, 24, 0.2);
}
* {
    font-family: 'Inter', sans-serif;
}
.side-nav-disabled {
    color: var(--botash-primary, #103890) !important;
    cursor:default !important;
}
.tab-pane {
    overflow: auto !important;
}

/*Home Page Styles*/
#topbar, button.carousel-control-prev {
    background-color: var(--botash-primary) !important;
}

.carousel-content-btn1 {
    background-color: var(--botash-primary-80) !important;
}
.carousel-content-btn1:hover {
    background-color: var(--botash-highlight) !important;
}
.value-image {
    max-width: 120px !important;
}

 .services-content::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    border-radius: 20px !important;
    background: var(--botash-highlight-80) !important;
    transition: .5s;
}

.services-content::after {
    top: 0;
    bottom: auto;
    border-radius: 20px;
}

.services-item:hover .services-content::after {
    height: 100%;
    opacity: 1;
    transition: .5s;
    background-color: var(--botash-highlight-80) !important;
}

.services-item:hover .services-content-icon h4 {
    color: var(--bs-white);
}
.services-item {
    border: none !important;
    box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.26) !important;
}

/*Authed Layout styles*/
.tab-content .btn-primary {
    background-color: var(--botash-primary);
    border-color: var(--botash-primary);
}

body {
    display: flex;
    flex-direction: column;
    overscroll-behavior-x: none;
}

footer{
    margin-top: auto;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif !important;
}
p{
    font-family: 'Inter', sans-serif;
}

.text-primary {
    color: var(--botash-primary, #103890) !important;
}

/*CSS for toggling top nav options*/
.sm-devices {
    display:none !important;
}
.lg-devices{
    margin-right: 0px;
}

@media (max-width: 1004px) {
    .sm-devices {
        display: block !important;
        display:flex !important;
        flex-direction:row !important;
        align-items: center !important;
    }

    .toggler-btn {
        background-color: var(--botash-black-20);
        margin: 0px 0px 0px 15px !important;
        padding: 10px 15px 10px 15px;
        border-radius: 8px;
    }

    .lg-devices{
        display:none !important;
    }

    .tab-pane {
        overflow-x: scroll;
    }
}

.custom-pulse{
    animation: bn-pulse 1.7s infinite
}

@keyframes bn-pulse {
    0% {
        transform: scale(0.95);
    }

    70% {
        transform: scale(1.10);
    }

    100% {
        transform: scale(0.95);
    }
}


/* Conditional onboarding fields: the rules engine toggles this class.
   Without it, every conditional reveal/hide silently did nothing. */
.hidden { display: none !important; }


/* Vendor profile tabs: keep all nine on one line (no orphan 'Declarations' row).
   Tightened padding; scrolls horizontally only on very narrow screens. */
#w12 {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
#w12 .nav-item { flex: 0 0 auto; }
#w12 .nav-link {
    white-space: nowrap;
    padding-left: .7rem;
    padding-right: .7rem;
}
@media (max-width: 1200px) {
    #w12 .nav-link { padding-left: .5rem; padding-right: .5rem; font-size: .92rem; }
}


/* ============================================================
   CHANGE LOG 2A — DESIGN SYSTEM
   One action colour. No green anywhere. Colour only means something.
   ============================================================ */
:root{
  --brand-primary:#164298;   /* the one action colour: buttons, links, progress, headings */
  --brand-light:#8AA8D5;     /* focus rings, hover, selected rows, tinted panels */
  --accent-red:#C72E25;      /* errors, expired, missing, the required asterisk */
  --ink:#333333;             /* body text AND the footer background */
  --ink-muted:#666666;       /* labels, help text, placeholders, "not started" */
  --line:#D8D8D8;            /* borders, dividers, table rules */
  --surface:#FFFFFF;         /* replaces every black block */

  /* map the legacy variables onto the new palette so every existing rule follows */
  --botash-primary:#164298;
  --botash-primary-80:#123578;
  --botash-highlight:#8AA8D5;
  --botash-accent-red:#C72E25;
  --botash-black:#333333;
}

/* CR-047: green is removed from the portal. Every green control becomes deep blue. */
.btn-success,.btn-outline-success,.bg-success,.badge.bg-success{
  background-color:var(--brand-primary)!important;
  border-color:var(--brand-primary)!important;
  color:#fff!important;
}
.text-success{ color:var(--brand-primary)!important; }
/* Profile/tab completion ticks stay green (success), independent of the brand-blue
   .text-success override above and of any inherited nav-link text colour. */
.tab-complete-tick{ color:#103890!important; }  /* Assore dark blue (was green) */
.bg-success-subtle{ background-color:#EAF0FA!important; }
.border-success-subtle{ border-color:var(--brand-light)!important; }
.progress-bar{ background-color:var(--brand-primary)!important; }

/* CR-045 / typography: nothing above weight 500 exists in the portal */
body{ font-weight:300; color:var(--ink); }
h1,.h1{ font-size:20px; font-weight:500; }
h2,.h2{ font-size:17px; font-weight:500; }
h3,.h3,h5,.h5,h6,.h6{ font-size:15px; font-weight:500; }
b,strong,.fw-bold,.fw-semibold,.fw-bolder{ font-weight:500!important; }
.btn{ font-weight:400; }

/* CR-046: sentence case — no arbitrary ALL CAPS titles */
h1,h2,h3,h4,h5,h6,.card-header h6,.card-ttl{ text-transform:none!important; letter-spacing:normal!important; }

/* CR-049 / footer: charcoal, not black */
footer,.app-footer,.footer{ background:var(--ink)!important; color:#fff; border-top:1px solid var(--line); }
footer a,.app-footer a{ color:var(--brand-light)!important; }

/* Signed-in pages use a minimal WHITE footer so the logo reads properly. This must out-specify
   the charcoal rule above (footer.footer-authed beats footer), hence the repeated !important. */
footer.footer-authed{ background:#ffffff!important; color:#000000!important; border-top:1px solid var(--line); }
footer.footer-authed *{ color:#000000!important; }
footer.footer-authed a{ color:#000000!important; }

/* Buttons: primary filled, secondary outlined, cancel is a text button (2A) */
.btn-primary{ background-color:var(--brand-primary); border-color:var(--brand-primary); }
.btn-outline-secondary{ color:var(--brand-primary); border-color:var(--brand-primary); }
.btn-secondary[data-bs-dismiss],.btn-cancel{ background:none!important; border:none!important; color:var(--ink-muted)!important; }

/* Required asterisk + errors: the one red */
.text-danger,.required-star{ color:var(--accent-red)!important; }

/* CR-052: the form grid must not clip its own labels */
.tab-content,.tab-pane,.card-body{ overflow-x:visible; }
.tab-pane > .row,.card-body > .row{ margin-left:0; margin-right:0; }


/* CR-050: no separator line under the logo. CR-051: no shortcut link beside it. */
.app-sidepanel .sidepanel-inner > .app-branding,
.app-branding { border-bottom: none !important; box-shadow: none !important; }
.app-branding .app-logo + a,
.app-branding .logo-shortcut { display: none !important; }

/* CR-052: the form grid must not clip its own labels (the "ame" / "lobile" bug).
   The wrapper was clipping instead of containing — nothing may overflow-hidden a form row. */
.tab-content, .tab-pane, .card-body, .app-content { overflow-x: visible !important; }
.tab-pane .row, .card-body .row { margin-left: 0; margin-right: 0; }
.tab-pane .row > [class^="col-"], .card-body .row > [class^="col-"] { padding-left: .75rem; padding-right: .75rem; }

/* Form controls (2A): hints are plain, not blue monospace; empty dates render empty. */
.form-text { font-size: 12px; color: var(--ink-muted); font-family: inherit; }
input[type="date"]::-webkit-datetime-edit { color: var(--ink); }
input[type="date"]:invalid::-webkit-datetime-edit { color: transparent; }

/* Tables (2A): no black label columns; every table gets a readable empty state. */
.table thead th { background: #F7F9FB !important; color: var(--ink-muted) !important; font-weight: 500; }
.table .empty-state { color: var(--ink-muted); text-align: center; padding: 2rem 1rem; }

/* ── Assore status colours ────────────────────────────────────────────────
   Completion is Assore dark blue (#103890), outstanding items are Assore red
   (#E30613). These replace the previous green/amber so the tab strip, banners
   and progress bars all read in the corporate palette. */
.tab-complete-tick    { color:#103890!important; }
.tab-outstanding-tick { color:#E30613!important; }

.tab-complete-banner {
    background:#EAF0FB!important;
    border:1px solid #103890!important;
    color:#103890!important;
}
.tab-complete-banner i { color:#103890!important; }

/* ── Form field text ──────────────────────────────────────────────────────
   Values the vendor types read black on white for maximum legibility, instead
   of the lighter brand blue that was previously inherited. Placeholders stay
   grey so they remain distinguishable from entered values. */
.form-control, .form-select, textarea.form-control {
    color:#000000!important;
    background-color:#ffffff!important;
}
.form-control::placeholder, textarea.form-control::placeholder { color:#8a94a6!important; }
.form-control:disabled, .form-select:disabled,
.form-control[readonly], .form-select[readonly] {
    color:#000000!important;
    background-color:#f3f5f9!important;   /* still clearly non-editable */
}