/* Popup design tokens for iSyncWeb.
   The shared block below is the single source of truth for popup sizing and
   colour in both products; the iSyncWeb-only rules follow it. */

/* >>> POPUP TOKENS: SHARED BLOCK — keep byte-identical in both products <<<
   Files that must match, character for character, between the markers:
     iSyncDriveWeb/src/global.css
     iSyncWeb/webApp/static/assets/css/popup-tokens.css
   iSyncWeb and iSyncDriveWeb ship the same dialogs to the same users, so both
   products read every popup value from here. Change one, change the other, and
   run scripts/check_popup_tokens.py (present in both repos) to prove they match.

   Values come from the New Folder dialog, the only popup built against the
   Figma spec; every other popup in both products is aligned to it.

   Scope note: this block defines tokens only — no `*`, no `body`, no
   page-level selectors. Adding any would restyle whole pages instead of the
   popups. */
:root {
  /* Surface */
  --popup-font: "Segoe UI", Arial, sans-serif;
  --popup-scrim: rgba(0, 0, 0, 0.45);
  --popup-bg: #ffffff;
  --popup-radius: 18px;
  --popup-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  --popup-max-height: 85vh;
  --popup-divider: #e5e7eb;

  /* Stacking. Dialogs sit above every page chrome in both products;
     --popup-z-top is only for a dialog opened on top of another dialog. */
  --popup-z: 100000001;
  --popup-z-top: 100000030;

  /* Type */
  --popup-title-color: #1f2a3b;
  --popup-text-color: #6b7280;
  --popup-title-size: 18px;
  --popup-title-weight: 600;
  --popup-body-size: 14px;
  --popup-label-size: 13px;   /* field labels, table cells inside a dialog */
  --popup-caption-size: 12px; /* hints, sub-titles */

  /* Buttons: size */
  --popup-btn-height: 44px;
  --popup-btn-size: 16px;
  --popup-btn-radius: 8px;

  /* Buttons: primary (confirm / OK / save) */
  --popup-primary: #55bbe2;
  --popup-primary-hover: #3faedb;
  --popup-primary-text: #ffffff;

  /* Buttons: destructive (delete / empty trash / deny) */
  --popup-danger: #dc2626;
  --popup-danger-hover: #b91c1c;
  --popup-danger-text: #ffffff;

  /* Accent: links, focus rings, active tabs and anything else inside a dialog
     that needs the brand blue without being a filled button. */
  --popup-accent: #2c9ac7;
  --popup-accent-soft: rgba(44, 154, 199, 0.12);

  /* Buttons: cancel — outlined, never filled, so it cannot compete with the
     primary action. Figma: 1px border, weight 400. */
  --popup-cancel-bg: #ffffff;
  --popup-cancel-border: var(--popup-accent);
  --popup-cancel-text: var(--popup-accent);
  --popup-cancel-hover: rgba(44, 154, 199, 0.08);

  /* Status colours — for alert icons and inline status text, NOT for buttons.
     A destructive button uses --popup-danger; an error icon uses --popup-error. */
  --popup-success: #22c55e;
  --popup-error: #ef4444;
  --popup-warning: #f59e0b;
  --popup-info: #2c9ac7;

  /* Close (×) control: a bordered circle holding a 16px SVG cross. */
  --popup-close-box: 34px;
  --popup-close-border: #9aa0a6;
  --popup-close-color: #6b7280;
  --popup-close-hover: #f3f4f6;
  --popup-close-glyph: 26px; /* legacy text-× dialogs only; SVG ones ignore it */

  /* Alert icon (the big success / error / info circle) */
  --popup-icon-size: 68px;
}

/* One responsive step for every popup. Individual popups used to scale
   themselves at 420px / 520px with different numbers; the tokens keep them
   in step instead. */
@media (max-width: 520px) {
  :root {
    --popup-radius: 12px;
    --popup-title-size: 16px;
    --popup-btn-height: 40px;
    --popup-btn-size: 14px;
    --popup-close-box: 30px;
    --popup-close-glyph: 22px;
    --popup-icon-size: 56px;
  }
}
/* >>> END POPUP TOKENS SHARED BLOCK <<< */
/* ── iSyncWeb-only ────────────────────────────────────────────────────────
   Nothing below has a counterpart in iSyncDriveWeb: React ships no competing
   page stylesheet, so it needs none of the specificity work here. */

/* Dialog text inputs. Two of the three popups carrying one were already
   44px/10px; Add Member was 38px/6px. */
:root {
  --popup-input-height: 44px;
  --popup-input-radius: 10px;
}

/* Dialog text uses the popup font whatever the page body font is. Left at one
   class on purpose: at two it also outranked Font Awesome's `.fa`, which sets
   the icon font on the element the glyph is drawn from, and every icon in a
   dialog became an empty box. One class does the job, because outranking
   inherited text needs no specificity - any direct rule wins that. */
.popup-surface,
.popup-surface * {
  font-family: var(--popup-font);
}

/* Icon fonts keep their own family: the glyph sits at a private-use codepoint
   no text font can draw. Two classes, so this holds whether the icon
   stylesheet loads before or after this file - and an injected fragment loads
   last of all. Family only; Font Awesome's weight rules pick the face. */
.popup-surface .fa,
.popup-surface .fas,
.popup-surface .far,
.popup-surface .fal,
.popup-surface .fad {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
}

.popup-surface .fab {
  font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands";
}

/* One dialog layer for both kinds of popup. Bootstrap parks its own at
   1040/1050, under page chrome that runs to 999999, so the sidebar toggle,
   page loader and menus punched through an open modal and stayed lit and
   clickable. Class repeated because Bootstrap's rule loads after this file on
   some pages and would otherwise win the tie. */
.modal-backdrop.modal-backdrop {
  z-index: calc(var(--popup-z) - 1);
}

.modal.modal {
  z-index: var(--popup-z);
}