/* MolonNet Base Styles */
:root {
    /* ========= Brand Colors ========= */
    --brand-yellow: #FFCB08; /* Primary brand yellow (used for key buttons & highlights) */
    --brand-gray: #5A6268; /* Neutral dark gray (used for secondary buttons, text, accents) */
    --brand-red: #dc3545; /* Error / danger red (warnings, delete actions) */
    --brand-blue: #176FA0; /* Accent blue (links, info, optional emphasis) */
    --brand-lightgray: #d5e1ed; /* Soft light gray (backgrounds, subtle UI elements) */
    --brand-warning: #ffc107; /* Standard warning yellow (Bootstrap warning tone) */
    --brand-mist: #EEF5FB; /* extra-light gray/blue tint (lighter than --brand-lightgray) */
    --brand-haze: #F7FAFC;
    /* ========= Text Colors ========= */
    --text-1: #212529; /* Primary body text (dark gray, high contrast) */
    --text-invert: #fff; /* Text on dark backgrounds (white) */
    /* ========= Surface Colors ========= */
    --surface-1: #ffffff; /* True white (cards, panels, clean backgrounds) */
    --surface-2: #f2f4f7; /* Light neutral gray (section backgrounds, contrast vs. white) */
    --surface-3: #DCDCDC;

    /* ========= Radii ========= */
    --radius-sm: .375rem; /* Small border radius (buttons, inputs) */
    --radius-md: .5rem; /* Medium border radius (cards, banners) */
    /* ========= Shadows ========= */
    --shadow-1: 0 2px 4px rgba(0,0,0,.2); /* Subtle shadow (buttons, small elements) */
    --shadow-2: 0 6px 18px rgba(0,0,0,.15); /* Stronger shadow (cards, modals, banners) */
    /* ========= Spacing Rhythm ========= */
    --space-1: .25rem; /* Extra small spacing (tight gaps, fine adjustments) */
    --space-2: .5rem; /* Small spacing (padding for compact elements) */
    --space-3: .75rem; /* Medium spacing (standard padding/margins) */
    --space-4: 1rem; /* Large spacing (section padding, bigger gaps) */
}

/* App form overrides */
.note {
    background-color: var(--surface-2);
    border: 1px solid var(--brand-gray);
    border-radius: var(--radius-sm);
    font-family: 'Red Hat Display', sans-serif;
    font-size: 1rem;
    padding: var(--space-2);
    resize: vertical; /* only allow vertical resize */
    box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
}

    .note:focus {
        border-color: var(--brand-yellow);
        box-shadow: 0 0 0 0.2rem rgba(255,203,8,.25); /* yellow glow */
        background-color: var(--surface-1);
    }

.badge.bg-warning.text-dark {
    background-color: var(--brand-yellow) !important;
    color: #000 !important;
}

/* Fixed-width pill for small IDs */
.badge-id {
    min-width: 3.5rem; /* ~56px */
    text-align: center;
}


.dk-filter-wrap {
    vertical-align: middle;
}

.dk-filter-btn {
    line-height: 1;
    padding: .125rem .375rem;
}

.dk-filter-menu .form-check {
    margin-bottom: .25rem;
}
/* One-line truncate with ellipsis */
.dk-ellipsis-1 {
    display: inline-block;
    max-inline-size: 25ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

/* lg and down (≤992px) */
@media (max-width: 1200px) {
    .dk-ellipsis-1 {
        max-inline-size: 12ch;
    }
}

/* md and down (≤768px) */
@media (max-width: 768px) {
    .dk-ellipsis-1 {
        max-inline-size: 9ch;
    }
}

/* sm and down (≤576px) */
@media (max-width: 576px) {
    .dk-ellipsis-1 {
        max-inline-size: 6ch;
    }
}

/* Optional: two-line clamp if you ever want it */
.dk-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Preserve newlines but still wrap within the container */
.dk-prewrap {
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* DnD handle + state */
.sort-handle {
    cursor: grab;
    padding: .25rem .5rem;
}

    .sort-handle:active {
        cursor: grabbing;
    }

/* Optional placeholder highlight while dragging (we apply class via JS) */
.dk-sort-placeholder {
    height: 48px;
    background: var(--brand-lightgray);
    border: 2px dashed var(--brand-yellow);
    border-radius: .5rem;
}

/* Default: ellipsis everywhere */
.dk-sortable .description {
    display: inline-block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Opt-in: wrap on this list */
.dk-sortable.dk-allow-wrap .description {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* So the left side can shrink and wrap */
.dk-term-row {
    flex: 1 1 auto;
    min-width: 0;
}

/* Autocomplete wrapper + list */
.dk-ac {
    position: relative;
    width: 60vh;
}

/* menu */
.dk-ac-list {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 100%;
    z-index: 1000;
    width: 100%;
    max-height: 50vh;
    overflow-y: auto;
    background: var(--surface-1);
    border: 1px solid var(--brand-lightgray);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-2, 0 8px 24px rgba(0,0,0,0.08));
    margin-top: .25rem;
}

/* item */
.dk-ac-item {
    padding: .5rem .75rem;
    cursor: pointer;
    user-select: none;
}

    .dk-ac-item:hover,
    .dk-ac-item.active {
        background: var(--brand-lightgray);
    }

.dk-ac-match {
    background: transparent; /* no yellow */
    color: inherit; /* normal text color */
    font-weight: inherit; /* no bold */
}

/* Allow the list to expand a bit if needed */
.dk-ac-list {
    min-width: max(100%, 28rem);
}

/* Make readonly fields visually locked but still submittable */
.form-control[readonly] {
    background-color: var(--brand-lightgray);
    opacity: 1; /* don’t dim the text */
}

.dk-content {
    overflow: hidden;
    transition: max-height .25s ease;
}

    .dk-content[hidden] {
        max-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

/* Collapsible header */
.dk-collapsible {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem .75rem;
    border-radius: .375rem;
    user-select: none;
}

    /* Icon cell width, smooth transform (optional) */
    .dk-collapsible [data-icon] {
        width: 1rem;
        text-align: center;
        transition: transform .2s ease;
    }

/* Collapsible body (optional animated clamp if you want) */
.dk-collapse {
    overflow: hidden;
    transition: max-height .25s ease;
}

    .dk-collapse[hidden] {
        max-height: 0 !important;
        padding-block: 0 !important;
    }


/* Key–value grid used for “Equipment Details” & “Service Snapshot” */
.dk-kv-grid {
    display: grid;
    gap: .75rem 1.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 576px) {
    .dk-kv-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .dk-kv-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.dk-kv-item .dk-kv-label {
    font-weight: 700;
    color: var(--brand-yellow, #FFCB08);
}

.dk-kv-item .dk-kv-value {
    word-break: break-word;
}

/* Modal theming */
.modal .form-control {
    background-color: var(--brand-lightgray, #f5f5f5);
}

.modal .form-label {
    font-weight: 600;
}

.modal .fw-semibold {
    font-weight: 600;
}

/* Brand-yellow labels + required asterisk */
.form-label--brand {
    color: var(--brand-yellow);
    font-weight: 600;
}

.label-required::after {
    content: " *";
    color: var(--brand-yellow);
    font-weight: 700;
}

/* WIP GP heat */
.gp-red {
    background: var(--brand-red, #dc3545);
    color: var(--text-invert, #fff);
}

.gp-orange {
    background: #fd7e14;
    color: var(--text-invert, #fff);
}

.gp-yellow {
    background: var(--brand-yellow,#ffc107);
    color: var(--text-1, #000);
}


/* Floating legend over a bordered fieldset */
.dk-fieldset {
    position: relative;
    background: var(--surface-1);
    border: 1px solid rgba(0,0,0,.15);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    padding: 1rem;
    padding-top: 1.5rem;
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
}

.dk-legend {
    position: absolute;
    top: -1.4rem;
    margin: auto;
    padding: .35rem .6rem;
    background: var(--brand-mist);
    color: var(--text-1);
    border: 1px solid rgba(0,0,0,.12);
    border-radius: .5rem;
    box-shadow: 0 1px 0 rgba(0,0,0,.06);
    font-weight: 600;
    font-size: .95rem;
    line-height: 2;
    width: 93%;
}

.link-brand {
    text-decoration: none;
    color: var(--brand-blue);
}

    .link-brand:hover {
        text-decoration: underline;
    }

/* ===== Lightweight brand modal (custom overlay for "Update Successful") ===== */
.dk-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: grid;
    place-items: center;
    z-index: 1080;
}

    .dk-modal[hidden] {
        display: none;
    }

.dk-modal__dialog {
    background: var(--surface-1);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
    width: min(92vw, 520px);
    overflow: hidden;
}

.dk-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem .75rem;
    background: linear-gradient(-135deg, var(--brand-gray) 0%, #000 100%);
    color: var(--text-invert);
}

.dk-modal__title {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
}

    .dk-modal__title i {
        color: var(--brand-yellow);
    }

.dk-modal__body {
    padding: 1rem;
    color: var(--text-1);
}

.dk-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .75rem 1rem;
    background: var(--surface-2);
}

.dk-modal__header .btn-close {
    filter: invert(1) grayscale(1);
    opacity: .9;
}

    .dk-modal__header .btn-close:hover {
        opacity: 1;
    }

@media (prefers-reduced-motion: no-preference) {
    .dk-modal:not([hidden]) .dk-modal__dialog {
        animation: dkModalIn .18s ease-out both;
    }

    @keyframes dkModalIn {
        from {
            transform: translateY(6px);
            opacity: 0
        }

        to {
            transform: translateY(0);
            opacity: 1
        }
    }
}

.body--modal-open {
    overflow: hidden;
}

/* ===== Brand skin for Bootstrap 5 modals (opt-in via .dk-modal--brand on .modal-content) ===== */
.dk-modal--brand {
    border-radius: var(--radius-md);
    overflow: hidden;
}

    .dk-modal--brand .modal-header {
        background: linear-gradient(-135deg, var(--brand-gray) 0%, #000 100%);
        color: var(--text-invert);
        border-bottom: none;
    }

    .dk-modal--brand .modal-title {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        font-weight: 600;
    }

    .dk-modal--brand .btn-close {
        filter: invert(1) grayscale(1);
        opacity: .9;
    }

        .dk-modal--brand .btn-close:hover {
            opacity: 1;
        }

    .dk-modal--brand .modal-footer {
        background: var(--surface-2);
        border-top: none;
    }

/* 3-line multiline clamp with preserved newlines */
.dk-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* number of lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-wrap; /* keep newlines from your data */
    word-break: break-word; /* avoid overflow on long tokens */
}