/* ============================================================ WET admin — shared stylesheet Link from any admin page: Add class="admin-page" to . ============================================================ */ .admin-page { background: #eef1f5; margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1e293b; -webkit-font-smoothing: antialiased; } .admin-page .admin-wrap { max-width: 1180px; margin: 0 auto; padding: 28px 24px 48px; } /* ---- breadcrumb ---- */ .admin-breadcrumb { font-size: 14px; margin-bottom: 14px; color: #64748b; } .admin-breadcrumb a { color: #2563eb; text-decoration: none; } .admin-breadcrumb a:hover { text-decoration: underline; } .admin-breadcrumb .crumb-sep { margin: 0 7px; color: #94a3b8; } /* ---- page header ---- */ .admin-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; } .admin-page-header h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.5px; color: #0f172a; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .admin-page-subtitle { margin: 8px 0 0; color: #64748b; font-size: 15px; } /* ---- status badge ---- */ .status-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; padding: 5px 14px; border-radius: 8px; border: 1px solid transparent; vertical-align: middle; } .status-badge.badge-green { background: #dcfce7; color: #15803d; border-color: #bbf7d0; } .status-badge.badge-amber { background: #fef3c7; color: #b45309; border-color: #fde68a; } .status-badge.badge-gray { background: #e2e8f0; color: #475569; border-color: #cbd5e1; } /* ---- buttons ---- */ .btn-admin { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; padding: 10px 18px; border-radius: 9px; border: 1px solid transparent; cursor: pointer; text-decoration: none; line-height: 1.2; transition: background .15s, box-shadow .15s; } .btn-admin.primary { background: #ea580c; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.12); } .btn-admin.primary:hover { background: #c2410c; } .btn-admin.soft { background: #eff3fb; color: #1d4ed8; border-color: #dbe4f5; } .btn-admin.soft:hover { background: #e0e9f8; } .btn-admin.outline { background: #fff; color: #1d4ed8; border-color: #c7d4ee; } .btn-admin.outline:hover { background: #f4f7fd; } .btn-admin.neutral { background: #fff; color: #334155; border-color: #cbd5e1; } .btn-admin.neutral:hover { background: #f8fafc; } /* ---- cards ---- */ .admin-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 1px 3px rgba(15, 23, 42, .05); padding: 22px 24px; margin-bottom: 20px; } /* ---- top field grid ---- */ .field-grid { display: grid; grid-template-columns: 64px 1.7fr 1.1fr 0.9fr 1.1fr 1.1fr 1.1fr; gap: 16px; } @media (max-width: 980px) { .field-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 620px) { .field-grid { grid-template-columns: 1fr 1fr; } } .field-grid .field label, .field-block > label { display: block; font-weight: 700; font-size: 14px; color: #0f172a; margin-bottom: 7px; } .admin-page input[type="text"], .admin-page input[type="date"], .admin-page input[type="password"], .admin-page select, .admin-page textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 15px; color: #1e293b; background: #fff; border: 1px solid #cbd5e1; border-radius: 9px; font-family: inherit; } .admin-page input:focus, .admin-page select:focus, .admin-page textarea:focus { outline: 2px solid #93c5fd; outline-offset: 0; border-color: #60a5fa; } .admin-page ::placeholder { color: #9ca3af; } /* ---- sectioned cards (icon + label column | content) ---- */ .section-card { display: grid; grid-template-columns: 250px 1fr; gap: 28px; } @media (max-width: 820px) { .section-card { grid-template-columns: 1fr; } } .section-side { display: flex; align-items: flex-start; gap: 14px; } .section-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: #e3ebfa; color: #2563eb; display: flex; align-items: center; justify-content: center; } .section-icon svg { width: 22px; height: 22px; } .section-side h2 { margin: 2px 0 6px; font-size: 17px; font-weight: 700; color: #0f172a; } .section-side p { margin: 0; font-size: 14px; color: #64748b; line-height: 1.45; } .field-block { margin-bottom: 18px; } .field-block:last-child { margin-bottom: 0; } /* ---- map preview ---- */ .map-preview-row { display: flex; gap: 20px; align-items: stretch; margin-top: 14px; flex-wrap: wrap; } .map-thumb { width: 270px; height: 170px; border-radius: 10px; overflow: hidden; border: 1px solid #e2e8f0; background: #f1f5f9; position: relative; flex: 0 0 auto; } .map-thumb .leaflet-container { width: 100%; height: 100%; } .map-thumb-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); z-index: 500; pointer-events: none; color: #2563eb; } .map-preview-info { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 220px; } .map-preview-info .map-place { font-size: 18px; font-weight: 700; color: #0f172a; } .map-preview-info .map-coords { font-size: 14px; color: #64748b; } .map-preview-actions { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; } /* ---- interactive map picker (existing behaviour, restyled) ---- */ .map-picker-help { color: #64748b; font-size: 14px; } .map-picker-container { position: relative; margin-top: 10px; } #location-map { height: 380px; border-radius: 10px; border: 1px solid #e2e8f0; } .map-center-marker { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; pointer-events: none; z-index: 500; } .map-center-marker::before, .map-center-marker::after { content: ""; position: absolute; background: #dc2626; } .map-center-marker::before { left: 10px; top: 0; width: 2px; height: 22px; } .map-center-marker::after { left: 0; top: 10px; width: 22px; height: 2px; } .selected-coordinates { margin-top: 8px; font-size: 13px; color: #64748b; } .map-picker-actions { display: flex; gap: 12px; margin-top: 12px; } /* ---- toggle switch ---- */ .toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; } .toggle-row .toggle-text b { display: block; font-size: 14px; font-weight: 700; color: #0f172a; margin-bottom: 4px; } .toggle-row .toggle-text span { font-size: 13.5px; color: #64748b; } .switch { position: relative; display: inline-block; width: 52px; height: 30px; flex: 0 0 auto; } .switch input { opacity: 0; width: 0; height: 0; } .switch .slider { position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px; cursor: pointer; transition: background .18s; } .switch .slider::before { content: ""; position: absolute; width: 24px; height: 24px; left: 3px; top: 3px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s; } .switch input:checked + .slider { background: #16a34a; } .switch input:checked + .slider::before { transform: translateX(22px); } .switch input:focus-visible + .slider { outline: 2px solid #93c5fd; } /* ---- footer action bar ---- */ .admin-actionbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 1px 3px rgba(15, 23, 42, .05); padding: 16px 24px; flex-wrap: wrap; } .admin-actionbar .actionbar-right { display: flex; gap: 12px; margin-left: auto; flex-wrap: wrap; } /* ---- flash / errors ---- */ .admin-page .flash.err { background: #fee2e2; border: 1px solid #fecaca; color: #b91c1c; padding: 10px 14px; border-radius: 9px; margin-bottom: 16px; } .admin-page .flash.ok { background: #dcfce7; border: 1px solid #bbf7d0; color: #15803d; padding: 10px 14px; border-radius: 9px; margin-bottom: 16px; } .admin-page .flash.err a { color: #b91c1c; } /* ---- header toolbar ---- */ .admin-toolbar { display: flex; gap: 10px; flex-wrap: wrap; } /* ---- card heading row ---- */ .card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; } .card-head h2 { margin: 0; font-size: 20px; font-weight: 800; color: #0f172a; } /* ---- tables ---- */ .admin-page table.admin-table, .admin-page table.splits-grid { width: 100%; border-collapse: collapse; } .admin-page table.admin-table th, .admin-page table.splits-grid th { text-align: left; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: #64748b; padding: 10px; border-bottom: 2px solid #e2e8f0; vertical-align: bottom; } .admin-page table.admin-table td, .admin-page table.splits-grid td { padding: 10px; border-bottom: 1px solid #eef2f7; font-size: 14.5px; vertical-align: middle; } .admin-page table.admin-table tr:hover td { background: #f8fafc; } .admin-page .row-past td { color: #94a0ae; } .admin-page .splits-grid input[type="text"] { padding: 8px 9px; font-size: 14px; min-width: 70px; } /* ---- small + danger buttons ---- */ .btn-admin.small { padding: 6px 12px; font-size: 13.5px; border-radius: 7px; gap: 6px; } .btn-admin.danger { background: #fff; color: #dc2626; border-color: #fecaca; } .btn-admin.danger:hover { background: #fef2f2; } /* ---- small badge ---- */ .status-badge.sm { font-size: 12.5px; padding: 3px 10px; border-radius: 7px; } /* ---- collapsible sections ---- */ .admin-details { margin-bottom: 14px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; } .admin-details summary { cursor: pointer; padding: 10px 14px; font-weight: 600; color: #1d4ed8; font-size: 14.5px; } .admin-details[open] summary { border-bottom: 1px solid #e2e8f0; } .admin-details .details-form { padding: 14px; max-width: 560px; } /* ---- season picker ---- */ .season-picker select { max-width: 320px; } /* ---- auth (login / setup) card ---- */ .auth-card { max-width: 400px; margin: 9vh auto 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 1px 3px rgba(15, 23, 42, .05); padding: 28px; } .auth-card h2 { margin: 0 0 6px; font-size: 22px; color: #0f172a; } .auth-card p { color: #64748b; font-size: 14px; line-height: 1.5; } .auth-card label { display: block; font-weight: 700; font-size: 14px; margin: 14px 0 7px; color: #0f172a; } .auth-card .btn-admin { width: 100%; justify-content: center; margin-top: 16px; } .auth-card .auth-foot { margin-top: 16px; font-size: 14px; } .auth-card .auth-foot a { color: #2563eb; text-decoration: none; } /* ---- navy emphasis button (View public site) ---- */ .btn-admin.navy { background: #14213d; color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); } .btn-admin.navy:hover { background: #1f3156; } /* ---- season row: picker + add-season side by side ---- */ .season-row { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .season-row .season-picker label { display: block; font-weight: 700; font-size: 14px; color: #0f172a; margin-bottom: 7px; } .season-row .season-picker select { min-width: 220px; } .admin-details.season-add { margin-top: 25px; /* aligns the summary with the select below its label */ margin-bottom: 0; background: #fff; border-color: #c7d4ee; border-radius: 9px; } .admin-details.season-add[open] { flex: 1 1 auto; /* expanded panel fills the rest of the row */ } .admin-details.season-add summary { padding: 10px 16px; font-size: 15px; } .admin-details.season-add .details-form { border-top: 1px solid #e2e8f0; max-width: none; } /* ---- map link + open button on one line ---- */ .map-link-row { display: flex; align-items: center; gap: 12px; } .map-link-row input[type="text"] { width: 50%; flex: 0 0 50%; } .map-link-row .btn-admin { flex: 0 0 auto; white-space: nowrap; } /* ============================================================ Quill rich-text editors Used by: - Event write-up: #summary-editor - Season introduction: #intro-editor ============================================================ */ /* White editor background */ #summary-editor, #intro-editor { background: #fff; } /* Toolbar */ .admin-page .ql-toolbar.ql-snow { border: 1px solid #cbd5e1; border-radius: 9px 9px 0 0; background: #f8fafc; } /* Outer editor container */ .admin-page .ql-container.ql-snow { border: 1px solid #cbd5e1; border-top: 0; border-radius: 0 0 9px 9px; font-size: 15px; font-family: inherit; background: #fff; } /* * The height must be placed on .ql-editor itself. * This makes the entire blank area clickable and editable. */ #summary-editor .ql-editor, #intro-editor .ql-editor { min-height: 160px; cursor: text; } /* Quill focus appearance */ .admin-page .ql-container.ql-snow:focus-within { border-color: #60a5fa; box-shadow: 0 0 0 2px #93c5fd; } /* * Remove the toolbar's bottom border while the editor has focus, * preventing a doubled blue line between toolbar and editor. */ .admin-page .ql-toolbar.ql-snow:has(+ .ql-container:focus-within) { border-color: #60a5fa; } /* Friendly labels for custom font sizes */ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before { content: "Small"; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before { content: "Large"; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before { content: "Huge"; } /* Hidden form fields must remain hidden */ .admin-page [hidden] { display: none !important; } /* Override legacy dark table header from style.css */ .admin-page table.admin-table th, .admin-page table.admin-table tr:first-child { background: #f8fafc; color: #64748b; }