/* ============================================================
   Proculix Portal Colour Overrides
   Metronic Tailwind Demo5 — Portal-specific CSS variables
   ============================================================ */

/* Layout dimension variables
   [--sidebar-width:240px] is NOT in Metronic's compiled bundle (only 58/90/200/270/290px
   variants are compiled). Without this, var(--sidebar-width) resolves to undefined → width:auto.
   When KTSticky makes the inner sidebar div position:fixed, the empty outer flex placeholder
   collapses to 0px and <main> expands left into the sidebar area — content goes behind sidebar.
   Setting it on :root ensures every descendant inherits the correct value. */
:root {
    --sidebar-width: 240px;
}

/* Global Tailwind v4 border-style fix — belt-and-suspenders.
   @property already registers --tw-border-style with initial-value:solid, but this
   ensures the value is explicitly set on every element via the universal selector. */
*, ::before, ::after {
    --tw-border-style: solid;
}

/* IC Portal — Blue #1A4FBF
   Overrides --primary which is what bg-primary/text-primary use */
.portal-ic {
    --primary: #1A4FBF;
    --primary-foreground: #ffffff;
}

/* Client Portal — Gray #374151 */
.portal-client {
    --primary: #374151;
    --primary-foreground: #ffffff;
}

/* Vendor Portal — Green #166534 */
.portal-vendor {
    --primary: #166534;
    --primary-foreground: #ffffff;
}

/* Login page portal badge colours */
.portal-badge-ic {
    background: #EBF0FB;
    color: #1A4FBF;
    border: 1px solid #C0D0F0;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    font-weight: 500;
}
.portal-badge-client {
    background: #F0F0F2;
    color: #374151;
    border: 1px solid #D0D0D8;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    font-weight: 500;
}
.portal-badge-vendor {
    background: #F0FDF4;
    color: #166534;
    border: 1px solid #C6F3D5;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    font-weight: 500;
}

/* Header wordmark logo */
.proculix-logo {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}
.proculix-logo sup {
    font-size: 0.55em;
    vertical-align: super;
}

/* Mobile sidebar drawer fix
   In Metronic's compiled CSS, .hidden (line 745) comes after .flex (line 739),
   so display:none beats display:flex when both classes are present.
   Once KTDrawer initialises on mobile it adds the kt-drawer class — the higher
   specificity of this ID+class selector ensures display:flex wins. */
#sidebar.kt-drawer {
    display: flex;
}

/* Menu link icon-to-label gap
   Metronic's kt-menu-link is flex but gap isn't set in the compiled bundle */
.kt-menu-link {
    gap: 0.5rem;
}

/* Header CSS-sticky fix + border
   KTSticky fires at 100px and adds position:fixed to the header, removing it from flow.
   The compensating padding class in-data-kt-[sticky-header=on]:pt-(--header-height) on
   the outer wrapper is NOT in Metronic's compiled CSS bundle (same issue as sidebar-width)
   — so the 54px gap is never restored. Content jumps up 54px = scroll bounce.
   The class toggle also causes the shadow/backdrop transition to flicker on every tick.
   Fix: position:sticky keeps the header in flow at all times — no gap, no compensation,
   no bounce, no flicker. KTSticky's .fixed class addition becomes inert. */
#header {
    position: sticky !important;
    top: 0 !important;
    z-index: 10;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: var(--border);
}

/* Sidebar scroll-bounce fix
   KTSticky fires at 150px and adds position:fixed (via class="fixed") to the sidebar
   inner div, which removes it from normal flow and causes a layout reflow on every
   scroll tick. KTScrollable compounds this by recalculating and setting inline
   max-height on #sidebar_scrollable on every scroll event. Together these DOM
   mutations trigger the browser's scroll anchoring algorithm, snapping the page back.

   Fix: override KTSticky's position:fixed with position:sticky via !important so the
   browser handles stickiness natively without JS DOM mutations. Also suppress
   KTScrollable's inline max-height so it stops mutating the DOM on scroll. */
#sidebar > div[data-kt-sticky] {
    position: sticky !important;
    top: var(--header-height, 54px);
    height: calc(100vh - var(--header-height, 54px));
    overflow-y: auto;
}
#sidebar_scrollable {
    max-height: none !important;
    overflow-y: visible;
}

/* Content flex-grow fix
   kt-container-fluid has flex-grow:1 baked in. When placed as a direct child of
   <main class="flex flex-col grow">, every kt-container-fluid section grows to fill
   the remaining height — leaving large blank gaps on short-content pages.
   Fix: reset flex-grow to 0 for all direct children so each section takes only its
   natural height. */
#content > * {
    flex-grow: 0;
    flex-shrink: 0;
}

/* Missing Tailwind colour utilities
   Metronic's compiled bundle only includes classes used in its own templates.
   bg-success/10, bg-warning/10, bg-info/10, text-success, text-warning, text-info
   are not referenced in Demo5 source, so they are silently absent.
   Values match Metronic's kt-badge colour palette for consistency. */
/* w-fit / w-max not compiled in Metronic's bundle */
.w-fit { width: fit-content; }
.w-max { width: max-content; }

/* whitespace-pre-wrap / whitespace-pre-line not compiled in Metronic's bundle.
   Used in RFQ show view to honour newlines in specifications / long_description fields. */
.whitespace-pre-wrap { white-space: pre-wrap; }
.whitespace-pre-line { white-space: pre-line; }

.bg-success\/10 { background-color: rgb(34 197 94 / 0.1); }
.bg-warning\/10 { background-color: rgb(245 158 11 / 0.1); }
.bg-info\/10    { background-color: rgb(59 130 246 / 0.1); }
.text-success   { color: rgb(22 163 74) !important; }
.text-warning   { color: rgb(217 119 6) !important; }
.text-info      { color: rgb(37 99 235) !important; }

/* kt-tabs-line layout fix
   kt-tabs uses display:flex flex-direction:row (side-by-side sidebar layout).
   kt-tabs-line variant should stack tabs on top of content (top nav pattern).
   Override to display:block so the tab nav row sits above the tab panels. */
.kt-tabs-line {
    display: block !important;
}

/* kt-tabs-line tab toggle styles — not compiled in Metronic bundle
   Provides the active blue underline indicator and hover colour for tab buttons */
.kt-tab-toggle {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--secondary-foreground, #6b7280);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
    cursor: pointer;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    padding-left: 0;
    padding-right: 0;
}
.kt-tab-toggle:hover {
    color: var(--primary, #1A4FBF);
}
.kt-tab-toggle.active {
    color: var(--primary, #1A4FBF);
    border-bottom-color: var(--primary, #1A4FBF);
    font-weight: 600;
}

/* Auth page logo */
.proculix-auth-logo {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.proculix-auth-logo sup {
    font-size: 0.6em;
    vertical-align: super;
}

/* ============================================================
   Fee Calculator — Range Slider
   Native HTML5 range input styled for the CPP Fee Calculator.
   ============================================================ */
.fee-calc-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--border, #e5e7eb);
    outline: none;
    cursor: pointer;
}
.fee-calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary, #1A4FBF);
    border: 3px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    cursor: pointer;
}
.fee-calc-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary, #1A4FBF);
    border: 3px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    cursor: pointer;
}

/* ============================================================
   Fee Calculator — Timeline Visual (Redesigned)
   Proportion bar + vertical milestone list.
   ============================================================ */

/* Proportion bar zones */
.fee-tl-zone { transition: width 0.3s ease; min-width: 0; }
.fee-tl-zone--risk   { background: rgb(239 68 68 / 0.15); }
.fee-tl-zone--credit { background: rgb(59 130 246 / 0.15); }

/* Vertical milestone — dot */
.fee-tl-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
    flex-shrink: 0;
    z-index: 2;
    position: relative;
}
.fee-tl-dot--destructive { background: rgb(239 68 68); }
.fee-tl-dot--warning     { background: rgb(245 158 11); }
.fee-tl-dot--info        { background: rgb(59 130 246); }
.fee-tl-dot--success     { background: rgb(34 197 94); }

/* Vertical milestone — connector line */
.fee-tl-line {
    width: 2px;
    flex-shrink: 0;
    min-height: 24px;
}
.fee-tl-line--risk   { background: rgb(239 68 68 / 0.25); }
.fee-tl-line--credit { background: rgb(59 130 246 / 0.25); }
.fee-tl-line--same   { background: rgb(156 163 175 / 0.3); min-height: 6px; height: 6px; }

/* Track container */
.fee-tl-track {
    width: 12px;
    align-items: center;
    flex-shrink: 0;
}

/* Event labels */
.fee-tl-event-label {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
}
.fee-tl-event-label--destructive { color: rgb(239 68 68); }
.fee-tl-event-label--warning     { color: rgb(217 119 6); }
.fee-tl-event-label--info        { color: rgb(37 99 235); }
.fee-tl-event-label--success     { color: rgb(22 163 74); }

.fee-tl-event-day {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--secondary-foreground, #6b7280);
    line-height: 1;
}

.fee-tl-event-sub {
    font-size: 0.625rem;
    color: var(--muted-foreground, #9ca3af);
    line-height: 1.3;
    margin-top: 1px;
    padding-bottom: 2px;
}

/* "same day" badge */
.fee-tl-same-badge {
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(139 92 246);
    background: rgb(139 92 246 / 0.1);
    padding: 1px 5px;
    border-radius: 3px;
    line-height: 1.2;
}

/* Phase segment rows (between milestones) */
.fee-tl-phase-content {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}
.fee-tl-phase-label {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--muted-foreground, #9ca3af);
    font-style: italic;
}
.fee-tl-phase-days {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--secondary-foreground, #6b7280);
}

/* Content column alignment */
.fee-tl-content {
    margin-top: -1px;
}

/* ============================================================
   Fee Calculator — Gauge Text
   Override ApexCharts default font for the radialBar value label.
   ============================================================ */
#fee_gauge_chart .apexcharts-datalabel-value {
    font-weight: 700;
    font-family: 'Inter', sans-serif;
}

/* text-2xs is already in Metronic's compiled bundle at 0.6875rem — no override needed */

/* ============================================================
   Clickable table rows — mild hover highlight
   ============================================================ */
tr[data-href]:hover td {
    background-color: color-mix(in srgb, var(--muted) 60%, transparent);
    transition: background-color 0.1s ease;
}

/* ============================================================
   Email Thread — Bubble Styles
   Used in the vendor inquiry email thread tab (Module 03-EX).
   ============================================================ */

/* Reset inherited styles inside HTML email body content */
.email-body-content {
    font-size: 0.875rem;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: break-word;
}
.email-body-content p {
    margin-bottom: 0.5rem;
}
.email-body-content p:last-child {
    margin-bottom: 0;
}
.email-body-content a {
    color: var(--primary, #1A4FBF);
    text-decoration: underline;
}
.email-body-content img {
    max-width: 100%;
    height: auto;
}
.email-body-content table {
    font-size: inherit;
    border-collapse: collapse;
}
.email-body-content table td,
.email-body-content table th {
    padding: 4px 8px;
    border: 1px solid var(--border, #e5e7eb);
}

/* ============================================================
   Email Compose — Recipient Chips
   ============================================================ */
.compose-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8125rem;
    background: rgba(26, 79, 191, 0.08);
    border: 1px solid rgba(26, 79, 191, 0.15);
    color: #1A4FBF;
    line-height: 1.4;
}
.compose-chip-remove {
    cursor: pointer;
    opacity: 0.6;
    font-size: 14px;
    line-height: 1;
}
.compose-chip-remove:hover {
    opacity: 1;
    color: #dc2626;
}

/* TinyMCE container fit */
.tox-tinymce {
    border-radius: 0.375rem !important;
    border-color: var(--border, #e5e7eb) !important;
}

/* Animate spin for send button loading */
.animate-spin {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================================
   Notification dropdown — line-clamp utility
   Not compiled by Metronic Demo5 — needed for notification text truncation.
   ============================================================ */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}