/* ================================================================
   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); }
}
/* ── 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 */
}