/* Shared ANTE component theme. Load after Bootstrap 4 and site.css.
   Brand reference: https://akvaria-ante.cz/ (Noto Sans and #0d58a0).
   Keep layout/utilities in Bootstrap; React also consumes these tokens. */
:root {
    --ante-primary: #0d58a0;
    --ante-primary-hover: #0a4680;
    --ante-primary-dark: #06294b;
    --ante-light: #eefaff;
    --ante-surface: #ffffff;
    --ante-background: #f7fbfd;
    --ante-heading: #212529;
    --ante-text: #46515c;
    --ante-muted: #637180;
    --ante-border: #d6e3ed;
    --ante-radius: 10px;
    --ante-shadow: 0 4px 18px rgba(13, 88, 160, .07);
    --ante-focus: 0 0 0 .2rem rgba(13, 88, 160, .22);
    --primary: var(--ante-primary);
    --font-family-sans-serif: "Noto Sans", "Segoe UI", sans-serif;
}

html { font-size: 16px; }

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin-bottom: 0;
    background: var(--ante-surface);
    color: var(--ante-text);
    font-family: var(--font-family-sans-serif);
    font-size: .9375rem;
    line-height: 1.6;
}

body > main {
    flex: 1 0 auto;
    padding-top: 2rem;
    padding-bottom: 3rem !important;
}

/* React owns its shell; do not leave the footer absolutely positioned. */
body > #root { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--ante-heading);
    font-weight: 600;
    line-height: 1.3;
}

h1, .h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 1.25rem; }
h2, .h2 { font-size: 1.75rem; }
h3, .h3 { font-size: 1.4rem; }
h4, .h4 { font-size: 1.15rem; }

a { color: var(--ante-primary); }
a:hover { color: var(--ante-primary-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--ante-primary);
    outline-offset: 3px;
}

hr { border-top-color: var(--ante-border); margin: 1.5rem 0; }
.text-primary { color: var(--ante-primary) !important; }
a.text-primary:hover, a.text-primary:focus { color: var(--ante-primary-hover) !important; }
.text-muted, .text-secondary { color: var(--ante-muted) !important; }
.bg-primary { background-color: var(--ante-primary) !important; }
.bg-light { background-color: var(--ante-light) !important; }
.border, .border-top, .border-bottom { border-color: var(--ante-border) !important; }
.rounded { border-radius: var(--ante-radius) !important; }

/* Shared navigation: preserve the existing links and role-dependent actions. */
.ante-navbar {
    min-height: 96px;
    padding: .75rem 1rem;
    background: var(--ante-surface);
    border-bottom: 1px solid #edf2f6;
    box-shadow: var(--ante-shadow);
}

.ante-navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    padding: 0;
    margin-right: 1.5rem;
}

.ante-navbar .navbar-brand img { width: auto; max-width: 180px; max-height: 64px; }
.ante-navbar .navbar-nav { gap: .3rem; }
.ante-navbar .navbar-nav li { margin-left: 0; font-weight: 600; }
.ante-navbar .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: .55rem .7rem;
    border-radius: var(--ante-radius);
    color: var(--ante-heading);
    overflow-wrap: anywhere;
}

.ante-navbar .navbar-nav .nav-link:hover,
.ante-navbar .navbar-nav .nav-link:focus-visible {
    color: var(--ante-primary);
    background: var(--ante-light);
    text-decoration: none;
}

.ante-navbar #login {
    color: #fff;
    background: var(--ante-primary);
    padding-right: 1.2rem;
    padding-left: 1.2rem;
}

.ante-navbar #login:hover, .ante-navbar #login:focus-visible { background: var(--ante-primary-hover); }
.ante-navbar .navbar-toggler {
    min-width: 44px;
    min-height: 44px;
    padding: .5rem;
    border: 1px solid var(--ante-border);
    border-radius: var(--ante-radius);
    background: var(--ante-light);
    color: var(--ante-primary);
}

.ante-navbar .material-icons { font-size: 22px; }
.footer {
    position: static;
    flex-shrink: 0;
    width: 100%;
    padding: 1.25rem 0;
    border-top: 1px solid var(--ante-border);
    background: var(--ante-light);
    color: var(--ante-muted);
    font-size: .85rem;
    line-height: 1.8;
    white-space: normal;
}

.footer a { color: var(--ante-primary); font-weight: 600; }

/* Bootstrap component states, including keyboard, checked and disabled. */
.btn {
    border-radius: var(--ante-radius);
    padding: .6rem 1.15rem;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.5;
    transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s;
}
.btn-sm { padding: .3rem .65rem; font-size: .8125rem; }
.btn-lg { padding: .8rem 1.5rem; font-size: 1.1rem; }
.btn-primary, .badge-primary { color: #fff; background: var(--ante-primary); border-color: var(--ante-primary); }
.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle { background: var(--ante-primary-hover); border-color: var(--ante-primary-hover); }
.btn-primary:focus, .btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus { box-shadow: var(--ante-focus); }
.btn-primary.disabled, .btn-primary:disabled { background: var(--ante-primary); border-color: var(--ante-primary); }
.btn-secondary, .btn-outline-primary {
    color: var(--ante-primary);
    border-color: var(--ante-border);
    background: var(--ante-surface);
}
.btn-secondary:hover, .btn-outline-primary:hover,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle, .show > .btn-outline-primary.dropdown-toggle {
    color: var(--ante-primary-dark);
    border-color: var(--ante-primary);
    background: var(--ante-light);
}
.btn-secondary:focus, .btn-outline-primary:focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus,
.show > .btn-outline-primary.dropdown-toggle:focus { box-shadow: var(--ante-focus); }
.btn-secondary.disabled, .btn-secondary:disabled, .btn-outline-primary.disabled, .btn-outline-primary:disabled {
    color: var(--ante-muted); background: var(--ante-background); border-color: var(--ante-border);
}
.btn-link { color: var(--ante-primary); }
.btn-link:hover { color: var(--ante-primary-hover); }
.btn:disabled, .btn.disabled { cursor: default; opacity: .6; }

.form-group { margin-bottom: 1.25rem; }
.control-label, .col-form-label, .form-group > label { color: var(--ante-heading); font-weight: 600; }
.form-control, .custom-select {
    height: calc(1.5em + 1.2rem + 2px);
    padding: .6rem .8rem;
    border-color: var(--ante-border);
    border-radius: var(--ante-radius);
    color: var(--ante-heading);
    background-color: var(--ante-surface);
    font-size: .9375rem;
}
textarea.form-control, select.form-control[multiple], select.form-control[size] { height: auto; }
.form-control-sm, .input-group-sm > .form-control { height: calc(1.5em + .6rem + 2px); padding: .3rem .65rem; }
.form-control-lg, .input-group-lg > .form-control { height: calc(1.5em + 1.6rem + 2px); padding: .8rem 1rem; font-size: 1.1rem; }
.form-control:focus, .custom-select:focus { color: var(--ante-heading); border-color: var(--ante-primary); box-shadow: var(--ante-focus); }
.form-control::placeholder { color: var(--ante-muted); opacity: 1; }
.form-control:disabled, .form-control[readonly] { background: #edf2f6; color: var(--ante-muted); }
.input-group-text { color: var(--ante-muted); background: var(--ante-background); border-color: var(--ante-border); border-radius: var(--ante-radius); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ante-primary); }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--ante-primary); border-color: var(--ante-primary); }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: var(--ante-focus); }
.form-control.input-validation-error, .form-control.is-invalid { border-color: #b42318; }
.form-control.input-validation-error:focus, .form-control.is-invalid:focus { box-shadow: 0 0 0 .2rem rgba(180, 35, 24, .18); }
.text-danger, .field-validation-error, .invalid-feedback { color: #b42318 !important; }

.card, .modal-content, .dropdown-menu, .list-group-item {
    border-color: var(--ante-border);
    border-radius: var(--ante-radius);
}
.card, .modal-content { box-shadow: var(--ante-shadow); }
.card-header, .card-footer { background: var(--ante-background); border-color: var(--ante-border); }
.card-header:first-child { border-radius: 9px 9px 0 0; }
.card-footer:last-child { border-radius: 0 0 9px 9px; }
.dropdown-item.active, .dropdown-item:active, .list-group-item.active { background: var(--ante-primary); color: #fff; border-color: var(--ante-primary); }
.dropdown-item:hover:not(.active) { color: var(--ante-primary); background: var(--ante-light); }
.nav-pills .nav-link { border-radius: var(--ante-radius); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: #fff; background: var(--ante-primary); }
.nav-tabs { border-color: var(--ante-border); }
.nav-tabs .nav-link.active { color: var(--ante-primary); border-color: var(--ante-border) var(--ante-border) #fff; }
.page-link { color: var(--ante-primary); border-color: var(--ante-border); }
.page-link:hover { color: var(--ante-primary-hover); background: var(--ante-light); }
.page-link:focus { box-shadow: var(--ante-focus); }
.page-item.active .page-link { background: var(--ante-primary); border-color: var(--ante-primary); }

.table { color: var(--ante-text); }
.table th, .table td, .table thead th { border-color: var(--ante-border); }
.table th { color: var(--ante-heading); font-weight: 600; }
.table thead th { background: var(--ante-light); border-bottom-width: 1px; }
.table-striped tbody tr:nth-of-type(odd) { background: var(--ante-background); }
.table-hover tbody tr:hover { color: var(--ante-heading); background: var(--ante-light); }
.table .form-group { margin-bottom: .5rem; }
.table-dark, .table-dark th, .table .thead-dark th { color: #fff; }

.alert { border-radius: var(--ante-radius); padding: 1rem 1.25rem; }
.alert-primary, .alert-info { background: var(--ante-light); border-color: #b8d9ee; color: var(--ante-primary-dark); }
.alert-primary .alert-link, .alert-info .alert-link { color: var(--ante-primary-dark); }
.alert-success { background: #eef8f2; border-color: #bddcc9; color: #24613c; }
.alert-warning { background: #fff8e8; border-color: #efdcaa; color: #765213; }
.alert-danger { background: #fff1f0; border-color: #f0c1bb; color: #912018; }
.progress { height: .9rem; border-radius: 999px; background: #e4edf5; }
.progress-bar { background-color: var(--ante-primary); }

/* Product and configurator components; existing grid widths remain intact. */
.catalogue h3 { max-width: 850px; color: var(--ante-muted); font-size: 1.1rem; font-weight: 400; line-height: 1.7; }
.catalogue h3 strong { color: var(--ante-text); font-weight: 600; }
.product-card { min-width: 0; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.product-card:hover, .product-card:focus-within { border-color: var(--ante-primary); box-shadow: 0 6px 22px rgba(13, 88, 160, .14); }
.product-card .image { background-size: cover; background-position: center; background-color: var(--ante-background); }
.product-card .image:focus-visible { outline-offset: -4px; }
.product-card .card-title { padding: .4rem .65rem; font-size: .875rem; overflow-wrap: anywhere; }
.product-card .strong { color: var(--ante-heading); font-weight: 600; }
.config-section { padding: 1rem !important; border-radius: var(--ante-radius); background: var(--ante-surface); }
.config-section legend { padding: 0 .5rem; color: var(--ante-primary); font-size: 1.1rem; font-weight: 600; }
.wizard-option { background: var(--ante-surface); transition: border-color .15s, background-color .15s; }
.wizard-option > label { cursor: pointer; font-weight: 600; color: var(--ante-heading); }
.wizard-option > label > input[type="radio"] { margin-right: .35rem; }
.wizard-option:has(> label > input[type="radio"]:checked) { border-color: var(--ante-primary) !important; background: var(--ante-light); box-shadow: inset 0 0 0 1px var(--ante-primary); }
.wizard-option:has(> label > input[type="radio"]:focus-visible) { outline: 2px solid var(--ante-primary); outline-offset: 3px; }
.wizard-option:has(> label > input[type="radio"]:disabled) { opacity: .6; }
.wizard-option:has(> label > input[type="radio"]:disabled) > label { cursor: default; }

@media (max-width: 991.98px) {
    .ante-navbar { min-height: 80px; }
    .ante-navbar .navbar-brand img { max-width: 155px; max-height: 56px; }
    .ante-navbar .navbar-collapse { padding-top: .75rem; }
    .ante-navbar .navbar-nav { align-items: stretch; }
    .ante-navbar .navbar-nav .nav-link { width: 100%; }
}

@media (max-width: 575.98px) {
    body > main { padding-top: 1.5rem; padding-bottom: 2rem !important; }
    .ante-navbar > .container { padding: 0; }
    .catalogue > .row { margin-top: .5rem !important; }
    .product-card .card-title { font-size: .8125rem; }
    .table th, .table td { padding: .5rem; }
    .form-control, .custom-select { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .btn, .product-card, .wizard-option { transition: none; }
}