/**
 * BlueSpark Events — app layer on Styleguide V2 (flat / no variables).
 *
 * V2 base (css/v2/{page,tabs,forms,buttons,tables,badges,cards,list-view}.css,
 * vendored byte-identical from /var/www/styleguide/public_htdocs/v2/css/ — the
 * master; never hand-edit the vendored copies) loads first; this file is the
 * thin app layer, modeled on tickets.css (Sage CX, the reference V2 conversion):
 *   (a) adapters mapping BlueSpark-generated markup (ListView / FormMaster /
 *       FormSlave vocab) onto the V2 look, and
 *   (b) bespoke Events components (login card, digital clock, cards, badges).
 *
 * THEME CONTRACT: Events' config-driven multi-level theme survives V2's flat
 * model by keying adapters off the theme classes the framework already emits —
 * body gets theme.global, <main class="panel-inner-recessed theme-X"> gets the
 * context theme (listview/editform), ListView emits table.list.theme-X and
 * FormMaster emits form.theme-X. Both light and dark variants are provided, so
 * flipping app.json theme config keeps working. Current config: global=dark,
 * listview=light, editform=light (light content panels on a dark shell).
 */

/* ============================================================ SHELL */
/* header account links (light-DOM content slotted into <bcl-header>) */
.account-links { font-size: 12px; color: #a0a0a0; white-space: nowrap; }
.account-links a { color: #cfcfcf; text-decoration: none; }
.account-links a:hover { color: #ffffff; text-decoration: underline; }

/* footer link sits outside any theme-* scope — inherit the footer's muted color */
.body-footer a { color: inherit; text-decoration: none; }
.body-footer a:hover { text-decoration: underline; }

/* context-themed recessed panel: V2 auto-themes it from .page.dark/.page.light;
   these override for Events' per-context theme (theme.listview / theme.editform) */
.page .panel-inner-recessed.theme-light {
    background: #ffffff; border: 1px solid #cfcfcf; color: #2a2a2a;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.08);
}
.page .panel-inner-recessed.theme-dark {
    background: #2e2e2e; border: 1px solid #000000; color: #e0e0e0;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

/* content typography inside the panel (views render their own h1/h2) */
.panel-inner-recessed h1 { font-size: 28px; font-weight: 600; margin: 0 0 20px; line-height: 1.25; }
.panel-inner-recessed h2 { font-size: 22px; font-weight: 600; margin: 0 0 14px; line-height: 1.25; }
.panel-inner-recessed h3 { font-size: 18px; font-weight: 600; margin: 0 0 10px; }
.panel-inner-recessed h4 { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.panel-inner-recessed p  { margin: 0 0 14px; }
.theme-dark a  { color: #3a85ff; }
.theme-light a { color: #2563eb; }
a:hover { text-decoration: underline; }
/* buttons rendered as <a> must keep button text color — the theme link rules
   above (0-1-1) would otherwise beat .btn/.button1 (0-1-0) → blue-on-blue */
a.btn:not(.btn-link), a.button1 { color: #ffffff; }
a.btn:hover, a.button1:hover { text-decoration: none; }

/* ============================================================ DIGITAL CLOCK
   Events keeps the tab-bar clock (markup + JS from shared tabbar.php).
   Carried from the retired app global.css; flat values. */
.digital-clock {
    margin: 0 0 3px auto; display: flex; align-items: center; gap: 8px;
    background-color: #000; border-radius: 4px; height: 34px; padding: 1px 10px;
}
.clock-time  { display: inline-flex; align-items: baseline; }
.clock-digit {
    font-family: "JetBrains Mono", monospace; font-weight: 400; font-size: 28px;
    color: #8efa00; display: inline-block; width: 22px; text-align: center;
}
.clock-sep {
    font-family: "JetBrains Mono", monospace; font-size: 28px;
    color: #8efa00; display: inline-block; width: 12px; text-align: center;
}
.clock-ampm { font-family: "JetBrains Mono", monospace; font-size: 11px; color: #8efa00; }
.clock-timezone {
    font-size: 10px; color: #ffcc00; white-space: nowrap;
    font-weight: normal; line-height: 12px; text-align: right;
}
.ui-tabs-nav { flex-wrap: wrap; }

/* ============================================================ FLASH MESSAGES */
.flash {
    padding: 10px 14px; border-radius: 6px; margin-bottom: 14px;
    font-size: 14px; font-weight: 500; border: 1px solid transparent;
}
/* dark-panel palette (default) */
.flash-success { background: rgba(76,175,80,0.15);  color: #a7f3d0; border-color: rgba(76,175,80,0.3); }
.flash-error   { background: rgba(255,58,58,0.15);  color: #fca5a5; border-color: rgba(255,58,58,0.3); }
.flash-warning { background: rgba(255,170,0,0.15);  color: #fde68a; border-color: rgba(255,170,0,0.3); }
.flash-info    { background: rgba(58,146,245,0.15); color: #93c5fd; border-color: rgba(58,146,245,0.3); }
/* light-panel palette */
.theme-light .flash-success { background: rgba(22,163,74,0.1);  color: #166534; border-color: rgba(22,163,74,0.3); }
.theme-light .flash-error   { background: rgba(220,38,38,0.1);  color: #991b1b; border-color: rgba(220,38,38,0.3); }
.theme-light .flash-warning { background: rgba(217,119,6,0.1);  color: #92400e; border-color: rgba(217,119,6,0.3); }
.theme-light .flash-info    { background: rgba(8,145,178,0.1);  color: #155e75; border-color: rgba(8,145,178,0.3); }

/* ============================================================ BUTTON EXTRAS
   BUTTON TEXT IS 16px — the intentional BCL standard (--font-size-md: 16px,
   "Form inputs, buttons" per /var/www/DOCS/STYLE_GUIDE.md and
   lib/css/src/buttons.css which enforces it !important). v2/buttons.css's
   13px deviates from that standard, so we correct it here. One size, no
   variants: .btn-sm/.btn-lg are size no-ops; the only small-button exception
   is v2 tables.css `.list td .btn` inside list tables. */
.btn, .button1 { font-size: 16px; font-weight: 400; }  /* --font-size-md / --font-weight-normal */
.btn-secondary { background: #5a5f6a; }            /* FormMaster Cancel → V2 neutral */
.btn-link {                                        /* a genuine text link, not a button */
    background: none; border: none; min-width: 0; height: auto; padding: 2px 6px;
    color: #8a8a8a; cursor: pointer; text-decoration: none;
}
.btn-link:hover { color: #3a85ff; text-decoration: underline; filter: none; }

/* Form-view buttons (.button1 green|blue|red) → flat look, 16px standard text */
.button1 {
    height: 32px; min-width: 70px; padding: 0 20px; border-radius: 6px; border: none;
    font-family: inherit; font-weight: 400; font-size: 16px; cursor: pointer;
    color: #ffffff; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center;
}
.button1.green { background: #2e7d46; }
.button1.blue  { background: #1f6feb; }
.button1.red   { background: #b3402f; }
.button1.disabled { background: #5a5f6a; opacity: .6; cursor: not-allowed; }
.button1:hover { filter: brightness(1.08); }

/* ============================================================ LISTVIEW (server-rendered)
   BlueSpark ListView emits: .listview-container, .searchbar-container
   (.left-group/.right-group/.breadcrumb/.label/.search_box/.custom-select),
   .button1, table.list.theme-{light|dark} with th.sort-asc/.sort-desc and
   tr.sortlist_odd/.sortlist_even, and table.pagi-bar (.pagi_* divs).
   Both theme variants below; the panel theme drives toolbar colors. */

.listview-container { display: block; }

.searchbar-container {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.searchbar-container .left-group,
.searchbar-container .center-group,
.searchbar-container .right-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.searchbar-container .center-group { flex: 1 1 auto; justify-content: center; }
.searchbar-container .label { font-size: 13px; opacity: .75; font-weight: 500; }
.breadcrumb { font-size: 18px; font-weight: 300; letter-spacing: .5px; }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .separator { opacity: .4; }

/* List tables/pagers/search: ALL list pages run the standardized BCLListView
   engine (js/bcl-list-view.js) inside <div class="listview light">, skinned
   entirely by v2/list-view.css + v2/tables.css. The old server-rendered
   ListView adapters (.list.theme-*, .pagi_*, .search_box, dark toolbar
   selects) were removed when the last server list page migrated — do NOT
   reintroduce unscoped rules for those class names; they clobber the engine.
   .custom-select inside FORMS is styled in the FORMS section below. */
.custom-select { position: relative; display: inline-block; }

/* Status inside engine lists: museum-style plain colored text via v2
   tables.css (.list.light .ok/.warn/.bad) — NOT badge pills (owner
   preference, 2026-07-04). Badges remain available on detail/card pages. */

/* ============================================================ MUSEUM LIST SKIN
   The approved "list done right" reference is Museum's table view (see
   docs/screenshots/museum_table_view.png): full-width gray pagination strips
   with silver chips + blue active page, a fully-bordered zebra table, and
   legible toolbar labels on the dark panel. These override the minimal v2
   engine skin, scoped to .listview.light. Values ported from
   museum apps/museum global.css (chips #245F9F, grid #bbb, links #000db9).
   Candidate for promotion into the shared v2 list-view.css once approved. */

/* toolbar labels sit on the DARK panel — must be light (museum: white 500) */
.listview.light .label,
.listview.light .search-label { color: #e0e0e0; font-size: 14px; font-weight: 500; }
.listview.light .btn-clear { color: #e0e0e0; border-color: #8a8a8a; }
.listview.light .btn-clear:hover { background: #3c3c3c; }

/* pagination: full-width gray strip, silver chips, blue active page */
.listview.light .pagination-bar {
    background: #999999; padding: 4px 6px; border-radius: 3px; margin: 8px 0;
}
.listview.light .pagi_page a,
.listview.light .pagi_direction a {
    background: linear-gradient(180deg, #ffffff, #d8d8d8);
    color: #000000; border: 1px solid #cccccc; border-radius: 3px;
    padding: 4px 12px; font-size: 14px; font-weight: 600;
}
.listview.light .pagi_page a:hover,
.listview.light .pagi_direction a:hover { background: linear-gradient(180deg, #ffffff, #eeeeee); }
.listview.light .pagi_bold_two,
.listview.light .pagi_bold_three,
.listview.light .pagi_bold_four {
    background: #245F9F; color: #ffffff; border: 1px solid #000000;
    border-radius: 3px; padding: 4px 10px; font-size: 14px; font-weight: 700;
}
.listview.light .pagi_direction_disabled {
    background: linear-gradient(180deg, #ffffff, #d8d8d8); opacity: 1;
    color: #999999; border: 1px solid #cccccc; border-radius: 3px;
    padding: 4px 12px; font-size: 14px; font-weight: 600;
}
.listview.light .pagi_filler { color: #24386C; opacity: 1; padding: 4px 6px; }
.listview.light .pagi_details {
    background: linear-gradient(180deg, #ffffff, #d8d8d8);
    color: #24386C; border: 1px solid #cccccc; border-radius: 3px;
    padding: 4px 10px; font-size: 13px;
}
.listview.light .pagi_details .pagi_nums { font-weight: 700; }

/* the table: full #bbb cell grid, museum header, stronger zebra, classic links */
.listview.light table.list { border: 1px solid #999999; }
.listview.light table.list th {
    background: linear-gradient(180deg, #f8f8f8, #dcdcdc);
    color: #333333; font-size: 13px; font-weight: 700;
    text-transform: none; letter-spacing: 0;
    border-bottom: 1px solid #999999; border-right: 1px solid #cacaca;
    box-shadow: none; padding: 5px 8px;
}
.listview.light table.list th.current { background: linear-gradient(180deg, #eeeeee, #cccccc); }
.listview.light table.list th a { color: #333333; }
.listview.light table.list td {
    border-right: 1px solid #bbbbbb; border-bottom: 1px solid #bbbbbb;
    padding: 4px 8px; font-size: 13px; cursor: pointer;
}
.listview.light table.list th:last-child,
.listview.light table.list td:last-child { border-right: none; }
.listview.light table.list td a { color: #000db9; }
.listview.light table.list tr.sortlist_even td { background: rgba(150, 150, 150, 0.3); }
.listview.light table.list tr:hover td { background: #ffffcc; }

/* ============================================================ FORMS (FormMaster/FormSlave)
   Emits: <form class="theme-{light|dark}">, fieldset.form-slave > legend,
   .form-group > label(+.required) + .form-control(+.w-*), .form-check,
   .form-actions > .btn. V2 fixed rule: text fields ALWAYS white. */

.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 5px; }
form.theme-dark  .form-group label { color: #e0e0e0; }
form.theme-light .form-group label { color: #2a2a2a; }
.form-group label .required { color: #ff5a5a; margin-left: 2px; }
.theme-light .form-group label .required { color: #c62f2f; }
.form-group .field-error, .field-error { display: block; font-size: 12px; color: #ff5a5a; margin-top: 4px; }
.theme-light .field-error { color: #c62f2f; }
.form-group.has-error .form-control, .has-error .form-control { border-color: #ff5a5a; }
.form-hint, .field-hint { display: block; font-size: 12px; opacity: .65; margin-top: 4px; }

/* text fields / textareas — V2 FIXED: white, black 500-weight, inner shadow */
.form-control {
    display: inline-block; height: 32px; padding: 0 10px; font-family: inherit;
    font-size: 14px; font-weight: 500; color: #1a1a1a; background: #ffffff;
    border: 1px solid #999999; border-radius: 6px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.16); outline: none;
}
.form-control:focus { border-color: #3a85ff; box-shadow: 0 0 0 3px rgba(58,133,255,0.25); }
.form-control.is-invalid { border-color: #ff5a5a; }
textarea.form-control { display: block; width: 100%; height: auto; min-height: 80px; padding: 8px 10px; resize: vertical; line-height: 1.5; }
.form-control-sm { height: 28px; font-size: 13px; }

/* a select INSIDE a form is WHITE like its sibling fields (V2 rule) —
   overrides the panel-themed toolbar-select look */
fieldset.form-slave select.form-control,
.form-slave .custom-select select.form-control,
form .custom-select select.form-control {
    background-color: #ffffff; color: #1a1a1a; border: 1px solid #999999;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.16);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23555555' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* fieldset = a lifted card on the recessed surface, themed per form */
fieldset { border: none; border-radius: 10px; margin: 0 0 16px; padding: 5px; }
fieldset.form-slave { padding: 18px 20px; }
form.theme-dark fieldset.form-slave  { background: #303030; border: 1px solid #000000; }
form.theme-dark fieldset fieldset    { background: #2a2a2a; }
form.theme-light fieldset.form-slave { background: #ffffff; border: 1px solid #d8d8d8; }
form.theme-light fieldset fieldset   { background: #f6f6f6; }
fieldset legend {
    padding: 2px 10px; margin: 0; border-radius: 6px;
    background: #1f6feb; color: #ffffff;
    font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
}

/* checkboxes */
.form-check { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.form-check-input, .form-group input[type="checkbox"] { width: 16px; height: 16px; accent-color: #3a85ff; }
.form-group input[type="checkbox"] + label, .form-check label { display: inline; font-weight: 400; margin: 0; }

/* save/cancel row */
.form-actions { display: flex; gap: 12px; padding-top: 16px; margin-top: 4px; border-top: 1px solid #4d4d4d; }
form.theme-light .form-actions { border-top-color: #dddddd; }

/* width utilities (sized to the data, not the container) */
.w-xs { width: 80px; } .w-sm { width: 150px; } .w-md { width: 250px; } .w-lg { width: 400px; }
.w-full { display: block; width: 100%; max-width: 520px; }

/* multi-field rows */
.address-row { display: flex; gap: 14px; }
.address-row .form-group { flex: none; }
.spec-row .custom-select, .spec-row .custom-select select, .spec-row .form-control.w-xs { width: 100%; }

/* ============================================================ CARDS & BADGES
   Events content cards (.card) + status badges, themed per panel. */
.card { border-radius: 10px; overflow: hidden; }
.theme-dark .card, .page.dark .theme-dark .card,
.panel-inner-recessed.theme-dark .card { background: #303030; border: 1px solid #000000; }
.theme-light .card { background: #ffffff; border: 1px solid #cfcfcf; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.card-header { padding: 12px 18px; font-weight: 600; color: #d4af37; border-bottom: 1px solid rgba(0,0,0,0.3); }
.theme-light .card-header { color: #8a6d1a; border-bottom-color: #e2e2e2; }
.card-body { padding: 18px; }
.card-footer { padding: 12px 18px; border-top: 1px solid rgba(0,0,0,0.3); background: rgba(0,0,0,0.15); }
.theme-light .card-footer { border-top-color: #e2e2e2; background: #f6f6f6; }

/* Events badge variants → V2 badge palette (v2/badges.css defines .badge base) */
.badge-success { background: #1f3d24; color: #5fd06a; }
.badge-warning { background: #3d3115; color: #ffb454; }
.badge-error   { background: #3d1d1d; color: #ff5a5a; }
.badge-info    { background: #16314d; color: #5aa9ff; }
.badge-gray    { background: #3a3a3a; color: #d8d8d8; }
.theme-light .badge-success { background: #e2f3e4; color: #2f8a36; }
.theme-light .badge-warning { background: #f6ecd9; color: #b9700b; }
.theme-light .badge-error   { background: #f7e0e0; color: #c62f2f; }
.theme-light .badge-info    { background: #e0ecf7; color: #1f6fb2; }
.theme-light .badge-gray    { background: #e9e9e9; color: #444444; }

/* ============================================================ LOGIN
   Bespoke centered auth card (tickets pattern, Events class names).
   Renders inside the recessed panel of the default shell. */
.login-container { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 24px 0; }
.login-card {
    width: 440px; max-width: 90vw; background: #303030; border: 1px solid #000000;
    border-radius: 12px; padding: 36px 34px; box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.theme-light .login-card { background: #ffffff; border-color: #cfcfcf; box-shadow: 0 10px 30px rgba(0,0,0,0.12); }
.login-title { font-size: 24px; font-weight: 500; color: #ffffff; letter-spacing: .5px; text-align: center; margin: 0 0 8px; }
.theme-light .login-title { color: #2a2a2a; }
.login-subtitle { color: #a0a0a0; font-size: 13px; text-align: center; margin: 0 0 26px; }
.theme-light .login-subtitle { color: #666666; }
.login-form .form-input { margin-bottom: 18px; }
.login-form .form-label { display: block; font-size: 13px; font-weight: 500; color: #cfcfcf; margin-bottom: 6px; }
.theme-light .login-form .form-label { color: #444444; }
.login-form input[type="email"],
.login-form input[type="password"] {
    width: 100%; height: 40px; padding: 0 12px; background: #ffffff; color: #1a1a1a;
    font-weight: 500; border: 1px solid #999999; border-radius: 6px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.16); font-size: 14px; outline: none;
    box-sizing: border-box; font-family: inherit;
}
.login-form input[type="email"]:focus,
.login-form input[type="password"]:focus { border-color: #3a85ff; box-shadow: 0 0 0 3px rgba(58,133,255,0.25); }
.login-error {
    background: rgba(255,58,58,0.15); border: 1px solid rgba(255,58,58,0.3);
    border-radius: 6px; padding: 10px 14px; margin-bottom: 18px;
    color: #fca5a5; font-size: 13px; display: none;
}
.login-error.visible { display: block; }
.login-submit { width: 100%; margin-top: 6px; }  /* height/font = V2 .btn spec */

/* ============================================================ UTILITIES */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { opacity: .65; }
.text-success { color: #5fd06a; } .theme-light .text-success { color: #2f8a36; }
.text-error   { color: #ff5a5a; } .theme-light .text-error   { color: #c62f2f; }
.text-warning { color: #ffb454; } .theme-light .text-warning { color: #b9700b; }
.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; } .gap-4 { gap: 16px; }
.hidden { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.empty-state { text-align: center; padding: 56px 32px; opacity: .7; }
.empty-state h3 { margin-bottom: 8px; }
.empty-state p { margin-bottom: 20px; }