/* ==========================================================================
   theme.css - professional UI theme for Adhyatma Sampada
   --------------------------------------------------------------------------
   Loaded LAST in templates/layout/default.php, after base.css, cake.css,
   custom.css and jquery-ui.css, so it can restyle all of them.
   Nothing else was edited - remove the one <link> line in the layout to
   go back to the old look.
   ========================================================================== */

:root {
    --brand:        #14477d;   /* headers, primary buttons          */
    --brand-dark:   #0e3159;   /* hover state of primary            */
    --brand-light:  #e8f0fa;   /* selected rows, hovered nav items  */
    --accent:       #1f7ae0;   /* links, active tab underline       */
    --topbar:       #0055b0;   /* title band + top navigation bar   */
    --heading:      #BB480F;   /* page headings + fieldset legends  */

    --page-bg:      #eef2f7;
    --surface:      #ffffff;   /* cards, panels, inputs             */
    --surface-2:    #f4f7fb;   /* table head band                   */
    --surface-3:    #eef2f7;   /* tabs, accordion bars, nav heading */
    --surface-4:    #dfe8f4;   /* hover on those bands              */
    --stripe:       #f1f4f8;   /* zebra rows - soft grey            */
    --border:       #dde3ec;
    --border-soft:  #eaeef4;
    --field-border: #c9d3e0;
    --disabled-bg:  #f3f5f9;
    --disabled-fg:  #8b97a8;

    --text:         #000000;
    --text-muted:   #64748b;

    --success:      #1f7a4d;
    --danger:       #c0392b;
    --warning:      #a06a00;

    --radius:       6px;
    --radius-lg:    10px;
    --shadow:       0 1px 2px rgba(16, 32, 56, 0.06), 0 1px 3px rgba(16, 32, 56, 0.08);
    --shadow-lg:    0 2px 6px rgba(16, 32, 56, 0.08), 0 8px 24px rgba(16, 32, 56, 0.08);

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   1. Base typography
   -------------------------------------------------------------------------- */

body {
    background: var(--page-bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

p, td, th, li, label, input, select, textarea, button {
    font-family: var(--font);
}

a {
    color: var(--accent);
    font-weight: 500;
    text-decoration: none;
}

a:hover {
    color: var(--brand);
    text-decoration: underline;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font);
    color: var(--text);
    font-weight: 600;
    line-height: 1.3;
}

/* width:fit-content keeps h3 a block (so what follows still starts on its own
   line) while shrinking the box to the text, which is what makes the underline
   stop at the end of the heading instead of running the full width. */
.content h3 {
    color: var(--heading);
    font-size: 1.5rem;
    font-weight: 600;
    width: fit-content;
    max-width: 100%;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--heading);
    margin: 0 0 14px 0;
}

.content h4 {
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 600;
    padding-bottom: 6px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.content .related h4 {
    color: var(--text-muted);
    border-bottom: 0;
}

/* --------------------------------------------------------------------------
   2. Application header + top bar
   -------------------------------------------------------------------------- */

p.site-title {
    background: var(--topbar);
    color: #fff;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: center;
    padding: 13px 16px;
    margin: 0;
    line-height: 1.3;
    border-bottom: 0.5px solid #747474;
}

/* Selectors mirror cake.css lines 313-319 so they tie on specificity and win
   by load order - otherwise the title area and each menu item keep the old
   #4688F1 / #629AF3 light blue against the dark bar. */
.top-bar,
.top-bar.expanded,
.top-bar.expanded .title-area,
.top-bar-section ul,
.top-bar-section ul li,
.top-bar-section li:not(.has-form) a:not(.button) {
    background: var(--topbar);
}

.top-bar {
    height: auto;
    min-height: 44px;
    box-shadow: var(--shadow);
}

.top-bar .title-area .name h1 a {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.top-bar-section li:not(.has-form) a:not(.button) {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    line-height: 44px;
    height: 44px;
    padding: 0 16px;
    transition: background 0.15s ease, color 0.15s ease;
}

.top-bar-section li:not(.has-form) a:not(.button):hover {
    background: rgba(0, 0, 0, 0.14);
    color: #fff;
    text-decoration: none;
}

.top-bar-section ul.right > li {
    line-height: 44px !important;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   3. Layout shell
   -------------------------------------------------------------------------- */

/* Full width shell: no centred column, no empty gutters on wide screens.
   cake.css builds equal height columns with the "one true layout" hack:
       .container            { overflow: hidden }
       .content, #actions-sidebar { margin-bottom: -99999px;
                                    padding-bottom: 99999px }
   This theme gives the sidebar and the content their own cards, so the hack
   is switched off here. Leaving the -99999px margin while overriding the
   padding collapses the floats inside an overflow:hidden parent, which wipes
   the sidebar (and its menu) off the page entirely.
   Foundation's own .clearfix:after still contains the floats. */
.container.clearfix {
    max-width: none;
    width: 100%;
    margin: 16px 0 24px 0;
    padding: 0 14px;
    overflow: visible;
    min-height: 0;
}

.container.clearfix .content,
.container.clearfix #actions-sidebar {
    margin-bottom: 0;
}

/* Explicit 15 / 85 split. Foundation only applies its large-3 / large-9
   widths above 40.0625em, and only when the markup sits in a .row - these
   rules pin the split for the sidebar + content pair regardless. */
@media screen and (min-width: 861px) {
    .container.clearfix #actions-sidebar {
        width: 15%;
        float: left;
        clear: left;
        padding-left: 0;
        padding-right: 12px;
    }

    .container.clearfix .content {
        width: 85%;
        float: left;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Below the sidebar breakpoint both blocks go full width and stack. */
@media screen and (max-width: 860px) {
    .container.clearfix #actions-sidebar,
    .container.clearfix .content {
        width: 100%;
        float: none;
    }
}

/* --------------------------------------------------------------------------
   4. Sidebar navigation
   Moved here in full from element/navbar.php.
   -------------------------------------------------------------------------- */

.container #actions-sidebar,
nav#actions-sidebar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 8px 0 14px 0;
}

#actions-sidebar .side-nav {
    padding: 0;
    margin: 0;
}

/* AppController builds the menu as one <ul> block per section, nested inside
   ul.side-nav - so each inner <ul> is a section and can be separated. */
#actions-sidebar .side-nav ul {
    list-style: none;
    margin: 0;
    padding: 0 0 10px 0;
}

/* no divider line above a section - the heading band separates them */
#actions-sidebar .side-nav ul + ul {
    border-top: 0;
    margin-top: 4px;
    padding-top: 4px;
}

#actions-sidebar .side-nav ul:last-child {
    padding-bottom: 2px;
}

/* Keep the menu on screen on desktop; the .mobilemenu class in navbar.php
   only hides it below 860px, where the toggle takes over. */
@media screen and (min-width: 861px) {
    .container.clearfix #actions-sidebar {
        display: block;
    }

    #actions-sidebar .side-nav,
    #actions-sidebar .side-nav.mobilemenu {
        display: block;
    }

    #actions-sidebar .toggle-nav {
        display: none;
    }
}

#actions-sidebar .side-nav li.heading {
    background: var(--surface-3);
    border-left: 3px solid var(--topbar);
    color: var(--brand);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.35;
    text-transform: uppercase;
    padding: 8px 12px 8px 11px;
    margin: 0 0 6px 0;
}

#actions-sidebar .side-nav li {
    margin: 0;
    padding: 0;
}

/* Collapsible sections: the heading is the handle (navbar.php wires the
   click and remembers open / closed per user in localStorage). */
#actions-sidebar .side-nav li.heading.collapsible {
    cursor: pointer;
    position: relative;
    padding-right: 26px;
    -webkit-user-select: none;
    user-select: none;
}

#actions-sidebar .side-nav li.heading.collapsible:hover {
    background: var(--surface-4);
}

#actions-sidebar .side-nav li.heading.collapsible:after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -5px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
    opacity: 0.75;
}

/* open: chevron turns to point down. is-open lives on the heading, not the
   list, because one <ul> can contain several sections. */
#actions-sidebar .side-nav li.heading.collapsible.is-open:after {
    margin-top: -7px;
    transform: rotate(45deg);
}

#actions-sidebar .side-nav li a:not(.button) {
    display: block;
    width: 100%;
    color: var(--text);
    font-size: 15px;
    padding: 8px 14px;
    border-left: 3px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#actions-sidebar .side-nav li a:not(.button):hover {
    background: var(--brand-light);
    color: var(--brand);
    border-left-color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

/* the animated underline from navbar.php is not needed with the new style */
#actions-sidebar .side-nav li a:not(.button)::before {
    display: none;
}

#actions-sidebar .toggle-nav {
    color: var(--brand);
    font-weight: 600;
    padding: 8px 16px;
}

/* Moved here from element/navbar.php: the hamburger and the drop down menu
   it opens on small screens. */
.toggle-nav {
    display: none;
}

@media screen and (max-width: 860px) {
    .toggle-nav {
        display: block;
    }

    #actions-sidebar .side-nav.mobilemenu {
        display: none;
    }

    #actions-sidebar .side-nav {
        width: 100%;
        position: absolute;
        top: 26px;
        left: 0;
        padding: 10px 0;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 8px;
        box-shadow: 0 6px 20px rgba(16, 32, 56, 0.15);
        z-index: 1;
    }
}

/* --------------------------------------------------------------------------
   5. Content card
   -------------------------------------------------------------------------- */

.content {
    background: var(--surface);
    font-size: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 18px 20px 20px 20px;
}

.event_status,
.photo-info {
    border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   6. Forms
   -------------------------------------------------------------------------- */

fieldset {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 20px 8px 20px;
    margin: 0 0 24px 0;
}

/* base.css sets "fieldset legend { background:#fff }" to punch the legend
   through the fieldset border. On a white card that is invisible, but in the
   dark theme it painted a white bar across the top of every fieldset - so the
   background follows the surface instead of being hard white. The selector
   matches base.css's shape to beat it on load order. */
fieldset legend,
legend {
    background: var(--surface);
    color: var(--heading);
    font-size: 17px;
    font-weight: 600;
    width: auto;
    max-width: 100%;
    padding: 0 8px;
    margin-left: 4px;
}

label {
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    margin-top: 2px;
    margin-bottom: 6px;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea,
select {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--field-border);
    border-radius: var(--radius);
    box-shadow: none;
    font-size: 15px;
    height: auto;
    padding: 9px 11px;
    margin-bottom: 18px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea {
    line-height: 1.5;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(31, 122, 224, 0.15);
    outline: none;
}

input[disabled],
select[disabled],
textarea[disabled],
input[readonly] {
    background: var(--disabled-bg);
    color: var(--disabled-fg);
    cursor: not-allowed;
}

.date-time-label {
    color: var(--text);
    font-size: 15.5px;
    font-weight: 600;
}

/* Cake wraps each control in div.input.<type>; give the groups air so the
   long tabbed forms are easy to scan. */
.content .input {
    margin-bottom: 2px;
}

.content .two-column,
.content .three-column,
.content .date-name {
    margin-bottom: 2px;
}

/* custom.css floats .two-column / .three-column. Floats of unequal height
   snag on each other: if the left cell is taller (a wrapped label, a
   textarea, a validation message) the next cell cannot fit beside it, slides
   down and leaves a hole - which is why a field sometimes sits alone on the
   right with empty space to its left.
   inline-block lays the cells out as a row instead, and every new row starts
   below the tallest cell of the row before it, so they always line up.
   Widths are a little under 1/2 and 1/3 to absorb the whitespace between
   inline-block elements. */
.content .two-column,
.content .two-column-file-size,
.content .date-name {
    display: inline-block;
    float: none;
    vertical-align: top;
    width: 49%;
}

.content .three-column,
.content .three-column-file-size {
    display: inline-block;
    float: none;
    vertical-align: top;
    width: 32.5%;
}

/* the inner halves of a size + unit pair still float side by side */
.content .two-column-file-size .number,
.content .three-column-file-size .number,
.content .two-column-file-size .select,
.content .three-column-file-size .select,
.content .date-name label,
.content .date-name input,
.content .date-name .input.select select {
    display: block;
    float: left;
}

@media screen and (max-width: 860px) {
    .content .two-column,
    .content .two-column-file-size,
    .content .three-column,
    .content .three-column-file-size,
    .content .date-name {
        display: block;
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   7. Buttons
   custom.css sets button{background:#007fff !important}, so !important is
   required here to win.
   -------------------------------------------------------------------------- */

button,
input[type="submit"],
input[type="button"],
.button {
    background: var(--brand) !important;
    color: #fff !important;
    border: 1px solid transparent;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow);
    cursor: pointer;
    font-size: 15px !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 9px 20px !important;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.button:hover {
    background: var(--brand-dark) !important;
    box-shadow: var(--shadow-lg);
}

#action-button a {
    background: var(--brand);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: #fff !important;
    font-size: 15px;
    font-weight: 600;
    padding: 9px 18px;
    transition: background 0.15s ease;
}

#action-button a:hover {
    background: var(--brand-dark);
    text-decoration: none;
}

.btn-success,
.button-success {
    background: var(--success) !important;
}

.btn-success:hover,
.button-success:hover {
    background: #17603b !important;
}

/* .del_button is a <div>, so width:auto would stretch it across the page -
   inline-block makes it hug its label instead (custom.css pinned it at 100px,
   which cut off anything longer than "Delete"). */
.del_button {
    background: var(--danger) !important;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-transform: none;
    display: inline-block;
    width: auto;
    padding: 8px 18px;
}

.edit-button {
    background-color: var(--accent);
    border-color: var(--accent);
    border-radius: var(--radius);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   8. Tables
   -------------------------------------------------------------------------- */

table {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    width: 100%;
}

table thead tr {
    border-top: 0;
}

/* "tr" included for the same base.css specificity reason as the body rows. */
table thead tr th,
table thead tr td,
table thead th,
table thead td {
    background: var(--surface-2);
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.01em;
    /* headings read as written - no forced upper casing */
    text-transform: none;
    text-align: left;
    padding: 8px 9px;
    border-bottom: 1px solid var(--border);
    /* cake.css sets .index table{table-layout:fixed}; with nowrap the long
       headings overflow their column and overlap the next one. */
    white-space: normal;
    overflow-wrap: anywhere;
}

table thead th a {
    color: var(--text);
    font-weight: 600;
    font-size: 1rem;
}

table thead th a:hover {
    color: var(--brand);
}

/* Selectors include "tr" on purpose. base.css has
       table tbody tr th, table tbody tr td, table tr td { line-height: 1.125rem }
   at four elements of specificity, which outranks a plain "table tbody td" and
   was pinning every index table's rows to an 18px line regardless of what was
   set here. Matching its shape lets this rule win on load order. */
table tbody tr td,
table tbody tr th,
table tbody td,
table tbody th {
    /* base.css pins "table tr th, table tr td { color:#222 }", which beats
       inheriting from body - so cells stayed dark grey in the dark theme. */
    color: var(--text);
    border-bottom: 1px solid var(--border-soft);
    font-size: 15px;
    line-height: 1.4;
    padding: 7px 10px;
    vertical-align: top;
    /* custom.css uses word-break:all, which chops words mid-letter */
    word-break: normal;
    overflow-wrap: anywhere;
}

/* base.css stripes EVEN rows with a hard #F9F9F9 ("table tr:nth-of-type(even)")
   and no variable behind it. That cancelled out the theme's odd-row stripe in
   light mode and painted light grey rows in the dark theme, so both parities
   are declared here at a specificity that beats it. */
/* First row is plain so it separates from the grey header band; the stripe
   starts on the second row. */
table > tbody > tr:nth-of-type(odd) {
    background: var(--surface);
}

table > tbody > tr:nth-of-type(even) {
    background: var(--stripe);
}

table > tbody > tr:hover {
    background: var(--brand-light);
}

table tbody tr:last-child td {
    border-bottom: 0;
}

.vertical-table {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

/* --------------------------------------------------------------------------
   9. Pagination
   -------------------------------------------------------------------------- */

.paginator {
    margin-top: 16px;
}

.paginator ul.pagination li {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    height: auto;
    margin: 0 3px;
    overflow: hidden;
}

.paginator ul.pagination li a,
.paginator ul.pagination li span {
    color: var(--text-muted);
    font-size: 15px;
    padding: 6px 12px;
}

.paginator ul.pagination li a:hover {
    background: var(--brand-light);
    text-decoration: none;
}

ul.pagination li.active a,
.paginator ul.pagination li.current a {
    background-color: var(--brand);
    color: #fff;
}

.paginator p {
    color: var(--text-muted);
    font-size: 12.5px;
}

/* --------------------------------------------------------------------------
   10. Flash messages
   -------------------------------------------------------------------------- */

div.message {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--text-muted);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--text);
    font-size: 15.5px;
    font-weight: 500;
    margin: 14px auto;
    max-width: 1440px;
    padding: 12px 16px;
}

div.message.success {
    border-left-color: var(--success);
    color: var(--success);
}

div.message.error {
    border-left-color: var(--danger);
    color: var(--danger);
}

div.message.warning {
    border-left-color: var(--warning);
    color: var(--warning);
}

/* --------------------------------------------------------------------------
   11. Validation errors
   -------------------------------------------------------------------------- */

.form .error-message,
.error-message {
    color: var(--danger);
    font-size: 14.5px;
    font-style: normal;
    font-weight: 600;
    margin-top: -8px;
    margin-bottom: 12px;
    padding: 0;
}

.input.error input,
.input.error select,
.input.error textarea,
input.form-error {
    border-color: var(--danger);
}

.required > label:after {
    color: var(--danger);
}

/* --------------------------------------------------------------------------
   12. jQuery UI tabs and accordion
   -------------------------------------------------------------------------- */

.ui-widget {
    font-family: var(--font);
    font-size: 15.5px;
}

.ui-tabs {
    background: transparent;
    border: 0;
    padding: 0;
}

/* jquery-ui.css gives every widget container a border via
   ".ui-widget.ui-widget-content { border: 1px solid #c5c5c5 }" - the tabs and
   accordion wrappers pick it up. Same selector shape so it wins on load order. */
.ui-widget.ui-widget-content {
    border: 0;
}

/* Boxed tabs: every tab keeps its own outline so the strip reads as a row of
   separate tabs, and the open one is filled solid. */
.ui-tabs .ui-tabs-nav {
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--border);
    border-radius: 0;
    padding: 0 0 0 2px;
    margin: 0;
}

/* Tabs are laid out as inline-block, not floats. With floats, a tab that is
   even 1px taller than its neighbours makes the tabs that wrap onto the next
   row slide sideways to clear it - which is why the second row jumped right
   every time a different tab was opened. inline-block rows cannot interleave.
   No negative margins either: they only pay off when the strip is a single
   row, and they feed the same re-flow. */
.ui-tabs .ui-tabs-nav li {
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    display: inline-block;
    float: none;
    vertical-align: bottom;
    margin: 0 3px 3px 0;
    padding: 0;
    top: 0;
}

.ui-tabs .ui-tabs-nav li .ui-tabs-anchor {
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    padding: 10px 18px;
    border-bottom: 0;
    float: none;
    display: inline-block;
}

.ui-tabs .ui-tabs-nav li:hover {
    background: var(--surface-4);
}

.ui-tabs .ui-tabs-nav li:hover .ui-tabs-anchor {
    color: var(--brand);
}

/* jquery-ui.css gives the open tab padding-bottom:1px and margin-bottom:-1px,
   making it a pixel taller than the rest. Cancelled here so every tab is the
   same box and nothing re-flows when the selection moves. */
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    background: var(--topbar);
    border-color: var(--topbar);
    margin: 0 3px 3px 0;
    padding: 0;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-active:hover .ui-tabs-anchor {
    color: #ffffff;
}

/* The open tab's panel is a bordered box hanging off the tab strip, with real
   padding so the first field is not jammed against the edge. */
.ui-tabs .ui-tabs-panel {
    background: var(--surface);
    border: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 20px 22px 18px 22px;
    margin-bottom: 4px;
}

/* jQuery UI builds accordion bars out of <h3>, so they pick up .content h3.
   width/display are reset here to keep the bars full width - the fitted
   underline is meant for page headings only. */
.ui-accordion .ui-accordion-header {
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    display: block;
    width: auto;
    max-width: none;
    font-size: 15.5px;
    font-weight: 600;
    margin: 10px 0 0 0;
    padding: 11px 12px 11px 32px;
}

.ui-accordion .ui-accordion-header.ui-state-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* This install has no webroot/css/images/ui-icons_*.png, so jQuery UI's icon
   span is an empty 16px box - hide it and draw the chevron in CSS instead.
   The header is position:relative already (jquery-ui.css line 93). */
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
    display: none;
}

.ui-accordion .ui-accordion-header:before {
    content: "";
    position: absolute;
    left: 13px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-right: 2px solid var(--topbar);
    border-bottom: 2px solid var(--topbar);
    transform: rotate(-45deg);
    transition: transform 0.15s ease, border-color 0.15s ease;
}

/* Open: chevron turns to point down and goes white on the filled bar. */
.ui-accordion .ui-accordion-header.ui-state-active:before {
    margin-top: -6px;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
    transform: rotate(45deg);
}

.ui-accordion .ui-accordion-content {
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
}

.ui-datepicker {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   Add / edit screens: flatter chrome
   The content wrapper on every add and edit view carries .form (index views
   carry .index), so this keeps the change off the list screens.
   -------------------------------------------------------------------------- */

.content.form .ui-tabs .ui-tabs-nav {
    border-bottom: 0;
}

/* --------------------------------------------------------------------------
   13. Shared page components
   Defaults for blocks that individual templates build on (filter bars,
   status panels, detail cards). Page level <style> blocks still win where
   they set the same property, so only safe defaults live here.
   -------------------------------------------------------------------------- */

.filters_wrapper {
    margin-bottom: 4px;
}

.filters_wrapper fieldset {
    align-items: flex-end;
}

.filters_wrapper p {
    margin-bottom: 8px;
}

.filters_wrapper label {
    display: block;
}

/* Filter fields fill their cell instead of stopping at the old 200px cap.
   The :not() parts lift specificity above the per page
   ".pg-x form fieldset input { max-width:200px !important }" rules, so this
   one place governs every index screen's filter bar. Submit buttons are
   excluded so the Filter / Search buttons keep their own size. */
.content .filters_wrapper fieldset input:not([type="submit"]):not([type="button"]),
.content .filters_wrapper fieldset select:not([type="submit"]) {
    max-width: 100% !important;
    width: 90%;
}

.event_status {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
}

.main_wrapper label {
    color: var(--brand);
}

.search_box input {
    margin-bottom: 0;
}

.nextstep {
    font-size: 15px;
}

.toggle-nav {
    border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   14. Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
    .container.clearfix {
        margin: 12px auto;
        padding: 0 10px;
    }

    .content {
        padding: 16px 14px 18px 14px;
    }

    .container #actions-sidebar,
    nav#actions-sidebar {
        margin-bottom: 14px;
    }

    p.site-title {
        font-size: 17px;
        padding: 11px 12px;
    }
}

/* ==========================================================================
   15. Page CSS - collected here from the individual templates
   --------------------------------------------------------------------------
   Every screen used to carry its own <style> block. They now live here so a
   change is made in one place. Order matters: the shared block first, then
   the per page blocks, which are scoped by a pg-<controller>-<action> class
   on that page's content wrapper and therefore still win.
   ========================================================================== */

/* ---- shared by several screens ---------------------------------------- */

.event_status { float:right; display: block; background: #e8f0fa; border: 0; border-radius: 6px; color: #14477d; padding: 10px 14px; margin: 0 0 10px 0; }
.filters_wrapper { clear:both; }
.filters_wrapper p { width:18%; float:left; }
.filters_wrapper fieldset { margin: 0px; }
.filters_wrapper fieldset button { margin-top: 20px; }
.btn-success { margin:0 0 0 10px; padding:8px; }
.first_wrapper div { margin-bottom:10px; }
.second_wrapper div { width: 25%; float: left; margin-bottom:10px; }
.main_wrapper b { color:#14477d; }
p.message { display: block; margin-left: 25px; color: #7f1d1d; background: #fdf3f2; border-left: 4px solid #c0392b; border-radius: 6px; padding: 10px 14px; }
.orange-button { background-color: #b45309 !important; }
.highlight-field { width: 30%; }
.highlight-field label { font-size: 15px; color: #b45309; }
.highlight-field select { font-size: 16px; }
.main_wrapper { padding:16px 18px; border:solid 1px #dde3ec; border-radius:10px; background:#fff; }
.main_wrapper div { margin-bottom:10px; }
.main_wrapper label { font-weight:600; color:#14477d; font-size:15px; padding-bottom:5px; }
.selectoption { width:100px; }
.nextstep { color:#c0392b; font-weight:600; }
.search_box input { float:left; width:300px; }
.ui-accordion-content-active { height:auto !important; }
#data-further-processed-by { width:90%; float:left; }

/* ---- templates/AlbumDataRestore/edit.php ---- */

.pg-albumdatarestore-edit table { width:45%; float:left; margin:20px; }
.pg-albumdatarestore-edit table td { border:1px solid #dde3ec; }

/* ---- templates/AlbumDataRestore/index.php ---- */

.pg-albumdatarestore-index form p { width: 20%; float: left; margin-bottom: 15px !important; }
.pg-albumdatarestore-index form fieldset input, .pg-albumdatarestore-index form fieldset select { margin: 0px !important; max-width: 200px !important; }
.pg-albumdatarestore-index fieldset { margin:0; }

/* ---- templates/Albums/archiveindex.php ---- */

.pg-albums-archiveindex form fieldset input { margin: 0px !important; max-width: 200px !important; }
.pg-albums-archiveindex .filters_wrapper p { flex-grow: 1; }
.pg-albums-archiveindex .filters_wrapper fieldset { display: flex; column-gap: 15px; width: 100%; flex-wrap: wrap; }
.pg-albums-archiveindex .filters_wrapper .break { flex-basis: 100%; height: 0; }
.pg-albums-archiveindex .filters_wrapper fieldset button { margin-top: 20px; padding: 10px 30px !important; }

/* ---- templates/Albums/dataprocessingindex.php ---- */

.pg-albums-dataprocessingindex form fieldset input { margin: 0px !important; max-width: 200px !important; }
.pg-albums-dataprocessingindex .filters_wrapper p { flex-grow: 1; }
.pg-albums-dataprocessingindex .filters_wrapper fieldset { display: flex; column-gap: 15px; width: 100%; }
.pg-albums-dataprocessingindex .filters_wrapper fieldset button { margin-top: 20px; padding: 10px 30px !important; }

/* ---- templates/Albums/details.php ---- */

.pg-albums-details .main_wrapper { margin-bottom: 30px; border: 1px solid #dde3ec; border-radius: 10px; background: #fff; padding: 16px 18px; box-shadow: 0 1px 2px rgba(16,32,56,.06), 0 1px 3px rgba(16,32,56,.08); }
.pg-albums-details table th { border-bottom:none !important; background :#f4f7fb; color:#47566b !important; }
.pg-albums-details table thead tr { border-bottom:none !important; }
.pg-albums-details { line-height:1.8; }
.pg-albums-details p { margin-bottom:2.5rem; }

/* ---- templates/Albums/edit.php ---- */

.pg-albums-edit .status-field label, .pg-albums-edit .status-field { color:#c0392b; }
.pg-albums-edit .event_status { float:right; display: flex; flex-direction:column; align-items:start; background: #e8f0fa; border: 0; border-radius: 6px; color: #14477d; padding: 10px 14px; margin: 0 0 10px 0; width: fit-content; }
.pg-albums-edit .photo-info { background: #fdf8e7; padding: 12px 14px; border: 1px solid #ecd9a0; border-radius: 8px; margin-bottom: 10px; display: flex; flex-wrap: wrap; }
.pg-albums-edit .photo-info p { flex: 1 1 45%; margin-bottom: 2px; }
.pg-albums-edit .main_wrapper { border: 1px solid #dde3ec; border-radius: 10px; background: #fff; margin-bottom: 10px; padding: 20px; }
.pg-albums-edit .main_wrapper div { margin-bottom: 15px; }
.pg-albums-edit .break-line { border: 1px solid #e2e8f0; border-radius: 8px; margin: 30px 0; overflow: auto; }
.pg-albums-edit .button-success { padding: 6px 14px !important; background: #1f7a4d !important; border-radius: 6px; }
.pg-albums-edit .edit-button { background-color: #1f7ae0; border-color: #1f7ae0; border-radius: 6px; color: #fff !important; padding: 6px 14px; margin: 0 10px; }
#correctionOverlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 9999; }
#msgBox { background: #fff; padding: 20px; min-width: 280px; max-width: 420px; border-radius: 6px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.pg-albums-edit table tr td, .pg-albums-edit table tr th { line-height:2 !important; }

/* ---- templates/Albums/photoindex.php ---- */

.pg-albums-photoindex form fieldset input { margin: 0px !important; max-width: 200px !important; }
.pg-albums-photoindex .filters_wrapper p { flex-grow: 1; }
.pg-albums-photoindex .filters_wrapper fieldset { display: flex; column-gap: 15px; width: 100%; }
.pg-albums-photoindex .filters_wrapper fieldset button { margin-top: 20px; padding: 10px 30px !important; }

/* ---- templates/Archives/index.php ---- */

.pg-archives-index form p { width: 20%; float: left; margin-bottom: 15px !important; }
.pg-archives-index form fieldset input { margin: 0px !important; max-width: 200px !important; }
.pg-archives-index fieldset { margin:0; }

/* ---- templates/DataRestore/edit.php ---- */

.pg-datarestore-edit table { width:45%; float:left; margin:20px; }
.pg-datarestore-edit table td { border:1px solid #dde3ec; }

/* ---- templates/DataRestore/index.php ---- */

.pg-datarestore-index form p { width: 20%; float: left; margin-bottom: 15px !important; }
.pg-datarestore-index form fieldset input, .pg-datarestore-index form fieldset select { margin: 0px !important; max-width: 200px !important; }
.pg-datarestore-index fieldset { margin:0; }

/* ---- templates/DataRestore/mgmt.php ---- */

.pg-datarestore-mgmt table { width:46%; float:left; margin:20px; }
.pg-datarestore-mgmt table td { border:1px solid #dde3ec; }

/* ---- templates/DataRestore/mgmtindex.php ---- */

.pg-datarestore-mgmtindex form p { width: 20%; float: left; margin-bottom: 15px !important; }
.pg-datarestore-mgmtindex form fieldset input, .pg-datarestore-mgmtindex form fieldset select { margin: 0px !important; max-width: 200px !important; }
.pg-datarestore-mgmtindex fieldset { margin:0; }

/* ---- templates/DataRestore/restore.php ---- */

.pg-datarestore-restore table { width:50%; float:left; margin-bottom: 30px; }
.pg-datarestore-restore table td { border:1px solid #dde3ec; }

/* ---- templates/DataRestore/restoreindex.php ---- */

.pg-datarestore-restoreindex form p { width: 20%; float: left; margin-bottom: 15px !important; }
.pg-datarestore-restoreindex form fieldset input, .pg-datarestore-restoreindex form fieldset select { margin: 0px !important; max-width: 200px !important; }
.pg-datarestore-restoreindex fieldset { margin:0; }

/* ---- templates/DataRestore/transport.php ---- */

.pg-datarestore-transport table { width:46%; float:left; margin:20px; }
.pg-datarestore-transport table td { border:1px solid #dde3ec; }

/* ---- templates/DataRestore/transportindex.php ---- */

.pg-datarestore-transportindex form p { width: 20%; float: left; margin-bottom: 15px !important; }
.pg-datarestore-transportindex form fieldset input { margin: 0px !important; max-width: 200px !important; }
.pg-datarestore-transportindex fieldset { margin:0; }

/* ---- templates/EventDetails/add1.php ---- */

.pg-eventdetails-add1 .main_wrapper { border: 1px solid #dde3ec; border-radius: 10px; background: #fff; padding: 16px 18px; }
.pg-eventdetails-add1 .main_wrapper div { margin-bottom: 10px; }
.pg-eventdetails-add1 .main_wrapper label { font-size: 15px !important; font-weight: bold; }
.pg-eventdetails-add1 .angle_checkbox { border: 1px solid #dde3ec; border-radius: 6px; margin: 10px 0; padding: 10px 12px; }
#chckbox-label { font-size: 15px !important; font-weight: bold; }

/* ---- templates/EventDetails/edit.php ---- */

.pg-eventdetails-edit .form button[type="submit"] { float:left; }

/* ---- templates/EventRawdata/index.php ---- */

.pg-eventrawdata-index .three-column span { width:30%; float:left; }
.pg-eventrawdata-index .three-column label { width: 10%; float: left; padding-top: 10px; }
.pg-eventrawdata-index .three-column select { width: 15%; float: left; }
.pg-eventrawdata-index .three-column .addnew button { margin: 0; float:right; }

.pg-eventrawdata-index form p { width: 20%; float: left; margin-bottom: 15px !important; }
.pg-eventrawdata-index form fieldset input { margin: 0px !important; max-width: 200px !important; }
.pg-eventrawdata-index fieldset { margin:0; }

/* ---- templates/Events/archiveindex.php ---- */

.pg-events-archiveindex form p { width: 20%; float: left; margin-bottom: 15px !important; }
.pg-events-archiveindex form fieldset input, .pg-events-archiveindex form fieldset select { margin: 0px !important; max-width: 200px !important; }
.pg-events-archiveindex fieldset { margin:0; }
.pg-events-archiveindex .btn, .pg-events-archiveindex .btn:hover { background: #14477d !important; border-radius: 6px; padding: 0.7rem 2rem 0.7rem 2rem !important; margin-right:10px; color:#fff; }

/* ---- templates/Events/detail.php ---- */

.pg-events-detail .main_wrapper { margin-bottom: 30px; border: 1px solid #dde3ec; border-radius: 10px; background: #fff; padding: 16px 18px; box-shadow: 0 1px 2px rgba(16,32,56,.06), 0 1px 3px rgba(16,32,56,.08); }
.pg-events-detail table th { border-bottom:none !important; background :#f4f7fb; color:#47566b !important; }
.pg-events-detail table thead tr { border-bottom:none !important; }
#discardpopup { display: none; position: fixed; top: 50%; /* left: 50%; */ /* transform: translate(-50%, -50%); */ border: 1px solid black; padding: 10px; background-color: white; }

/* ---- templates/Events/editingindex.php ---- */

.pg-events-editingindex .three-column span { width:30%; float:left; }
.pg-events-editingindex .three-column label { width: 10%; float: left; padding-top: 10px; }
.pg-events-editingindex .three-column select { width: 15%; float: left; }
.pg-events-editingindex .three-column .addnew button { margin: 0; float:right; }

.pg-events-editingindex form p { width: 20%; float: left; margin-bottom: 15px !important; }
.pg-events-editingindex form fieldset input { margin: 0px !important; max-width: 200px !important; }
.pg-events-editingindex fieldset { margin:0; }
.pg-events-editingindex .filters_wrapper p { width:18%; float:left; margin-left: 5px; }

/* ---- templates/Events/lto_bulkadd.php ---- */

.pg-events-lto-bulkadd .two-column-file-size .input.text { width: 70%; float: left; }

/* ---- templates/Events/shootingindex.php ---- */

.pg-events-shootingindex .three-column span { width:30%; float:left; }
.pg-events-shootingindex .three-column label { width: 10%; float: left; padding-top: 10px; }
.pg-events-shootingindex .three-column select { width: 15%; float: left; }
.pg-events-shootingindex .three-column .addnew button { margin: 0; float:right; }

.pg-events-shootingindex form p { width: 20%; float: left; margin-bottom: 15px !important; }
.pg-events-shootingindex form fieldset input { margin: 0px !important; max-width: 200px !important; }
.pg-events-shootingindex fieldset { margin:0; }
.pg-events-shootingindex .filters_wrapper p { width:18%; float:left; margin-left: 5px; }

/* ---- templates/Events/view.php ---- */

.pg-events-view .vertical-table { width: 90%; }
.pg-events-view .vertical-table td { text-align:left; }
.pg-events-view .vertical-table th { width:30%; }
.pg-events-view .details { width:90%; padding: 12px 14px; border: 1px solid #dde3ec; border-radius: 10px; background: #fff; margin: 0 auto; }

/* ---- templates/Media/index.php ---- */

.pg-media-index form p { width: 20%; float: left; margin-bottom: 15px !important; }
.pg-media-index form fieldset input { margin: 0px !important; max-width: 200px !important; }
.pg-media-index fieldset { margin:0; }

/* ---- templates/Mp4Transcoding/index.php ---- */

.pg-mp4transcoding-index .three-column span { width:30%; float:left; }
.pg-mp4transcoding-index .three-column label { width: 10%; float: left; padding-top: 10px; }
.pg-mp4transcoding-index .three-column select { width: 15%; float: left; }
.pg-mp4transcoding-index .three-column .addnew button { margin: 0; float:right; }

.pg-mp4transcoding-index form p { width: 20%; float: left; margin-bottom: 15px !important; }
.pg-mp4transcoding-index form fieldset input { margin: 0px !important; max-width: 200px !important; }
.pg-mp4transcoding-index fieldset { margin:0; }

/* ---- templates/Reports/datarchival.php ---- */

.pg-reports-datarchival .btn { padding:10px; display:block; background:#14477d; border-radius:6px; box-shadow:0 1px 2px rgba(16,32,56,.12); width:100px; text-align:center; float:right; margin:10px; color:rgb(255 255 255); }

/* ---- templates/Reports/rawdatasorting.php ---- */

.pg-reports-rawdatasorting .btn { padding:10px; display:block; background:#14477d; border-radius:6px; box-shadow:0 1px 2px rgba(16,32,56,.12); width:100px; text-align:center; float:left; margin:10px; color:rgb(255 255 255); }

.pg-reports-rawdatasorting .filter_container { display: flex; flex-direction: row; flex-wrap: wrap; gap: 20px; }
.pg-reports-rawdatasorting .filter_container p { flex: 0 0 300px; }

/* ---- templates/Events/editingreport.php ---- */

.pg-events-editingreport .btn { padding:10px; display:block; background:#14477d; border-radius:6px; box-shadow:0 1px 2px rgba(16,32,56,.12); width:100px; text-align:center; float:left; margin:10px; color:rgb(255 255 255); }

/* ---- templates/Events/report.php ---- */

.pg-events-report .btn { padding:10px; display:block; background:#14477d; border-radius:6px; box-shadow:0 1px 2px rgba(16,32,56,.12); width:100px; text-align:center; float:left; margin:10px; color:rgb(255 255 255); }

/* ---- templates/Events/report_archive.php ---- */

.pg-events-report-archive .btn { padding:10px; display:block; background:#14477d; border-radius:6px; box-shadow:0 1px 2px rgba(16,32,56,.12); width:100px; text-align:center; float:left; margin:10px; color:rgb(255 255 255); }

/* ---- templates/Reports/archive.php ---- */

.pg-reports-archive .btn { padding:10px; display:block; background:#14477d; border-radius:6px; box-shadow:0 1px 2px rgba(16,32,56,.12); width:100px; text-align:center; float:left; margin:10px; color:rgb(255 255 255); }

/* ---- templates/Reports/editing.php ---- */

.pg-reports-editing .btn { padding:10px; display:block; background:#14477d; border-radius:6px; box-shadow:0 1px 2px rgba(16,32,56,.12); width:100px; text-align:center; float:left; margin:10px; color:rgb(255 255 255); }

/* ---- templates/Reports/eventdaily.php ---- */

.pg-reports-eventdaily .btn { padding:10px; display:block; background:#14477d; border-radius:6px; box-shadow:0 1px 2px rgba(16,32,56,.12); width:100px; text-align:center; float:left; margin:10px; color:rgb(255 255 255); }

/* --------------------------------------------------------------------------
   Dark theme
   --------------------------------------------------------------------------
   Driven by <html data-theme="dark">, which the layout renders from the user's
   saved preference (users.theme). Almost everything is a variable swap; the
   handful of rules below it are the places where a literal colour had to be
   restated for dark.
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] {
    --brand:        #7fb2ee;
    --brand-dark:   #a8ccf5;
    --brand-light:  #2f4666;
    --accent:       #79b4f7;
    --topbar:       #0b3a70;
    --heading:      #ff9d5c;

    --page-bg:      #0f1722;
    --surface:      #1a2434;
    --surface-2:    #202c40;
    --surface-3:    #243047;
    --surface-4:    #2c3a55;
    --stripe:       #223149;
    --border:       #33415c;
    --border-soft:  #2a3548;
    --field-border: #3d4d69;
    --disabled-bg:  #1b2433;
    --disabled-fg:  #6b7a90;

    --text:         #e8eef7;
    --text-muted:   #9aa8bd;

    --success:      #4ade80;
    --danger:       #ff7a6b;
    --warning:      #e8b563;

    --shadow:       0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-lg:    0 2px 6px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Foundation and cake.css paint several surfaces white or near white with no
   variable involved - repoint them here. */
:root[data-theme="dark"] body,
:root[data-theme="dark"] .content,
:root[data-theme="dark"] fieldset,
:root[data-theme="dark"] table,
:root[data-theme="dark"] .ui-tabs .ui-tabs-panel,
:root[data-theme="dark"] .ui-accordion .ui-accordion-content,
:root[data-theme="dark"] nav#actions-sidebar {
    background: var(--surface);
    color: var(--text);
}

:root[data-theme="dark"] body {
    background: var(--page-bg);
}

:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] input[type="tel"],
:root[data-theme="dark"] input[type="url"],
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] input[type="time"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
    background: var(--surface-2);
    /* same treatment as the table data - pure white, slightly heavier */
    color: #ffffff;
    font-weight: 500;
}

:root[data-theme="dark"] option {
    background: var(--surface-2);
    color: #ffffff;
}

/* placeholders stay muted so an empty field still reads as empty */
:root[data-theme="dark"] ::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

/* disabled / read only fields keep the muted treatment */
:root[data-theme="dark"] input[disabled],
:root[data-theme="dark"] select[disabled],
:root[data-theme="dark"] textarea[disabled],
:root[data-theme="dark"] input[readonly] {
    background: var(--disabled-bg);
    color: var(--disabled-fg);
    font-weight: 400;
}

:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] select:focus {
    background: var(--surface-2);
    box-shadow: 0 0 0 3px rgba(121, 180, 247, 0.22);
}

/* the theme's own literals */
:root[data-theme="dark"] .ui-datepicker,
:root[data-theme="dark"] .ui-widget-content {
    background: var(--surface-2);
    color: var(--text);
}

:root[data-theme="dark"] #actions-sidebar .side-nav li a:not(.button) {
    color: var(--text);
}

:root[data-theme="dark"] div.message {
    background: var(--surface-2);
}

/* page blocks from section 15 that carry their own literal colours */
:root[data-theme="dark"] .event_status {
    background: var(--surface-3);
    color: var(--text);
}

:root[data-theme="dark"] .main_wrapper,
:root[data-theme="dark"] .angle_checkbox,
:root[data-theme="dark"] .details {
    background: var(--surface-2);
    border-color: var(--border);
}

:root[data-theme="dark"] .main_wrapper b,
:root[data-theme="dark"] .main_wrapper label {
    color: var(--brand);
}

:root[data-theme="dark"] .photo-info {
    background: #33280f;
    border-color: #5c4a1e;
}

:root[data-theme="dark"] p.message {
    background: #3a1f1c;
    color: #ffb4a8;
}

:root[data-theme="dark"] table th {
    background: var(--surface-2) !important;
    color: var(--text) !important;
}

/* Catch-all for table text in dark mode. base.css hard sets color:#222 on
   "table tr th/td", tfoot and caption, and cake.css sets #1798A5 on th and
   .vertical-table th - all of them beat inheriting from body, which is why
   list rows stayed dark grey on the dark background. The :root[data-theme]
   prefix outranks every one of them. */
:root[data-theme="dark"] table tr td,
:root[data-theme="dark"] table tr th,
:root[data-theme="dark"] table tbody tr th,
:root[data-theme="dark"] table tfoot tr th,
:root[data-theme="dark"] table caption,
:root[data-theme="dark"] .vertical-table th {
    color: var(--text);
}

/* The data itself is pure white and a touch heavier, so rows stay legible
   against the dark surface. Header cells are excluded and keep --text. */
:root[data-theme="dark"] table tbody tr td,
:root[data-theme="dark"] table tbody td,
:root[data-theme="dark"] table tfoot tr td {
    color: #ffffff;
    font-weight: 500;
}

/* links inside rows keep the accent so they stay recognisable as links */
:root[data-theme="dark"] table tbody tr td a {
    color: var(--accent);
}

:root[data-theme="dark"] .status-field label,
:root[data-theme="dark"] .status-field,
:root[data-theme="dark"] .nextstep {
    color: var(--danger);
}

:root[data-theme="dark"] #msgBox {
    background: var(--surface);
    color: var(--text);
}

/* the toggle in the top bar */
.theme-toggle {
    white-space: nowrap;
}

/* fieldsets nested inside a tab panel or accordion sit on the same --surface,
   so the legend background above is already right for them. */
:root[data-theme="dark"] fieldset legend,
:root[data-theme="dark"] legend {
    background: var(--surface);
    color: var(--heading);
}


/* ==========================================================================
   Login screen
   --------------------------------------------------------------------------
   templates/Users/login.php on the 'login' layout. Three blocks - brand strip,
   form, work areas - placed with grid areas: desktop puts brand and areas in
   the left column with the form beside them, the phone breakpoint restacks
   them brand -> form -> areas so the fields are in the first screen.
   The login page loads only this stylesheet (no Foundation), so these rules
   stand on their own.
   ========================================================================== */

body.login-page {
    margin: 0;
    background: var(--page-bg);
    min-height: 100vh;
}

.login-page .login-warning {
    background: #fe6363;
    color: #fff;
    text-align: center;
    font-size: 18px;
    margin: 0;
    padding: 8px 16px;
}

/* The empty rows above and below the brand / areas pair centre that column
   vertically instead of letting it start at the top. The form spans all four
   rows, so it is unaffected. */
.login-split {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas:
        ".     form"
        "brand form"
        "areas form"
        ".     form";
    min-height: 100vh;
    background: linear-gradient(150deg, var(--topbar) 0%, var(--brand) 60%, var(--brand-dark) 100%)
                left top / 52.5% 100% no-repeat;
}

/* ---- brand strip ---- */

.login-brand {
    grid-area: brand;
    padding: 46px 46px 10px 46px;
}

.login-title {
    color: #ffffff;
    font-size: 36px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    margin: 0;
}

.login-tagline {
    color: #ffffff;
    opacity: 0.85;
    font-size: 16px;
    margin: 8px 0 0 0;
    max-width: 36ch;
}

/* ---- the four work areas ---- */

.login-areas {
    grid-area: areas;
    padding: 22px 46px 46px 46px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-content: start;
}

.login-area {
    position: relative;
    overflow: hidden;
    min-height: 104px;
    padding: 16px 16px 18px 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.10);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.login-area svg {
    position: absolute;
    right: -10px;
    top: -8px;
    width: 86px;
    height: 86px;
    opacity: 0.28;
    color: #fff;
}

.login-area b {
    position: relative;
    z-index: 2;
    color: #ffffff;
    font-size: 15.5px;
    font-weight: 600;
}

.login-area span {
    position: relative;
    z-index: 2;
    color: #ffffff;
    opacity: 0.72;
    font-size: 13px;
}

/* ---- the form ---- */

.login-form {
    grid-area: form;
    background: var(--surface);
    padding: 52px 54px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-form h3 {
    color: var(--heading);
    font-size: 23px;
    font-weight: 600;
    margin: 0 0 20px 0;
}

.login-hint {
    color: var(--text-muted);
    font-size: 14.5px;
    margin: 0 0 26px 0;
}

.login-field {
    margin-bottom: 18px;
}

.login-field label {
    display: block;
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
}

.login-field input {
    width: 100%;
    font-family: var(--font);
    font-size: 15px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--field-border);
    border-radius: var(--radius);
    padding: 11px 13px;
    outline: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-field input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(31, 122, 224, 0.15);
}

.login-page .login-submit {
    width: 100%;
    border: 0;
    border-radius: var(--radius);
    background: var(--topbar) !important;
    color: #fff !important;
    font-family: var(--font);
    font-size: 16px !important;
    font-weight: 600;
    padding: 13px 18px !important;
    cursor: pointer;
}

.login-page .login-submit:hover {
    background: var(--brand) !important;
}

/* Flash messages render as div.message.<type> */
.login-page div.message {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--text-muted);
    border-radius: var(--radius);
    font-size: 14.5px;
    font-weight: 500;
    margin: 0 0 20px 0;
    padding: 11px 14px;
}

.login-page div.message.error {
    border-left-color: var(--danger);
    color: var(--danger);
}

.login-page div.message.success {
    border-left-color: var(--success);
    color: var(--success);
}

.login-tools {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    border-top: 1px solid var(--border);
    margin-top: 26px;
    padding-top: 16px;
}

.login-tools a {
    color: var(--accent);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.login-tools a:hover {
    color: var(--brand);
    text-decoration: underline;
}

.login-help {
    color: var(--text-muted);
    font-size: 12.5px;
    margin: 16px 0 0 0;
}

/* ---- phone: form first, work areas small underneath ---- */

@media screen and (max-width: 700px) {
    .login-split {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "brand"
            "form"
            "areas";
        align-content: start;
        min-height: 0;
        background: var(--brand-dark);
    }

    .login-brand {
        padding: 20px 20px 18px 20px;
        background: linear-gradient(150deg, var(--topbar), var(--brand));
    }

    .login-title {
        font-size: 26px;
    }

    .login-tagline {
        font-size: 14px;
        margin-top: 4px;
    }

    .login-form {
        padding: 26px 20px 30px 20px;
    }

    .login-areas {
        padding: 18px 20px 26px 20px;
        gap: 10px;
        background: var(--brand-dark);
    }

    .login-area {
        min-height: 0;
        padding: 12px;
        border-radius: 8px;
        gap: 4px;
        align-items: flex-start;
    }

    .login-area svg {
        position: static;
        width: 20px;
        height: 20px;
        opacity: 0.85;
    }

    .login-area b {
        font-size: 13.5px;
    }

    /* captions are noise at this size */
    .login-area span {
        display: none;
    }
}