/* ==========================================================================
   QuickBillBook design system: tokens and base components.
   Shared by the business app, RI Super Admin and the public website.
   Brand colour comes from the QuickBillBook "G" logo (indigo).
   Components are prefixed .qbb- so they never collide with Bootstrap or
   the legacy theme classes used by existing pages.
   ========================================================================== */

:root {
    /* Brand */
    --qbb-primary: #3b2a93;
    --qbb-primary-hover: #2f2178;
    --qbb-primary-active: #261a63;
    --qbb-primary-50: #f3f1fc;
    --qbb-primary-100: #e6e1f8;
    --qbb-primary-200: #cbc2f0;
    --qbb-accent: #0f766e;
    --qbb-accent-50: #effaf8;

    /* Surfaces and text */
    --qbb-bg: #f5f6fa;
    --qbb-surface: #ffffff;
    --qbb-surface-2: #f9fafc;
    --qbb-surface-3: #f1f3f8;
    --qbb-border: #e4e7ef;
    --qbb-border-strong: #cfd4e0;
    --qbb-text: #141a2e;
    --qbb-text-2: #3a4258;
    --qbb-muted: #69728a;
    --qbb-placeholder: #9aa1b4;

    /* Status */
    --qbb-success: #15803d;
    --qbb-success-bg: #ecfdf3;
    --qbb-warning: #b45309;
    --qbb-warning-bg: #fff7ed;
    --qbb-danger: #b91c1c;
    --qbb-danger-bg: #fef2f2;
    --qbb-info: #0369a1;
    --qbb-info-bg: #f0f9ff;

    /* Navigation (dark sidebar) */
    --qbb-nav-bg: #1a1640;
    --qbb-nav-bg-2: #221d52;
    --qbb-nav-text: #d9d6f2;
    --qbb-nav-muted: #9a95c4;
    --qbb-nav-hover: rgba(255, 255, 255, 0.07);
    --qbb-nav-active-bg: rgba(140, 124, 240, 0.22);
    --qbb-nav-active-text: #ffffff;
    --qbb-nav-border: rgba(255, 255, 255, 0.08);

    /* Typography */
    --qbb-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --qbb-font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --qbb-text-xs: 0.75rem;
    --qbb-text-sm: 0.8125rem;
    --qbb-text-base: 0.875rem;
    --qbb-text-md: 1rem;
    --qbb-text-lg: 1.125rem;
    --qbb-text-xl: 1.375rem;
    --qbb-text-2xl: 1.75rem;
    --qbb-weight-regular: 400;
    --qbb-weight-medium: 500;
    --qbb-weight-semibold: 600;
    --qbb-weight-bold: 700;

    /* Spacing (4px grid) */
    --qbb-space-1: 4px;
    --qbb-space-2: 8px;
    --qbb-space-3: 12px;
    --qbb-space-4: 16px;
    --qbb-space-5: 20px;
    --qbb-space-6: 24px;
    --qbb-space-8: 32px;
    --qbb-space-10: 40px;

    /* Shape and depth */
    --qbb-radius-sm: 6px;
    --qbb-radius: 8px;
    --qbb-radius-lg: 12px;
    --qbb-radius-pill: 999px;
    --qbb-shadow-sm: 0 1px 2px rgba(20, 26, 46, 0.06);
    --qbb-shadow: 0 1px 3px rgba(20, 26, 46, 0.08), 0 1px 2px rgba(20, 26, 46, 0.04);
    --qbb-shadow-md: 0 6px 16px rgba(20, 26, 46, 0.10);
    --qbb-shadow-lg: 0 16px 40px rgba(20, 26, 46, 0.16);
    --qbb-focus: 0 0 0 3px rgba(59, 42, 147, 0.28);

    /* Layout */
    --qbb-topbar-h: 60px;
    --qbb-sidebar-w: 256px;
    --qbb-sidebar-w-collapsed: 72px;
    --qbb-z-topbar: 1030;
    --qbb-z-sidebar: 1040;
    --qbb-z-overlay: 1035;
    --qbb-z-dropdown: 1050;

    --qbb-transition: 160ms ease;
}

/* Components size themselves the same way with or without Bootstrap's reset. */
.qbb-btn, .qbb-input, .qbb-select, .qbb-card, .qbb-dropdown-menu { box-sizing: border-box; }

/* ---------- Buttons ---------- */
.qbb-btn {
    align-items: center;
    background: var(--qbb-surface);
    border: 1px solid var(--qbb-border-strong);
    border-radius: var(--qbb-radius);
    color: var(--qbb-text);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--qbb-font);
    font-size: var(--qbb-text-base);
    font-weight: var(--qbb-weight-medium);
    gap: var(--qbb-space-2);
    justify-content: center;
    line-height: 1.2;
    min-height: 36px;
    padding: 8px 14px;
    text-decoration: none;
    transition: background var(--qbb-transition), border-color var(--qbb-transition), color var(--qbb-transition);
    white-space: nowrap;
}
.qbb-btn:hover { background: var(--qbb-surface-3); color: var(--qbb-text); text-decoration: none; }
.qbb-btn:focus-visible { box-shadow: var(--qbb-focus); outline: none; }
.qbb-btn:disabled, .qbb-btn.is-disabled { cursor: not-allowed; opacity: 0.55; }
.qbb-btn-primary { background: var(--qbb-primary); border-color: var(--qbb-primary); color: #fff; }
.qbb-btn-primary:hover { background: var(--qbb-primary-hover); border-color: var(--qbb-primary-hover); color: #fff; }
.qbb-btn-primary:active { background: var(--qbb-primary-active); }
.qbb-btn-ghost { background: transparent; border-color: transparent; color: var(--qbb-text-2); }
.qbb-btn-ghost:hover { background: var(--qbb-surface-3); }
.qbb-btn-danger { background: var(--qbb-danger); border-color: var(--qbb-danger); color: #fff; }
.qbb-btn-sm { font-size: var(--qbb-text-sm); min-height: 30px; padding: 5px 10px; }
.qbb-btn-icon { min-height: 38px; min-width: 38px; padding: 0; }

/* ---------- Inputs ---------- */
.qbb-input, .qbb-select {
    background: var(--qbb-surface);
    border: 1px solid var(--qbb-border-strong);
    border-radius: var(--qbb-radius);
    color: var(--qbb-text);
    font-family: var(--qbb-font);
    font-size: var(--qbb-text-base);
    min-height: 38px;
    padding: 8px 12px;
    transition: border-color var(--qbb-transition), box-shadow var(--qbb-transition);
    width: 100%;
}
.qbb-input::placeholder { color: var(--qbb-placeholder); }
.qbb-input:focus, .qbb-select:focus { border-color: var(--qbb-primary); box-shadow: var(--qbb-focus); outline: none; }
.qbb-label { color: var(--qbb-text-2); display: block; font-size: var(--qbb-text-sm); font-weight: var(--qbb-weight-medium); margin-bottom: var(--qbb-space-1); }
.qbb-label .qbb-required { color: var(--qbb-danger); margin-left: 2px; }
.qbb-field-error { color: var(--qbb-danger); font-size: var(--qbb-text-sm); margin-top: var(--qbb-space-1); }

/* ---------- Cards ---------- */
.qbb-card {
    background: var(--qbb-surface);
    border: 1px solid var(--qbb-border);
    border-radius: var(--qbb-radius-lg);
    box-shadow: var(--qbb-shadow-sm);
}
.qbb-card-header { align-items: center; border-bottom: 1px solid var(--qbb-border); display: flex; gap: var(--qbb-space-3); justify-content: space-between; padding: var(--qbb-space-4) var(--qbb-space-5); }
.qbb-card-title { color: var(--qbb-text); font-size: var(--qbb-text-md); font-weight: var(--qbb-weight-semibold); margin: 0; }
.qbb-card-body { padding: var(--qbb-space-5); }

/* ---------- Badges and chips ---------- */
.qbb-badge {
    align-items: center;
    background: var(--qbb-surface-3);
    border-radius: var(--qbb-radius-pill);
    color: var(--qbb-text-2);
    display: inline-flex;
    font-size: var(--qbb-text-xs);
    font-weight: var(--qbb-weight-semibold);
    gap: 4px;
    line-height: 1;
    padding: 4px 8px;
    white-space: nowrap;
}
.qbb-badge-success { background: var(--qbb-success-bg); color: var(--qbb-success); }
.qbb-badge-warning { background: var(--qbb-warning-bg); color: var(--qbb-warning); }
.qbb-badge-danger { background: var(--qbb-danger-bg); color: var(--qbb-danger); }
.qbb-badge-info { background: var(--qbb-info-bg); color: var(--qbb-info); }
.qbb-badge-primary { background: var(--qbb-primary-50); color: var(--qbb-primary); }

/* ---------- Dropdowns (driven by qbb-shell.js, not Bootstrap) ---------- */
.qbb-dropdown { position: relative; }
.qbb-dropdown-menu {
    background: var(--qbb-surface);
    border: 1px solid var(--qbb-border);
    border-radius: var(--qbb-radius-lg);
    box-shadow: var(--qbb-shadow-lg);
    display: none;
    min-width: 240px;
    padding: var(--qbb-space-2);
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: var(--qbb-z-dropdown);
}
.qbb-dropdown.is-open > .qbb-dropdown-menu { display: block; }
.qbb-dropdown-label { color: var(--qbb-muted); font-size: var(--qbb-text-xs); font-weight: var(--qbb-weight-semibold); letter-spacing: 0.04em; padding: 8px 10px 4px; text-transform: uppercase; }
.qbb-dropdown-item {
    align-items: center;
    border-radius: var(--qbb-radius-sm);
    color: var(--qbb-text);
    display: flex;
    font-size: var(--qbb-text-base);
    gap: 10px;
    padding: 8px 10px;
    text-decoration: none;
}
.qbb-dropdown-item:hover, .qbb-dropdown-item:focus-visible { background: var(--qbb-surface-3); color: var(--qbb-text); outline: none; text-decoration: none; }
.qbb-dropdown-item i { color: var(--qbb-muted); text-align: center; width: 18px; }
.qbb-dropdown-item .qbb-dropdown-meta { color: var(--qbb-muted); font-size: var(--qbb-text-sm); margin-left: auto; }
.qbb-dropdown-divider { border-top: 1px solid var(--qbb-border); margin: var(--qbb-space-2) 0; }

/* ---------- States ---------- */
.qbb-skeleton {
    animation: qbb-pulse 1.4s ease-in-out infinite;
    background: linear-gradient(90deg, var(--qbb-surface-3) 0%, #e9ecf3 50%, var(--qbb-surface-3) 100%);
    background-size: 200% 100%;
    border-radius: var(--qbb-radius-sm);
    min-height: 14px;
}
@keyframes qbb-pulse { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.qbb-empty { color: var(--qbb-muted); padding: var(--qbb-space-8) var(--qbb-space-4); text-align: center; }
.qbb-empty-title { color: var(--qbb-text); font-size: var(--qbb-text-md); font-weight: var(--qbb-weight-semibold); margin-bottom: var(--qbb-space-1); }
.qbb-sr-only { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }

@media (prefers-reduced-motion: reduce) {
    .qbb-skeleton { animation: none; }
    * { scroll-behavior: auto !important; }
}