/* CRITICAL OVERRIDE - MODE NAV BAR WIDTH - MUST BE FIRST */
.mode-nav-toolbar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
}

/* Font fallbacks - Coolvetica not available, using system fonts */
/* Load and style OpenDyslexic font */
@font-face {
    font-family: 'OpenDyslexic';
    src: url('lib/libraries/fonts/OpenDyslexic-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* Load and style Roboto font */
@font-face {
    font-family: 'Roboto';
    src: url('roboto.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* React Modal Styles */
.modal.show {
    z-index: 1055;
}

.modal-backdrop.show {
    z-index: 1050;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    background: #f5f5f5; /* Base off-white background */
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    position: relative;
}

/* Create a blurry gradient background using a pseudo-element */
html::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse 100% 80% at 20% 50%, rgba(250, 250, 250, 0.8) 0%, rgba(245, 245, 245, 0.4) 50%, transparent 100%),
        radial-gradient(ellipse 90% 70% at 80% 80%, rgba(248, 248, 248, 0.7) 0%, rgba(245, 245, 245, 0.3) 60%, transparent 100%),
        radial-gradient(ellipse 85% 75% at 40% 20%, rgba(242, 242, 242, 0.6) 0%, rgba(245, 245, 245, 0.3) 55%, transparent 100%),
        radial-gradient(ellipse 120% 60% at 10% 30%, rgba(53, 194, 154, 0.08) 0%, rgba(53, 194, 154, 0.03) 40%, transparent 80%),
        radial-gradient(ellipse 110% 70% at 90% 70%, rgba(53, 194, 154, 0.06) 0%, rgba(53, 194, 154, 0.02) 50%, transparent 90%),
        linear-gradient(135deg, #f5f5f5 0%, #fafafa 12%, rgba(245, 252, 249, 0.9) 25%, #f5f5f5 40%, #f3f3f3 55%, rgba(245, 252, 249, 0.95) 70%, #f8f8f8 85%, #f5f5f5 100%);
    background-size: 150% 150%, 140% 140%, 145% 145%, 160% 160%, 155% 155%, 100% 100%;
    background-attachment: fixed;
    background-position: center;
    filter: blur(10px);
    opacity: 0.85;
    z-index: -1;
    pointer-events: none;
}

body {
    background: #f5f5f5; /* Fallback base color */
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    position: relative;
}

/* GAIALITH Paperwork PRO Brand Colors */
:root {
   /* --primary-bg: linear-gradient(135deg, #061414 0%, #073229 50%, #061414 100%); /* dark green gradient background */
    --primary-bg: #fafafa;
    --secondary-bg: #f5f5f5; /* Same as primary for continuity */
    --accent-green: #35c29a; /* Bright green accent */
    --accent-green-hover: #2bc198; /* Darker green for hover */
    
    --text-black: #333333; /* Dark text for light background */
    --text-light: #333333; /* Dark text for consistency */
    --border-color: #cccccc; /* Light gray borders */
    --shadow-color: rgba(0, 0, 0, 0.1); /* Subtle shadow */
    --table-bg: rgba(255, 255, 255, 0.8); /* Semi-transparent white for tables */
    --table-text: #333333; /* Dark text for tables */
    --table-header: #0e0e0e; /* Light gray for headers */
    --table-border: #cccccc; /* Light gray borders */
    --main-text: rgb(6, 19, 1); /* Off-black colour for accessibility */

    /* Table / Branding Colours */
    --teal: #3d8073;
    --red: #992800;
    --orange: #d44a23;
    --yellow: #ffb000;

    /* New sidebar and navigation colors */
    --sidebar-bg: rgba(7, 50, 41, 0.95); /* Almost black with transparency */
    --sidebar-hover: rgba(53, 194, 154, 0.1); /* Bright green hover */
    --sidebar-active: rgba(53, 194, 154, 0.2); /* Bright green active */
    --sidebar-border: rgba(7, 50, 41, 0.95); /* Dark green border */
    --nav-bg: rgba(10, 26, 26, 0.95); /*Dark nav bar */
    --nav-border: rgba(53, 194, 154, 0.2); /* Bright green border */
    
    /* Login page colors */
    --login-bg: rgba(17, 63, 49, 0.9); /* Base dark teal background */
    --login-secondary: rgba(2, 3, 3, 0.95); /* Slightly lighter teal for login */
}