/* =============================================================
 *  QDMS-PSR  |  Application styles
 *  Theme: Teal + Orange accent (Instrument Calibration style)
 * ============================================================= */

:root {
    --qdms-primary:    #16768a;      /* main teal */
    --qdms-primary-dk: #0f5460;      /* darker teal */
    --qdms-primary-lt: #1a9eb3;      /* lighter teal */
    --qdms-accent:     #f39c12;      /* orange accent */
    --qdms-accent-lt:  #ffd166;
    --qdms-danger:     #b94a4a;      /* sign-out red */
    --qdms-success:    #2e8b57;
    --qdms-warning:    #d68910;
    --qdms-info:       #1f8caa;
    --qdms-bg:         #eef2f5;
    --qdms-card:       #ffffff;
    --qdms-field-ro:   #edf0f2;
    --qdms-border:     #cdd5db;
    --qdms-text:       #2b3439;
    --qdms-label:      #0f5460;
    --qdms-row-hover:  #f1f8fa;
    --qdms-row-expired:#fdecec;
    --qdms-row-due:    #fff5e0;
    --qdms-row-valid:  #ecf6ec;
}

body {
    background: var(--qdms-bg);
    color: var(--qdms-text);
    font-size: 0.92rem;
}

/* ---- Navbar ------------------------------------------------- */
.app-navbar {
    background: linear-gradient(90deg, #0e4f5e 0%, #15768a 55%, #1aa1b6 100%);
    box-shadow: 0 2px 4px rgba(0,0,0,.18);
    border-bottom: 3px solid var(--qdms-accent);
    padding-top: .4rem;
    padding-bottom: .4rem;
}
.app-navbar .navbar-brand {
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
}
.app-navbar .nav-link {
    font-size: .85rem;
    color: rgba(255,255,255,.88) !important;
    font-weight: 500;
}
.app-navbar .nav-link:hover { color: #fff !important; }
.app-navbar .nav-link.active {
    background: rgba(255,255,255,.18);
    border-radius: 4px;
    color: #fff !important;
}
.app-navbar .nav-link i { margin-right: 3px; }
.app-navbar .dropdown-toggle .badge { font-weight: 600; }

/* "Sign out" should look distinct (red) in the user dropdown   */
.app-navbar .dropdown-menu .dropdown-item .bi-box-arrow-right { color: var(--qdms-danger); }

/* ---- Page heading ------------------------------------------ */
main h1.h3 {
    color: var(--qdms-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    font-size: 1.25rem;
}
main .text-muted.small { color: #5c6770 !important; }

/* ---- Cards -------------------------------------------------- */
.card {
    border: 1px solid var(--qdms-border);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.card-header {
    background: #fff;
    border-bottom: 2px solid var(--qdms-accent);
    color: var(--qdms-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.83rem;
    padding: 0.55rem 0.9rem;
}
.card-footer { background: #fafbfc; border-top: 1px solid #e3e6ea; }

/* ---- Form section titles ----------------------------------- */
.form-section-title {
    color: var(--qdms-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--qdms-accent);
    padding-bottom: 4px;
    margin: 1.2rem 0 0.9rem;
    font-size: 0.86rem;
}
.form-section-title:first-child { margin-top: 0; }

/* ---- Form labels & controls -------------------------------- */
label.form-label {
    font-weight: 600;
    color: var(--qdms-label);
    font-size: 0.8rem;
    margin-bottom: 2px;
}
.required::after { content: " *"; color: var(--qdms-danger); }

.form-control, .form-select {
    border-color: var(--qdms-border);
    border-radius: 3px;
    font-size: 0.88rem;
    padding: 0.32rem 0.55rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--qdms-primary-lt);
    box-shadow: 0 0 0 0.18rem rgba(26,158,179,.20);
}
.form-control[readonly], .form-control:disabled,
.form-select:disabled {
    background-color: var(--qdms-field-ro);
    color: #4a545b;
}
.form-check-input:checked {
    background-color: var(--qdms-primary);
    border-color: var(--qdms-primary);
}
.input-group-text {
    background: var(--qdms-field-ro);
    border-color: var(--qdms-border);
    color: var(--qdms-primary);
}

/* ---- Buttons ----------------------------------------------- */
.btn-primary {
    background: var(--qdms-primary);
    border-color: var(--qdms-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--qdms-primary-dk);
    border-color: var(--qdms-primary-dk);
}
.btn-success {
    background: var(--qdms-success);
    border-color: var(--qdms-success);
}
.btn-success:hover { background: #246e44; border-color: #246e44; }
.btn-danger {
    background: var(--qdms-danger);
    border-color: var(--qdms-danger);
}
.btn-outline-primary { color: var(--qdms-primary); border-color: var(--qdms-primary); }
.btn-outline-primary:hover { background: var(--qdms-primary); color: #fff; }
.btn-outline-secondary { color: #4a545b; border-color: var(--qdms-border); }
.btn-outline-secondary:hover { background: #4a545b; color: #fff; border-color: #4a545b; }
.btn { font-weight: 500; }

/* ---- KPI tiles (dashboard) --------------------------------- */
.kpi-tile {
    border-radius: 4px;
    padding: 0.9rem 1rem;
    color: #fff;
    height: 100%;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
    border-left: 4px solid rgba(255,255,255,.35);
}
.kpi-tile .kpi-value { font-size: 1.8rem; font-weight: 700; line-height: 1; }
.kpi-tile .kpi-label { font-size: .76rem; opacity: .92; text-transform: uppercase; letter-spacing: .4px; }
.kpi-tile i.kpi-icon { font-size: 1.7rem; opacity: .35; }
.kpi-blue   { background: linear-gradient(135deg,#1aa1b6,#0e4f5e); }
.kpi-green  { background: linear-gradient(135deg,#2e8b57,#1f6e44); }
.kpi-amber  { background: linear-gradient(135deg,#f39c12,#b9781e); }
.kpi-red    { background: linear-gradient(135deg,#b94a4a,#7d2f2f); }
.kpi-slate  { background: linear-gradient(135deg,#6c7a89,#46505c); }
.kpi-purple { background: linear-gradient(135deg,#7d5ba6,#553a78); }

/* ---- Tables ------------------------------------------------ */
.table-responsive { border-radius: 4px; }
table.data-table { background: var(--qdms-card); margin-bottom: 0; }
table.data-table thead th {
    background: linear-gradient(180deg, #15768a, #0f5460);
    color: #fff;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    vertical-align: middle;
    border: none;
    padding: 8px 10px;
    border-bottom: 2px solid var(--qdms-accent);
}
table.data-table thead th a { color: #fff; text-decoration: none; }
table.data-table tbody tr { transition: background 0.12s ease; }
table.data-table tbody tr:hover { background: var(--qdms-row-hover); }
table.data-table td, table.data-table th { vertical-align: middle; }
table.data-table tbody td { border-color: #e6ebee; }
.table-sm td, .table-sm th { padding: .35rem .55rem; }

/* Row tints based on status (apply class on <tr>) */
tr.row-expired td { background: var(--qdms-row-expired) !important; }
tr.row-due     td { background: var(--qdms-row-due) !important; }
tr.row-valid   td { background: var(--qdms-row-valid) !important; }

/* ---- Badges & status pills --------------------------------- */
.badge { font-weight: 600; letter-spacing: 0.2px; }
.badge.bg-secondary { background: #6c7a89 !important; }
.badge.bg-primary   { background: var(--qdms-primary) !important; }
.badge.bg-success   { background: var(--qdms-success) !important; }
.badge.bg-danger    { background: var(--qdms-danger)  !important; }
.badge.bg-warning   { background: var(--qdms-accent)  !important; color: #fff !important; }
.badge.bg-info      { background: var(--qdms-info)    !important; color: #fff !important; }

/* Status legend dots (footer + below tables) */
.status-legend {
    display: inline-flex; gap: 1rem; align-items: center;
    font-size: 0.78rem; color: #4a545b;
}
.status-legend .dot {
    display: inline-block; width: 10px; height: 10px;
    border-radius: 50%; margin-right: 5px; vertical-align: middle;
    border: 1px solid rgba(0,0,0,.1);
}
.dot-expired { background: var(--qdms-danger); }
.dot-due     { background: var(--qdms-accent); }
.dot-valid   { background: var(--qdms-success); }

/* ---- Filter bar -------------------------------------------- */
.filter-bar {
    background: #fff;
    border: 1px solid var(--qdms-border);
    border-radius: 4px;
    border-top: 3px solid var(--qdms-accent);
    padding: 0.75rem;
    margin-bottom: 1rem;
}

/* ---- Login page ------------------------------------------- */
.login-wrap {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #0e4f5e 0%, #16768a 50%, #1aa1b6 100%);
}
.login-card {
    width: 100%; max-width: 400px;
    border-radius: 6px; overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,.3);
    border-top: 3px solid var(--qdms-accent);
}
.login-card .login-head {
    background: linear-gradient(180deg, #15768a, #0f5460);
    color: #fff;
    padding: 1.6rem;
    text-align: center;
    border-bottom: 3px solid var(--qdms-accent);
}
.login-card .login-head i { font-size: 2.4rem; }

/* ---- Footer ------------------------------------------------ */
.app-footer {
    padding: .7rem 0;
    font-size: .8rem;
    color: #4a545b;
    border-top: 3px solid var(--qdms-accent);
    background: #fff;
    margin-top: 2rem;
}
.app-footer .legend { float: right; }

/* ---- Misc -------------------------------------------------- */
.text-overdue { color: var(--qdms-danger); font-weight: 600; }
.text-soon    { color: var(--qdms-accent); font-weight: 600; }
.text-valid   { color: var(--qdms-success); font-weight: 600; }
.workflow-step {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .25rem .6rem; border-radius: 1rem;
    background: #e9ecef; font-size: .78rem; margin: .15rem;
}
.workflow-step.done   { background: #d4edda; color: #1f6e44; }
.workflow-step.active { background: #cfe2ff; color: #0f5460; font-weight: 600; }
hr { border-color: #d6dde2; }

/* Accordion (PO form) ---------------------------------------- */
.po-acc .accordion-button {
    font-weight: 600;
    color: var(--qdms-primary);
    background: #f7fafb;
}
.po-acc .accordion-button:not(.collapsed) {
    background: linear-gradient(180deg, #e8f3f6, #d8eaef);
    color: var(--qdms-primary-dk);
    box-shadow: inset 0 -2px 0 var(--qdms-accent);
}
.po-acc .accordion-item { border-color: var(--qdms-border); }

/* Flatpickr alt input should match the rest of the form */
.flatpickr-input.form-control + .form-control { font-size: 0.88rem; }
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange { background: var(--qdms-primary); border-color: var(--qdms-primary); }

/* ---- Print ------------------------------------------------- */
@media print {
    .no-print { display: none !important; }
    body { background: #fff; font-size: .78rem; }
    .card { box-shadow: none; border: 1px solid #ccc; }
    table.data-table thead th {
        background: #eef !important; color: #000 !important;
        border-bottom: 1px solid #999 !important;
        -webkit-print-color-adjust: exact;
    }
    main.container-fluid { padding: 0 !important; }
    .app-navbar, .app-footer { display: none !important; }
}

/* =============================================================
 *  Access-style form layout
 *  Applies to every <form class="row g-3"> across the app:
 *  - Labels on the LEFT, right-aligned, with trailing ":"
 *  - Required fields show ": *" in red
 *  - Fields take remaining width
 *  - Wraps to a normal stacked layout on narrow screens
 * ============================================================= */
.row.g-3 > [class*="col-"] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 6px;
    row-gap: 2px;
}
.row.g-3 > [class*="col-"] > label.form-label {
    flex: 0 0 130px;
    text-align: right;
    padding-top: 6px;
    margin: 0;
    line-height: 1.25;
    font-size: 0.8rem;
}
/* Trailing colon on every label, ": *" if required ----------- */
.row.g-3 > [class*="col-"] > label.form-label::after {
    content: ':';
    color: inherit;
}
.row.g-3 > [class*="col-"] > label.form-label.required::after {
    content: ': *';
    color: var(--qdms-danger);
}
.required::after { content: ''; }   /* neutralise the old global rule */

/* The actual control takes the rest of the row ---------------- */
.row.g-3 > [class*="col-"] > .form-control,
.row.g-3 > [class*="col-"] > .form-select,
.row.g-3 > [class*="col-"] > textarea.form-control,
.row.g-3 > [class*="col-"] > .input-group {
    flex: 1 1 calc(100% - 138px);
    min-width: 0;
}
.row.g-3 > [class*="col-"] > textarea.form-control { min-height: 60px; }

/* Validation feedback drops to its own row, aligned with the field */
.row.g-3 > [class*="col-"] > .invalid-feedback,
.row.g-3 > [class*="col-"] > .form-text {
    flex: 0 0 100%;
    margin-left: 138px;
    font-size: 0.78rem;
}

/* Section titles span the full width and reset flex --------- */
.row.g-3 > .col-12 > .form-section-title {
    width: 100%;
}
.row.g-3 > .col-12.border-top { padding-top: 1rem; flex-direction: row; }

/* Checkbox rows: no fixed-width label, let .form-check stretch */
.row.g-3 > [class*="col-"] > .form-check {
    flex: 1 1 auto;
    margin-top: 4px;
}
.row.g-3 > [class*="col-"] > .form-check > label.form-check-label::after {
    content: ''; /* don't add ":" to checkbox labels */
}

/* Mobile: stack label above field again ---------------------- */
@media (max-width: 575px) {
    .row.g-3 > [class*="col-"] {
        flex-direction: column;
    }
    .row.g-3 > [class*="col-"] > label.form-label {
        flex: auto;
        text-align: left;
        padding-top: 0;
    }
    .row.g-3 > [class*="col-"] > .invalid-feedback,
    .row.g-3 > [class*="col-"] > .form-text {
        margin-left: 0;
    }
}

/* =============================================================
 *  Section cards (Access-style two-column form layout)
 *  Use .section-card around each logical group, with .frow per
 *  label+field line inside.  Pair them in Bootstrap columns to
 *  get the INSTRUMENT DETAILS | CALIBRATION INFO layout.
 * ============================================================= */
.section-card { margin-bottom: 0; }
.section-card .card-header {
    background: #f4f7f9;
    color: var(--qdms-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 0.5rem 0.85rem;
    border-bottom: 2px solid var(--qdms-accent);
}
.section-card .card-body { padding: 0.75rem 1rem; }

.frow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-bottom: 6px;
}
.frow:last-child { margin-bottom: 0; }
.frow > label.form-label {
    flex: 0 0 130px;
    text-align: right;
    margin: 0;
    padding-top: 0;
    line-height: 1.2;
    font-size: 0.8rem;
    color: var(--qdms-label);
    font-weight: 600;
}
.frow > label.form-label::after { content: ':'; }
.frow > label.form-label.required::after { content: ': *'; color: var(--qdms-danger); }
.frow > .form-control,
.frow > .form-select,
.frow > textarea.form-control,
.frow > .input-group {
    flex: 1 1 auto;
    min-width: 0;
}
.frow > textarea.form-control { min-height: 56px; }
.frow > .invalid-feedback,
.frow > .form-text {
    flex: 0 0 100%;
    margin-left: 138px;
    margin-top: 2px;
    font-size: 0.78rem;
}
.frow > .form-check { flex: 1; margin: 0; }
.frow.row-readonly > .form-control { background: var(--qdms-field-ro); }

@media (max-width: 575px) {
    .frow { flex-direction: column; align-items: stretch; }
    .frow > label.form-label { text-align: left; flex: auto; padding: 0; }
    .frow > .invalid-feedback, .frow > .form-text { margin-left: 0; }
}

/* Don't let the global ".row.g-3 > [class*='col-']" flex rule fire
 * on cols that wrap a card (they have no direct form-label child)  */
.row.g-3 > [class*="col-"]:not(:has(> label.form-label)) {
    display: block;
}

/* ===== Fix: keep label + field on the same row inside .frow ===== */
.frow { flex-wrap: nowrap !important; }
.frow > .form-control,
.frow > .form-select,
.frow > textarea.form-control,
.frow > .input-group {
    flex: 1 1 0 !important;     /* basis 0 so Bootstrap's width:100% can't claim the row */
    width: auto !important;
    min-width: 0;
}
.frow > .invalid-feedback,
.frow > .form-text {
    flex: 0 0 100%;             /* feedback still drops to its own row */
}
/* On phones, fall back to label-above-field */
@media (max-width: 575px) {
    .frow { flex-wrap: wrap !important; flex-direction: column; align-items: stretch; }
    .frow > label.form-label { text-align: left; flex: auto; padding: 0; }
}

/* =============================================================
 *  Fix: PO accordion form alignment
 *  Inside the PO accordion the rows mix col-md-3, col-md-4 and
 *  col-md-12.  Use a tighter, uniform label width and a uniform
 *  CSS-grid row so labels and fields line up cleanly across cols.
 * ============================================================= */
.po-acc .accordion-body > .row.g-3 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 12px;
    row-gap: 8px;
}
.po-acc .accordion-body > .row.g-3 > .col-md-3   { grid-column: span 3; }
.po-acc .accordion-body > .row.g-3 > .col-md-4   { grid-column: span 4; }
.po-acc .accordion-body > .row.g-3 > .col-md-5   { grid-column: span 5; }
.po-acc .accordion-body > .row.g-3 > .col-md-6   { grid-column: span 6; }
.po-acc .accordion-body > .row.g-3 > .col-md-9   { grid-column: span 9; }
.po-acc .accordion-body > .row.g-3 > .col-md-12,
.po-acc .accordion-body > .row.g-3 > .col-12     { grid-column: span 12; }

/* Reset the Bootstrap padding so the grid gap does the spacing */
.po-acc .accordion-body > .row.g-3 > [class*="col-"] {
    padding-left: 0; padding-right: 0;
    margin: 0;
}

/* Tighter, uniform label width so 3-col and 4-col rows align */
.po-acc .accordion-body > .row.g-3 > [class*="col-"] > label.form-label {
    flex: 0 0 110px;
    font-size: 0.76rem;
    padding-top: 5px;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
}

/* Compact input sizing inside accordion */
.po-acc .accordion-body .form-control,
.po-acc .accordion-body .form-select {
    font-size: 0.82rem;
    padding: 0.25rem 0.5rem;
    min-height: 30px;
}

/* Required asterisk colour still red, but inline with label */
.po-acc .accordion-body .form-label.required::after { content: ': *'; color: var(--qdms-danger); }
.po-acc .accordion-body .form-label::after { content: ':'; }

/* Mobile fall-back: stack everything */
@media (max-width: 767px) {
    .po-acc .accordion-body > .row.g-3 { grid-template-columns: 1fr; }
    .po-acc .accordion-body > .row.g-3 > [class*="col-"] { grid-column: 1 / -1; }
}