/* ──────────────────────────────────────────────────────────────────────────
   tokens.css — Design tokens for the PlusDigital3d app
   Loaded BEFORE app.css and dark-theme.css.
   Variables prefixed --pd-* (project namespace).
   Bootstrap 5 breakpoints: sm 576, md 768, lg 992, xl 1200, xxl 1400.
   ────────────────────────────────────────────────────────────────────────── */

:root {
    /* ─── Typography ─── */
    --pd-font-sans: 'Source Sans 3', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --pd-font-display: 'Outfit', system-ui, sans-serif;
    --pd-font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Consolas, monospace;

    --pd-fs-xs: 0.75rem;     /* 12px */
    --pd-fs-sm: 0.875rem;    /* 14px */
    --pd-fs-base: 1rem;      /* 16px */
    --pd-fs-lg: 1.125rem;    /* 18px */
    --pd-fs-xl: 1.375rem;    /* 22px */
    --pd-fs-2xl: 1.75rem;    /* 28px */
    --pd-fs-3xl: 2.25rem;    /* 36px */

    --pd-lh-tight: 1.25;
    --pd-lh-normal: 1.5;
    --pd-lh-relaxed: 1.65;

    --pd-fw-regular: 400;
    --pd-fw-medium: 500;
    --pd-fw-semibold: 600;
    --pd-fw-bold: 700;

    /* ─── Spacing scale (4px grid) ─── */
    --pd-space-1: 0.25rem;
    --pd-space-2: 0.5rem;
    --pd-space-3: 0.75rem;
    --pd-space-4: 1rem;
    --pd-space-5: 1.5rem;
    --pd-space-6: 2rem;
    --pd-space-7: 3rem;

    /* ─── Palette (light) ─── */
    --pd-color-bg: #ffffff;
    --pd-color-surface: #f7f8fa;
    --pd-color-surface-2: #eef0f3;
    --pd-color-border: #e2e5e9;
    --pd-color-border-strong: #c8ccd2;
    --pd-color-text: #1a1d21;
    --pd-color-text-muted: #6b7280;
    --pd-color-text-subtle: #9aa1ab;

    --pd-color-brand: #052767;
    --pd-color-brand-2: #3a0647;
    --pd-color-accent: #d4a843;
    --pd-color-primary: #1b6ec2;
    --pd-color-success: #10b981;
    --pd-color-danger: #ef4444;
    --pd-color-warning: #f59e0b;
    --pd-color-info: #06b6d4;

    /* ─── Touch targets (mobile guideline: 44px iOS / 48dp Material) ─── */
    --pd-tap-min: 44px;

    /* ─── Border radius ─── */
    --pd-radius-sm: 0.375rem;
    --pd-radius-md: 0.5rem;
    --pd-radius-lg: 0.75rem;
    --pd-radius-xl: 1rem;
    --pd-radius-pill: 999px;

    /* ─── Shadows ─── */
    --pd-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --pd-shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);
    --pd-shadow-md: 0 4px 14px rgba(15, 23, 42, 0.08);
    --pd-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
    --pd-shadow-overlay: 0 24px 48px rgba(0, 0, 0, 0.35);

    /* ─── Motion ─── */
    --pd-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --pd-dur-fast: 120ms;
    --pd-dur-base: 200ms;
    --pd-dur-slow: 320ms;

    /* ─── Z-index scale (Bootstrap modals are 1050, toasts 1090) ─── */
    --pd-z-drawer-backdrop: 1040;
    --pd-z-drawer: 1045;
    --pd-z-sticky: 1020;
}

/* ─── Global typography (replaces previous Helvetica fallback) ─── */
html,
body {
    font-family: var(--pd-font-sans);
    font-size: var(--pd-fs-base);
    line-height: var(--pd-lh-normal);
    color: var(--pd-color-text);
}

h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-3 {
    font-family: var(--pd-font-display);
    font-weight: var(--pd-fw-semibold);
    letter-spacing: -0.01em;
}

/* ─── Touch target safety net (mobile only) ───
   Bootstrap's -sm modifiers shrink controls below the 44px tap guideline.
   On <md viewports we re-inflate them so anything not yet migrated remains usable. */
@media (max-width: 767.98px) {
    .btn-sm,
    .form-control-sm,
    .form-select-sm {
        min-height: var(--pd-tap-min);
        padding-block: 0.5rem;
        font-size: var(--pd-fs-base);
    }

    .btn {
        min-height: var(--pd-tap-min);
    }
}

/* ─── Drawer (mobile-only navigation) ─── */
.pd-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(85vw, 320px);
    background-image: linear-gradient(180deg, var(--pd-color-brand) 0%, var(--pd-color-brand-2) 70%);
    z-index: var(--pd-z-drawer);
    transform: translateX(-100%);
    transition: transform var(--pd-dur-base) var(--pd-ease);
    overflow-y: auto;
    box-shadow: var(--pd-shadow-overlay);
}

.pd-drawer.is-open {
    transform: translateX(0);
}

.pd-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--pd-z-drawer-backdrop);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--pd-dur-base) var(--pd-ease);
}

.pd-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.pd-burger {
    border: 0;
    background: transparent;
    color: inherit;
    width: var(--pd-tap-min);
    height: var(--pd-tap-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--pd-radius-md);
    transition: background-color var(--pd-dur-fast) var(--pd-ease);
}

.pd-burger:hover,
.pd-burger:focus-visible {
    background: rgba(0, 0, 0, 0.06);
    outline: none;
}

@media (min-width: 768px) {
    .pd-drawer,
    .pd-drawer-backdrop {
        display: none;
    }

    .pd-burger {
        display: none !important;
    }
}

/* ─── Modal shell (sticky header/footer + fullscreen on mobile) ─── */
.pd-modal .modal-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bs-modal-bg, var(--pd-color-bg));
    border-bottom: 1px solid var(--bs-border-color, var(--pd-color-border));
}

.pd-modal .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: var(--bs-modal-bg, var(--pd-color-bg));
    border-top: 1px solid var(--bs-border-color, var(--pd-color-border));
}

@media (max-width: 767.98px) {
    .pd-modal .modal-body {
        padding: var(--pd-space-4);
    }

    .pd-modal .modal-footer {
        padding: var(--pd-space-3) var(--pd-space-4);
    }

    .pd-modal .modal-footer .btn {
        flex: 1 1 0;
        min-height: var(--pd-tap-min);
    }
}

/* ─── Card-stack: data tables become stacked cards on mobile ───
   Pattern: same <table> in markup, switched to block layout via CSS.
   Each <td data-label="…"> shows its label as a pseudo-element on the left. */
@media (max-width: 767.98px) {
    .pd-stack {
        border: none;
        background: transparent;
    }

    /* Visually hide thead but keep it for screen readers */
    .pd-stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .pd-stack,
    .pd-stack tbody,
    .pd-stack tr,
    .pd-stack td {
        display: block;
        width: 100%;
    }

    .pd-stack tbody tr {
        background: var(--pd-color-surface);
        border: 1px solid var(--pd-color-border);
        border-radius: var(--pd-radius-md);
        box-shadow: var(--pd-shadow-xs);
        margin-bottom: var(--pd-space-3);
        padding: var(--pd-space-3) var(--pd-space-4);
    }

    .pd-stack tbody td {
        padding: 0.35rem 0;
        border: 0;
        text-align: right;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: var(--pd-space-3);
        /* !important needed to override Bootstrap's .text-truncate utility
           and inline style="max-width:NNpx" that some <td> use for desktop. */
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: none !important;
        word-break: break-word;
    }

    .pd-stack tbody td::before {
        content: attr(data-label);
        text-align: left;
        color: var(--pd-color-text-muted);
        font-weight: var(--pd-fw-medium);
        font-size: var(--pd-fs-sm);
        flex: 0 0 40%;
    }

    /* Action button row spans full width without label */
    .pd-stack tbody td.pd-cell-actions {
        justify-content: flex-end;
        border-top: 1px solid var(--pd-color-border);
        margin-top: var(--pd-space-2);
        padding-top: var(--pd-space-2);
    }

    .pd-stack tbody td.pd-cell-actions::before {
        display: none;
    }

    /* tfoot becomes a separate summary card */
    .pd-stack tfoot {
        display: block;
    }

    .pd-stack tfoot tr {
        display: block;
        background: var(--pd-color-surface-2);
        border: 1px solid var(--pd-color-border-strong);
        border-radius: var(--pd-radius-md);
        padding: var(--pd-space-3) var(--pd-space-4);
        margin-top: var(--pd-space-3);
    }

    .pd-stack tfoot td {
        display: flex;
        justify-content: space-between;
        border: 0;
        padding: 0.25rem 0;
    }

    .pd-stack tfoot td[colspan]::before {
        content: "";
    }

    /* Suppress horizontal scrollbar of the wrapper since rows are stacked */
    .table-responsive:has(> .pd-stack) {
        overflow-x: visible;
    }
}

/* ─── Micro-interactions ─── */
.pd-card-hover {
    transition: transform var(--pd-dur-fast) var(--pd-ease),
                box-shadow var(--pd-dur-fast) var(--pd-ease);
}

.pd-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--pd-shadow-md);
}

/* Improve focus rings (keyboard-only, not on mouse click) */
:focus-visible {
    outline: 2px solid var(--pd-color-primary);
    outline-offset: 2px;
}