:root {
    --brand: #0d6efd;
    --brand-dark: #0a3d62;
    --brand-light: #e7f1ff;
}

body {
    background: #f5f7fa;
    font-family: 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
    color: #2c3e50;
}

/* Top navigation bar */
.sidebar-nav {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    padding: 12px 0;
}
.sidebar-nav .navbar-brand { font-weight: 600; font-size: 1.15rem; }
.sidebar-nav .nav-link { color: rgba(255,255,255,.85) !important; padding: 8px 14px; border-radius: 6px; transition: background .15s; }
.sidebar-nav .nav-link:hover, .sidebar-nav .nav-link.active { background: rgba(255,255,255,.15); color: #fff !important; }
.sidebar-nav .nav-link i { margin-right: 4px; }

.app-main { padding-top: 0; min-height: calc(100vh - 70px); }

/* Cards */
.card {
    border: 1px solid #e3e8ef;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.card-header {
    background: #fff;
    border-bottom: 1px solid #eef0f3;
    font-weight: 600;
    padding: 1rem 1.25rem;
}

/* KPI cards */
.kpi-card {
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    border-left: 4px solid var(--brand);
    border-radius: 10px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    transition: transform .15s, box-shadow .15s;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.kpi-card .kpi-icon {
    width: 48px; height: 48px; border-radius: 10px;
    background: var(--brand-light); color: var(--brand);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
}
.kpi-card .kpi-value { font-size: 1.85rem; font-weight: 700; color: #1a202c; }
.kpi-card .kpi-label { color: #718096; font-size: .85rem; text-transform: uppercase; letter-spacing: .5px; }

/* Status badges */
.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    color: #fff;
    font-size: .8rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Tables */
.table { font-size: .92rem; }
.table thead th {
    background: #f8f9fb;
    font-weight: 600; font-size: .82rem;
    text-transform: uppercase; letter-spacing: .3px;
    color: #4a5568; border-bottom: 2px solid #e3e8ef;
}
.table tbody tr:hover { background: #f8fafc; }

/* Buttons */
.btn-brand {
    background: var(--brand); color: #fff; border: none;
}
.btn-brand:hover { background: var(--brand-dark); color: #fff; }

/* Login */
body.login-bg {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    min-height: 100vh;
}
.login-card {
    max-width: 400px; margin: 80px auto;
    background: #fff; border-radius: 12px;
    padding: 2.5rem; box-shadow: 0 10px 40px rgba(0,0,0,.15);
}
.login-card h1 {
    text-align: center; color: var(--brand-dark);
    font-size: 1.5rem; margin-bottom: .25rem; font-weight: 600;
}
.login-card .login-subtitle {
    text-align: center; color: #888; font-size: .9rem; margin-bottom: 2rem;
}
.login-card .logo-wrap { text-align: center; margin-bottom: 1.5rem; }
.login-card .logo-wrap img { max-height: 60px; }

/* Forms */
.form-label { font-weight: 500; color: #4a5568; font-size: .9rem; }
.form-control:focus, .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
}
.required-mark { color: #e53e3e; }

/* Timeline (status history) */
.timeline { list-style: none; padding-left: 0; position: relative; }
.timeline::before {
    content: ''; position: absolute; left: 12px; top: 0; bottom: 0;
    width: 2px; background: #e3e8ef;
}
.timeline-item { position: relative; padding-left: 36px; padding-bottom: 18px; }
.timeline-item::before {
    content: ''; position: absolute; left: 6px; top: 4px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--brand); border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--brand);
}
.timeline-item .ts { font-size: .82rem; color: #888; }
.timeline-item .label { font-weight: 600; color: #2c3e50; }

/* Print styles */
@media print {
    .sidebar-nav, .no-print, .alert, .btn { display: none !important; }
    body { background: #fff; }
    .app-main { padding: 0; }
}

/* Utilities */
.text-brand { color: var(--brand); }
.bg-brand { background: var(--brand); color: #fff; }
.border-brand { border-color: var(--brand) !important; }
.shadow-sm-2 { box-shadow: 0 2px 8px rgba(0,0,0,.06); }

/* Print ticket / label */
.ticket-page { max-width: 800px; margin: 20px auto; padding: 30px; background: #fff; border: 1px solid #ddd; }
.ticket-header { border-bottom: 2px solid var(--brand); padding-bottom: 14px; margin-bottom: 20px; }
.ticket-header h1 { color: var(--brand); margin: 0; font-size: 1.8rem; }
.ticket-section { margin-bottom: 18px; }
.ticket-section h3 { font-size: 1rem; color: var(--brand-dark); border-bottom: 1px solid #eee; padding-bottom: 4px; }
.ticket-info-row { display: flex; padding: 4px 0; }
.ticket-info-row .label { width: 160px; color: #666; }
.ticket-info-row .value { flex: 1; font-weight: 500; }

.label-page { width: 62mm; height: 29mm; padding: 2mm; font-size: 9pt; line-height: 1.2; border: 1px dashed #ccc; }
.label-page .ref { font-weight: bold; font-size: 11pt; }

@media print {
    .label-page { border: none; }
    @page { margin: 0; }
}