/* ==========================================================================
   GOGI "new look" (ui2) - opt-in layer, SHARED by light and dark themes.
   Loaded by css_links() AFTER styles_mobile.css when the admin setting
   ui_new_look is on. Colours come from the --ui-* tokens; styles_ui2_dark.css
   redefines them for the dark theme, styles_ui2_light.css holds light-only
   rules. Visual-only overrides:
   colours, radii, borders, shadows, focus, transitions. No sizes/layout.
   Rollback: untick Settings > System > Look and Feel > New look.
   ========================================================================== */

:root {
    --ui-brand:      #7B5300;
    --ui-brand-700:  #5f4000;
    --ui-brand-100:  #f1e0bb;
    --ui-brand-50:   #faf1dc;
    --ui-sand:       #f6ebd7;
    --ui-paper:      #ffffff;
    --ui-field:      #ffffff;
    --ui-ink:        #2b2115;
    --ui-ink-2:      #5a4b37;
    --ui-line:       #eadcc3;
    --ui-line-strong:#d9c49a;
    --ui-radius-sm:  8px;
    --ui-radius:     12px;
    --ui-radius-lg:  16px;
    --ui-shadow-sm:  0 1px 2px rgba(74,48,0,.06), 0 1px 3px rgba(74,48,0,.06);
    --ui-shadow-md:  0 2px 4px rgba(74,48,0,.05), 0 6px 16px rgba(74,48,0,.08);
    --ui-shadow-lg:  0 8px 24px rgba(74,48,0,.16), 0 2px 6px rgba(74,48,0,.08);
    --ui-focus:      0 0 0 3px rgba(233,162,59,.45);
    --ui-ease:       .15s ease;
}

/* ---- Focus: one consistent, visible ring ------------------------------- */
a:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible,
.icon-btn:focus-visible,
.page-tab:focus-visible,
.page-tab1:focus-visible {
    outline: 2px solid #e9a23b !important;
    outline-offset: 2px;
}

/* ---- Cards / sections -------------------------------------------------- */
.section,
.page-main-header,
.page-tab-card {
    background: var(--ui-paper) !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-radius-lg) !important;
    box-shadow: var(--ui-shadow-sm);
}
.section1 {
    background: var(--ui-brand-50) !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-radius) !important;
}
.admin-section-box,
.admin-settings-input-section {
    border-radius: var(--ui-radius) !important;
}
.story-card {
    /* keep inline left status accent: colour top/right/bottom only */
    background: var(--ui-paper) !important;
    border-top-color: var(--ui-line) !important;
    border-right-color: var(--ui-line) !important;
    border-bottom-color: var(--ui-line) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow-sm);
}
.pet-card,
.species-card,
.vet-card,
.supplier-card {
    background: var(--ui-paper) !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow-sm);
    transition: box-shadow var(--ui-ease), border-color var(--ui-ease);
}
.pet-card:hover,
.species-card:hover,
.vet-card:hover,
.supplier-card:hover,
.story-card:hover {
    border-top-color: var(--ui-line-strong) !important;
    border-right-color: var(--ui-line-strong) !important;
    border-bottom-color: var(--ui-line-strong) !important;
    box-shadow: var(--ui-shadow-md);
}

/* ---- Tabs -------------------------------------------------------------- */
.page-tab {
    background: var(--ui-sand) !important;
    border-color: var(--ui-line) !important;
    border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0 !important;
    color: var(--ui-ink-2) !important;
}
.page-tab:hover {
    background: var(--ui-brand-100) !important;
    color: var(--ui-brand-700) !important;
}
.page-tab.active,
.page-tab.active:hover {
    background: var(--ui-paper) !important;
    border-color: var(--ui-line) !important;
    border-bottom-color: var(--ui-paper) !important;
    color: var(--ui-brand) !important;
}
.page-tab1 {
    background: var(--ui-sand) !important;
    border-color: var(--ui-line) !important;
    color: var(--ui-ink-2) !important;
}
.page-tab1:hover {
    background: var(--ui-brand-100) !important;
    color: var(--ui-brand-700) !important;
}
.page-tab1.active,
.page-tab1.active:hover {
    background: var(--ui-paper) !important;
    border-color: var(--ui-line) !important;
    border-bottom-color: var(--ui-paper) !important;
    color: var(--ui-brand) !important;
}

/* ---- Buttons ----------------------------------------------------------- */
.icon-btn {
    border-color: var(--ui-line-strong) !important;
    border-radius: var(--ui-radius-sm) !important;
    transition: background-color var(--ui-ease), border-color var(--ui-ease), color var(--ui-ease) !important;
}
.icon-btn:hover {
    background: var(--ui-brand-50) !important;
    border-color: var(--ui-brand) !important;
}
button:not(.icon-btn):not(.page-tab):not(.page-tab1):not(.nav-pill):not(.flag-select-btn),
input[type="submit"],
input[type="button"] {
    border-radius: var(--ui-radius-sm);
    transition: background-color var(--ui-ease), border-color var(--ui-ease), box-shadow var(--ui-ease);
}

/* ---- Form controls (sizes untouched) ----------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="url"],
input[type="tel"],
input[type="search"],
select,
textarea {
    border: 1px solid var(--ui-line-strong);
    border-radius: var(--ui-radius-sm);
    background-color: var(--ui-field);
    color: var(--ui-ink);
    transition: border-color var(--ui-ease), box-shadow var(--ui-ease);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
    border-color: var(--ui-brand);
    box-shadow: var(--ui-focus);
    outline: none;
}
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--ui-brand);
}

/* ---- Tables: row dividers instead of full grid ------------------------- */
table th,
table td {
    border-color: var(--ui-line) !important;
}
table th {
    background: var(--ui-sand) !important;
    color: var(--ui-ink) !important;
}
table tbody tr:hover td {
    background-color: var(--ui-brand-50);
}

/* ---- Header / nav / user menu / search --------------------------------- */
.user-menu-dropdown {
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-lg);
}
.global-search-box {
    border-color: var(--ui-line-strong);
    transition: border-color var(--ui-ease), box-shadow var(--ui-ease);
}
.global-search-box:focus-within {
    border-color: var(--ui-brand);
    box-shadow: var(--ui-focus);
}

/* ---- Modals ------------------------------------------------------------ */
.modal-box {
    background: var(--ui-paper);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-lg);
    overflow: hidden;
}

/* ---- Messages / toasts ------------------------------------------------- */
.message-error,
.message-success {
    border-radius: var(--ui-radius-sm);
}
.toast {
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-lg);
}

/* ---- Motion ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ---- Round 2 (from dev screenshots) ------------------------------------ */
/* Detail-page value boxes: warm tint instead of neutral grey */
.detail-info-table td {
    background: var(--ui-brand-50) !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-radius-sm) !important;
}
/* Detail tables and modal tables must not show the row-hover tint */
.detail-info-table tbody tr:hover td {
    background-color: var(--ui-brand-50) !important;
}
/* Nested cards inside sections (adverts, at-a-glance tiles, announcements) */
.section .section,
.section .section1,
.section .admin-section-box {
    box-shadow: none;
}
/* Modal title bar: softer than the full-strength brand block */
.modal-title {
    background: var(--ui-brand) !important;
    letter-spacing: 0.04em;
}

/* Tab card: top-left corner stays square where the tab row joins it */
.page-tab-card {
    border-radius: 0 var(--ui-radius-lg) var(--ui-radius-lg) var(--ui-radius-lg) !important;
}

/* Plain buttons: base rule uses border-radius:4px !important, so match it */
button, input[type="submit"], input[type="button"] {
    border-radius: var(--ui-radius-sm) !important;
}
#clearPetName,
#clearOwnerName {
    border-radius: 9999px !important;
}
.icon-btn {
    border-radius: var(--ui-radius-sm) !important;
}

/* Modal title bar: sand with brand text and a hairline, replaces solid brown */
.modal-title {
    background: var(--ui-sand) !important;
    color: var(--ui-brand-700) !important;
    border-bottom: 1px solid var(--ui-line);
}

/* Multi-select checkbox blocks (inline-styled: vet/supplier/service specializations) */
.form-field-bg[style*="column-count"] {
    border-color: var(--ui-line-strong) !important;
    border-radius: var(--ui-radius-sm) !important;
    background-color: var(--ui-field);
}
.form-field-bg[style*="column-count"] > label[style*="column-span"] {
    border-bottom-color: var(--ui-line) !important;
}

/* Tables: horizontal row dividers only (no vertical grid lines) */
table th,
table td {
    border-left: none !important;
    border-right: none !important;
}

/* Section headings: bolder, with slight tracking */
.section > h2,
.section > h3,
.section .admin-section-box > h2,
.section .admin-section-box > h3 {
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--ui-ink);
}

/* Notes: fill the column beside its 140px label (label width + margin + gap) */
textarea#notes[cols] {
    width: calc(100% - 180px);
}
@media (max-width: 640px) {
    textarea#notes[cols] { width: 100%; }
}

/* Any inline-bordered field block (opening hours editors etc.) */
.form-field-bg[style*="border:1px solid"] {
    border-color: var(--ui-line-strong) !important;
    border-radius: var(--ui-radius-sm) !important;
    background-color: var(--ui-field);
}

/* Text fields: focus = thicker brand border only (inset 1px, no layout shift, no outer ring) */
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="number"]:focus, input[type="date"]:focus, input[type="datetime-local"]:focus,
input[type="time"]:focus, input[type="url"]:focus, input[type="tel"]:focus,
input[type="search"]:focus, select:focus, textarea:focus,
input[type="text"]:focus-visible, input[type="email"]:focus-visible, input[type="password"]:focus-visible,
input[type="number"]:focus-visible, input[type="date"]:focus-visible, input[type="datetime-local"]:focus-visible,
input[type="time"]:focus-visible, input[type="url"]:focus-visible, input[type="tel"]:focus-visible,
input[type="search"]:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none !important;
    border-color: var(--ui-brand) !important;
    box-shadow: inset 0 0 0 1px var(--ui-brand) !important;
}
.global-search-box:focus-within {
    box-shadow: inset 0 0 0 1px var(--ui-brand);
}

/* ---- Round 3 (coverage pass) ------------------------------------------- */
/* Number steppers: warm instead of blue-grey */
.num-stepper-wrap {
    border-color: var(--ui-line-strong) !important;
    border-radius: var(--ui-radius-sm) !important;
    overflow: hidden;
}
input[type="number"].num-stepper {
    border-left-color: var(--ui-line-strong) !important;
    border-right-color: var(--ui-line-strong) !important;
    border-radius: 0 !important;
}
.num-stepper-btn {
    background: var(--ui-sand) !important;
    color: var(--ui-brand-700) !important;
}
.num-stepper-btn:hover:not(:disabled) {
    background: var(--ui-brand-100) !important;
}
.num-stepper-wrap:focus-within {
    border-color: var(--ui-brand) !important;
    box-shadow: inset 0 0 0 1px var(--ui-brand) !important;
}
.num-stepper-wrap:focus-within input[type="number"].num-stepper {
    border-color: var(--ui-brand) !important;
    box-shadow: none !important;
}

/* Help accordions */
.help-area {
    border-color: var(--ui-line) !important;
    border-radius: var(--ui-radius-sm) !important;
}
.help-area-toggle {
    background: var(--ui-brand-50) !important;
    border-bottom-color: var(--ui-line) !important;
}
.help-area-toggle:hover {
    background: var(--ui-brand-100) !important;
}
.help-area-count {
    background: var(--ui-brand-100) !important;
    color: var(--ui-brand-700) !important;
}

/* Table element itself (some pages set a dark outer border) */
table {
    border-color: var(--ui-line) !important;
}

/* User menu: warm hover and section rules */
.user-menu-dropdown a:hover,
.user-menu-dropdown button:hover {
    background: var(--ui-brand-50);
}

/* Stepper +/- buttons: square inner edges (wrap clips the outer corners) */
.num-stepper-btn {
    border-radius: 0 !important;
}

/* ---- Round 4 (coverage pass 2) ----------------------------------------- */
/* Language selector (guest pages + landing) */
.flag-select-btn {
    border-color: var(--ui-line-strong) !important;
    border-radius: var(--ui-radius-sm) !important;
    background-color: var(--ui-paper) !important;
}
.flag-select-btn:hover {
    border-color: var(--ui-brand) !important;
}

/* Notification dropdown */
.notif-badge-tooltip {
    border-radius: var(--ui-radius);
    background: var(--ui-ink);
    box-shadow: var(--ui-shadow-lg);
}
.notif-badge-tooltip a,
.notif-badge-tooltip a:hover {
    color: var(--ui-brand-100);
}

/* Notes / additional-hours textareas: fill the column beside the label (label up to 160px + margin + gap).
   Wrapped textareas (eraser/undo buttons) size the wrapper instead. */
textarea#notes,
textarea#opening_hours_text,
textarea#svc_notes {
    width: calc(100% - 180px) !important;
}
.field-actions-wrap--textarea:has(> textarea#notes),
.field-actions-wrap--textarea:has(> textarea#opening_hours_text),
.field-actions-wrap--textarea:has(> textarea#svc_notes) {
    width: calc(100% - 180px);
}
.field-actions-wrap--textarea > textarea#notes,
.field-actions-wrap--textarea > textarea#opening_hours_text,
.field-actions-wrap--textarea > textarea#svc_notes {
    width: 100% !important;
}
@media (max-width: 640px) {
    textarea#notes,
    textarea#opening_hours_text,
    textarea#svc_notes,
    .field-actions-wrap--textarea:has(> textarea#notes),
    .field-actions-wrap--textarea:has(> textarea#opening_hours_text),
    .field-actions-wrap--textarea:has(> textarea#svc_notes) {
        width: 100% !important;
    }
}

/* Buttons and tabs: base rule resets them to the system font (font: revert !important);
   use the page font like everything else. Sizes stay as they are. */
button,
input[type="submit"],
input[type="button"] {
    font-family: inherit !important;
}

/* Sub-tabs and tabs: explicit, in case the generic button rule is outranked */
.page-tab,
.page-tab1,
.page-tabs button,
.page-tabs1 button {
    font-family: inherit !important;
}