/* ============================================================
   Nandhi (KMF) Complaint Management System — design system.
   Extends Bootstrap 5.3.3 in place (same CDN bundle already loaded
   in Views/Shared/_Layout.cshtml) — no new CSS framework, no build
   step. "Noto Sans" covers Latin; the Kannada/Devanagari companions
   cover kn/hi, so the UI reads consistently in any selected language.

   Bootstrap 5.3 bakes most component colors as literal hex into
   component-scoped CSS variables (e.g. .btn-primary's own
   --bs-btn-bg), not live references to --bs-primary — a plain
   :root override alone does NOT recolor buttons, form-control focus
   rings, pagination, or dropdowns. Verified against the real
   distributed bootstrap.css before writing this file; every rule
   below that needed a component-scoped override has one.
   ============================================================ */

:root {
    /* Brand palette — restrained, dairy-inspired deep green */
    --brand-green: #1f6b45;
    --brand-green-rgb: 31, 107, 69;
    --brand-green-dark: #154a30;
    --brand-green-dark-rgb: 21, 74, 48;
    --brand-green-darker: #0f3822;
    --brand-green-tint: #e7f2ec;
    --brand-green-tint-strong: #cfe6da;

    --brand-surface: #ffffff;
    --brand-bg: #f5f7f5;
    --brand-border: #e1e5e1;
    --brand-text: #1f2623;
    --brand-text-rgb: 31, 38, 35;

    /* ---- Bootstrap semantic variables read LIVE by utilities/components
       (.text-primary, .bg-primary, .border-primary, plain <a>, .text-muted,
       focus rings) — safe to repoint at :root. ---- */
    --bs-primary: var(--brand-green);
    --bs-primary-rgb: var(--brand-green-rgb);
    --bs-primary-text-emphasis: var(--brand-green-dark);
    --bs-primary-bg-subtle: var(--brand-green-tint);
    --bs-primary-border-subtle: var(--brand-green-tint-strong);
    --bs-link-color: var(--brand-green);
    --bs-link-color-rgb: var(--brand-green-rgb);
    --bs-link-hover-color: var(--brand-green-dark);
    --bs-link-hover-color-rgb: var(--brand-green-dark-rgb);
    --bs-focus-ring-color: rgba(var(--brand-green-rgb), 0.25);
    --bs-body-bg: var(--brand-bg);
    --bs-body-color: var(--brand-text);
    --bs-secondary-color: rgba(var(--brand-text-rgb), 0.62);
    --bs-border-color: var(--brand-border);
    --bs-border-radius: 0.5rem;
    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius-lg: 0.625rem;
}

/* .btn-primary / .btn-outline-primary bake literal hex into their own
   scoped --bs-btn-* variables at compile time — override those directly
   rather than relying on --bs-primary (which they ignore). */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-green);
    --bs-btn-border-color: var(--brand-green);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-green-dark);
    --bs-btn-hover-border-color: var(--brand-green-dark);
    --bs-btn-focus-shadow-rgb: var(--brand-green-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-green-darker);
    --bs-btn-active-border-color: var(--brand-green-darker);
    --bs-btn-disabled-bg: var(--brand-green);
    --bs-btn-disabled-border-color: var(--brand-green);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-green);
    --bs-btn-border-color: var(--brand-green);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-green);
    --bs-btn-hover-border-color: var(--brand-green);
    --bs-btn-focus-shadow-rgb: var(--brand-green-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-green);
    --bs-btn-active-border-color: var(--brand-green);
    --bs-btn-disabled-color: var(--brand-green);
    --bs-btn-disabled-border-color: var(--brand-green);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-green);
    box-shadow: 0 0 0 0.25rem rgba(var(--brand-green-rgb), 0.25);
}

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

.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--brand-green-rgb), 0.25);
}

.pagination {
    --bs-pagination-active-bg: var(--brand-green);
    --bs-pagination-active-border-color: var(--brand-green);
    --bs-pagination-hover-color: var(--brand-green-dark);
    --bs-pagination-focus-color: var(--brand-green-dark);
}

.page-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--brand-green);
    --bs-dropdown-link-hover-bg: var(--brand-green-tint);
    --bs-dropdown-link-hover-color: var(--brand-green-dark);
    border-color: var(--brand-border);
}

/* ---------- Base & typography ---------- */
body {
    font-family: "Noto Sans", "Noto Sans Kannada", "Noto Sans Devanagari", -apple-system, "Segoe UI", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.01em;
}

.section-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

/* ---------- Surfaces ---------- */
.card {
    background-color: var(--brand-surface);
    border-color: var(--brand-border);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 1px 3px rgba(15, 35, 25, 0.05);
}

.card-header {
    background-color: var(--brand-surface);
    border-bottom-color: var(--brand-border);
    font-weight: 600;
}

.card-header i.bi {
    margin-right: 0.5rem;
    color: var(--bs-secondary-color);
}

/* Dashboard summary cards are links to the filtered complaint list (Prompts/click.txt). Same look as
   the other cards; a gentle lift on hover, a visible focus ring, a green border on the selected one. */
a.stat-card-link {
    color: inherit;
    text-decoration: none;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

a.stat-card-link:hover {
    border-color: var(--brand-green);
    box-shadow: 0 4px 12px rgba(15, 35, 25, 0.10);
    transform: translateY(-1px);
}

a.stat-card-link:focus-visible {
    outline: 3px solid var(--brand-green);
    outline-offset: 2px;
}

a.stat-card-link.is-selected {
    border-color: var(--brand-green);
    box-shadow: inset 0 -3px 0 var(--brand-green);
}

@media (prefers-reduced-motion: reduce) {
    a.stat-card-link,
    a.stat-card-link:hover {
        transition: none;
        transform: none;
    }
}

/* Enquiry lists (2026-10-21): address and comments are shown in full, wrapped in a readable column. */
.enquiry-table .enquiry-text {
    min-width: 14rem;
    max-width: 28rem;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.enquiry-table .enquiry-name {
    min-width: 10rem;
}

/* ---------- Tables ---------- */
/* Card-styled table wrappers. This used to say overflow: hidden (for the rounded corners), which
   overrode Bootstrap's .table-responsive overflow-x: auto on the same element: wide tables were cut
   off on phones with no way to scroll (Prompts/table.txt, 2026-10-21). overflow-x: auto still clips
   to the rounded corners. */
.table-responsive.card {
    border-radius: var(--bs-border-radius-lg);
    overflow-x: auto;
    overflow-y: hidden;
}

/* Every horizontal table scroller: may shrink inside flex/grid parents, swipes sideways without
   dragging the page (vertical scrolling still passes through), and shows a slim scrollbar so the
   extra columns are discoverable. */
.table-responsive {
    max-width: 100%;
    min-width: 0;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.table > thead {
    background-color: var(--brand-green-tint);
}

.table > thead > tr > th {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-green-dark);
    border-bottom-width: 1px;
    white-space: nowrap;
    vertical-align: middle;
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--brand-green-tint);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--brand-border);
}

/* ---------- Navbar ---------- */
.navbar {
    border-bottom: 1px solid var(--brand-border);
    box-shadow: none;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--brand-green-dark) !important;
    font-weight: 700;
}

.navbar-brand i {
    color: var(--brand-green);
    font-size: 1.25rem;
}

.navbar .nav-link {
    color: var(--bs-secondary-color);
    font-weight: 500;
    border-radius: var(--bs-border-radius-sm);
    padding: 0.5rem 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background-color .15s ease, color .15s ease;
}

.navbar .nav-link:hover,
.navbar .dropdown-toggle:hover {
    color: var(--brand-green-dark);
    background-color: var(--brand-green-tint);
}

.navbar .nav-link.active,
.navbar .dropdown-toggle.active {
    color: var(--brand-green-dark);
    background-color: var(--brand-green-tint);
    font-weight: 700;
}

.navbar .btn-link.nav-link {
    text-decoration: none;
}

/* Desktop menu: starts right after the logo/title (Prompts/logout.txt — it used to be pushed to the
   far right by ms-auto + flex-end). When a window is too narrow for every item (the KMF Admin menu
   needs ~1550 px) it wraps onto a second line instead of widening the page sideways
   (Prompts/table.txt). Phones/tablets use the collapsed menu as before. */
@media (min-width: 992px) {
    /* Bootstrap caps .container at 1320 px, narrower than the KMF Admin menu, so even a 1920 px
       window had to wrap; the bar may use the whole window width instead. */
    .navbar > .container {
        max-width: none;
    }

    .navbar-expand-lg .navbar-collapse {
        min-width: 0;
    }

    .navbar-expand-lg .navbar-nav {
        flex-wrap: wrap;
        justify-content: flex-start;
        row-gap: 0.25rem;
    }

    .navbar-brand {
        margin-right: 1.5rem;
    }
}

.btn > i:first-child,
.badge > i:first-child,
.list-group-item i.bi:first-child,
.alert i.bi:first-child {
    margin-right: 0.4rem;
}

.dropdown-item i {
    margin-right: 0.5rem;
    width: 1.1rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

.dropdown-item.active i,
.dropdown-item:hover i {
    color: inherit;
}

/* ---------- Status badges ---------- */
.badge {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.badge.fs-6 {
    padding: 0.4em 0.75em;
}

/* ---------- Footer ---------- */
footer {
    border-top: 1px solid var(--brand-border);
    background-color: var(--brand-surface);
}

/* ---------- Page header pattern — see Views/Shared/_PageHeader.cshtml ---------- */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.page-header h1 {
    font-size: 1.5rem;
    margin-bottom: 0.125rem;
}

.page-header .page-subtitle {
    color: var(--bs-secondary-color);
    font-size: 0.9375rem;
    margin-bottom: 0;
}

/* ---------- Searchable State / Product combobox — see wwwroot/js/searchable-select.js ---------- */
.searchable-select {
    position: relative;
}

.searchable-select-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: 220px;
    overflow-y: auto;
    margin-top: 2px;
    border-radius: var(--bs-border-radius);
    box-shadow: 0 6px 16px rgba(15, 35, 25, 0.12);
}

/* ---------- Compact round icon button (Copy Complaint ID) — see Views/Complaint/Submitted.cshtml ---------- */
.btn-copy-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(var(--brand-text-rgb), 0.07);
    color: rgba(var(--brand-text-rgb), 0.75);
    font-size: 1rem;
    line-height: 1;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.btn-copy-icon:hover {
    background-color: rgba(var(--brand-text-rgb), 0.13);
    color: var(--brand-text);
}

.btn-copy-icon:active {
    background-color: rgba(var(--brand-text-rgb), 0.19);
}

.btn-copy-icon:focus-visible {
    outline: 2px solid var(--brand-green);
    outline-offset: 2px;
}

/* Bootstrap's tooltip text defaults to --bs-body-bg, which this palette tints off-white —
   pin it to true black-on-white. */
.tooltip {
    --bs-tooltip-bg: #000;
    --bs-tooltip-color: #fff;
}

/* Bigger touch target on phones/tablets. */
@media (pointer: coarse) {
    .btn-copy-icon {
        width: 2.75rem;
        height: 2.75rem;
    }
}

/* ---------- Complaint attachments — see Views/Complaint/_AttachmentPicker.cshtml + wwwroot/js/complaint-form.js ---------- */
/* The real <input type=file> is visually hidden inside its <label class="btn">; show its focus on the label. */
.attachment-picker label.btn:focus-within {
    box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

/* "Take Photo" / "Record Video" (capture="environment") only make sense on touch devices with a camera. */
.camera-capture {
    display: none;
}

@media (pointer: coarse) {
    .camera-capture {
        display: inline-block;
    }
}

.attachment-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border: 1px solid var(--brand-border);
    border-radius: var(--bs-border-radius);
    background-color: var(--brand-surface);
}

.attachment-item + .attachment-item {
    margin-top: 0.5rem;
}

.attachment-thumb {
    flex-shrink: 0;
    width: 4.5rem;
    height: 3.5rem;
    border-radius: var(--bs-border-radius-sm);
    overflow: hidden;
    background-color: var(--brand-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
    font-size: 1.5rem;
}

.attachment-thumb img,
.attachment-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.attachment-info {
    flex-grow: 1;
    min-width: 0;
}

.attachment-remove {
    flex-shrink: 0;
}

/* Admin Edit: an existing attachment ticked "Remove" (complaint-form.js). */
.attachment-item.is-removed .attachment-thumb,
.attachment-item.is-removed .attachment-info {
    opacity: 0.45;
}

.attachment-item.is-removed .attachment-info a {
    text-decoration: line-through;
}

/* Complaint Details — attachment tiles */
.attachment-tile {
    overflow: hidden;
    background-color: var(--brand-surface);
}

.attachment-media {
    display: block;
    aspect-ratio: 16 / 10;
    background-color: var(--brand-bg);
}

.attachment-media img,
.attachment-media video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #000;
}

.attachment-media img {
    background-color: var(--brand-bg);
}

.attachment-media-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--bs-secondary-color);
}

.attachment-tile .btn > i:first-child {
    margin-right: 0;
}

.min-w-0 {
    min-width: 0;
}

/* ---------- Complaint form — single continuous form, light section headings (Views/Complaint/Submit.cshtml) ---------- */
.form-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-green-dark);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--brand-border);
}

/* Required-field marker. Screen readers get aria-required on the input itself, so the star is decorative. */
.form-label.required::after {
    content: " *";
    color: var(--bs-danger);
    font-weight: 600;
}