/* ============================================================
   FileGru — Design Foundation (2026 "Modern SaaS")
   Loaded on every surface after the app CSS so it upgrades the
   base look (type, color, surfaces, states) using the tokens in
   colors.css. Keep surface-specific rules out of here.
   ============================================================ */

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    color: var(--text);
    background-color: var(--canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text);
}
p { text-wrap: pretty; }
.text-muted { color: var(--text-muted) !important; }
a { transition: color .15s ease; }
:focus-visible { outline: none; }

/* Tabular figures for data-heavy UI */
.table, .badge, .fm-item-meta, .clojsgroup-counter-card-number,
.dash-storage-text, .clojsgroup-notification-text, td, th {
    font-variant-numeric: tabular-nums;
}

/* ---------- Buttons ---------- */
.btn {
    font-family: var(--font-sans);
    font-weight: 500;
    border-radius: var(--r-sm);
    transition: transform .12s ease, box-shadow .2s ease,
        background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn:focus-visible { box-shadow: var(--ring); }
.btn-primary,
.btn-gradient {
    background: var(--primaryColor);
    border-color: var(--primaryColor);
    color: #fff;
}
.btn-primary:hover,
.btn-gradient:hover {
    background: var(--secondaryColor);
    border-color: var(--secondaryColor);
    color: #fff;
    box-shadow: var(--shadow);
}
.btn-light, .btn-white {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
}
.btn-light:hover, .btn-white:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--text);
}
.btn-secondary {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
}
.btn-secondary:hover {
    background: var(--surface-3);
    border-color: var(--border-strong);
    color: var(--text);
}
.btn-outline-primary { color: var(--primaryColor); border-color: var(--primaryColor); }
.btn-outline-primary:hover { background: var(--primaryColor); border-color: var(--primaryColor); color: #fff; }

/* ---------- Inputs ---------- */
.form-control, .form-select {
    border-radius: var(--r-sm);
    border-color: var(--border);
    background-color: var(--surface);
    color: var(--text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
    border-color: var(--primaryColor);
    box-shadow: var(--ring);
}
.form-control::placeholder { color: var(--text-soft); }
.form-check-input:checked { background-color: var(--primaryColor); border-color: var(--primaryColor); }
.form-check-input:focus { border-color: var(--primaryColor); box-shadow: var(--ring); }

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    background: var(--surface);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}
.card-footer { background: transparent; border-top: 1px solid var(--border); }

/* ---------- Tables ---------- */
.table { color: var(--text); --bs-table-bg: transparent; }
.table > :not(caption) > * > * { border-bottom-color: var(--border); }
.table thead th {
    color: var(--text-soft);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom-color: var(--border);
}
tbody tr { transition: background-color .12s ease; }
tbody tr:hover { background-color: var(--surface-2); }

/* ---------- Dropdowns / modals / popovers ---------- */
.dropdown-menu {
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
    padding: 6px;
}
.dropdown-item {
    border-radius: var(--r-sm);
    padding: 8px 10px;
    font-size: 14px;
    transition: background-color .12s ease, color .12s ease;
}
.dropdown-item:hover { background: var(--surface-2); }
.dropdown-item:active, .dropdown-item.active { background: var(--primaryColor); color: #fff; }
.modal-content { border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.modal-header, .modal-footer { border-color: var(--border); }

/* ---------- Badges ---------- */
.badge { font-weight: 600; border-radius: 999px; padding: .4em .72em; letter-spacing: .01em; }

/* ---------- Accent utilities (kept in sync with tokens) ---------- */
.text-primary { color: var(--primaryColor) !important; }
.bg-primary { background-color: var(--primaryColor) !important; }
.border-primary { border-color: var(--primaryColor) !important; }

/* ---------- Scrollbar polish (webkit) ---------- */
* { scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-soft); background-clip: content-box; }

/* ============================================================
   GLOBAL CHROME — the ONE place that controls header/footer
   thickness site-wide. foundation.css is loaded by every layout
   (public, auth, user dash, checkout single, preview, admin,
   errors), so edit thickness HERE, not in per-area files.
   ============================================================ */

/* Public site chrome — ONE bar, identical 54px height everywhere. Auth + checkout
   match the navy interior header so the brand chrome is consistent across every
   public page (marketing, legal, download, login/register, checkout). Fixed height
   (not padding) so inner content can never make one bar taller than another. */
.nav-bar, .sign-header, .single-page-navbar {
    height: 54px !important;
    display: flex;
    align-items: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.sign-header, .single-page-navbar { background-color: #232464 !important; }
.sign-header .logo img, .single-page-navbar .logo img { max-height: 30px; }
/* White only on the bare chrome (logo + language trigger) — NOT the dropdown menu
   items (white menu) or the Sign Up button, which keep their own styling. */
.sign-header .logo, .single-page-navbar .logo,
.sign-header .language > button, .sign-header .language > button i, .sign-header .language > button span,
.single-page-navbar .language > button, .single-page-navbar .language > button i, .single-page-navbar .language > button span {
    color: #fff !important;
}
/* Auth (login/register) + checkout header CTA — make the Sign In / Sign Up button
   the SAME solid white pill as the marketing header, so the button is identical on
   every page instead of a grey-bordered rectangle. */
.sign-header .btn, .single-page-navbar .btn {
    border-radius: 999px !important;
    font-weight: 600 !important;
    padding: .5rem 1.15rem !important;
    background: #fff !important;
    border: 1px solid #fff !important;
    color: #1e2233 !important;
}
.sign-header .btn:hover, .single-page-navbar .btn:hover { background: rgba(255, 255, 255, .88) !important; color: #1e2233 !important; }

/* File preview top bar */
.fileviewer-nav { height: auto !important; padding: 6px 14px !important; }

/* User dashboard top bar + fixed sidebar offset. The dashboard is a deliberate
   light "app shell" (colour lives in user.css); GLOBAL CHROME only fixes its
   height so it stays 54px like every other bar. */
.dash .dash-navbar { height: 54px !important; display: flex; align-items: center; }
.dash { padding-top: 54px !important; }
.dash .dash-sidebar, .dash .dash-sidebar .dash-sidebar-container { top: 54px; }

/* Footers — every layout variant. One consistent public footer: transparent so it
   blends with the page canvas identically on every layout (marketing, auth,
   download, legal), with a subtle divider and the same 14px thickness. */
.footer { height: auto !important; padding-top: 14px !important; padding-bottom: 14px !important; font-size: 13px; background: var(--surface) !important; border-top: 1px solid var(--border) !important; }
.footer p { margin-bottom: 0 !important; }
.dash .dash-page-footer { padding-top: 8px !important; padding-bottom: 8px !important; font-size: 13px; }
.clojsgroup-page-content footer, .clojsgroup-footer { height: auto !important; display: flex; align-items: center; gap: 12px; padding-top: 8px !important; padding-bottom: 8px !important; font-size: 13px; }
.clojsgroup-page-content footer p { margin-bottom: 0 !important; }

/* ============================================================
   SLIM CONTROLS — the theme's buttons, inputs and cards are chunky.
   Trim them to a tighter thin scale site-wide (navy/white minimal).
   ============================================================ */
.btn { padding: .44rem .95rem; font-size: 14px; font-weight: 600; line-height: 1.4; border-radius: var(--r-sm); }
.btn-lg { padding: .56rem 1.25rem; font-size: 15px; }
.btn-md { padding: .44rem 1rem; font-size: 14px; }
.btn-sm { padding: .3rem .72rem; font-size: 13px; }
.form-control, .form-select { min-height: 40px; height: auto; padding: .5rem .8rem; font-size: 14px; }
.form-control-lg, .form-select-lg { min-height: 44px; padding: .55rem .9rem; font-size: 14px; }
textarea.form-control { min-height: 88px; }
.form-label { font-size: 13px; margin-bottom: .35rem; font-weight: 500; }
.input-group-text { font-size: 14px; padding: .5rem .8rem; }

/* ============================================================
   MICRO-INTERACTIONS — tactile buttons, visible keyboard focus,
   balanced headlines, smooth anchors. (Redesign audit pass.)
   ============================================================ */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Buttons feel physical: smooth hover, press-down on click */
.btn { transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .12s ease; }
.btn:active { transform: scale(.98); }

/* Keyboard focus is always visible (amber ring = the signal color) */
.btn:focus-visible,
a:focus-visible,
[data-bs-toggle]:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--signal-soft, rgba(34, 197, 94, .3)) !important;
}

/* Headlines never strand a single orphan word */
h1, h2, .h1, .h2,
.hero-title,
.section-content-title { text-wrap: balance; }