/* Travel Invoice System - app.css */

:root{
    --sidebar-w: 230px;
    --primary: #1e3a8a;
    --primary-light: #3b5bb5;
    --bg: #f4f6fa;
}

body { background: var(--bg); font-size: 14px; }

.navbar.bg-primary { background-color: var(--primary) !important; }

.layout{ display:flex; min-height: calc(100vh - 56px); }

.sidebar{
    width: var(--sidebar-w);
    background:#fff;
    border-right:1px solid #e5e7eb;
    padding:14px 0;
    flex-shrink:0;
}
.sidebar .nav-link{
    color:#374151;
    padding:9px 18px;
    border-left:3px solid transparent;
    border-radius:0;
    font-size:14px;
}
.sidebar .nav-link i{ width:20px; }
.sidebar .nav-link:hover{ background:#f1f5f9; color:var(--primary); }
.sidebar .nav-link.active{
    background:#eef2ff;
    border-left-color: var(--primary);
    color: var(--primary);
    font-weight:600;
}
.sidebar-heading{
    font-size:11px;
    color:#9ca3af;
    text-transform: uppercase;
    padding:14px 18px 4px;
    letter-spacing:1px;
    font-weight:700;
}

.main-content{
    flex:1;
    padding:24px;
    overflow-x:auto;
    min-width: 0;
}

.page-title{
    font-weight:600;
    font-size:22px;
    color:#111827;
    margin-bottom:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
}

.card { border:1px solid #e5e7eb; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.card-header{ background:#fff; font-weight:600; }

.stat-card{
    border-left:4px solid var(--primary);
    padding:18px;
    background:#fff;
    border-radius:6px;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.stat-card .label{ color:#6b7280; font-size:12px; text-transform:uppercase; letter-spacing:.5px; }
.stat-card .value{ font-size:24px; font-weight:700; color:#111827; margin-top:6px; }
.stat-card.green{ border-left-color:#10b981; }
.stat-card.red{ border-left-color:#ef4444; }
.stat-card.orange{ border-left-color:#f59e0b; }
.stat-card.purple{ border-left-color:#8b5cf6; }

table.table-app thead th{
    background:#f9fafb;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.4px;
    color:#6b7280;
    border-bottom:1px solid #e5e7eb;
    font-weight:600;
}
table.table-app tbody td{ vertical-align: middle; }

.btn-primary{ background-color:var(--primary); border-color:var(--primary); }
.btn-primary:hover{ background-color:var(--primary-light); border-color:var(--primary-light); }

.invoice-status-paid    { color:#059669; }
.invoice-status-unpaid  { color:#dc2626; }
.invoice-status-partial { color:#d97706; }

/* Login */
.login-wrap{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background: linear-gradient(135deg, #1e3a8a 0%, #3b5bb5 100%);
    padding:20px;
}
.login-box{
    background:#fff;
    padding:38px;
    border-radius:10px;
    width:100%;
    max-width:400px;
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
}
.login-box h2{
    font-size:24px;
    text-align:center;
    margin-bottom:6px;
    font-weight:700;
}
.login-box .subtitle{ text-align:center; color:#6b7280; margin-bottom:24px; font-size:13px; }

/* Invoice items rows */
.line-item-row .form-control, .line-item-row .form-select{ font-size:13px; }

/* Print invoice */
@media print {
    body { background:#fff; }
    .no-print, .navbar, .sidebar, footer, .alert { display:none !important; }
    .layout, .main-content { display:block; padding:0; margin:0; }
    .invoice-paper { box-shadow:none !important; border:none !important; padding:0 !important; }
}

.invoice-paper{
    background:#fff;
    padding:36px 40px;
    box-shadow:0 2px 10px rgba(0,0,0,.06);
    border:1px solid #e5e7eb;
    max-width: 900px;
    margin: 0 auto;
}
.invoice-paper h1.brand{
    color: var(--primary);
    font-size:28px;
    font-weight:700;
    margin-bottom:0;
}
.invoice-paper .meta-table td{ padding:6px 10px; border:1px solid #d1d5db; font-size:13px; }
.invoice-paper .items-table th{
    background:#f3f4f6;
    border:1px solid #d1d5db;
    padding:8px;
    font-size:12px;
    text-transform:uppercase;
}
.invoice-paper .items-table td{
    border:1px solid #d1d5db;
    padding:10px;
    font-size:13px;
    vertical-align: top;
}
.invoice-paper .stamp{
    position:absolute;
    transform: rotate(-15deg);
    color:rgba(220,38,38,.55);
    border:4px solid rgba(220,38,38,.55);
    padding:6px 22px;
    font-weight:800;
    font-size:30px;
    letter-spacing:6px;
    border-radius:6px;
    pointer-events:none;
}

@media (max-width: 768px) {
    .sidebar{ position:fixed; left:-240px; top:56px; bottom:0; transition:left .25s; z-index:1030; }
    .sidebar.show{ left:0; }
    .main-content{ padding:14px; }
}

/* Country autocomplete */
.country-field-wrap{ position:relative; }
.country-suggest-box{
    position:absolute;
    z-index:2000;
    left:0;
    right:0;
    top:100%;
    background:#fff;
    border:1px solid #d1d5db;
    border-radius:0 0 8px 8px;
    box-shadow:0 10px 24px rgba(15,23,42,.12);
    max-height:260px;
    overflow:auto;
    display:none;
}
.country-suggest-item{
    padding:8px 10px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:8px;
    border-bottom:1px solid #f3f4f6;
}
.country-suggest-item:hover,.country-suggest-item.active{ background:#eef2ff; }
.country-suggest-item .country-name{ font-weight:600; color:#111827; }
.country-suggest-item .country-meta{ font-size:11px; color:#6b7280; }
.country-flag{ font-size:18px; line-height:1; }
.country-badge{ white-space:nowrap; }

/* ==================== Line item table mobile improvements ==================== */
/* On small screens, ensure Price/PAX cells stay obvious. Pulse animation draws
   the eye to the highlighted cells when first focused. */
.line-item-row .price:focus,
.line-item-row .qty:focus {
    outline: 3px solid #f59e0b;
    outline-offset: -1px;
}

@media (max-width: 768px) {
    /* Make line items table scrollable on mobile but keep description sticky */
    #items-table {
        font-size: 13px;
    }
    #items-table input,
    #items-table select {
        min-height: 38px; /* Easier tap targets */
    }
    /* Hide less-essential columns on phones - user can still tap "Show extra" toggle */
    .extra-col {
        display: none !important;
    }
}

/* Highlighted Price/PAX column header */
#items-table thead th.bg-warning-subtle {
    background: #fff7d6 !important;
}
.nav-logo{height:34px;max-width:130px;object-fit:contain;background:#fff;border-radius:10px;padding:3px;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.nav-logo-fallback{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.18);display:inline-flex;align-items:center;justify-content:center}

.btn-purple{background:#7360f2;color:#fff;border-color:#7360f2}.btn-purple:hover{background:#5b48d8;color:#fff}

/* ==================== Phase 13 Premium UI refresh ==================== */
:root{--primary:#0f2f6e;--primary-light:#2455b8;--accent:#f59e0b;--success:#059669;--danger:#dc2626;--ink:#0f172a;--muted:#64748b;--line:#e2e8f0;--bg:#eef3fb;--sidebar-w:270px;}
body.app-premium{min-height:100vh;background:radial-gradient(circle at top left, rgba(59,130,246,.16), transparent 30%),linear-gradient(180deg,#f8fbff 0%,#edf3fb 100%);color:var(--ink);}
.navbar.bg-primary{min-height:66px;background:linear-gradient(135deg,#0b214f 0%,#123a86 55%,#2563eb 100%)!important;border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 14px 34px rgba(15,47,110,.24)!important;}
.navbar .navbar-brand{letter-spacing:.1px}.navbar .brand-text{max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top-quick-search{color:#0f2f6e!important;font-weight:700}.layout{min-height:calc(100vh - 66px)}
.sidebar{width:var(--sidebar-w);background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-right:1px solid rgba(148,163,184,.25);padding:14px 12px 22px;box-shadow:12px 0 32px rgba(15,23,42,.06);overflow-y:auto;max-height:calc(100vh - 66px);position:sticky;top:66px;}
.sidebar-brand-card{margin:0 6px 14px;padding:13px 12px;border:1px solid rgba(59,130,246,.16);border-radius:18px;background:linear-gradient(135deg,#eff6ff 0%,#fff 100%);display:flex;align-items:center;gap:10px;box-shadow:0 10px 24px rgba(37,99,235,.08);}
.sidebar-brand-icon{width:38px;height:38px;border-radius:14px;background:linear-gradient(135deg,#123a86,#2563eb);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(37,99,235,.28)}
.sidebar .nav-link{margin:2px 0;padding:10px 12px;border-left:0;border-radius:14px;font-weight:600;color:#334155;display:flex;align-items:center;gap:8px;transition:.18s ease}.sidebar .nav-link i{width:24px;height:24px;border-radius:10px;background:#f1f5f9;color:#2455b8;display:inline-flex;align-items:center;justify-content:center;font-size:13px;transition:.18s ease;flex-shrink:0}.sidebar .nav-link:hover{background:#eef6ff;transform:translateX(2px);color:#123a86}.sidebar .nav-link.active{background:linear-gradient(135deg,#123a86,#2563eb);color:#fff;box-shadow:0 8px 18px rgba(37,99,235,.22);font-weight:700}.sidebar .nav-link.active i{background:rgba(255,255,255,.18);color:#fff}.sidebar-heading{padding:18px 12px 6px;font-size:10px;color:#94a3b8;font-weight:800;letter-spacing:1.2px}.main-content{padding:28px;}.page-title{background:rgba(255,255,255,.78);border:1px solid rgba(226,232,240,.95);border-radius:22px;padding:16px 18px;box-shadow:0 12px 30px rgba(15,23,42,.06);font-size:21px}.page-title span:first-child{display:flex;align-items:center;gap:8px}.page-title span:first-child i{width:38px;height:38px;border-radius:14px;background:linear-gradient(135deg,#123a86,#2563eb);color:#fff;display:inline-flex;align-items:center;justify-content:center}.card{border:1px solid rgba(226,232,240,.95);border-radius:20px;box-shadow:0 14px 34px rgba(15,23,42,.06);overflow:hidden}.card-header{background:linear-gradient(180deg,#fff,#f8fafc);border-bottom:1px solid #e2e8f0;padding:14px 18px}.card-body{padding:18px}.stat-card{border-left:0;border-radius:20px;padding:20px;background:linear-gradient(135deg,#fff 0%,#f8fbff 100%);box-shadow:0 14px 30px rgba(15,23,42,.07);border:1px solid rgba(226,232,240,.9);position:relative;overflow:hidden}.stat-card:before{content:"";position:absolute;right:-30px;top:-30px;width:92px;height:92px;border-radius:999px;background:rgba(37,99,235,.08)}.stat-card.green:before{background:rgba(16,185,129,.10)}.stat-card.red:before{background:rgba(239,68,68,.10)}.stat-card.orange:before{background:rgba(245,158,11,.12)}.stat-card.purple:before{background:rgba(139,92,246,.12)}.stat-card .value{font-size:25px;color:#0f172a}.btn{border-radius:12px;font-weight:650}.btn-sm{border-radius:10px}.form-control,.form-select{border-radius:12px;border-color:#dbe3ef;min-height:40px}.form-control:focus,.form-select:focus{border-color:#2563eb;box-shadow:0 0 0 .22rem rgba(37,99,235,.12)}table.table-app{border-collapse:separate;border-spacing:0}table.table-app thead th{background:#f8fafc;color:#64748b;border-bottom:1px solid #e2e8f0;padding:12px 14px}table.table-app tbody td{padding:12px 14px;border-bottom:1px solid #edf2f7}table.table-app tbody tr:hover{background:#f8fbff}.badge{border-radius:999px;padding:.45em .7em}.alert{border:0;border-radius:16px;box-shadow:0 12px 26px rgba(15,23,42,.08)}footer{background:transparent}.invoice-paper{border-radius:18px}.sidebar-overlay{display:none}.nav-logo{height:34px;max-width:130px;object-fit:contain;background:#fff;border-radius:10px;padding:3px;box-shadow:0 4px 14px rgba(0,0,0,.12)}.nav-logo-fallback{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.18);display:inline-flex;align-items:center;justify-content:center}
@media(max-width:991.98px){.sidebar{position:fixed;left:-290px;top:66px;bottom:0;z-index:1040;max-height:none;transition:left .22s ease}.sidebar.show{left:0}.sidebar-overlay.show{display:block;position:fixed;inset:66px 0 0 0;background:rgba(15,23,42,.42);z-index:1035}.main-content{padding:16px}.navbar .brand-text{max-width:210px}.page-title{border-radius:18px}.btn-group{flex-wrap:wrap}}
@media(max-width:575.98px){.main-content{padding:12px}.page-title{font-size:18px;padding:13px}.card-body{padding:14px}.stat-card .value{font-size:21px}.nav-logo{max-width:92px}.navbar .brand-text{display:none}.btn-group>.btn{margin-bottom:4px}}

/* Phase 19 customer portal premium UI */
.customer-portal-body{min-height:100vh;background:linear-gradient(180deg,#eef5ff 0%,#f8fafc 45%,#ffffff 100%);color:#0f172a}.customer-navbar{background:linear-gradient(135deg,#0b214f,#123a86 55%,#2563eb);padding:12px 0;box-shadow:0 16px 36px rgba(15,47,110,.25)}.customer-brand{color:#fff;text-decoration:none;font-weight:800;display:flex;align-items:center;gap:10px;letter-spacing:.2px}.customer-brand img{height:40px;max-width:150px;object-fit:contain;background:#fff;border-radius:12px;padding:4px}.customer-brand .brand-icon{width:40px;height:40px;border-radius:14px;background:rgba(255,255,255,.16);display:inline-flex;align-items:center;justify-content:center}.customer-hero{background:radial-gradient(circle at top right,rgba(255,255,255,.22),transparent 30%),linear-gradient(135deg,#123a86,#2563eb);color:#fff;padding:36px 0 70px;margin-bottom:-46px}.customer-hero .eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:1.4px;font-weight:800;color:#bfdbfe}.customer-hero h1{font-weight:900;margin:4px 0 8px}.customer-hero p{color:#dbeafe;margin:0}.portal-pill{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);padding:10px 14px;border-radius:999px;font-weight:700}.customer-shell{position:relative;z-index:2;padding-bottom:40px}.customer-shell .card{border:0;border-radius:24px;box-shadow:0 18px 44px rgba(15,23,42,.10)}.customer-shell .card-header{border-bottom:1px solid #e5edf7;background:linear-gradient(180deg,#fff,#f8fbff);font-weight:800}.customer-shell .btn{border-radius:12px}.customer-shell table th{color:#64748b;font-size:12px;text-transform:uppercase;letter-spacing:.4px}.customer-footer{padding:20px 0;color:#64748b;text-align:center}.airline-suggest-logo{width:22px;height:22px;border-radius:6px;object-fit:contain;background:#fff;margin-right:6px}
@media print{.btn,.page-title .btn-group,.navbar,.sidebar,.customer-navbar,.customer-hero{display:none!important}.main-content,.customer-shell{padding:0!important;margin:0!important}.card{box-shadow:none!important;border:1px solid #ddd!important}}
/* Phase 21: keep airline/customer autocomplete above scrolling invoice line-item table */
.table-responsive{overflow-x:auto;overflow-y:visible!important;}
#items-table td{position:relative;}
.airline-field-wrap,.country-field-wrap{position:relative;z-index:40;}
.airline-suggest-box,.country-suggest-box,.country-suggest{position:absolute!important;z-index:99999!important;max-height:280px;overflow:auto;background:#fff;border:1px solid rgba(15,23,42,.12);border-radius:14px;box-shadow:0 18px 45px rgba(15,23,42,.18);min-width:260px;}
.airline-suggest-logo{width:26px;height:26px;object-fit:contain;border-radius:6px;background:#f8fafc;margin-right:8px;}
.customer-portal-page .card,.customer-dashboard .card{border-radius:18px;box-shadow:0 8px 28px rgba(15,23,42,.08);}

/* Phase 23 floating airline autocomplete: not clipped by table scroll */
.airline-floating-suggest{background:#fff;border:1px solid rgba(15,23,42,.14);border-radius:14px;box-shadow:0 22px 60px rgba(15,23,42,.28);max-height:320px;overflow:auto;padding:6px;}
.airline-floating-item{display:flex;align-items:center;gap:9px;width:100%;border:0;background:#fff;text-align:left;padding:9px 10px;border-radius:10px;color:#0f172a;}
.airline-floating-item:hover{background:#eef2ff;}
.airline-floating-item img{width:28px;height:28px;object-fit:contain;background:#f8fafc;border-radius:7px;flex:0 0 28px;}
.line-items-wrap,.table-responsive{overflow:visible;}