/* ================================================================
   04_components.css
   Shared UI components: buttons, modals, badges, dividers,
   spinners, search bar, multi-dropdown, flags, login, auth mobile
   ================================================================ */

/* ── Modal Close Button (was: modal.css) ─────────────────────── */
.custom-modal .btn-close {
    filter: invert(1) brightness(2);
    opacity: 1;
}

/* ── Toolbar Divider (was: divider.css) ──────────────────────── */
/* assets/_card_helpers.css */
.toolbar-divider {
  border-left: 1px solid #00509e;
  height: 1.5rem;                /* roughly header text height */
  display: inline-block;
  top: 10px;
  margin-top: 0.50rem;
}
/* ── Login Spinner (was: login.css) ──────────────────────────── */

.login-spinner.dash-spinner-container {
    background: rgba(0, 0, 0, 0) !important;      /* fully transparent */
}


/* ── Search Bar (was: search_bar.css) ────────────────────────── */
/* In assets/*.css, e.g. app.css */
:root {
  --pi-control-height: 32px;
  --pi-control-radius: 6px;
  --pi-color-primary: #0066cc;
  --pi-color-border-subtle: #cfd8e3;
  --pi-color-border-strong: #b8c9e6;
  --pi-color-text: #111827;
  --pi-color-placeholder: #6b7280;
  --pi-color-disabled-bg: #f5f5f5;
  --pi-color-disabled-text: #9ca3af;
}

/* Wrapper so we can place the clear button inside the input */
.pi-search-wrap{
  position: relative;
  width: 100%;
}

/* Generic search input used next to action buttons */
.pi-search-input{
  display: block;
  width: 100%;
  max-width: 100%;

  height: var(--pi-control-height);

  /* left padding for the search icon + right padding for the clear button */
  padding: 0 44px 0 36px;

  font-size: 0.95rem;
  line-height: 1.5;

  border-radius: var(--pi-control-radius);
  border: 1px solid var(--pi-color-border-strong);
  background-color: #ffffff;
  color: var(--pi-color-text);

  /* built-in search icon to visually connect with blue buttons */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230066cc'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11 5a6 6 0 014.472 10.027l3.75 3.75a.75.75 0 11-1.06 1.06l-3.75-3.75A6 6 0 1111 5z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px 50%;
  background-size: 23px 23px;

  box-shadow: none;
  outline: none;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background-color .15s ease;
}

/* Placeholder – readable but clearly secondary */
.pi-search-input::placeholder{
  color: var(--pi-color-placeholder);
  opacity: 1;
}

/* Hover – light affordance, keeps alignment with button outlines */
.pi-search-input:hover:not(:disabled):not(:focus){
  border-color: var(--pi-color-primary);
  background-color: #f5f8ff;
}

/* Focus – strong, consistent blue ring like primary buttons */
.pi-search-input:focus{
  border-color: var(--pi-color-primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.16);
  background-color: #ffffff;
}

/* Disabled state */
.pi-search-input:disabled{
  background-color: var(--pi-color-disabled-bg);
  color: var(--pi-color-disabled-text);
  border-color: var(--pi-color-border-subtle);
  cursor: not-allowed;
  background-image: none; /* remove icon in disabled state */
}

/* Clear “×” button inside the input (consistent + more visible) */
.pi-search-clear{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);

  width: 20px;
  height: 20px;

  border: 0;
  padding: 0;

  /* match the rest of the system */
  border-radius: var(--pi-control-radius);

  /* a bit less subtle by default */
  color: #374151;
  background: rgba(0, 102, 204, 0.06);

  display: none; /* hidden by default */
  align-items: center;
  justify-content: center;

  line-height: 1;
  font-size: 19px;
  font-weight: 600;
  cursor: pointer;

  transition:
    background-color .15s ease,
    color .15s ease,
    box-shadow .15s ease,
    transform .05s ease;
}

/* Show the X only when input has text (CSS-only toggle) */
.pi-search-input:not(:placeholder-shown) ~ .pi-search-clear{
  display: flex;
}

/* Hover – more obvious + consistent radius */
.pi-search-clear:hover{
  background: rgba(0, 102, 204, 0.12);
  color: var(--pi-color-primary);
}

/* Keyboard focus */
.pi-search-clear:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.16);
}

/* Press feedback */
.pi-search-clear:active{
  transform: translateY(-50%) scale(0.97);
}

/* ── Multi-Select Dropdown (was: multi_drop.css) ─────────────── */
/* ──────────────────────────────────────────────────────────────
   1 · Card header – lock overall height (32 px)
   ────────────────────────────────────────────────────────────── */
.custom-card-header {
    /* keep the usual Bootstrap paddings but fix the total height */
    height: 34px;            /* = 24 px content + 2 × 4 px padding */
    display: flex;
    align-items: center;     /* vertical‑centre everything */
    padding: 4px 8px;        /* = py‑1 px‑2 */
}

/* the inner <Row> & <Col> inherit the centring */
.custom-card-header .row,
.custom-card-header .col { align-items: center; }

/* ──────────────────────────────────────────────────────────────
   2 · “Select Chains” pill – must not outgrow 24 px
   ────────────────────────────────────────────────────────────── */
/* ──────────────────────────────────────────────────────────────
   Chain selector pill  –  visually matches .export-button
   Header height remains 32 px (see .custom-card-header rule)
   ────────────────────────────────────────────────────────────── *//* ──────────────────────────────────────────────────────────────
   Chain selector pill – visually identical to .export-button
   but in the primary blue brand colour                         */
.export-button,
.chain-btn {
    /* colors — blue variant */
    color: var(--blue-600);                /* text  */
    background-color: #fff;                /* white background */
    border: 0.5px solid var(--blue-600);   /* same blue border */

    /* box model — keep identical to .export-button */
    height: 30px;
    font-weight: 500;
    font-size: 1.05rem;
    line-height: normal;
    padding: 0.45rem 0.75rem 0.5rem;

    /* flex helpers */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* elevation + transition */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.10);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* hover / active state */
.export-button:hover,
.export-button:active,
.chain-btn:hover,
.chain-btn:active,
.chain-btn.active {
    color: #fff;
    background-color: var(--blue-600);
    border-color: var(--blue-600);
    text-decoration: none;                 /* keep text crisp */
}

/* (unchanged) Popover tidy‑up – checklist edges align perfectly */
#chain-popover .popover-body { padding: 0; }

/* ── Loading Spinners (was: z_solid_spinner.css) ─────────────── */
/* z_solid_spinner.css (or wherever your spinner CSS lives) */

/* While the branded #loader (logo + progress bar) is on screen,
   suppress the inline circle spinners so only one loader is visible. */
body.page-transitioning .dash-spinner,
body.page-transitioning .loader {
    display: none !important;
}

/* 1) Use brand ring for BOTH our custom .loader and all dcc.Loading spinners */
.loader,
.dash-spinner {
    width: 48px;
    height: 48px;
    border: 5px solid var(--accent-color);  /* or var(--secondary-color) */
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

/* 2) Hide the built-in rectangles/dots in default/circle/cube/etc */
.dash-spinner > * {
    display: none !important;
}

/* 3) Shared keyframes */
@keyframes rotation {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* AG-Grid custom loader - matches your existing spinner style */
.ag-custom-loader {
    width: 48px;
    height: 48px;
    border: 5px solid var(--accent-color, #00509e);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

/* Reuse your existing rotation keyframes */
@keyframes rotation {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Optional: Style the overlay background */
.ag-overlay-loading-wrapper {
    background-color: rgba(255, 255, 255, 0.9);
}

.spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── Distributor toggle button (forecast card header) ─────────── */
.si-dist-toggle {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 6px;
    line-height: 1.4;
    border: 1px solid #00509e;
    color: #00509e;
    background: transparent;
    transition: background-color .15s, color .15s;
}
.si-dist-toggle:hover {
    background: rgba(0, 80, 158, 0.08);
    color: #003366;
    border-color: #003366;
}
.si-dist-toggle--active,
.si-dist-toggle--active:hover {
    background: #00509e;
    color: #fff;
    border-color: #00509e;
}

/* ── Sales Insights filter chips ──────────────────────────────── */
.si-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}

.si-chip-label {
    opacity: .6;
}

/* Non-clearable (e.g. Group) */
.si-chip--context {
    background: var(--blue-050, #f0f4f8);
    color: var(--text-2, #334155);
    border: 1px solid var(--border-subtle, #cbd5e1);
    cursor: default;
}

/* Clearable filter chip */
.si-chip--filter {
    background: var(--blue-050, #e8f0fe);
    color: var(--blue-700, #1a56db);
    border: 1px solid #c7d8f4;
    cursor: pointer;
    outline: none;
    font-family: inherit;
}
.si-chip--filter:hover {
    background: #dbeafe;
    border-color: #93b4e8;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.si-chip--filter:active {
    background: #c7d8f4;
}

/* Close icon inside filter chip */
.si-chip__x {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    opacity: .45;
    transition: opacity .15s;
}
.si-chip--filter:hover .si-chip__x {
    opacity: .85;
}

/* Clear filters button */
.si-clear-filters {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 10px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    background: none;
    border: 1px solid transparent;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: color .15s, background-color .15s;
    font-family: inherit;
    outline: none;
}
.si-clear-filters:hover {
    color: var(--red-600, #dc2626);
    background: rgba(220,38,38,.06);
}

/* Thin vertical divider between Filters button and chips */
.si-chip-divider {
    width: 1px;
    height: 20px;
    background: var(--border-subtle, #d1d8e8);
    flex-shrink: 0;
}

/* ── Smooth fade-in for charts & KPIs ─────────────────────────── */
/* Replaces extra dcc.Loading spinners; content fades in once
   the Dash callback populates the container.                      */
@keyframes siFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.si-fade-in .js-plotly-plot,
.si-fade-in > .row,
.si-fade-in > .card,
.si-fade-in > div > .row,
.si-fade-in > .mb-2 {
    animation: siFadeIn .35s ease-out both;
}

/* Prevent Plotly autosize overflow during initial render */
.si-fade-in {
    overflow: hidden;
    max-width: 100%;
}

/* ── Auth Mobile Fixes (was: z_auth_mobile.css) ──────────────── */
/* Mobile-only fixes for auth overlays (keeps desktop unchanged) */
@media (max-width: 576px) {

  /* Prevent the overlay from being wider than the viewport due to padding */
  #login-overlay,
  #register-overlay,
  #forgot-overlay {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;

    /* Optional: better when keyboard opens */
    align-items: flex-start !important;
  }

  /* Make the card fit inside the overlay on phones */
  #login-card,
  #register-card,
  #forgot-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;

    /* Slightly less padding on small screens */
    padding: 18px !important;

    /* Give breathing room from the top when align-items:flex-start */
    margin-top: 24px !important;
  }

  /* Scale the logo down only on mobile (desktop stays big) */
  .auth-logo {
    height: auto !important;
    width: min(340px, 85vw) !important;
    max-width: 100% !important;
    margin: 0 auto 1.25rem !important;
    display: block !important;
  }

  /* Inputs must never overflow */
  .auth-card .form-control,
  .auth-card input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Footer links: wrap cleanly on mobile and remove forced margins */
  .auth-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  .auth-links .btn {
    margin: 0 !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }
}

/* ── Orchestrator Timeline (was: z_orchestrator.css) ─────────── */
/* keeps the whole bar tidy */
.timeline-bar { column-gap: .75rem; }

/* subtle, always-centered hairline divider */
.timeline-divider {
  width: 1px;
  height: 18px;                 /* match icon size */
  background-color: var(--bs-border-color);
  display: inline-block;
  align-self: center;
}

/* de-emphasized meta text */
.timeline-secondary {
  color: var(--bs-secondary-color);
  font-weight: 500;             /* optional: a touch for readability */
}