/* NHS Design System Theme with Dark Mode Support */
/* For NHS Theatre Team Briefing Digital Whiteboard App */
/* Optimized for 94.5" touchscreen - Offline Mode */

/* ========================================
   ROOT VARIABLES & LIGHT MODE (DEFAULT)
   ======================================== */
:root {
    /* NHS Brand Colors - Primary Palette */
    --nhs-blue: #005EB8;
    --nhs-dark-blue: #003087;
    --nhs-bright-blue: #0072CE;
    --nhs-light-blue: #41B6E6;
    --nhs-aqua-blue: #00A9CE;

    /* NHS Brand Colors - Greens */
    --nhs-green: #007F3B;
    --nhs-light-green: #78BE20;
    --nhs-aqua-green: #00A499;

    /* NHS Brand Colors - Reds & Warnings */
    --nhs-red: #DA291C;
    --nhs-dark-red: #8A1538;

    /* NHS Brand Colors - Accent Colors */
    --nhs-yellow: #FAE100;
    --nhs-warm-yellow: #FFB81C;

    /* Greyscale Palette */
    --nhs-grey-1: #4C6272;
    --nhs-grey-2: #768692;
    --nhs-grey-3: #AEB7BD;
    --nhs-grey-4: #D8DDE0;
    --nhs-grey-5: #F0F4F5;

    --nhs-white: #FFFFFF;
    --nhs-black: #212B32;

    /* Spacing Scale (optimized for readability) */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 40px;

    /* Typography */
    --font-family: Arial, Helvetica, sans-serif;
    --font-size-xs: 20px;
    --font-size-sm: 24px;
    --font-size-md: 32px;
    --font-size-lg: 36px;
    --font-size-xl: 44px;

    /* Touch & Interaction */
    --border-radius: 4px;
    --border-width: 2px;
    --touch-target: 44px;
    --touch-target-large: 60px;  /* Extra large touch targets for 94.5" touchscreen */
}

/* ========================================
   GLOBAL STYLES
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    color: var(--nhs-black);
    background-color: var(--nhs-grey-5);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    /* Smooth transition for dark mode toggle - ~0.3s for gentle color shift */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ========================================
   DARK MODE - Activated with body.dark-mode
   Redefines CSS variables for dark theme
   ======================================== */
body.dark-mode {
    /* Dark mode uses dark grey-blue background for comfortable viewing on large screen */
    /* Not pure black (#000000) to reduce eye strain during extended use */
    background-color: #1a1f26;
    color: #e8eced;

    /* Override CSS variables for dark theme */
    /* Brand colors are slightly brightened for visibility on dark backgrounds */
    /* while maintaining NHS brand identity and compliance */

    /* Blues - brightened for contrast on dark background */
    --nhs-blue: #4498d8;        /* Brightened from #005EB8 */
    --nhs-dark-blue: #6ba8e0;   /* Significantly lightened from #003087 */
    --nhs-bright-blue: #5ba4dd; /* Brightened from #0072CE */
    --nhs-light-blue: #7cc3f0;  /* Enhanced brightness from #41B6E6 */
    --nhs-aqua-blue: #4fc3e8;   /* Brightened from #00A9CE */

    /* Greens - remain strong but slightly brightened for dark backgrounds */
    --nhs-green: #66bb6a;       /* Brightened hospital green from #007F3B */
    --nhs-light-green: #9dcd4e; /* More vibrant from #78BE20 */
    --nhs-aqua-green: #4db8ac;  /* Slightly brightened from #00A499 */

    /* Red/Warning colors - maintain emergency clarity and visibility */
    --nhs-red: #f44336;         /* Slightly brighter for visibility from #DA291C */
    --nhs-dark-red: #e63946;    /* Enhanced visibility on dark bg from #8A1538 */

    /* Yellow warnings - increase brightness significantly for dark mode visibility */
    --nhs-yellow: #ffd700;      /* Brighter golden yellow from #FAE100 */
    --nhs-warm-yellow: #ffc107; /* Increased brightness from #FFB81C */

    /* Greyscale inverted for dark mode - light text on dark backgrounds */
    --nhs-grey-1: #b0bac0;      /* Light grey from #4C6272 */
    --nhs-grey-2: #97a1a7;      /* Mid-tone grey from #768692 */
    --nhs-grey-3: #6d7983;      /* Darker grey for borders from #AEB7BD */
    --nhs-grey-4: #424d56;      /* Very dark grey from #D8DDE0 */
    --nhs-grey-5: #2d3339;      /* Almost black grey from #F0F4F5 */
    --nhs-white: #e8eced;       /* Off-white for reduced eye strain from #FFFFFF */
    --nhs-black: #f5f6f7;       /* Light text on dark backgrounds from #212B32 */
}

/* ========================================
   BUTTON STYLES
   ======================================== */
.btn {
    display: inline-block;
    padding: 12px 24px;
    font-size: var(--font-size-md);
    font-weight: 600;
    text-align: center;
    border: var(--border-width) solid transparent;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: var(--touch-target);
    min-width: 120px;
    font-family: var(--font-family);
}

/* Primary button - NHS Green */
.btn-primary {
    background-color: var(--nhs-green);
    color: var(--nhs-white);
    border-color: var(--nhs-green);
}

.btn-primary:hover {
    background-color: #006634;
}

/* Secondary button - NHS Grey */
.btn-secondary {
    background-color: var(--nhs-grey-1);
    color: var(--nhs-white);
    border-color: var(--nhs-grey-1);
}

.btn-secondary:hover {
    background-color: #3a4e5c;
}

/* Warning button - NHS Warm Yellow */
.btn-warning {
    background-color: var(--nhs-warm-yellow);
    color: var(--nhs-black);
    border-color: var(--nhs-warm-yellow);
}

.btn-warning:hover {
    background-color: #f0a800;
}

/* Button active state - tactile feedback for large touchscreen */
.btn:active {
    transform: scale(0.98);
}

/* ========================================
   FORM ELEMENTS
   ======================================== */
input[type="text"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 12px;
    font-size: var(--font-size-md);
    font-family: var(--font-family);
    border: var(--border-width) solid var(--nhs-grey-3);
    border-radius: var(--border-radius);
    background-color: var(--nhs-white);
    min-height: var(--touch-target);
    transition: border-color 0.2s ease;
}

/* Form focus states - high visibility for accessibility */
input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    outline: 3px solid var(--nhs-yellow);
    outline-offset: 0;
    border-color: var(--nhs-black);
}

/* Large checkboxes for touchscreen accessibility */
input[type="checkbox"] {
    width: 32px;
    height: 32px;
    cursor: pointer;
    accent-color: var(--nhs-blue);
}

/* ========================================
   TYPOGRAPHY & HEADINGS
   ======================================== */
/* Main heading - typically white on NHS blue background */
h1 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--nhs-white);
}

/* Section headings - NHS blue */
h2 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--nhs-blue);
    margin-bottom: var(--spacing-md);
}

/* Subsection headings - dark text */
h3 {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--nhs-black);
}

/* Form labels - prominent for clarity on touchscreen */
label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--nhs-black);
    margin-bottom: 4px;
}

/* ========================================
   STATUS INDICATORS & VISUAL FEEDBACK
   ======================================== */
/* Red status - emergency/critical */
.status-red {
    background-color: var(--nhs-red);
    color: var(--nhs-white);
}

/* Amber status - warning/attention needed */
.status-amber {
    background-color: var(--nhs-warm-yellow);
    color: var(--nhs-black);
}

/* Green status - normal/ready */
.status-green {
    background-color: var(--nhs-green);
    color: var(--nhs-white);
}

/* Blank/empty status */
.status-blank {
    background-color: var(--nhs-white);
    border: 2px solid var(--nhs-grey-3);
}

/* Color-coded key dots for visual legend */
.key-dot {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

.key-dot.red {
    background-color: var(--nhs-red);
}

.key-dot.amber {
    background-color: var(--nhs-warm-yellow);
}

.key-dot.green {
    background-color: var(--nhs-green);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
/* Text alignment */
.text-center {
    text-align: center;
}

/* Text weight */
.text-bold {
    font-weight: 700;
}

/* Margin utilities - spacing consistency */
.mt-sm {
    margin-top: var(--spacing-sm);
}

.mt-md {
    margin-top: var(--spacing-md);
}

.mb-sm {
    margin-bottom: var(--spacing-sm);
}

.mb-md {
    margin-bottom: var(--spacing-md);
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    /* Hide interactive controls when printing */
    .controls {
        display: none !important;
    }

    /* White background for printing */
    body {
        background: white;
    }

    /* Hide buttons in print */
    .btn {
        display: none;
    }

    /* Preserve exact colors when printing */
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}