/* Quick Quote Tool Styles – KPN Zakelijk / Grootzakelijk huisstijl */

/* ── KPN design tokens ─────────────────────────────────────────────── */
:root {
    --kpn-green:       #00C300;
    --kpn-dark-blue:   #0014A9;
    --kpn-bright-blue: #00AAFF;
    --kpn-lime:        #CBF900;
    --kpn-white:       #FFFFFF;
    --kpn-anthracite:  #1F1F2E;
    --kpn-gray-100:    #F4F5F7;
    --kpn-gray-200:    #E4E6EA;
    --kpn-gray-500:    #9EA5B0;

    /* Bootstrap primary override → KPN Groen */
    --bs-primary:             #00C300;
    --bs-primary-rgb:         0, 195, 0;
    --bs-link-color:          #0014A9;
    --bs-link-color-rgb:      0, 20, 169;
    --bs-link-hover-color:    #0019d6;

    /* Border-radius scale (8-px grid) */
    --bs-border-radius:       0.75rem;   /* 12 px – small components */
    --bs-border-radius-sm:    0.5rem;    /*  8 px */
    --bs-border-radius-lg:    1.25rem;   /* 20 px – cards / panels */
    --bs-border-radius-pill:  50rem;

    /* Typography */
    --bs-font-sans-serif: 'KPN Sans', 'Inter', 'Arial', 'Helvetica', sans-serif;
    --bs-body-color:      var(--kpn-anthracite);
    --bs-body-bg:         var(--kpn-gray-100);
}

/* ── Body & typography ─────────────────────────────────────────────── */
body {
    font-family: var(--bs-font-sans-serif);
    background-color: var(--kpn-gray-100);
    color: var(--kpn-anthracite);
}

/* ── Navbar (KPN wit met groene onderlijn) ─────────────────────────── */
.navbar-kpn {
    background-color: var(--kpn-white);
    border-bottom:    3px solid var(--kpn-green);
    box-shadow:       0 2px 8px rgba(0, 0, 0, 0.07);
    padding-top:      0.75rem;
    padding-bottom:   0.75rem;
}

.navbar-kpn .nav-link {
    color:       var(--kpn-anthracite);
    font-weight: 500;
    padding-left:  0.75rem;
    padding-right: 0.75rem;
}

.navbar-kpn .nav-link:hover,
.navbar-kpn .nav-link:focus {
    color: var(--kpn-dark-blue);
}

.navbar-kpn .navbar-toggler {
    border-color: var(--kpn-gray-200);
}

/* Brand: KPN logo + scheiding + naam */
.navbar-brand-kpn {
    display:     flex;
    align-items: center;
    font-weight: 700;
    font-size:   1.1rem;
    color:       var(--kpn-anthracite) !important;
    gap:         0.75rem;
}

.navbar-brand-kpn:hover {
    color: var(--kpn-dark-blue) !important;
}

.navbar-kpn-logo {
    height:     32px;
    width:      auto;
    flex-shrink: 0;
}

.navbar-brand-divider {
    display:          inline-block;
    width:            1px;
    height:           22px;
    background-color: var(--kpn-gray-200);
    flex-shrink:      0;
}

/* User info & logout */
.nav-user {
    color:     var(--kpn-anthracite);
    font-size: 0.875rem;
}

.nav-role {
    display:          inline-block;
    background-color: var(--kpn-gray-200);
    color:            var(--kpn-anthracite);
    font-size:        0.75rem;
    font-weight:      600;
    padding:          0.15rem 0.5rem;
    border-radius:    var(--bs-border-radius-pill);
    margin-left:      0.25rem;
    text-transform:   capitalize;
}

/* User dropdown */
.navbar-kpn .dropdown-menu {
    border:        1px solid var(--kpn-gray-200);
    border-radius: var(--bs-border-radius);
    box-shadow:    0 4px 12px rgba(0, 0, 0, 0.1);
    min-width:     180px;
}

.navbar-kpn .dropdown-item {
    font-size:   0.875rem;
    font-weight: 500;
    color:       var(--kpn-anthracite);
    padding:     0.5rem 1rem;
}

.navbar-kpn .dropdown-item:hover {
    background-color: var(--kpn-gray-100);
    color:            var(--kpn-dark-blue);
}

.nav-logout {
    color:         var(--kpn-dark-blue) !important;
    font-weight:   600;
    font-size:     0.875rem;
    border:        1.5px solid var(--kpn-dark-blue);
    border-radius: var(--bs-border-radius-pill);
    padding:       0.3rem 0.9rem !important;
    margin-left:   0.5rem;
    transition:    background-color 0.15s, color 0.15s;
}

.nav-logout:hover,
.nav-logout:focus {
    background-color: var(--kpn-dark-blue) !important;
    color:            var(--kpn-white) !important;
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn-primary {
    background-color: var(--kpn-green);
    border-color:     var(--kpn-green);
    color:            var(--kpn-anthracite);
    border-radius:    var(--bs-border-radius-pill);
    font-weight:      600;
    padding-left:     1.5rem;
    padding-right:    1.5rem;
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background-color: #00a800;
    border-color:     #00a800;
    color:            var(--kpn-anthracite);
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--kpn-gray-200);
    border-color:     var(--kpn-gray-200);
    color:            var(--kpn-gray-500);
}

.btn-secondary {
    background-color: var(--kpn-white);
    border-color:     var(--kpn-gray-200);
    color:            var(--kpn-anthracite);
    border-radius:    var(--bs-border-radius-pill);
    font-weight:      500;
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
    background-color: var(--kpn-gray-100);
    border-color:     var(--kpn-green);
    color:            var(--kpn-anthracite);
}

.btn-outline-primary {
    color:        var(--kpn-dark-blue);
    border-color: var(--kpn-dark-blue);
    border-radius: var(--bs-border-radius-pill);
}

.btn-outline-primary:hover {
    background-color: var(--kpn-dark-blue);
    color: var(--kpn-white);
}

/* ── Cards ─────────────────────────────────────────────────────────── */
.card {
    border-radius: var(--bs-border-radius-lg);
    border:        1px solid var(--kpn-gray-200);
    box-shadow:    0 2px 8px rgba(0, 0, 0, 0.06);
}

.card-header {
    border-radius: calc(var(--bs-border-radius-lg) - 1px)
                   calc(var(--bs-border-radius-lg) - 1px) 0 0 !important;
    background-color: var(--kpn-gray-100);
    border-bottom:    1px solid var(--kpn-gray-200);
    font-weight:      600;
}

/* ── Form controls ─────────────────────────────────────────────────── */
.form-control,
.form-select {
    border-radius: var(--bs-border-radius-sm);
    border-color:  var(--kpn-gray-200);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--kpn-green);
    box-shadow:   0 0 0 0.2rem rgba(0, 195, 0, 0.2);
}

/* ── Focus indicators (keyboard navigation) ───────────────────────── */
*:focus-visible {
    outline:        2px solid var(--kpn-green) !important;
    outline-offset: 2px;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 195, 0, 0.25) !important;
}

/* ── Alerts ─────────────────────────────────────────────────────────── */
.alert {
    border-radius: var(--bs-border-radius);
}

/* ── Wizard step indicator ─────────────────────────────────────────── */
.wizard-steps {
    display:         flex;
    justify-content: center;
    margin-bottom:   2rem;
}

.wizard-step {
    display:          flex;
    align-items:      center;
    padding:          0.5rem 1rem;
    margin:           0 0.25rem;
    border-radius:    var(--bs-border-radius);
    background-color: var(--kpn-gray-200);
    color:            var(--kpn-gray-500);
    font-weight:      500;
}

.wizard-step.active {
    background-color: var(--kpn-dark-blue);
    color:            var(--kpn-white);
}

.wizard-step.completed {
    background-color: var(--kpn-green);
    color:            var(--kpn-anthracite);
}

.wizard-step-number {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    width:            1.5rem;
    height:           1.5rem;
    border-radius:    50%;
    background-color: rgba(255, 255, 255, 0.3);
    margin-right:     0.5rem;
    font-size:        0.85rem;
}

/* ── Warning and error row highlighting ───────────────────────────── */
.row-warning {
    background-color: #fff8e1 !important;
}

.row-error {
    background-color: #fde8ea !important;
}

.margin-negative {
    color:       #C62828;
    font-weight: bold;
}

.margin-low {
    color:       #E65100;
    font-weight: bold;
}

.margin-ok {
    color: #00700d;
}

/* ── Procurement warning banner ────────────────────────────────────── */
.procurement-warning {
    background-color: #fffde7;
    border:           2px solid #F9A825;
    border-radius:    var(--bs-border-radius);
    padding:          1rem;
    margin-bottom:    1rem;
}

/* ── Blocked finalization banner ───────────────────────────────────── */
.blocked-banner {
    background-color: #fde8ea;
    border:           2px solid #C62828;
    border-radius:    var(--bs-border-radius);
    padding:          1rem;
    margin-bottom:    1rem;
}

/* ── Quote status badges ───────────────────────────────────────────── */
.badge-concept    { background-color: var(--kpn-bright-blue); color: var(--kpn-anthracite); }
.badge-definitief { background-color: var(--kpn-green);       color: var(--kpn-anthracite); }
.badge-heropend   { background-color: var(--kpn-lime);        color: var(--kpn-anthracite); }
.badge-archived   { background-color: var(--kpn-gray-500);    color: var(--kpn-white); }

/* ── Price table ───────────────────────────────────────────────────── */
.price-table th {
    position:         sticky;
    top:              0;
    background-color: var(--kpn-gray-100);
    z-index:          1;
}

.price-table input[type="number"] {
    width: 80px;
}

.category-header {
    background-color: var(--kpn-gray-200) !important;
    font-weight:      bold;
}

.category-subtotal {
    background-color: var(--kpn-gray-100) !important;
    font-weight:      600;
}

/* ── HTMX loading indicator ─────────────────────────────────────────── */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline-block;
}

/* ── Read-only overlay ─────────────────────────────────────────────── */
.readonly-overlay {
    position: relative;
}

.readonly-overlay::after {
    content:        '';
    position:       absolute;
    top:            0;
    left:           0;
    right:          0;
    bottom:         0;
    background:     rgba(255, 255, 255, 0.5);
    pointer-events: all;
    z-index:        10;
}

/* ── Summary totals ────────────────────────────────────────────────── */
.summary-total {
    font-size:   1.1rem;
    font-weight: bold;
    border-top:  2px solid var(--kpn-anthracite);
}

/* ── Tables ─────────────────────────────────────────────────────────── */
.table {
    border-radius: var(--bs-border-radius);
    overflow:      hidden;
}

/* ── Spacing utility (8-px grid baseline) ──────────────────────────── */
.container {
    padding-top:    1.5rem;
    padding-bottom: 1.5rem;
}