/* =====================================================================
   PROACTIVE.RMS — one theme for every screen.
   Change a colour, size or font HERE and every page follows.

   Load in App.razor <head>, AFTER bootstrap and app.css, BEFORE PROACTIVE.RMS.styles.css:
       <link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" />
       <link rel="stylesheet" href="@Assets["app.css"]" />
       <link rel="stylesheet" href="@Assets["css/theme.css"]" />          ← add
       <link rel="stylesheet" href="@Assets["PROACTIVE.RMS.styles.css"]" />

   Every page's .razor.css uses these variables:  color: var(--rms-text);  font-size: var(--fs-sm); …
   ===================================================================== */

:root {
    /* ---------- font ---------- */
    --rms-font: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
    --rms-font-num: 'Segoe UI', system-ui, sans-serif;          /* numbers: use with font-variant-numeric: tabular-nums */

    /* ---------- font sizes (only these 8) ---------- */
    --fs-xs:   11px;    /* badges, tile captions */
    --fs-sm:   12px;    /* hints, chips, table headers */
    --fs-s:    13px;    /* labels, secondary text, small buttons */
    --fs-base: 14px;    /* body text, inputs, buttons */
    --fs-md:   16px;    /* card values, hotel name */
    --fs-lg:   18px;    /* page titles, large numbers */
    --fs-xl:   22px;    /* tariff / room number */
    --fs-xxl:  26px;    /* hero numbers */

    --fw-normal: 400;
    --fw-medium: 600;
    --fw-bold:   700;

    /* ---------- brand ---------- */
    --rms-navy:        #1A2B5F;    /* sidebar, headers, primary dark */
    --rms-navy-dark:   #13204A;
    --rms-navy-hover:  #22367A;
    --rms-accent:      #E0A82E;    /* small highlights only (active menu bar) */

    /* ---------- surfaces & text ---------- */
    --rms-bg:          #EEF2F7;    /* page background behind cards */
    --rms-surface:     #FFFFFF;    /* cards, inputs */
    --rms-surface-2:   #F6F8FA;    /* inset areas, table headers */
    --rms-border:      #DDE3EA;
    --rms-border-strong: #C6CED8;  /* inputs */
    --rms-text:        #1F2937;
    --rms-text-2:      #475467;    /* secondary text */
    --rms-text-muted:  #5C6670;    /* hints (4.5:1 on white) */
    --rms-text-disabled: #8A929E;
    --rms-gray-200:    #E9ECEF;
    --rms-gray-400:    #ADB5BD;
    --rms-gray:        #6C757D;

    /* ---------- actions & states ---------- */
    --rms-primary:        #0D6EFD;
    --rms-primary-hover:  #0B5ED7;
    --rms-primary-dark:   #084298;
    --rms-primary-soft:   #EAF2FF;
    --rms-primary-border: #B6D4FE;
    --rms-primary-text:   #052C65;

    --rms-success:        #198754;
    --rms-success-dark:   #146C43;
    --rms-success-soft:   #D1E7DD;
    --rms-success-bg:     #F0F8F4;
    --rms-success-border: #A3CFBB;
    --rms-success-text:   #0A3622;

    --rms-danger:         #DC3545;
    --rms-danger-dark:    #B02A37;
    --rms-danger-soft:    #F8D7DA;
    --rms-danger-border:  #F1AEB5;
    --rms-danger-text:    #58151C;

    --rms-warning:        #FFC107;
    --rms-warning-soft:   #FFF6DD;
    --rms-warning-border: #FFE3A3;
    --rms-warning-text:   #664D03;

    /* ---------- room status (RmStatusID) ---------- */
    --st1: var(--rms-success);   /* Ready */
    --st2: var(--rms-primary);   /* Guest */
    --st3: var(--rms-danger);    /* Housekeeping */
    --st4: var(--rms-warning);   /* Blocked */
    --st5: var(--rms-gray);      /* Maintenance */

    /* ---------- shape & spacing ---------- */
    --rms-r-sm: 6px;
    --rms-r-md: 8px;
    --rms-r-lg: 12px;
    --rms-r-pill: 999px;

    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;

    --rms-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --rms-shadow-md: 0 6px 18px rgba(16, 24, 40, .10);
    --rms-focus: 0 0 0 3px rgba(13, 110, 253, .18);

    /* ---------- controls ---------- */
    --h-control:    36px;   /* inputs, selects, buttons */
    --h-control-lg: 42px;   /* main action buttons */
    --h-control-sm: 30px;   /* small buttons, chips */

    /* ---------- layout ---------- */
    --rms-sidebar-w: 220px;
    --rms-topbar-h:  52px;
}

/* touch screens (tablet / phone): bigger controls */
@media (pointer: coarse) {
    :root {
        --h-control:    42px;
        --h-control-lg: 48px;
        --h-control-sm: 36px;
    }
}

/* ---------- base ---------- */
html, body {
    font-family: var(--rms-font);
    font-size: var(--fs-base);
    color: var(--rms-text);
    background: var(--rms-bg);
}

h1, h2, h3, h4 { color: var(--rms-text); }
h1:focus { outline: none; }

button, input, select, textarea { font-family: inherit; }

::selection { background: var(--rms-primary-soft); }

/* keyboard focus looks the same everywhere */
:focus-visible { outline: 2px solid var(--rms-primary-hover); outline-offset: 2px; }

/* the error bar Blazor shows when the connection drops */
#blazor-error-ui {
    font-family: var(--rms-font);
    font-size: var(--fs-s);
}