/* ============================================================
   specIAlist — AD-MYRA inspired design system
   Minimalist · Elegant · Portfolio-Centric
   ============================================================ */

/* --- Scrollbar: overlay so it never shifts layout ------------ */
html { overflow-y: overlay; }

/* --- Palette ------------------------------------------------ */
:root {
    --white:        #FFFFFF;
    --ice:          #FAFAFA;
    --greige-light: #F5F2EF;
    --greige:       #D5CABD;
    --greige-dark:  #B8A99A;
    --grey-200:     #E8E8E8;
    --grey-400:     #AAAAAA;
    --grey-500:     #888888;
    --grey-700:     #555555;
    --charcoal:     #333333;
    --ink:          #222222;
    --black:        #000000;
    --accent:       #A89279;       /* warm bronze / ottone pallido */
    --accent-hover: #8C7760;
    --accent-light: #F0EBE3;
    --success:      #5B8C5A;
    --success-bg:   #EDF5ED;
    --warning:      #C49A3C;
    --warning-bg:   #FDF6E7;
    --danger:       #B85450;
    --danger-bg:    #FCEEED;
    --info:         #6B8FA3;
    --radius:       3px;
    --radius-lg:    6px;
    --shadow-sm:    0 1px 2px rgba(0,0,0,.04);
    --shadow:       0 2px 8px rgba(0,0,0,.06);
    --shadow-lg:    0 4px 24px rgba(0,0,0,.08);
    --transition:   .2s ease;
    --font:         'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-mono:    'SF Mono', 'Fira Code', monospace;
}

/* --- Import Inter (clean, architectural feel) --------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

/* --- Base --------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    background-color: var(--ice);
    font-family: var(--font);
    color: var(--ink);
    font-size: .9375rem;          /* 15px */
    line-height: 1.6;
    letter-spacing: .01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--ink); transition: color var(--transition); }
a:hover { color: var(--accent); }

::selection {
    background: var(--greige);
    color: var(--ink);
}

/* --- Layout ------------------------------------------------- */
.content-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2.5rem 3rem;
}

@media (max-width: 992px) {
    .content-wrapper { padding: 1.5rem 1.25rem; }
}

/* --- Page header -------------------------------------------- */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--grey-200);
}

.page-header h2 {
    margin: 0;
    font-weight: 300;
    font-size: 1.75rem;
    letter-spacing: .02em;
    color: var(--ink);
    text-transform: uppercase;
}

/* --- Navbar (dark → elegant charcoal) ----------------------- */
.navbar {
    background-color: var(--ink) !important;
    border-bottom: none;
    padding: .75rem 2rem;
    letter-spacing: .04em;
}

.navbar-brand {
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.navbar-brand .brand-spec  { color: var(--white) !important; }
.navbar-brand .brand-ia    { color: var(--accent) !important; }
.navbar-brand .brand-list  { color: var(--grey-400) !important; }

.navbar-dark .navbar-nav .nav-link {
    color: var(--grey-400);
    font-size: .8125rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .5rem 1rem;
    transition: color var(--transition);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--white);
}

.navbar .tenant-label {
    color: var(--grey-500);
    font-weight: 400;
    font-size: .7rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-left: 1px solid rgba(255,255,255,.12);
    padding-left: .75rem;
    margin-left: .25rem;
    margin-right: .75rem;
}

/* --- Cards -------------------------------------------------- */
.card {
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    background: var(--white);
    overflow: hidden;
}

.card-header {
    background: var(--white);
    border-bottom: 1px solid var(--grey-200);
    padding: 1rem 1.5rem;
}

.card-header h5 {
    font-weight: 500;
    font-size: .9375rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--charcoal);
    margin: 0;
}

.card-body {
    padding: 1.5rem;
}

.card-stat {
    text-align: center;
    padding: 2rem 1.5rem;
    transition: box-shadow var(--transition);
}

.card-stat:hover {
    box-shadow: var(--shadow);
}

.card-stat .display-6 {
    font-weight: 300;
    font-size: 2.75rem;
    color: var(--ink);
    line-height: 1.1;
    margin-bottom: .5rem;
}

.card-stat .text-muted {
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--grey-500) !important;
}

/* --- Tables ------------------------------------------------- */
.table {
    --bs-table-bg: transparent;
    font-size: .875rem;
}

.table th {
    font-weight: 500;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--grey-500);
    border-bottom: 1px solid var(--grey-200);
    padding: .75rem 1rem;
    white-space: nowrap;
}

.table td {
    padding: .75rem 1rem;
    vertical-align: middle;
    color: var(--charcoal);
    border-bottom: 1px solid #f0f0f0;
}

.table-hover tbody tr:hover {
    background-color: var(--greige-light);
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- Buttons ------------------------------------------------ */
.btn {
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: var(--radius);
    padding: .5rem 1.25rem;
    transition: all var(--transition);
}

.btn-primary {
    background-color: var(--ink);
    border-color: var(--ink);
    color: var(--white);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--black);
    border-color: var(--black);
}

.btn-outline-primary {
    color: var(--ink);
    border-color: var(--grey-200);
}
.btn-outline-primary:hover {
    background-color: var(--ink);
    border-color: var(--ink);
    color: var(--white);
}

.btn-outline-secondary {
    color: var(--ink);
    border-color: var(--greige-dark, #B8A99A);
}
.btn-outline-secondary:hover {
    background-color: var(--greige-light);
    border-color: var(--greige);
    color: var(--ink);
}

.btn-outline-info {
    color: var(--accent);
    border-color: var(--greige);
}
.btn-outline-info:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--white);
}

.btn-outline-danger {
    color: var(--danger);
    border-color: var(--danger);
}
.btn-outline-danger:hover {
    background-color: var(--danger);
    border-color: var(--danger);
    color: var(--white);
}

.btn-outline-light {
    color: var(--grey-400);
    border-color: rgba(255,255,255,.2);
}
.btn-outline-light:hover {
    background-color: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.3);
    color: var(--white);
}

.btn-sm {
    font-size: .75rem;
    padding: .35rem .85rem;
}

.btn-success {
    background-color: var(--success);
    border-color: var(--success);
}
.btn-success:hover {
    background-color: #4A7A49;
    border-color: #4A7A49;
}

.btn-warning {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--white);
}
.btn-warning:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--white);
}

.btn-info {
    background-color: var(--info);
    border-color: var(--info);
    color: var(--white);
}
.btn-info:hover {
    background-color: #5A7E91;
    border-color: #5A7E91;
    color: var(--white);
}

.btn-secondary {
    background-color: var(--grey-500);
    border-color: var(--grey-500);
    color: var(--white);
}
.btn-secondary:hover {
    background-color: var(--grey-700);
    border-color: var(--grey-700);
}

.btn-outline-success {
    color: var(--success);
    border-color: var(--success);
}
.btn-outline-success:hover {
    background-color: var(--success);
    border-color: var(--success);
    color: var(--white);
}

.btn-outline-warning {
    color: var(--accent);
    border-color: var(--accent);
}
.btn-outline-warning:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--white);
}

.btn-lg {
    font-size: .875rem;
    padding: .65rem 1.5rem;
}

/* --- Text color overrides ----------------------------------- */
.text-primary   { color: var(--ink) !important; }
.text-success   { color: var(--success) !important; }
.text-danger    { color: var(--danger) !important; }
.text-warning   { color: var(--warning) !important; }
.text-info      { color: var(--info) !important; }

/* --- Subtle backgrounds (Bootstrap 5.3) --------------------- */
.bg-primary-subtle { background-color: var(--greige-light) !important; }
.bg-info-subtle    { background-color: #EBF1F5 !important; }
.bg-success-subtle { background-color: var(--success-bg) !important; }
.bg-warning-subtle { background-color: var(--warning-bg) !important; }
.bg-danger-subtle  { background-color: var(--danger-bg) !important; }

/* --- Table header ------------------------------------------- */
.table-light, .table-light th {
    background-color: var(--ice) !important;
    border-color: var(--grey-200);
}

/* --- Spinner ------------------------------------------------ */
.spinner-border {
    color: var(--accent);
}

/* --- Forms -------------------------------------------------- */
.form-control,
.form-select {
    font-size: .875rem;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius);
    padding: .6rem .85rem;
    color: var(--ink);
    background-color: var(--white);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(168,146,121,.15);
}

.form-label {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--grey-700);
    letter-spacing: .02em;
    text-transform: uppercase;
    margin-bottom: .35rem;
}

.form-control::placeholder {
    color: var(--grey-400);
}

.form-select-sm,
.form-control-sm {
    font-size: .8125rem;
    padding: .35rem .65rem;
}

/* --- Badges ------------------------------------------------- */
.badge {
    font-weight: 500;
    font-size: .7rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .3em .65em;
    border-radius: 2px;
}

.bg-primary    { background-color: var(--ink) !important; }
.bg-secondary  { background-color: var(--grey-500) !important; }
.bg-success    { background-color: var(--success) !important; }
.bg-warning    { background-color: var(--warning) !important; color: var(--white) !important; }
.bg-danger     { background-color: var(--danger) !important; }
.bg-info       { background-color: var(--info) !important; }
.bg-dark       { background-color: var(--charcoal) !important; }

/* --- Modals ------------------------------------------------- */
.modal-content {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--grey-200);
    padding: 1.25rem 1.5rem;
}

.modal-title {
    font-weight: 500;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    border-top: 1px solid var(--grey-200);
    padding: 1rem 1.5rem;
}

/* --- Alerts ------------------------------------------------- */
.alert-danger {
    background-color: var(--danger-bg);
    color: var(--danger);
    border-color: transparent;
    font-size: .875rem;
}

.alert-success {
    background-color: var(--success-bg);
    color: var(--success);
    border-color: transparent;
}

/* --- Toasts ------------------------------------------------- */
.toast {
    border-radius: var(--radius);
    font-size: .875rem;
}

/* --- Progress bar ------------------------------------------- */
.progress {
    border-radius: var(--radius);
    background-color: var(--grey-200);
    height: 4px;
}

.progress-bar {
    background-color: var(--accent) !important;
}

.progress-bar.bg-success {
    background-color: var(--success) !important;
}

/* --- List groups -------------------------------------------- */
.list-group-item {
    border-color: var(--grey-200);
    padding: 1rem 1.25rem;
    transition: background-color var(--transition);
}

.list-group-item:hover {
    background-color: var(--greige-light);
}

.list-group-item.active,
.list-group-item-action.active {
    background-color: var(--accent-light);
    border-color: var(--greige);
    color: var(--ink);
}

.list-group-item.active:hover,
.list-group-item-action.active:hover {
    background-color: var(--greige);
    border-color: var(--greige);
    color: var(--ink);
}

/* --- Band labels (budget selector) -------------------------- */
.badge-band {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    text-align: center;
    cursor: pointer;
    padding: .3rem .5rem;
    border-radius: var(--radius);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .02em;
    transition: all var(--transition);
}

.badge-band.selected {
    background-color: var(--ink);
    color: var(--white);
}

.badge-band:not(.selected) {
    background-color: var(--greige-light);
    color: var(--grey-700);
}

.badge-band:hover:not(.selected) {
    background-color: var(--greige);
    color: var(--ink);
}

/* --- Estimator progress steps ------------------------------- */
.estimator-progress .step {
    display: flex;
    align-items: center;
    padding: .6rem 1rem;
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    font-size: .875rem;
    transition: background-color var(--transition);
}

.estimator-progress .step.active {
    background-color: var(--ink);
    color: var(--white);
}

.estimator-progress .step.completed {
    background-color: var(--success);
    color: var(--white);
}

.estimator-progress .step.pending {
    background-color: var(--greige-light);
    color: var(--grey-500);
}

/* --- Tree sidebar ------------------------------------------- */
.tree-item {
    padding: .5rem .75rem;
    cursor: pointer;
    border-radius: var(--radius);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .875rem;
    transition: background-color var(--transition);
}

.tree-item:hover,
.tree-item.active {
    background-color: var(--accent-light);
}

/* --- Score bars --------------------------------------------- */
.score-bar {
    height: 4px;
    border-radius: 2px;
    background-color: var(--grey-200);
    overflow: hidden;
}

.score-bar-fill {
    height: 100%;
    border-radius: 2px;
    background-color: var(--accent);
}

/* --- Candidate cards ---------------------------------------- */
.candidate-card {
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: .75rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.candidate-card:hover {
    box-shadow: var(--shadow);
}

.candidate-card.recommended {
    border-color: var(--success);
    background-color: var(--success-bg);
}

.candidate-card.selected {
    border-color: var(--accent);
    background-color: var(--accent-light);
}

/* --- Filter sidebar ----------------------------------------- */
.filter-sidebar {
    border-right: 1px solid var(--grey-200);
    min-height: calc(100vh - 60px);
    padding: 1.25rem;
    background-color: var(--white);
}

/* --- Breadcrumbs -------------------------------------------- */
.breadcrumb {
    font-size: .8125rem;
    margin-bottom: .5rem;
}

.breadcrumb-item a {
    color: var(--grey-500);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: var(--accent);
}

.breadcrumb-item.active {
    color: var(--ink);
}

/* --- Text utilities ----------------------------------------- */
.text-muted { color: var(--grey-500) !important; }

.fw-medium { font-weight: 500; }

.text-accent { color: var(--accent); }

small, .small { font-size: .8125rem; }

/* --- Scrollbar ---------------------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--greige); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--greige-dark); }

/* --- Print -------------------------------------------------- */
@media print {
    .navbar, .btn, .modal { display: none !important; }
    .content-wrapper { padding: 0; max-width: 100%; }
    .card { border: none; box-shadow: none; }
}