/* =====================================================================
   KW Billing — Design tokens, reset, typography
   ===================================================================== */

:root {
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-light: #eff6ff;

    --success: #16a34a;
    --success-light: #f0fdf4;

    --warning: #d97706;
    --warning-light: #fffbeb;

    --danger: #dc2626;
    --danger-light: #fef2f2;

    --text: #111827;
    --text-secondary: #6b7280;

    --background: #f8fafc;
    --surface: #ffffff;

    --border: #e5e7eb;

    --sidebar-width: 240px;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .06);

    --control-height: 42px;
}

/* ---------------------------------------------------------------------
   Reset
   --------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                 Arial, "Noto Sans", sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .5rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.1rem; }

p { margin: 0 0 1rem; }

a {
    color: var(--primary);
    text-decoration: none;
}
a:hover { color: var(--primary-hover); text-decoration: underline; }

img { max-width: 100%; height: auto; }

hr { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; }

/* ---------------------------------------------------------------------
   Bootstrap overrides — align the framework with our tokens
   --------------------------------------------------------------------- */
:root {
    --bs-primary: #2563eb;
    --bs-primary-rgb: 37, 99, 235;
    --bs-body-color: #111827;
    --bs-body-bg: #f8fafc;
    --bs-border-color: #e5e7eb;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto,
                          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --bs-link-color: #2563eb;
    --bs-link-hover-color: #1d4ed8;
}

.text-secondary { color: var(--text-secondary) !important; }
.text-muted     { color: var(--text-secondary) !important; }

/* ---------------------------------------------------------------------
   Scrollbar
   --------------------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
    border: 3px solid var(--background);
}
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ---------------------------------------------------------------------
   Accessibility helpers
   --------------------------------------------------------------------- */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* ---------------------------------------------------------------------
   Print
   --------------------------------------------------------------------- */
@media print {
    .app-sidebar,
    .app-topbar,
    .app-footer,
    .no-print { display: none !important; }

    body { background: #fff; }
    .app-main { margin-left: 0 !important; }
    .app-content { padding: 0 !important; }
}