:root {
  --brand: #0d6efd;
  --sidebar-width: 250px;
  --sidebar-bg: #0F172A;
}

/* Bootstrap primary follows the white-label brand color */
.btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: color-mix(in srgb, var(--brand) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--brand) 85%, black); --bs-btn-active-bg: color-mix(in srgb, var(--brand) 80%, black); }
.btn-outline-primary { --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); }
.text-brand { color: var(--brand) !important; }
.bg-brand { background-color: var(--brand) !important; }

body { background: #f5f6f8; }

/* Login */
.login-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.login-card { width: 100%; max-width: 400px; border: 0; }

.brand-mark {
  width: 44px; height: 44px; border-radius: 10px; flex: 0 0 44px;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem; overflow: hidden;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; padding: 4px; background: #fff; border-radius: 10px; }
.login-logo { width: 240px; max-width: 80%; height: auto; }
.brand-platform { display: block; flex: 1 1 auto; width: 100%; line-height: 0; }
.brand-platform img { width: 100%; height: auto; display: block; border-radius: .5rem; }

/* Shell */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-width); flex: 0 0 var(--sidebar-width);
  background: var(--sidebar-bg); color: #fff;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar-brand { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem; border-bottom: 1px solid rgba(255,255,255,.1); min-height: 76px; }
.sidebar-brand .brand-text { min-width: 0; }
.sidebar-brand .app-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-nav { padding: .75rem .75rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; flex-wrap: nowrap; scrollbar-width: thin; }
.sidebar-nav .nav-link span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-nav .nav-link { color: rgba(255,255,255,.75); border-radius: .5rem; padding: .6rem .85rem; display: flex; align-items: center; gap: .65rem; }
.sidebar-nav .nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.sidebar-nav .nav-link.active { color: #fff; background: var(--brand); }
.sidebar-nav .nav-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.4); padding: .9rem .85rem .3rem; }
.sidebar-nav .nav-subsection { font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.35); padding: .55rem .85rem .15rem 1.6rem; }
.sidebar-nav .nav-group-toggle { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; border-radius: .4rem; }
.sidebar-nav .nav-group-toggle:hover { color: rgba(255,255,255,.7); background: rgba(255,255,255,.04); }
.sidebar-nav .nav-group-toggle .bi { transition: transform .15s ease; font-size: .65rem; }
.sidebar-nav .nav-group-toggle.collapsed .bi { transform: rotate(-90deg); }
.sidebar-nav .nav-sub-item .nav-link { padding-left: 1.6rem; }
.sidebar-nav .nav-section-toggle { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; border-radius: .4rem; }
.sidebar-nav .nav-section-toggle:hover { color: rgba(255,255,255,.75); background: rgba(255,255,255,.04); }
.sidebar-nav .nav-section-toggle .bi { transition: transform .15s ease; font-size: .75rem; }
.sidebar-nav .nav-section-toggle.collapsed .bi { transform: rotate(-90deg); }
.sidebar-footer { padding: 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,.1); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { min-height: 60px; flex-wrap: nowrap; }
.topbar .navbar-brand { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .ms-auto { flex: 0 0 auto; }
.content { flex: 1; }

/* Mobile sidebar */
@media (max-width: 991.98px) {
  .sidebar { position: fixed; left: 0; top: 0; z-index: 1040; transform: translateX(-100%); transition: transform .2s ease; }
  .sidebar.show { transform: translateX(0); box-shadow: 0 0 0 100vmax rgba(0,0,0,.4); }
}

/* Inline-editable tables */
.table-inline td { padding: .35rem .5rem; }
.table-inline .form-control-sm { min-width: 7rem; }
.table-inline th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.table-inline th.sortable:hover { background: rgba(0,0,0,.04); }
.table-inline th.sortable .bi { font-size: .75rem; opacity: .5; }
.table-inline th.sortable.sorted .bi { opacity: 1; color: var(--brand); }
.table-inline tr.row-add { background: color-mix(in srgb, var(--brand) 6%, white); }
.table-inline tr.row-editing td { background: #fff8e1; }
.table-inline th.row-toggle, .table-inline td.row-toggle { width: 2rem; padding-right: 0; }
.table-inline.table-wide th { white-space: nowrap; }
.table-inline.table-wide .form-control-sm { min-width: 6.5rem; }
.table-inline tr.row-open td { border-bottom-color: transparent; }
.table-inline tr.row-detail td { background: #f8f9fa; padding: .75rem 1rem 1rem 2.5rem; }
.table-inline tr.row-add-detail td { background: color-mix(in srgb, var(--brand) 6%, white); }
.cp-wrap { max-height: 24rem; overflow-y: auto; background: #fff; border: 1px solid #e5e7eb; border-radius: .5rem; }
.cp-table thead th { position: sticky; top: 0; background: #f1f3f5; z-index: 1; }
.cp-table tr.priced td:first-child { border-left: 3px solid #198754; }
.cp-table tr.saving td { opacity: .6; }
.cp-table .cp-price input { max-width: 7.5rem; }
.skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .4rem .9rem; }
.skill-item { display: flex; align-items: flex-start; gap: .6rem; padding: .55rem .7rem; min-height: 3.6rem; border: 1px solid #e5e7eb; border-radius: .5rem; background: #fff; cursor: pointer; margin: 0; }
.skill-item .form-check-input { margin-top: .15rem; flex: 0 0 auto; }
.skill-item .skill-body { flex: 1; display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.skill-item.on { border-color: #198754; background: #eaf6ee; }            /* selected: green */
.skill-item.on.expired { border-color: #dc3545; background: #fdecee; }   /* expired: red */
.skill-item.on.soon { border-color: #fd7e14; background: #fff3e6; }      /* expiring within a month: orange */
.skill-item .form-control.is-warning { border-color: #fd7e14; }
.skill-item .skill-name { line-height: 1.2; font-weight: 500; }
.skill-item .skill-exp { display: flex; align-items: center; gap: .45rem; flex-wrap: nowrap; }
.skill-item .skill-exp > .small { white-space: nowrap; }
.skill-item .skill-exp input { width: 8.6rem; flex: 0 0 auto; padding: .15rem .35rem; font-size: .8rem; }
.skill-item .skill-exp .badge { white-space: nowrap; }
.table-inline td.actions { white-space: nowrap; text-align: right; width: 1%; }

.stat-card .stat-value { font-size: 1.8rem; font-weight: 600; }
.table > :not(caption) > * > * { vertical-align: middle; }
.color-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); vertical-align: -2px; }

/* Assignment sub-rows under each job (Assignations page) */
tr.asg-subrow > td { background: #f8f9fb; padding: .5rem .75rem 1rem 2.5rem; border-top: 0; }
.asg-table { background: #fff; border: 1px solid var(--bs-border-color); border-radius: .5rem; overflow: hidden; }
.asg-table table { margin: 0; }
.asg-table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #6c757d; background: #f1f3f5; }
.asg-table td { padding: .3rem .5rem; vertical-align: middle; }
.asg-table .form-select-sm, .asg-table .form-control-sm { min-width: 7rem; }
.asg-table tr.row-add td { background: color-mix(in srgb, var(--brand) 6%, white); }
.asg-table tr.row-editing td { background: #fff8e1; }
.asg-table tr.row-slot-head td, .asg-table tr.row-extra-head td { background: #f5f6f8; }
.asg-table tr.row-extra-head td { border-top: 2px solid #dee2e6; }
.asg-table tr.row-slot-empty td:first-child { border-left: 3px dashed #adb5bd; }
.asg-table tr.row-slot-empty.saving td { opacity: .6; }
.asg-table tr.row-eq-head td { background: #f5f6f8; border-top: 2px solid #dee2e6; }
.asg-table tr.row-eq td { background: #fafbfc; }
.asg-table tr.row-eq-empty td:first-child { border-left: 3px dashed #adb5bd; }
.asg-table tr.row-eq.saving td { opacity: .6; }
.asg-table td.actions { white-space: nowrap; text-align: right; width: 1%; }
.asg-toggle .bi { transition: transform .15s ease; }
.asg-toggle.collapsed .bi { transform: rotate(-90deg); }
.asg-table option.busy { color: #a86b00; }

/* SMS templates */
.st-tabs { flex-wrap: wrap; }
.st-tabs .nav-link { color: #495057; }
.st-tabs .nav-link.active { font-weight: 600; }
.st-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--brand); vertical-align: middle; margin-left: .25rem; }
.st-card { margin-bottom: 0; }
.st-card { border: 1px solid var(--bs-border-color); border-radius: .6rem; background: #fff; margin-bottom: 1rem; }
.st-head { padding: .75rem 1rem; border-bottom: 1px solid var(--bs-border-color); }
.st-body { padding: 1rem; }
.st-vars .badge { cursor: pointer; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; background: #eef3ff; color: #1d3f8a; border: 1px solid #b6c8f5; }
.st-vars .badge:hover { background: #dbe6ff; }
textarea.form-control.st-textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem; line-height: 1.5; min-height: 260px; resize: vertical; }
.st-preview { background: #f1f3f5; border-radius: .5rem; padding: .6rem .8rem; font-size: .85rem; white-space: pre-wrap; min-height: 2.5rem; }
.st-preview .bubble { background: #d1e7dd; border-radius: 1rem 1rem 1rem .25rem; padding: .5rem .75rem; display: inline-block; max-width: 100%; }

/* Reports */
.report { background: #fff; border: 1px solid var(--bs-border-color); border-radius: .6rem; padding: 1.5rem 2rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; max-width: 760px; }
.report h2 { font-family: inherit; font-size: 1.15rem; font-weight: 700; margin: 0 0 .5rem; }
.report .meta { margin-bottom: .75rem; }
.report hr { border: 0; border-top: 2px solid #212529; opacity: 1; margin: .75rem 0; }
.report .emp { margin: 1rem 0; }
.report .emp-name { font-weight: 700; text-transform: uppercase; }
.report .emp-company { color: #6c757d; font-weight: 400; text-transform: none; }
.report .line { display: flex; justify-content: space-between; padding-left: 1.5rem; }
.report .line.total { padding-left: 0; font-weight: 700; margin-top: .15rem; }
.report .grand { display: flex; justify-content: space-between; font-weight: 700; font-size: 1rem; }
.report .num { font-variant-numeric: tabular-nums; }
.report .dossier { color: #6c757d; margin-left: 1.25rem; }
@media print { body * { visibility: hidden; } .report, .report * { visibility: visible; } .report { position: absolute; left: 0; top: 0; border: 0; max-width: none; } }

/* Supervision roster */
.sv-job { border: 1px solid var(--bs-border-color); border-radius: .6rem; background: #fff; margin-bottom: 1rem; }
.sv-job-head { padding: .75rem 1rem; border-bottom: 1px solid var(--bs-border-color); display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; cursor: pointer; user-select: none; }
.sv-job.collapsed .sv-job-head { border-bottom: 0; }
.sv-job .sv-chevron { transition: transform .15s ease; }
.sv-job.collapsed .sv-chevron { transform: rotate(-90deg); }
@media (max-width: 767.98px) { .sv-job-head { gap: .25rem .75rem; padding: .6rem .75rem; } .sv-table { font-size: .8rem; } }
.sv-table { font-size: .85rem; }
.sv-suggest { position: fixed; z-index: 1080; min-width: 22rem; max-width: 95vw; max-height: 16rem; overflow-y: auto; font-size: .85rem; }
.sv-suggest-item { display: grid; grid-template-columns: 7.5rem minmax(6rem, 1fr) auto; gap: .6rem; align-items: center; white-space: nowrap; }
.sv-suggest-item .sv-sg-phone { font-variant-numeric: tabular-nums; color: #6c757d; }
.sv-suggest-item .sv-sg-company { color: #6c757d; overflow: hidden; text-overflow: ellipsis; }
.sv-suggest-item.active, .sv-suggest-item:hover { background: color-mix(in srgb, var(--brand) 12%, white); color: inherit; }
.rv-star { color: #f5b301; }
.rv-stars.small .rv-star { font-size: .8rem; }
.rv-pick .rv-star { cursor: pointer; font-size: 1rem; padding: 0 1px; }
.rv-pick .rv-star.bi-star { color: #c9ccd1; }
.rv-pick .rv-star:hover { transform: scale(1.15); }
.rv-clear { color: #adb5bd; cursor: pointer; }
.rv-comment-input { min-width: 12rem; }
.rv-comment { white-space: pre-wrap; }
.sv-table th { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #6c757d; background: #f1f3f5; white-space: nowrap; }
.sv-table td { padding: .25rem .35rem; vertical-align: middle; }
.sv-table .form-control-sm, .sv-table .form-select-sm { min-width: 5.2rem; font-size: .8rem; padding: .2rem .35rem; }
.sv-table input[type=time].form-control-sm { min-width: 6.4rem; }
.sv-table input.money { width: 5.5rem; text-align: right; }
.sv-table input.mins { width: 4.5rem; text-align: right; }
.sv-table .input-group { flex-wrap: nowrap; min-width: 7rem; }
.sv-table .input-group .input-group-text { padding: .2rem .4rem; font-size: .75rem; }
.sv-table tr.locked td { background: #f8f9fa; color: #6c757d; }
.sv-table tr.locked .form-control, .sv-table tr.locked .form-select { background: #eef0f2; }
.sv-table tr.row-add td { background: color-mix(in srgb, var(--brand) 6%, white); }
.sv-table td.total { font-weight: 600; text-align: right; white-space: nowrap; }
.sv-table tr.saving td { opacity: .7; }
.sv-known { color: #198754; font-size: .75rem; }

/* Row highlight after navigating from the logs */
tr.flash > td { animation: asg-flash 2.2s ease-out; }
.entity-link { text-decoration: none; }
.entity-link:hover { text-decoration: underline; }

/* Audit logs */
.log-row { cursor: pointer; }
.log-row.open td { border-bottom: 0; }
.log-details td { background: #f8f9fb; padding: .5rem 1rem 1rem 2.5rem; }
.log-json { background: #0F172A; color: #e2e8f0; border-radius: .4rem; padding: .6rem .8rem; font-size: .75rem; max-height: 320px; overflow: auto; margin: 0; white-space: pre; }
.log-json .k { color: #93c5fd; } .log-json .s { color: #fcd34d; } .log-json .n { color: #86efac; } .log-json .b { color: #f9a8d4; } .log-json .z { color: #94a3b8; }
.log-action { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; }
.log-action.create { background: #d1e7dd; color: #0f5132; } .log-action.update { background: #cfe2ff; color: #084298; } .log-action.delete { background: #f8d7da; color: #842029; }
.log-action.auth { background: #e2e3e5; color: #41464b; } .log-action.other { background: #fff3cd; color: #664d03; }
.log-row.flash td { animation: asg-flash 1.6s ease-out; }

/* Live update flash */
@keyframes asg-flash { 0% { box-shadow: inset 0 0 0 999px rgba(13,110,253,.18); } 100% { box-shadow: none; } }
.asg-table tr.flash td { animation: asg-flash 1.6s ease-out; }
.live-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: #adb5bd; margin-right: .3rem; }
.live-dot.on { background: #198754; box-shadow: 0 0 0 3px rgba(25,135,84,.2); }

/* Confirmation colours on assignment lines */
.asg-table tr.conf-confirmed td { background: #e6f4ea; }
.asg-table tr.conf-rejected td { background: #fbe9e9; }
.asg-table tr.conf-pending td { background: #fff8e1; }
.asg-badges .badge.conf-confirmed { background: #d1e7dd; border-color: #a3cfbb; color: #0f5132; }
.asg-badges .badge.conf-rejected { background: #f8d7da; border-color: #f1aeb5; color: #842029; text-decoration: line-through; }
.asg-badges .badge.conf-pending { background: #fff3cd; border-color: #ffe69c; color: #664d03; }
.conf-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .3rem; vertical-align: 1px; }
.conf-dot.confirmed { background: #198754; } .conf-dot.rejected { background: #dc3545; } .conf-dot.pending { background: #ffc107; } .conf-dot.none { background: #ced4da; }

/* Assignment badges + progress */
.asg-badges .badge { background: #f1f3f5; color: #212529; border: 1px solid #dee2e6; font-weight: 500; }
.asg-progress { font-size: .75rem; font-weight: 600; }
.asg-progress.complete { color: #198754; } .asg-progress.partial { color: #a86b00; } .asg-progress.empty { color: #6c757d; }
.asg-group { border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .75rem; }
.asg-group + .asg-group { margin-top: .75rem; }
.asg-group .form-select option.busy { color: #a86b00; }

/* Requirement badges in the jobs list */
.req-badges { display: flex; flex-wrap: wrap; gap: .25rem; max-width: 260px; }
.req-badges .badge { font-weight: 500; background: color-mix(in srgb, var(--brand) 12%, white); color: #212529; border: 1px solid color-mix(in srgb, var(--brand) 35%, white); }
.req-badges .badge .qty { font-weight: 700; color: var(--brand); }
.req-badges.equip .badge { background: #eef3ff; border-color: #b6c8f5; } .req-badges.equip .badge .qty { color: #3457b2; }
.req-badges.mat .badge { background: #fff6e5; border-color: #f5d49a; } .req-badges.mat .badge .qty { color: #a86b00; }

/* Job days table */
.job-days td { padding: .25rem .35rem; vertical-align: middle; }
.job-days input[type=time] { min-width: 7rem; }
.job-days input[type=date] { min-width: 10rem; }

/* Job days table */
.job-days td { padding: .25rem .35rem; vertical-align: middle; }
.job-days input[type=time] { min-width: 7rem; }
.job-days input[type=date] { min-width: 10rem; }

/* Job items: three side-by-side quantity tables */
.job-items-table { max-height: 300px; overflow-y: auto; border: 1px solid var(--bs-border-color); border-radius: .375rem; }
.job-items-table table { margin-bottom: 0; }
.job-items-table thead th { position: sticky; top: 0; background: var(--bs-tertiary-bg, #f8f9fa); z-index: 1; }
.job-items-table td { padding: .25rem .5rem; }
.job-items-table .qty { width: 5.5rem; text-align: right; }
.job-items-table tr.has-qty td { background: color-mix(in srgb, var(--brand) 10%, white); font-weight: 500; }
.job-items-table tr.missing td { color: #b02a37; font-style: italic; }

/* Linear calendar */
.linear-calendar { background: #fff; border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .75rem; }
.lc-head { display: flex; align-items: center; gap: .25rem; margin-bottom: .6rem; flex-wrap: wrap; }
.lc-strip { display: flex; gap: .25rem; overflow-x: auto; padding-bottom: .25rem; scroll-behavior: smooth; scrollbar-width: thin; }
.lc-cell { flex: 0 0 auto; width: 3.1rem; border: 1px solid transparent; border-radius: .5rem; background: #f5f6f8; padding: .35rem .2rem; display: flex; flex-direction: column; align-items: center; line-height: 1.15; color: inherit; }
.lc-cell-wide { width: 5rem; }
.lc-cell:hover { background: #e9ecef; }
.lc-cell.weekend { background: #eef0f3; color: #6c757d; }
.lc-cell.today { border-color: var(--brand); }
.lc-cell.selected { background: var(--brand); color: #fff; }
.lc-cell.selected .lc-sub, .lc-cell.selected .lc-count { color: rgba(255,255,255,.85); }
.lc-sub { font-size: .65rem; text-transform: uppercase; color: #6c757d; }
.lc-main { font-size: 1.05rem; font-weight: 600; }
.lc-count { font-size: .65rem; min-width: 1.2rem; text-align: center; border-radius: 1rem; background: rgba(0,0,0,.08); color: #495057; margin-top: .15rem; padding: 0 .3rem; }
.lc-cell.selected .lc-count { background: rgba(255,255,255,.25); }
.lc-cell .invisible { visibility: hidden; }
.lc-head [data-mode].active { background: var(--brand); border-color: var(--brand); color: #fff; }