/* ═══════════════════════════════════════════════════════════════════════════
   SOBERSOFT TOOLS — SHARED MODAL DESIGN CONTRACT
   ═══════════════════════════════════════════════════════════════════════════

   ONE modal design for every dialog in the Tools area. Extracted from the
   Recovery Calendar "Add personal entry" modal, which is the approved visual
   reference; that modal now consumes these rules rather than defining its own,
   so this file and the screenshot cannot drift apart.

   SCOPE — every selector is nested under `.tools-modal`, which is applied to
   the `.modal` root element. Nothing here matches a modal that has not opted
   in, so the Organization Portal, Accounting, Resource Database, Events,
   Admin, Password Vault and Campbell's Code dialogs are untouched even though
   this stylesheet is linked globally. There is deliberately no bare
   `.modal-content` / `.modal-header` / `.close` rule anywhere in this file.

   Consequently the app-wide `_ModalHeader.cshtml` partial needs no change:
   Tools partials that already render it inherit this treatment from the
   `.tools-modal` ancestor, while the 54 non-Tools views that share it keep the
   appearance they have.

   SPECIFICITY — `.tools-modal X` is two classes deep, which already beats
   Bootstrap's single-class rules, so overriding does not need `!important`.

   There are exactly THREE sites that do use it (6 declarations), each because
   the rule being overridden is ITSELF `!important` and belongs to shared code
   other pages depend on, so it cannot simply be changed:
     1. `.tools-modal .modal-header .close > span` — _ModalHeader.cshtml sets
        `margin: 0 !important` on that span.
     2. `.tools-modal .select2-container` — site.css:1356 sets a square
        `border: … !important` on every Select2 container in the application.
     3. `body.tools-modal-open .modal-backdrop` (4 declarations) — restates the
        dim and blur that site.css applies with `!important` under
        `body.app-modal-active`.
   Nothing else in this file may add one.

   TOKENS — semantic colours come from site.css (--color-danger, --color-success,
   --color-warning, --color-primary). Only the dark surfaces and the accent are
   defined here, because they describe this component rather than the palette.
   ═══════════════════════════════════════════════════════════════════════════ */

.tools-modal {
    --tools-modal-surface: #14141f;
    --tools-modal-surface-2: #1d1e21;
    --tools-modal-border: rgba(160, 80, 255, 0.18);
    --tools-modal-divider: #9567c9;
    --tools-modal-accent: #cc44ff;
    --tools-modal-accent-strong: #bb33ee;
    --tools-modal-text: #f0eaff;
    --tools-modal-text-muted: #6b5f8a;
    --tools-modal-radius: 22px;
    --tools-modal-control-radius: 12px;
}

/* ── Outer shell ──────────────────────────────────────────────────────────
   Dark surface, 22px radius, a 1px SoberSoft-purple top and left edge and a
   1px white right and bottom edge. overflow:hidden clips all four corners to
   the radius; the header and footer supply their own single dividers, so no
   edge is ever doubled. */
.tools-modal .modal-content {
    background: var(--tools-modal-surface);
    border: 0;
    border-top: 1px solid var(--color-primary);
    border-left: 1px solid var(--color-primary);
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    border-radius: var(--tools-modal-radius);
    color: var(--tools-modal-text);
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* ── Header ───────────────────────────────────────────────────────────────
   The darker inset surface with a purple rule beneath it — deliberately not a
   bright solid slab. Equal top and bottom padding: Bootstrap 4 ships 1rem all
   round but pairs it with a negatively-margined close button, which is what
   made titles sit high. */
.tools-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--tools-modal-surface-2);
    border-bottom: 1px solid var(--tools-modal-divider);
    border-radius: var(--tools-modal-radius) var(--tools-modal-radius) 0 0;
    padding: 0.9rem 1.25rem;
}

/* Neutralises the solid header fills the JS-built and shared-partial headers
   ask for (bg-danger, background-color-ss, bg-primary, …). Those classes stay
   in the markup because non-Tools callers of the same partial rely on them;
   inside a Tools modal the inset surface wins.

   WHY !important IS REQUIRED HERE, despite the higher specificity.
   Both fills this has to beat are themselves !important:
       bootstrap.css   .bg-danger              { background-color: … !important }
       site.css:280    .background-color-ss,
                       .bg-ss                  { background-color: … !important }
   Specificity is only the tie-breaker WITHIN a cascade origin+importance layer,
   so 0-3-0 without !important loses to a 0-1-0 !important declaration no matter
   how many classes are added. The earlier "[class] beats the utility without
   !important" reasoning was wrong on that point, which is why Sobriety Tracker's
   Reset Counter still rendered a red header and the Quit Smoking dialogs still
   rendered purple ones while every other part of those modals had already
   adopted this contract.

   Still scoped to `.tools-modal`, so non-Tools callers of _ModalHeader.cshtml
   keep their fills exactly as before. */
.tools-modal .modal-header[class] {
    background: var(--tools-modal-surface-2) !important;
}

/* Icon + title as ONE vertically-centred unit. */
.tools-modal-title-group {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

/* Subordinate to the title — accent-coloured and a step smaller. */
.tools-modal-title-icon {
    flex: 0 0 auto;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--tools-modal-accent);
}

.tools-modal .modal-title {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Stacked eyebrow + title, used by detail headers. */
.tools-modal-title-stack { min-width: 0; }

.tools-modal-title-eyebrow {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tools-modal-text-muted);
    line-height: 1.2;
}

/* The shared header partial sizes its own icon and groups its own actions;
   inside a Tools modal both follow this component instead. */
.tools-modal .ss-modal-title-icon {
    font-size: 1.05rem;
    line-height: 1;
    color: var(--tools-modal-accent);
}

.tools-modal .ss-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── Close control ────────────────────────────────────────────────────────
   ONE definition for every Tools modal. `.tools-modal-close` is the hook for
   hand-written and JS-built markup; the `.close` selectors cover the shared
   header partial and raise specificity over Bootstrap's own rules.

   Bootstrap 4's .close carries float:right and -1rem margins, which pull it
   out of the flex row and off-centre. Both are reset. */
.tools-modal .modal-header .close,
.tools-modal .modal-header .tools-modal-close,
.tools-modal-close {
    float: none;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    background: transparent;
    border-radius: 999px;
    color: var(--tools-modal-text-muted);
    text-shadow: none;
    opacity: 1;
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1;
    box-shadow: none;
    transition: color 0.18s ease, background 0.18s ease;
}

.tools-modal .modal-header .close:hover,
.tools-modal .modal-header .close:focus,
.tools-modal .modal-header .tools-modal-close:hover,
.tools-modal .modal-header .tools-modal-close:focus,
.tools-modal-close:hover,
.tools-modal-close:focus {
    color: #fff;
    background: rgba(160, 80, 255, 0.16);
    opacity: 1;
    outline: none;
    box-shadow: none;
}

.tools-modal .modal-header .close:focus-visible,
.tools-modal .modal-header .tools-modal-close:focus-visible,
.tools-modal-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(204, 68, 255, 0.45);
}

/* The shared partial's own close reset sets `margin: 0 !important` on the
   inner span. Matching that specificity is the only way to keep the glyph
   optically centred inside the round hit target. */
.tools-modal .modal-header .close > span {
    margin: 0 !important;
    line-height: 1;
    pointer-events: none;
}

/* ── Body ─────────────────────────────────────────────────────────────────── */
.tools-modal .modal-body {
    padding: 1.15rem 1.25rem;
    color: var(--tools-modal-text);
}

.tools-modal .modal-body p { color: var(--tools-modal-text); }

.tools-modal-help,
.tools-modal .modal-body .text-muted {
    display: block;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--tools-modal-text-muted);
}

/* ── Footer ───────────────────────────────────────────────────────────────
   Actions right-aligned as a group, one consistent gap, wrapping cleanly at
   narrow widths. `.tools-modal-actions` is the same treatment for dialogs
   whose actions sit in a plain div rather than a `.modal-footer`. */
.tools-modal .modal-footer,
.tools-modal .tools-modal-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    border-top: 1px solid var(--tools-modal-border);
    padding: 0.85rem 1.25rem;
    background: var(--tools-modal-surface);
}

/* Bootstrap adds .5rem margins to every footer child; the gap already spaces
   them and the margins break vertical alignment. */
.tools-modal .modal-footer > *,
.tools-modal .tools-modal-actions > * { margin: 0; }

/* NOTE ON :focus-visible — the fill below is deliberately NOT on plain :focus.
   Several Tools modals focus their primary action on `shown.bs.modal` for
   keyboard users, and with `:focus` that painted the button filled the moment
   the dialog opened, so an outline action looked like a solid one at rest.
   :focus-visible fires for keyboard focus and not for a scripted .focus(),
   which keeps the resting state an outline without losing the affordance.

/* ── Buttons ──────────────────────────────────────────────────────────────
   Semantic OUTLINE vocabulary: transparent fill so the modal surface shows
   through, with the semantic colour carried by the border, label and icon.
   Each fills in on hover, which is the application's own outline behaviour.
   All variants share one height, radius, padding and focus treatment, so a
   footer row lines up whatever mix of actions it holds. */
.tools-modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border: 1px solid transparent;
    background: transparent;
    color: #6c757d;
    padding: 0.55rem 1.15rem;
    border-radius: var(--tools-modal-control-radius);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.tools-modal-btn i { color: inherit; }

.tools-modal-btn:hover,
.tools-modal-btn:focus-visible {
    color: #fff;
    background: rgba(160, 80, 255, 0.12);
    text-decoration: none;
}

.tools-modal-btn:focus-visible {
    outline: none;
    color: #fff;
    border-color: var(--tools-modal-accent);
    box-shadow: 0 0 0 2px rgba(204, 68, 255, 0.45);
}

.tools-modal-btn:disabled,
.tools-modal-btn[disabled] {
    opacity: 0.55;
    cursor: default;
}

/* Neutral — a footer "Close" that is not itself an action. */
.tools-modal-btn-neutral {
    border-color: var(--border-subtle);
    color: #adb5bd;
}

.tools-modal-btn-neutral:hover,
.tools-modal-btn-neutral:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border-subtle);
    color: #fff;
}

.tools-modal-btn-danger {
    border-color: var(--color-danger);
    color: var(--color-danger-light);
}

.tools-modal-btn-danger:hover,
.tools-modal-btn-danger:focus-visible {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: #fff;
}

.tools-modal-btn-danger:focus-visible {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 2px rgba(204, 71, 68, 0.5);
}

.tools-modal-btn-warning {
    border-color: var(--color-warning);
    color: var(--color-warning-light);
}

.tools-modal-btn-warning:hover,
.tools-modal-btn-warning:focus-visible {
    background: var(--color-warning);
    border-color: var(--color-warning);
    color: #fff;
}

.tools-modal-btn-warning:focus-visible {
    border-color: var(--color-warning-light);
    box-shadow: 0 0 0 2px rgba(199, 105, 50, 0.55);
}

.tools-modal-btn-success {
    border-color: var(--color-success);
    color: var(--color-success-light);
}

.tools-modal-btn-success:hover,
.tools-modal-btn-success:focus-visible {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
}

.tools-modal-btn-success:focus-visible {
    border-color: var(--color-success-light);
    box-shadow: 0 0 0 2px rgba(67, 167, 111, 0.55);
}

.tools-modal-btn-primary {
    border-color: var(--color-primary);
    color: var(--color-primary-lightest);
}

.tools-modal-btn-primary:hover,
.tools-modal-btn-primary:focus-visible {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.tools-modal-btn-primary:focus-visible {
    border-color: var(--tools-modal-accent);
    box-shadow: 0 0 0 2px rgba(204, 68, 255, 0.45);
}

/* ── Form controls ────────────────────────────────────────────────────────
   The visual shell only. Feature-specific control IMPLEMENTATIONS are left
   alone — the Recovery Calendar keeps its Flatpickr and the shared SoberSoft
   time picker, Select2 stays Select2 — so this brings appearance into line
   without replacing anything functional. */
.tools-modal-field { margin-bottom: 0.9rem; }

.tools-modal-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff;
}

/* Inputs sit on the darker surface so they stay clearly separated from the
   body without introducing a lighter grey. */
.tools-modal-input,
.tools-modal-select,
.tools-modal-textarea {
    width: 100%;
    background: var(--tools-modal-surface-2);
    border: 1px solid var(--tools-modal-border);
    border-radius: var(--tools-modal-control-radius);
    color: var(--tools-modal-text);
    padding: 0.55rem 0.8rem;
    font-size: 0.875rem;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tools-modal-input::placeholder,
.tools-modal-textarea::placeholder { color: var(--tools-modal-text-muted); }

.tools-modal-input:focus,
.tools-modal-select:focus,
.tools-modal-textarea:focus {
    border-color: var(--tools-modal-accent);
    box-shadow: 0 0 0 2px rgba(204, 68, 255, 0.45);
    outline: none;
}

/* Several browsers paint the option list themselves and would otherwise
   render dark-on-dark. */
.tools-modal-select option {
    background-color: var(--tools-modal-surface-2);
    color: var(--tools-modal-text);
}

/* Fixed height rather than a drag handle: the handle competed with the
   dialog's own sizing and could push the footer off-screen. Content still
   scrolls inside, and max lengths and server-side validation are unaffected. */
.tools-modal-textarea {
    min-height: 5rem;
    height: 5rem;
    resize: none;
    overflow-y: auto;
}

/* Two or more controls sharing a row, stacking when there is no room for
   them side by side. Generic layout, so it lives here rather than in the one
   Tool that happened to need it first. */
.tools-modal-field-row {
    display: flex;
    gap: 0.75rem;
}

.tools-modal-field-row > * {
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 400px) {
    .tools-modal-field-row { flex-wrap: wrap; }
    .tools-modal-field-row > * { flex: 1 1 100%; }
}

.tools-modal-checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tools-modal-checkbox-row input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.tools-modal-checkbox-row input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(204, 68, 255, 0.45);
}

/* ── Select2 ──────────────────────────────────────────────────────────────
   Select2 remains Select2 wherever a Tool already established it; only its
   shell is brought into this vocabulary.

   site.css:1356 paints a square border on the Select2 CONTAINER itself with
   `!important`, so every Select2 shows a square outline around whatever
   rounded control sits inside. That rule is global and other pages depend on
   it, so it is neutralised here rather than changed — which requires matching
   its !important. The rounded border lives on the selection below, giving one
   clean control. */
.tools-modal .select2-container {
    border: 0 !important;
}

.tools-modal .select2-container .select2-selection--single {
    background: var(--tools-modal-surface-2);
    border: 1px solid var(--tools-modal-border);
    border-radius: var(--tools-modal-control-radius);
    height: auto;
    padding: 0.55rem 0.8rem;
}

.tools-modal .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--tools-modal-text);
    line-height: 1.2;
    padding: 0;
}

.tools-modal .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 0.5rem;
}

.tools-modal .select2-container--default.select2-container--open .select2-selection--single,
.tools-modal .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--tools-modal-accent);
    box-shadow: 0 0 0 2px rgba(204, 68, 255, 0.45);
}

/* ── Backdrop ─────────────────────────────────────────────────────────────
   Applied while a Tools modal is open. site.css combines the dim and the blur
   under `body.app-modal-active`; that class is dropped by the FIRST modal to
   hide, so during a detail-to-editor handoff the background sharpened
   mid-transition. Restating both values on a Tools-owned body class keeps the
   treatment stable across a handoff.

   Deliberately NOT a change to `.modal-backdrop` globally: every other modal
   system keeps what it has, and the values match the shared rule exactly, so
   there is no second backdrop design. !important is required only because the
   rule being matched is itself !important. */
body.tools-modal-open .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.65) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
}

body.tools-modal-open .modal-backdrop.show {
    opacity: 1 !important;
}

/* ── Responsive ───────────────────────────────────────────────────────────
   Sizing is left to the dialog: Bootstrap's own `.modal-sm` / default /
   `.modal-lg` continue to decide width, so a confirmation stays compact and a
   complex form stays wide. Only the internal rhythm tightens. */
@media (max-width: 767.98px) {
    .tools-modal .modal-header {
        padding: 0.75rem 0.9rem;
    }

    .tools-modal .modal-title { font-size: 0.9rem; }

    .tools-modal .ss-modal-title-icon,
    .tools-modal-title-icon { font-size: 0.95rem; }

    .tools-modal .modal-body { padding: 1rem 0.9rem; }

    .tools-modal .modal-footer,
    .tools-modal .tools-modal-actions {
        padding: 0.75rem 0.9rem;
    }

    /* Actions stretch to share the row once wrapped, so nothing overlaps and
       no dialog forces horizontal page scrolling. */
    .tools-modal .modal-footer .tools-modal-btn,
    .tools-modal .tools-modal-actions .tools-modal-btn {
        flex: 1 1 auto;
        padding: 0.55rem 0.75rem;
    }
}