/* ===================================================================
   Topline Transport Invoice System — UI styles
   =================================================================== */
:root {
    --tt-primary: #0d6efd;
    --tt-sidebar: #14213d;
    --tt-sidebar-hover: #1f3a66;
}

body { background: #f4f6fa; }

/* ---- Auth pages ---- */
.auth-body {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #14213d 0%, #0d6efd 100%);
    padding: 1rem;
}
.auth-wrap { width: 100%; max-width: 410px; }
.auth-card { background: #fff; border-radius: 16px; padding: 2rem; }

.brand-badge {
    width: 48px; height: 48px; border-radius: 12px; background: var(--tt-primary);
    color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}

/* ---- App shell layout ---- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
    width: 240px; background: var(--tt-sidebar); color: #fff; flex-shrink: 0;
    display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: 1040;
    transition: transform .25s ease;
}
.sidebar-brand {
    display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-logo-link { display: block; width: 100%; }
.sidebar-logo {
    display: block;
    width: 100%;
    max-height: 64px;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
    padding: 6px 8px;
}
.sidebar-credit {
    padding: .7rem 1.25rem;
    font-size: .72rem;
    color: rgba(255,255,255,.45);
    border-top: 1px solid rgba(255,255,255,.08);
}
.sidebar-credit a { color: rgba(255,255,255,.8); text-decoration: none; }
.sidebar-credit a:hover { color: #fff; text-decoration: underline; }

.sidebar-nav { padding: .75rem; flex: 1; display: flex; flex-direction: column; }
.sidebar-nav .nav-link {
    color: rgba(255,255,255,.75); border-radius: 8px; padding: .65rem .85rem; margin-bottom: .15rem;
    display: flex; align-items: center; gap: .7rem;
}
.sidebar-nav .nav-link:hover { background: var(--tt-sidebar-hover); color: #fff; }
.sidebar-nav .nav-link.active { background: var(--tt-primary); color: #fff; }
.sidebar-nav .nav-link i { font-size: 1.05rem; width: 18px; text-align: center; }

.app-main { flex: 1; margin-left: 240px; min-width: 0; display: flex; flex-direction: column; }
.topbar {
    background: #fff; padding: .75rem 1.25rem; display: flex; align-items: center;
    border-bottom: 1px solid #e9ecef; position: sticky; top: 0; z-index: 1030;
}
.topbar-title { font-weight: 600; }
.content { padding: 1.5rem; flex: 1; }

.avatar {
    width: 28px; height: 28px; border-radius: 50%; background: var(--tt-primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 600;
}

.sidebar-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1035;
}

/* ---- Public booking page ---- */
.public-body { background: #f4f6fa; min-height: 100vh; }
.public-header { padding: 2rem 1rem 1rem; }
.public-logo { max-height: 90px; max-width: 280px; }
.public-main { max-width: 720px; margin: 0 auto; padding: 0 1rem 2rem; }
.public-card { border-radius: 14px; }

/* ---- Stat cards ---- */
.stat-card .stat-icon {
    width: 48px; height: 48px; border-radius: 12px; font-size: 1.4rem;
    display: flex; align-items: center; justify-content: center;
}
.stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.stat-label { font-size: .8rem; color: #6c757d; }
.reminder-list { max-height: 280px; overflow-y: auto; }
.customer-meta li { margin-bottom: .35rem; }
.customer-meta i { width: 18px; color: var(--tt-primary); }

/* ---- Autocomplete ---- */
.autocomplete-list {
    position: absolute; left: 0; right: 0; top: 100%; background: #fff; border: 1px solid #dee2e6;
    border-radius: 0 0 8px 8px; max-height: 280px; overflow-y: auto; z-index: 1050; display: none;
}
.autocomplete-list.show { display: block; }
.autocomplete-item { padding: .55rem .85rem; cursor: pointer; border-bottom: 1px solid #f1f1f1; }
.autocomplete-item:hover, .autocomplete-item.active { background: #eef4ff; }
.autocomplete-item small { display: block; color: #6c757d; }

/* ---- Mobile ---- */
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .app-main { margin-left: 0; }
    .sidebar.open ~ .sidebar-backdrop { display: block; }
}