/* --- GLOBAL STYLES & VARIABLES --- */ :root { /* Light Mode (Default) */ --bg-color: #f4f7fa; --surface-color: #ffffff; --primary-color: #3b82f6; /* A modern blue */ --primary-hover-color: #2563eb; --secondary-color: #10b981; /* A friendly green */ --secondary-hover-color: #059669; --accent-color: #ef4444; /* For alerts and destructive actions */ --text-color: #1f2937; --text-muted-color: #6b7280; --border-color: #e5e7eb; --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --border-radius: 0.5rem; } /* * FIX: The .dark-mode class is now applied to the element by a * blocking script to prevent a "flash of unstyled content". * The body styles are now applied when the html element has the class. */ html.dark-mode { /* Dark Mode Overrides */ --bg-color: #111827; /* Very dark blue-gray */ --surface-color: #1f2937; /* Dark blue-gray */ --text-color: #f9fafb; /* Almost white */ --text-muted-color: #9ca3af; /* Lighter gray */ --border-color: #374151; /* Mid gray */ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.2), 0 2px 4px -2px rgb(0 0 0 / 0.2); } /* --- Basic Resets & Typography --- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-family); background-color: var(--bg-color); color: var(--text-color); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.3s ease, color 0.3s ease; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; } p { margin: 0 0 1rem; line-height: 1.6; } a { color: var(--primary-color); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--primary-hover-color); } /* --- COMMON COMPONENTS --- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.25rem; border-radius: var(--border-radius); font-weight: 500; font-size: 0.875rem; border: 1px solid transparent; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; white-space: nowrap; } .btn-primary { background-color: var(--primary-color); color: white; } .btn-primary:hover { background-color: var(--primary-hover-color); } .btn-secondary { background-color: var(--secondary-color); color: white; } .btn-secondary:hover { background-color: var(--secondary-hover-color); } .btn-outline { background-color: transparent; border-color: var(--border-color); color: var(--text-muted-color); } .btn-outline:hover { background-color: var(--bg-color); border-color: var(--text-muted-color); color: var(--text-color); } .form-group { margin-bottom: 1.25rem; } .form-group label { display: block; font-weight: 500; font-size: 0.875rem; color: var(--text-color); margin-bottom: 0.5rem; } .form-control { width: 100%; padding: 0.625rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius); background-color: var(--surface-color); color: var(--text-color); font-size: 0.875rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .form-control:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); } /* --- NEW: Style for read-only and disabled form controls --- */ .form-control[readonly], .form-control:disabled { background-color: var(--bg-color); color: var(--text-muted-color); cursor: default; } /* Prevent focus styles on these inputs */ .form-control[readonly]:focus, .form-control:disabled:focus { box-shadow: none; border-color: var(--border-color); } /* * FIX: This rule explicitly forces a light background and dark text on *