/* ========================================================================= CoolSchool — global UI legibility & form-field enhancements ------------------------------------------------------------------------- Goals (applied app-wide, every layout / every role): 1. Every form field (input / select / textarea) carries a visible shadow. 2. Buttons, labels and text are always readable against their background (no invisible / unstyled controls). Design rule: this file is loaded LAST in every layout's , but it is built almost entirely from *element* selectors (specificity 0,0,1). Any existing utility/framework class (Tailwind `bg-*`/`text-*`, Bootstrap `.btn-primary`/`.form-control`, etc. — specificity 0,1,0) therefore STILL WINS. So this only ever raises a floor for controls that were otherwise unstyled; it never overrides an element that already has an explicit colour/background. Framework class hooks below use matching specificity and are ordered so variants keep their colours. Plain static asset (no Vite/Tailwind build step) so it reaches the Tailwind-CDN admin layout and the Vite layouts alike, and ships via a simple file copy. ========================================================================= */ /* ------------------------------------------------------------------------- 1. FORM FIELD SHADOWS (all forms, all layouts) Text-like inputs, selects and textareas get a soft resting shadow and a stronger, focus-ring-style shadow when active. Non-text controls (checkbox/radio/range/color/file/hidden and button-type inputs) are excluded so they are not visually distorted. ------------------------------------------------------------------------- */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]), select, textarea, .form-control, .form-select, .form-input { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10), 0 1px 3px rgba(15, 23, 42, 0.06); } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):focus, select:focus, textarea:focus, .form-control:focus, .form-select:focus, .form-input:focus { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25), 0 1px 2px rgba(15, 23, 42, 0.10); outline: none; } /* File inputs get a lighter shadow on the control itself (kept subtle). */ input[type="file"] { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); } /* Placeholder text — guarantee a readable (not too-faint) grey on any field. */ ::placeholder { color: #6b7280; opacity: 1; } :-ms-input-placeholder { color: #6b7280; } /* ------------------------------------------------------------------------- 2. LABEL & TEXT LEGIBILITY (safe floor only) Element-level defaults so a label / small print that has NO explicit colour class is never left as invisible or near-invisible text. Any Tailwind `text-*` or Bootstrap colour utility still overrides these (higher specificity), so coloured/inverse text is untouched. ------------------------------------------------------------------------- */ label, .form-label { color: #374151; /* slate-700 — readable on white/light cards */ } .form-text, small.text-muted, .help-text { color: #4b5563; /* slate-600 — meets contrast on light bg */ } /* Required-field asterisks stay visibly red even with no colour class. */ .required, .text-danger-asterisk { color: #dc2626; } /* ------------------------------------------------------------------------- 3. BUTTON VISIBILITY & CONTRAST (unstyled controls only) The admin layout loads Tailwind (CDN) but NOT Bootstrap, so a bare `.btn` there renders as unstyled/near-invisible text. Give any button that has neither a Bootstrap `.btn-*` variant NOR a Tailwind `bg-*` background a filled, high-contrast default. Buttons that already declare a background (variant class or `bg-*`) are matched by `[class*="btn-"]` / `[class*="bg-"]` and left exactly as-is. ------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.5rem 1rem; border-radius: 0.5rem; border: 1px solid transparent; font-weight: 600; line-height: 1.4; cursor: pointer; text-decoration: none; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12); } /* Filled default ONLY for buttons with no variant and no bg utility. */ .btn:not([class*="btn-"]):not([class*="bg-"]) { background-color: #2563eb; color: #ffffff; border-color: #2563eb; } .btn:not([class*="btn-"]):not([class*="bg-"]):hover { background-color: #1d4ed8; color: #ffffff; } /* Bare