/* ---- Theme -------------------------------------------------------------------------------------------
 * Brand blue + orange accent (motorbike shop) on a light blue-grey background instead of plain white.
 * Bootstrap components keep their classes; only colours are adjusted here. */
:root {
    --sm-blue-dark: #12355b;
    --sm-blue: #1f5fa8;
    --sm-blue-light: #e7f0fb;
    --sm-orange: #f28c28;
    --sm-bg: #eef2f7;
    --bs-link-color-rgb: 31, 95, 168;
}

body {
    background-color: var(--sm-bg);
}

/* Top bar: gradient + orange underline for the active section */
.navbar.bg-dark {
    background: linear-gradient(90deg, var(--sm-blue-dark), var(--sm-blue)) !important;
    border-bottom: 3px solid var(--sm-orange);
}

.navbar .nav-link.active {
    color: #fff !important;
    box-shadow: inset 0 -3px 0 var(--sm-orange);
}

.navbar-brand .bi {
    color: var(--sm-orange);
}

/* Page titles: coloured icon */
main h1 > .bi,
main h1 > a > .bi {
    color: var(--sm-blue);
}

/* Cards: blue-tinted headers, coloured top edge on the main list cards */
.card {
    border-color: #dbe3ee;
}

.card-header {
    background-color: var(--sm-blue-light);
    color: var(--sm-blue-dark);
    font-weight: 600;
    border-bottom-color: #cfdcef;
}

.card-accent {
    border-top: 3px solid var(--sm-blue);
}

.card-filters {
    border-left: 4px solid var(--sm-orange);
}

/* Table headers in brand colour (all lists use thead.table-light) */
.table > thead.table-light th,
.table > thead.table-head-accent th {
    background-color: var(--sm-blue-dark);
    color: #fff;
    font-weight: 500;
    border-color: var(--sm-blue-dark);
}

.table-hover > tbody > tr:hover > * {
    --bs-table-hover-bg: #f3f7fd;
}

.btn-whatsapp {
    background-color: #25d366;
    border-color: #25d366;
    color: #fff;
}

.btn-whatsapp:hover {
    background-color: #1ebe5a;
    color: #fff;
}

/* syncsm styles on top of Bootstrap 5. Keep this file small: prefer Bootstrap utility classes. */

.navbar-brand {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.table-orders td,
.table-orders th {
    vertical-align: middle;
    white-space: nowrap;
}

.table-orders td.customer {
    white-space: normal;
    min-width: 12rem;
}

/* PrestaShop order state colour dot */
.state-dot {
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    margin-right: 0.35rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.login-card {
    max-width: 24rem;
}

.token-box {
    font-family: var(--bs-font-monospace);
    word-break: break-all;
}

/* ---- Anotaciones ---- */
/* Rows: coloured left edge with the state's colour, whole row clickable */
.table-notes tr.note-row > td:first-child {
    box-shadow: inset 4px 0 0 var(--note-color, transparent);
}

.table-notes tr.note-row {
    cursor: pointer;
}

.table-notes tr.note-row.note-alert-due > td:first-child {
    box-shadow: inset 4px 0 0 var(--bs-danger);
}

.table-notes tr.note-row.note-alert-due {
    --bs-table-bg: #fff4f4;
}

.table-notes td.note-preview {
    min-width: 16rem;
    max-width: 32rem;
    white-space: normal;
}

.table-notes td.note-customer {
    min-width: 11rem;
}

.note-archived td {
    opacity: 0.6;
    text-decoration: line-through;
    text-decoration-color: rgba(0, 0, 0, .25);
}

.note-archived td:last-child {
    text-decoration: none;
    opacity: 1;
}

.note-state-select {
    font-weight: 600;
    border: 0;
}

/* The select takes the state colour; its options stay readable */
.note-state-select option {
    background: #fff;
    color: #212529;
}

.note-editor {
    min-height: 14rem;
    background: #fff;
}

/* Trix toolbar: hide file attachment button (attachments are disabled) */
trix-toolbar [data-trix-button-group="file-tools"] {
    display: none;
}

.note-history {
    max-height: 60vh;
    overflow-y: auto;
}

/* Long lists scroll inside their card; the column headers stay visible */
.table-scroll {
    max-height: calc(100vh - 230px);
    min-height: 16rem;
    overflow-y: auto;
}

.table-scroll > .table > thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.pagination .page-item.active .page-link {
    background-color: var(--sm-blue);
    border-color: var(--sm-blue);
}