/* ==========================================================================
   Web_Inspector shared UI layer
   Centralized from _Layout.cshtml + cross-project Bootstrap compatibility.
   Loaded after Bootstrap and legacy Site.css.
   ========================================================================== */

:root {
            --app-nav-bg: #0f172a;
            --app-nav-bg-2: #1e3a8a;
            --app-nav-border: rgba(255,255,255,.14);
            --app-nav-text: #e5e7eb;
            --app-nav-muted: #cbd5e1;
            --app-surface: #f3f6fa;
        }

        html { min-height: 100%; }

        body {
            min-height: 100%;
            background: var(--app-surface);
        }

        .app-navbar {
            position: sticky;
            top: 0;
            z-index: 1030;
            padding: 8px 18px;
            background: linear-gradient(90deg, var(--app-nav-bg), var(--app-nav-bg-2));
            border-bottom: 1px solid rgba(255,255,255,.12);
            box-shadow: 0 8px 22px rgba(15, 23, 42, .18);
        }

        .app-navbar .navbar-brand {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 38px;
            padding: 5px 10px;
            border-radius: 10px;
            color: #fff !important;
            font-weight: 800;
            letter-spacing: .2px;
            text-decoration: none;
            white-space: nowrap;
        }

        .app-navbar .navbar-brand:before {
            content: "P";
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            border-radius: 8px;
            background: rgba(255,255,255,.16);
            border: 1px solid rgba(255,255,255,.22);
            font-size: 14px;
            font-weight: 900;
        }

        .app-navbar .navbar-brand:hover {
            background: rgba(255,255,255,.08);
            color: #fff !important;
        }

        .app-navbar .navbar-toggler {
            border-color: rgba(255,255,255,.35);
            padding: 5px 8px;
            border-radius: 8px;
        }

        .app-navbar .navbar-toggler:focus {
            box-shadow: 0 0 0 .15rem rgba(96, 165, 250, .35);
        }

        .app-navbar .navbar-toggler-icon {
            filter: invert(1) grayscale(100%);
        }

        .app-navbar .navbar-nav {
            gap: 3px;
            align-items: stretch;
        }

        .app-navbar .nav-link,
        .app-navbar .dropdown-toggle {
            min-height: 34px;
            display: flex;
            align-items: center;
            padding: 6px 10px;
            border-radius: 9px;
            color: var(--app-nav-text) !important;
            font-size: 16.2px;
            font-weight: 600;
            line-height: 1.2;
            text-decoration: none;
            white-space: nowrap;
        }

        .app-navbar .nav-link:hover,
        .app-navbar .nav-link:focus,
        .app-navbar .dropdown-toggle:hover,
        .app-navbar .dropdown-toggle:focus {
            color: #fff !important;
            background: rgba(255,255,255,.10);
            text-decoration: none;
        }

        .app-navbar .dropdown-menu {
            margin-top: 8px;
            padding: 7px;
            border: 1px solid #d9dee5;
            border-radius: 12px;
            box-shadow: 0 14px 32px rgba(15, 23, 42, .18);
            min-width: 240px;
        }

        .app-navbar .dropdown-item {
            padding: 7px 10px;
            border-radius: 8px;
            color: #1f2937;
            font-size: 13px;
            font-weight: 600;
        }

        .app-navbar .dropdown-item:hover,
        .app-navbar .dropdown-item:focus {
            color: #0d6efd;
            background: #eff6ff;
        }

        .app-navbar .navbar-user-area {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-left: auto;
            padding-left: 10px;
        }

        .app-navbar .navbar-user-area .nav-link,
        .app-navbar .navbar-user-area a {
            color: var(--app-nav-muted) !important;
            font-size: 13px;
            text-decoration: none;
        }

        .app-navbar .navbar-user-area .nav-link:hover,
        .app-navbar .navbar-user-area a:hover {
            color: #fff !important;
        }

        .app-body-content {
            width: 100%;
            max-width: 100%;
            padding: 14px 18px 0 18px;
        }

        .app-footer {
            margin-top: 18px;
            padding: 10px 0 14px 0;
            color: #6b7280;
            font-size: 12px;
            border-top: 1px solid #d9dee5;
        }

        @media (max-width: 991.98px) {
            .app-navbar { padding: 8px 10px; }

            .app-navbar .navbar-collapse {
                margin-top: 8px;
                padding-top: 8px;
                border-top: 1px solid var(--app-nav-border);
            }

            .app-navbar .navbar-nav { gap: 4px; }

            .app-navbar .nav-link,
            .app-navbar .dropdown-toggle {
                white-space: normal;
            }

            .app-navbar .navbar-user-area {
                margin-left: 0;
                padding-left: 0;
                padding-top: 6px;
                border-top: 1px solid var(--app-nav-border);
            }
        }

/* ---------- Form compatibility ---------- */
.form-control,
.form-select,
textarea.form-control,
input.form-control,
select.form-control {
    max-width: 100%;
}

.form-check {
    width: auto;
    height: auto;
}

.form-check-input {
    width: 1.2rem;
    height: 1.2rem;
}

/* ---------- Shared button system ---------- */
.btn {
    font-weight: 600;
    border-radius: .45rem;
    transition: color .15s ease-in-out,
                background-color .15s ease-in-out,
                border-color .15s ease-in-out,
                box-shadow .15s ease-in-out,
                transform .08s ease-in-out;
}

.btn:active:not(:disabled):not(.disabled) {
    transform: translateY(1px);
}

.btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .22rem rgba(13, 110, 253, .22);
}

/*
 * Bootstrap outline buttons used to be visually white on most pages.
 * Keep semantic outline colours but give them a light tinted surface.
 */
.btn-outline-primary {
    --bs-btn-color: #0b5ed7;
    --bs-btn-border-color: #78aef8;
    --bs-btn-bg: #eaf3ff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0d6efd;
    --bs-btn-hover-border-color: #0d6efd;
    background-color: #eaf3ff;
}
.btn-outline-secondary {
    --bs-btn-color: #475569;
    --bs-btn-border-color: #94a3b8;
    --bs-btn-bg: #eef2f7;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #64748b;
    --bs-btn-hover-border-color: #64748b;
    background-color: #eef2f7;
}
.btn-outline-success {
    --bs-btn-color: #157347;
    --bs-btn-border-color: #75c99a;
    --bs-btn-bg: #eaf8f0;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #198754;
    --bs-btn-hover-border-color: #198754;
    background-color: #eaf8f0;
}
.btn-outline-danger {
    --bs-btn-color: #b02a37;
    --bs-btn-border-color: #e59aa2;
    --bs-btn-bg: #fff0f1;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #dc3545;
    --bs-btn-hover-border-color: #dc3545;
    background-color: #fff0f1;
}
.btn-outline-warning {
    --bs-btn-color: #7a5800;
    --bs-btn-border-color: #e2b93f;
    --bs-btn-bg: #fff7d6;
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: #ffc107;
    --bs-btn-hover-border-color: #ffc107;
    background-color: #fff7d6;
}
.btn-outline-info {
    --bs-btn-color: #087990;
    --bs-btn-border-color: #6ed0e2;
    --bs-btn-bg: #e8f8fb;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #0dcaf0;
    --bs-btn-hover-border-color: #0dcaf0;
    background-color: #e8f8fb;
}

/* Bootstrap 3 compatibility class still present in several legacy views. */
.btn-default {
    color: #fff;
    background-color: #64748b;
    border-color: #64748b;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
    color: #fff;
    background-color: #475569;
    border-color: #475569;
}

/* Legacy project button aliases. */
.btn.bt {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}
.btn-notice {
    color: #fff;
    background-color: #1d4ed8;
    border-color: #1e40af;
}
.btn-notice:hover {
    color: #fff;
    background-color: #1e40af;
}
.btn1.btn-create-notice {
    color: #1e3a8a;
    background-color: #dbeafe;
    border-color: #93c5fd;
}

/* ---------- Small icon/action buttons: no more white tiles ---------- */
.wi-action-btn,
.urist-action-btn,
.insp-action-btn,
.proof-action-btn,
.pay-action-btn,
.res-action-btn {
    background: #eef4fb !important;
    border-color: #b9cce2 !important;
    color: #334155 !important;
}

.wi-action-btn.edit,
.insp-action-btn.photo,
.proof-action-btn.photo,
.urist-action-btn.dvs,
.urist-action-btn.get {
    background: #eaf3ff !important;
    border-color: #93c5fd !important;
    color: #0b5ed7 !important;
}
.wi-action-btn.print,
.insp-action-btn.print,
.urist-action-btn.print {
    background: #fff5d9 !important;
    border-color: #f2cf66 !important;
    color: #7c5600 !important;
}
.wi-action-btn.pay,
.proof-action-btn.pay,
.insp-action-btn.ok {
    background: #e9f8ef !important;
    border-color: #86d6a8 !important;
    color: #157347 !important;
}
.wi-action-btn.dvs {
    background: #f1edff !important;
    border-color: #c4b5fd !important;
    color: #6d28d9 !important;
}
.wi-action-btn.post {
    background: #fff2d2 !important;
    border-color: #f6c453 !important;
    color: #9a5b00 !important;
}
.wi-action-btn.vip,
.insp-action-btn.warn {
    background: #ffebed !important;
    border-color: #f3a6ad !important;
    color: #b4232f !important;
}
.urist-action-btn.send {
    background: #e9f8ef !important;
    border-color: #86d6a8 !important;
    color: #157347 !important;
}
.pay-action-btn,
.res-action-btn {
    background: #eef4ff !important;
    border-color: #a9c5f5 !important;
    color: #2459a9 !important;
}

.wi-action-btn:hover,
.urist-action-btn:hover,
.insp-action-btn:hover,
.proof-action-btn:hover,
.pay-action-btn:hover,
.res-action-btn:hover {
    filter: brightness(.96);
    box-shadow: 0 2px 6px rgba(15, 23, 42, .12);
    text-decoration: none;
}

/* Read-only controls should be visually distinct from editable white fields. */
.form-control[readonly],
.form-control:disabled,
.form-select:disabled {
    background-color: #f1f5f9;
    color: #475569;
}

/* Date fields keep manual dd/MM/yyyy input and expose a native calendar. */
.app-date-control {
    display: flex;
    position: relative;
    width: 100%;
    max-width: 100%;
    align-items: stretch;
}

.app-date-control > input[data-date-kind] {
    flex: 1 1 auto;
    min-width: 0;
    width: 1%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.app-date-picker-button {
    position: relative;
    display: inline-flex;
    flex: 0 0 2.65rem;
    width: 2.65rem;
    min-height: 2.35rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #334155;
    background: #eef4fb;
    border: 1px solid #b8c4d1;
    border-left: 0;
    border-radius: 0 .375rem .375rem 0;
}

.app-date-picker-button:hover,
.app-date-picker-button:focus-within {
    color: #0b5ed7;
    background: #e1edfb;
}

.app-date-picker-button:focus-within {
    z-index: 3;
    outline: 2px solid rgba(13, 110, 253, .35);
    outline-offset: 1px;
}

.app-date-picker-button svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.app-date-native-picker {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

@media (max-width: 767.98px) {
    .app-date-picker-button {
        flex-basis: 2.85rem;
        width: 2.85rem;
        min-height: 2.6rem;
    }
}

/* Keep buttons usable in compact toolbars. */
.btn-group-sm > .btn,
.btn-sm {
    border-radius: .38rem;
}

/* Print remains neutral; coloured controls should not waste toner. */
@media print {
    .btn,
    .wi-action-btn,
    .urist-action-btn,
    .insp-action-btn,
    .proof-action-btn,
    .pay-action-btn,
    .res-action-btn {
        box-shadow: none !important;
    }

    .app-date-picker-button {
        display: none !important;
    }

    .app-date-control > input[data-date-kind] {
        width: 100%;
        border-radius: .375rem;
    }
}