/* ==========================================================================
   PRINTSYNC — additions: fixed theme toggle, sidebar layout, contact
   popover, "How it works" stepper. Load after style.css on every page.
   ========================================================================== */

/* --- Theme toggle: one fixed screen position on every single page,
   regardless of where the button sits in each page's markup. --- */
#theme-toggle {
    position: fixed !important;
    top: 16px;
    right: 16px;
    z-index: 120;
}

/* --- Sidebar (authenticated pages) --- */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: rgba(10, 10, 10, 0.6);
    border-right: 1px solid var(--glass-border);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 100;
    transition: transform 0.25s ease;
}
:root[data-theme="light"] .sidebar { background: rgba(255, 255, 255, 0.7); }

.sidebar-brand { padding: 22px 20px 16px; border-bottom: 1px solid var(--glass-border); }

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.side-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--white-dim) !important;
    font-size: 0.88rem;
    font-weight: 500;
    position: relative;
}
.side-link svg { flex-shrink: 0; }
.side-link:hover { background: var(--glass-bg-strong); color: var(--white) !important; text-decoration: none; }
.side-link[aria-current="page"] {
    background: rgba(224, 27, 46, 0.14);
    color: var(--white) !important;
    border-left: 3px solid var(--red);
    padding-left: 9px;
}

.side-link-cta {
    background: var(--red);
    color: #fff !important;
    font-weight: 600;
    margin-bottom: 6px;
}
.side-link-cta:hover { background: var(--red-bright); color: #fff !important; }
.side-link-cta[aria-current="page"] { background: var(--red-deep); border-left: none; padding-left: 12px; }

.side-link-admin { border: 1px solid rgba(224, 27, 46, 0.4); color: var(--red-bright) !important; }
.side-link-admin:hover { background: rgba(224, 27, 46, 0.14); }

.side-bell-badge {
    margin-left: auto;
    background: var(--red);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-footer {
    padding: 12px;
    border-top: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.side-link-logout:hover { color: var(--red-bright) !important; }

.sidebar-user {
    padding: 12px;
    font-size: 0.78rem;
    color: var(--white-dim);
}
.sidebar-user .user-name { color: var(--white); font-weight: 600; font-size: 0.85rem; }
.sidebar-user .user-role { text-transform: capitalize; }

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 95;
    border: none;
    padding: 0;
    cursor: default;
}
.sidebar-overlay.open { display: block; }

/* --- Page content shifted right of the sidebar --- */
.app-shell.with-sidebar {
    margin-left: 240px;
    max-width: 900px;
    padding: 0 28px 48px;
}
.page-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px 0 18px;
}
.page-header h1 { font-size: 1.4rem; margin: 0; color: var(--white); }
#sidebar-toggle {
    display: none;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    color: var(--white);
    border-radius: var(--radius-sm);
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .app-shell.with-sidebar { margin-left: 0; padding: 0 16px 40px; }
    #sidebar-toggle { display: inline-flex; }
    #theme-toggle { top: 12px; right: 12px; }
}

/* --- Contact popover (client-facing tracking page) --- */
.floating-contact-wrap { position: fixed; bottom: 24px; left: 24px; z-index: 60; }
.floating-contact-wrap .floating-contact {
    position: static;
    font-family: inherit;
    cursor: pointer;
}
.floating-contact-wrap .floating-contact:hover { background: var(--glass-bg-strong); border-color: var(--red); }
.contact-popover {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 0;
    min-width: 240px;
    background: var(--black-soft);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--glass-shadow);
    padding: 16px 18px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.contact-popover.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.contact-label { margin: 0 0 4px; font-size: 0.78rem; color: var(--white-dim); }
.contact-number { margin: 0 0 12px; font-size: 1.35rem; font-weight: 600; letter-spacing: 0.02em; }
.contact-actions { display: flex; gap: 8px; }
.contact-actions a, .contact-actions button {
    flex: 1;
    text-align: center;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    font-family: inherit;
}
.contact-call { background: var(--red); color: #fff !important; border: 1px solid var(--red); }
.contact-call:hover { background: var(--red-bright); text-decoration: none; }
.contact-actions button { background: transparent; border: 1px solid var(--glass-border); color: var(--white); }
.contact-actions button:hover { border-color: var(--white); background: transparent; }

/* --- "How it works" connected stepper (public landing page) --- */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 28px; }
.step { position: relative; text-align: center; padding: 0 10px; }
.step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 27px;
    left: calc(50% + 34px);
    width: calc(100% - 68px);
    height: 2px;
    background: linear-gradient(90deg, var(--glass-border), var(--red) 50%, var(--glass-border));
    opacity: 0.6;
}
.step-icon {
    position: relative;
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.step:hover .step-icon { transform: translateY(-3px); border-color: var(--red); }
.step.attention .step-icon {
    background: rgba(224, 27, 46, 0.14);
    border-color: rgba(224, 27, 46, 0.45);
    color: var(--red-bright);
}
.step-num {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.step-body h4 { margin: 0 0 6px; color: var(--white); font-size: 0.95rem; }
.step-body p { margin: 0; font-size: 0.85rem; color: var(--white-dim); line-height: 1.5; }

@media (max-width: 760px) {
    .steps { grid-template-columns: 1fr; }
    .step { display: flex; gap: 16px; text-align: left; padding: 0 0 26px; }
    .step-icon { margin: 0; flex-shrink: 0; }
    .step:not(:last-child)::before {
        top: 62px;
        left: 27px;
        width: 2px;
        height: calc(100% - 66px);
        background: linear-gradient(180deg, var(--glass-border), var(--red), var(--glass-border));
    }
}

/* --- Master Data: tab bar splitting Models / Parts / Staff --- */
.tab-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 4px 0 26px;
}
.tab-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    color: var(--white-dim) !important;
    font-size: 0.87rem;
    font-weight: 500;
}
.tab-link:hover { border-color: var(--red); color: var(--white) !important; text-decoration: none; }
.tab-link.active {
    background: var(--red);
    border-color: var(--red);
    color: #fff !important;
}
.tab-link .tab-count {
    font-size: 0.74rem;
    background: rgba(255, 255, 255, 0.16);
    padding: 1px 7px;
    border-radius: 999px;
}
.tab-link.active .tab-count { background: rgba(255, 255, 255, 0.28); }

@media (max-width: 560px) {
    .tab-bar { gap: 6px; }
    .tab-link { flex: 1 1 auto; justify-content: center; padding: 9px 10px; font-size: 0.82rem; }
}

/* --- Select / dropdown design ---
   The closed box matches text inputs; the open option list is told to
   render in the app's own color scheme (color-scheme) instead of the
   browser's default, which is what was unreadable before — white text
   on a near-white native popup. A custom chevron replaces the native
   arrow so it isn't tied to the OS theme either. */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    max-width: 420px;
    background-color: rgba(255, 255, 255, 0.06);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 10px 40px 10px 14px;
    color: var(--white);
    font-family: inherit;
    font-size: 0.95rem;
    cursor: pointer;
    color-scheme: dark;
}
select:hover { border-color: rgba(255, 255, 255, 0.32); }
select:focus {
    outline: none;
    border-color: var(--red-bright);
    box-shadow: 0 0 0 3px rgba(224, 27, 46, 0.25);
}
select option {
    background: var(--black-soft);
    color: var(--white);
}
select.select-sm { max-width: 260px; padding: 8px 34px 8px 12px; }

:root[data-theme="light"] select {
    background-color: rgba(0, 0, 0, 0.04);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101010' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    color-scheme: light;
}
:root[data-theme="light"] select option {
    background: #FFFFFF;
    color: #101010;
}

/* --- Custom dropdown, replacing the native option list ---
   Chromium on Windows renders a <select>'s open popup using the OS's
   own combobox, not the page's CSS — color-scheme and option{} rules
   get ignored for that popup on that platform, which is why the list
   stayed white no matter what CSS targeted it. This builds the whole
   dropdown out of ordinary HTML the page actually controls. The real
   <select> stays in the DOM (invisible, sized to match the button) so
   forms still submit and validate exactly as before. */
.select-wrap { position: relative; max-width: 420px; }
.select-wrap.select-sm { max-width: 260px; }
.select-wrap select {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
}
.select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    color: var(--white);
    font-family: inherit;
    font-size: 0.95rem;
    text-align: left;
}
.select-wrap.select-sm .select-trigger { padding: 8px 12px; }
.select-trigger:hover { border-color: rgba(255, 255, 255, 0.32); }
.select-wrap.open .select-trigger { border-color: var(--red-bright); box-shadow: 0 0 0 3px rgba(224, 27, 46, 0.25); }
.select-trigger .chevron { flex-shrink: 0; display: flex; color: var(--white-dim); transition: transform 0.15s ease; }
.select-wrap.open .select-trigger .chevron { transform: rotate(180deg); }

.select-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--black-soft);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--glass-shadow);
    padding: 6px;
    margin: 0;
    max-height: 240px;
    overflow-y: auto;
    list-style: none;
    z-index: 150;
}
.select-menu[hidden] { display: none; }
.select-option {
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--white);
    cursor: pointer;
}
.select-option:hover, .select-option.highlighted { background: rgba(224, 27, 46, 0.16); }
.select-option[aria-selected="true"] { background: var(--red); color: #fff; }

:root[data-theme="light"] .select-trigger { background: rgba(0, 0, 0, 0.04); }
:root[data-theme="light"] .select-menu { background: #FFFFFF; }
:root[data-theme="light"] .select-option { color: #101010; }
:root[data-theme="light"] .select-option[aria-selected="true"] { color: #fff; }

/* --- Dashboard: status stat cards --- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 18px 0 30px;
}
.stat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 16px 18px 14px;
    color: var(--white) !important;
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.stat-card:hover { transform: translateY(-3px); border-color: var(--red); text-decoration: none; }
.stat-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: rgba(255, 255, 255, 0.22);
}
.stat-card.attention::before { background: var(--red); }
.stat-card.is-active { border-color: var(--red); background: rgba(224, 27, 46, 0.12); }
.stat-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: var(--white-dim);
    flex-shrink: 0;
}
.stat-card.attention .stat-icon { background: rgba(224, 27, 46, 0.16); color: var(--red-bright); }
.stat-num { font-size: 1.7rem; font-weight: 700; color: var(--red-bright); line-height: 1; }
.stat-label { font-size: 0.83rem; color: var(--white-dim); }

/* --- Dashboard: search field with inline icon --- */
.search-card { position: relative; max-width: 420px; flex: 1; }
.search-card .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--white-dim);
    pointer-events: none;
}
.search-card input[type="text"] { padding-left: 38px; max-width: 100%; width: 100%; }

/* --- Dashboard: technician avatar chip --- */
.avatar-chip { display: inline-flex; align-items: center; gap: 8px; }
.avatar-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(224, 27, 46, 0.18);
    color: var(--red-bright);
    font-size: 0.68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* --- Dashboard: empty state --- */
.dash-empty { text-align: center; padding: 48px 20px; color: var(--white-dim); }
.dash-empty svg { opacity: 0.45; margin-bottom: 12px; }
.dash-empty p { margin: 0; }
.dash-empty .dash-empty-title { color: var(--white); font-weight: 600; margin-bottom: 4px; }

/* ==========================================================================
   FIX: stop style.css's generic `nav` / `nav a` pill rules from leaking into
   the sidebar. Keep this block at the very END of the file.
   ========================================================================== */
.sidebar nav {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    margin: 0;
}
.sidebar nav.sidebar-nav { gap: 4px; padding: 14px 12px; }

.sidebar nav a.side-link {
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--white-dim) !important;
}
.sidebar nav a.side-link:hover { background: var(--glass-bg-strong); color: var(--white) !important; }
.sidebar nav a.side-link[aria-current="page"] {
    background: rgba(224, 27, 46, 0.14);
    border-left: 3px solid var(--red);
    padding-left: 9px;
    color: var(--white) !important;
}
.sidebar nav a.side-link-cta { background: var(--red); color: #fff !important; font-weight: 600; }
.sidebar nav a.side-link-cta:hover { background: var(--red-bright); }
.sidebar nav a.side-link-cta[aria-current="page"] { background: var(--red-deep); border-left: 0; padding-left: 12px; }
.sidebar nav a.side-link-admin { border: 1px solid rgba(224, 27, 46, 0.4); color: var(--red-bright) !important; }

/* Sidebar footer links aren't inside <nav>, but keep them consistent */
.sidebar-footer .side-link { background: transparent; }