/*
 * losscaseeditor.css
 * Visual style for EditLossCase.cshtml and its partial components.
 * Aligns with the LargeLossVersion4 tracker palette (tracker.html).
 *
 * HOW TO USE
 * ----------
 * 1. Copy this file to: LargeLossVersion4MVC/Content/losscaseeditor.css
 * 2. In LargeLossVersion4MVC/Views/Shared/_Layout.cshtml (or the relevant
 *    layout), add inside <head> AFTER the Bootstrap link:
 *      <link rel="stylesheet" href="~/Content/losscaseeditor.css" />
 * 3. Remove or leave the commented-out <style> block in LosscaseEditor2.cshtml
 *    (lines 6–117) — this file supersedes it.
 * (Formerly LosscaseEditor2.cshtml — renamed to EditLossCase.cshtml)
 *
 * WHAT THIS FILE DOES
 * -------------------
 * - Sets the shared colour palette via CSS variables
 * - Styles card headers to match the tracker's navy tone
 * - Refines Bootstrap form controls for a professional business look
 * - Adds is-warning state (Bootstrap does not provide this natively)
 * - Styles the fixed save/state button bar
 * - Styles the validation error and debug modals
 * - Does NOT break Bootstrap's grid, float labels, or JS validation logic
 *
 * DOES NOT TOUCH
 * --------------
 * - is-valid / is-invalid Bootstrap behaviour (only enhances ring colours)
 * - JS validation class toggling (is-warning, is-valid, is-invalid on inputs)
 * - Form layout, grid, or partial component structure
 */


/* =============================================================================
   1. PALETTE — mirrors tracker.html CSS variables
   ============================================================================= */

:root {
    --ll-navy:        #1a2e4a;   /* primary header / card-header background    */
    --ll-navy-hover:  #243d5e;   /* slightly lighter navy for hover states      */
    --ll-blue:        #2a7de1;   /* accent — focus rings, active indicators     */
    --ll-blue-ring:   rgba(42, 125, 225, 0.22);

    --ll-text:        #1f2937;   /* primary body text                           */
    --ll-muted:       #6b7280;   /* labels, secondary text                      */
    --ll-border:      #000000;   /* default input border                        */
    --ll-border-hover:#000000;   /* input border on hover                       */
    --ll-bg:          #f8fafc;   /* page / card body background                 */
    --ll-white:       #ffffff;

    /* Validation — toned down from Bootstrap defaults */
    --ll-valid:       #16a34a;
    --ll-valid-ring:  rgba(22, 163, 74, 0.20);
    --ll-warning:     #d97706;
    --ll-warning-bg:  #fffbeb;
    --ll-warning-ring:rgba(217, 119, 6, 0.22);
    --ll-invalid:     #b91c1c;
    --ll-invalid-ring:rgba(185, 28, 28, 0.20);
}


/* =============================================================================
   2. BASE TYPOGRAPHY
   ============================================================================= */

body {
    color: var(--ll-text);
    letter-spacing: 0.05px;
}


/* =============================================================================
   3. CARD HEADERS — navy tone matching tracker section headers
   ============================================================================= */

/*
 * The editor uses Bootstrap cards with class "bg-dark bg-opacity-25".
 * We target card-header within the editor container to avoid affecting
 * other Bootstrap cards on the page.
 */

.container .card > .card-header {
    background: var(--ll-navy) !important;
    color: #ffffff;
    border-bottom: none;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

/* Section label text inside the card header col */
.container .card > .card-header .col-sm-2,
.container .card > .card-header .col-sm-4 {
    color: #ffffff;
    display: flex;
    align-items: center;
}

/* Navbar inside the Basic Information header — keep transparent */
.container .card > .card-header .navbar {
    background: transparent !important;
    padding: 0;
}

.container .card > .card-header .nav-link,
.container .card > .card-header .navbar-brand {
    color: #93afd4 !important;
}

/* Card body: clean white with subtle shadow */
.container .card > .card-body {
    background-color: var(--ll-white) !important;
    padding: 18px;
}

/* Card itself: tighter rounding, clean border */
.container .card {
    border: 1px solid #d0d9e4;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    background: transparent !important;
}


/* =============================================================================
   4. FORM CONTROLS — inputs, selects, floating labels
   ============================================================================= */

.form-control,
.form-select {
    border-radius: 4px;
    border: 1px solid var(--ll-border) !important;
    background-color: var(--ll-white);
    color: var(--ll-text);
    box-shadow: none;
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:hover,
.form-select:hover {
    border-color: var(--ll-border-hover);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ll-blue);
    box-shadow: 0 0 0 0.15rem var(--ll-blue-ring);
    outline: 0;
}

/* Floating labels */
.form-floating > label,
.form-label {
    font-weight: 400;
    font-size: 13px;
    color: var(--ll-muted);
    letter-spacing: 0.1px;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    opacity: 0.85;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}


/* =============================================================================
   5. VALIDATION STATES
   Custom is-warning added; is-valid / is-invalid enhanced to match palette.
   Bootstrap applies is-valid / is-invalid natively; we only adjust colours.
   ============================================================================= */

/* --- is-valid ---------------------------------------------------------------- */
.form-control.is-valid,
.form-select.is-valid,
.was-validated .form-control:valid,
.was-validated .form-select:valid {
    border-color: var(--ll-valid) !important;
    box-shadow: none;
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
    box-shadow: 0 0 0 0.15rem var(--ll-valid-ring);
}

/* --- is-warning (custom — Bootstrap has no native warning state) ------------- */
.form-control.is-warning,
.form-select.is-warning {
    border-color: var(--ll-warning) !important;
    background-color: var(--ll-warning-bg);
    box-shadow: none;
}

.form-control.is-warning:focus,
.form-select.is-warning:focus {
    border-color: var(--ll-warning);
    box-shadow: 0 0 0 0.15rem var(--ll-warning-ring);
}

/* --- is-invalid -------------------------------------------------------------- */
.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
    border-color: var(--ll-invalid) !important;
    box-shadow: none;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 0.15rem var(--ll-invalid-ring);
}

/* Feedback text */
.valid-feedback   { color: var(--ll-valid);   font-size: 12px; }
.invalid-feedback { color: var(--ll-invalid); font-size: 12px; }

/* --- time input: suppress native browser clock picker indicator -------------- */
/* The browser clock widget overlaps the floating label and Bootstrap validation  */
/* icons when the field is empty. The field remains keyboard-editable; the        */
/* picker popup still opens on focus in most browsers.                            */
input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
}


/* =============================================================================
   6. CHECKBOXES AND RADIO BUTTONS
   ============================================================================= */

.form-check-input:checked {
    background-color: var(--ll-navy);
    border-color: var(--ll-navy);
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.15rem var(--ll-blue-ring);
    border-color: var(--ll-blue);
}

/* Cladding/lining sub-group checkboxes render as circles (mutually exclusive behaviour) */
input[type="checkbox"][data-exclusive-group] {
    border-radius: 50%;
}


/* =============================================================================
   7. BUTTONS
   ============================================================================= */

.btn {
    border-radius: 4px;
    box-shadow: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2px;
}

/* Primary: tracker navy */
.btn-primary {
    background-color: var(--ll-navy);
    border-color: var(--ll-navy);
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--ll-navy-hover);
    border-color: var(--ll-navy-hover);
    box-shadow: 0 0 0 0.15rem var(--ll-blue-ring);
}

/* Success (Save button): keep green but soften */
.btn-success {
    background-color: #15803d;
    border-color: #15803d;
}

.btn-success:hover {
    background-color: #166534;
    border-color: #166534;
}

/* Secondary: muted */
.btn-secondary {
    background-color: #4b5563;
    border-color: #4b5563;
}

.btn-secondary:hover {
    background-color: #374151;
    border-color: #374151;
}


/* =============================================================================
   8. FIXED SAVE / STATE BUTTON BAR (bottom-right)
   ============================================================================= */

.position-fixed.bottom-0.end-0 {
    padding: 12px 16px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(4px);
    border-radius: 8px 0 0 0;
    border-top: 1px solid var(--ll-border);
    border-left: 1px solid var(--ll-border);
    box-shadow: -2px -2px 8px rgba(0,0,0,0.06);
    gap: 8px !important;
}


/* =============================================================================
   9. MODALS — validation error modal + debug state modal
   ============================================================================= */

.modal-header {
    background: var(--ll-navy);
    color: #ffffff;
    border-bottom: none;
    padding: 14px 18px;
}

.modal-header .btn-close {
    filter: invert(1) grayscale(1);
}

.modal-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.modal-body {
    font-size: 13px;
    color: var(--ll-text);
    padding: 18px;
}

/* Validation error list in modal */
.modal-body p {
    padding: 6px 10px;
    margin-bottom: 6px;
    border-left: 3px solid var(--ll-invalid);
    background: #fef2f2;
    border-radius: 0 4px 4px 0;
    color: var(--ll-invalid);
    font-weight: 500;
}

/* Debug state output (pre#output) */
#output {
    font-size: 11px;
    background: #f1f5f9;
    padding: 12px;
    border-radius: 4px;
    color: var(--ll-text);
    border: 1px solid var(--ll-border);
}

.modal-footer {
    border-top: 1px solid var(--ll-border);
    padding: 10px 18px;
}


/* =============================================================================
   10. SPACING & GRID REFINEMENTS
   ============================================================================= */

/* Tighten row gutters inside form cards */
.card-body .row > [class^="col-"],
.card-body .row > [class*=" col-"] {
    margin-bottom: 0.65rem;
}

/* Stack cards with consistent spacing */
.container .card + .card {
    margin-top: 16px !important;
}