/* GoExpress Regional - Design System */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
    --blue-900: #042C53;
    --blue-800: #0C447C;
    --blue-700: #185FA5;
    --blue-600: #1A6FC4;
    --blue-500: #378ADD;
    --blue-400: #5FA3E8;
    --blue-200: #B5D4F4;
    --blue-100: #D4E9FB;
    --blue-50:  #EEF6FD;
    --gold:      #F5C518;
    --gold-dark: #D4A017;
    --slate:     #0F1929;
    --slate2:    #162235;
    --slate3:    #1E2F45;
    --slate4:    #253650;
    --text-p:    #EFF6FF;
    --text-s:    #94B4D4;
    --text-m:    #5A7A99;
    --success:   #22C55E;
    --warning:   #F59E0B;
    --danger:    #EF4444;
    --info:      #38BDF8;
    --border:    #1E3A5A;
    --border2:   #25456A;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', sans-serif;
    background: var(--slate);
    color: var(--text-p);
    font-size: 14px;
    line-height: 1.5;
    min-height: 100vh;
}

/* =====================
   LAYOUT
   ===================== */

.app-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: 100vh;
}

.sidebar {
    background: var(--slate2);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0;
    width: 220px;
    height: 100vh;
    z-index: 100;
    overflow-y: auto;
}

.main-content {
    margin-left: 220px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.topbar {
    background: var(--slate2);
    border-bottom: 1px solid var(--border);
    padding: 0 24px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 50;
}

.page-content {
    padding: 24px;
    flex: 1;
}

/* =====================
   LOGO
   ===================== */

.logo-area {
    padding: 16px 14px 12px;
    border-bottom: 1px solid var(--border);
}

/* SVG logo — mesma em sidebar e login */
.gox-logo svg { display: block; }

/* Remove classes antigas (mantidas para compatibilidade mas não exibidas) */
.logo-text  { display: none; }
.logo-go    { display: none; }
.logo-exp   { display: none; }
.logo-lines { display: none; }
.logo-sub   { display: none; }

/* =====================
   NAVIGATION
   ===================== */

nav { flex: 1; padding: 10px 0; }

.nav-section { padding: 0 10px; margin-bottom: 6px; }

.nav-label {
    font-size: 9px;
    letter-spacing: 1.5px;
    color: var(--text-m);
    text-transform: uppercase;
    padding: 8px 8px 4px;
    font-weight: 600;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--text-s);
    cursor: pointer;
    transition: all .15s;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 1px;
    border: 1px solid transparent;
    text-decoration: none;
}

.nav-item:hover { background: var(--slate3); color: var(--text-p); }
.nav-item.active { background: var(--blue-900); color: var(--blue-200); border-color: var(--border2); }
.nav-item .nav-icon {
    font-size: 16px;
    width: 18px;
    text-align: center;
    filter: grayscale(1) brightness(10);
}

.nav-badge {
    margin-left: auto;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.sidebar-footer {
    padding: 12px;
    border-top: 1px solid var(--border);
}

.user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    background: var(--slate3);
    border: 1px solid var(--border);
    cursor: pointer;
}

.user-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--blue-700);
    color: var(--blue-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}

.user-name { font-size: 12px; font-weight: 600; }
.user-role { font-size: 10px; color: var(--text-m); }

/* =====================
   CARDS
   ===================== */

.card {
    background: var(--slate2);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

.card-title {
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-body { padding: 18px; }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--slate2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .2s, transform .2s;
}

.stat-card:hover { border-color: var(--border2); transform: translateY(-1px); }
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; }
.stat-card.blue::before  { background: var(--blue-500); }
.stat-card.gold::before  { background: var(--gold); }
.stat-card.green::before { background: var(--success); }
.stat-card.red::before   { background: var(--danger); }
.stat-card.warn::before  { background: var(--warning); }

.stat-icon {
    width: 34px; height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 12px;
}

.stat-icon.blue  { background: rgba(55,138,221,.12); color: var(--blue-400); }
.stat-icon.gold  { background: rgba(245,197,24,.10); color: var(--gold); }
.stat-icon.green { background: rgba(34,197,94,.10);  color: var(--success); }
.stat-icon.red   { background: rgba(239,68,68,.10);  color: var(--danger); }
.stat-icon.warn  { background: rgba(245,158,11,.10); color: var(--warning); }

.stat-value {
    font-family: 'Rajdhani', sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
}

.stat-label { font-size: 12px; color: var(--text-m); font-weight: 500; }

/* =====================
   STATUS BADGES
   ===================== */

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.status-created  { background: rgba(148,180,212,.10); color: var(--text-s); }
.status-waiting  { background: rgba(245,158,11,.10);  color: var(--warning); }
.status-paid     { background: rgba(56,189,248,.10);  color: var(--info); }
.status-progress { background: rgba(55,138,221,.12);  color: var(--blue-400); }
.status-route    { background: rgba(245,197,24,.12);  color: var(--gold); }
.status-delivered{ background: rgba(34,197,94,.10);   color: var(--success); }
.status-problem  { background: rgba(239,68,68,.10);   color: var(--danger); }
.status-cancelled{ background: rgba(100,100,100,.10); color: var(--text-m); }

/* =====================
   BUTTONS
   ===================== */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .15s;
    text-decoration: none;
}

.btn-primary {
    background: var(--blue-600);
    color: #fff;
    border-color: var(--blue-500);
}
.btn-primary:hover { background: var(--blue-500); }

.btn-secondary {
    background: var(--slate3);
    color: var(--text-s);
    border-color: var(--border);
}
.btn-secondary:hover { background: var(--slate4); color: var(--text-p); }

.btn-danger { background: rgba(239,68,68,.1); color: var(--danger); border-color: rgba(239,68,68,.2); }
.btn-danger:hover { background: rgba(239,68,68,.2); }

.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-lg { padding: 12px 24px; font-size: 15px; }

.btn:disabled { opacity: .5; cursor: not-allowed; }

/* =====================
   FORMS
   ===================== */

.form-group { margin-bottom: 16px; }

.form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-s);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.form-input, .form-select, .form-textarea {
    width: 100%;
    background: var(--slate3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    color: var(--text-p);
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    transition: border-color .15s;
    outline: none;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--blue-600);
    box-shadow: 0 0 0 3px rgba(26,111,196,.12);
}

.form-input::placeholder { color: var(--text-m); }
.form-select option { background: var(--slate3); }
.form-textarea { resize: vertical; min-height: 80px; }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.form-section {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 16px;
    background: var(--slate3);
}

.form-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--blue-400);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--slate2);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s;
    font-size: 13px;
}

.checkbox-item:hover { border-color: var(--blue-600); }
.checkbox-item input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--blue-600); cursor: pointer; }
.checkbox-item.checked { border-color: var(--blue-600); background: rgba(26,111,196,.08); }

/* =====================
   TABLES
   ===================== */

.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }

th {
    text-align: left;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-m);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(30,58,90,.4);
    font-size: 13px;
    vertical-align: middle;
}

tbody tr { transition: background .12s; cursor: pointer; }
tbody tr:hover td { background: var(--slate3); }
tbody tr:last-child td { border-bottom: none; }

.tracking-code {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--blue-400);
}

/* =====================
   MODAL
   ===================== */

.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal {
    background: var(--slate2);
    border: 1px solid var(--border);
    border-radius: 16px;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--slate2);
    z-index: 2;
}

.modal-title { font-size: 16px; font-weight: 700; }
.modal-close { cursor: pointer; color: var(--text-m); font-size: 20px; background: none; border: none; color: var(--text-m); }
.modal-close:hover { color: var(--text-p); }
.modal-body { padding: 22px; }
.modal-footer {
    padding: 16px 22px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* =====================
   TOAST
   ===================== */

.toast {
    position: fixed;
    bottom: 24px; right: 24px;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    z-index: 9999;
    transform: translateY(20px);
    opacity: 0;
    transition: all .3s;
    max-width: 380px;
}

.toast.show { transform: translateY(0); opacity: 1; }
.toast-success { background: #14532d; color: #86efac; border: 1px solid rgba(134,239,172,.2); }
.toast-error   { background: #450a0a; color: #fca5a5; border: 1px solid rgba(252,165,165,.2); }
.toast-info    { background: var(--blue-900); color: var(--blue-200); border: 1px solid var(--border2); }

/* =====================
   SPINNER
   ===================== */

.spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* =====================
   MISC
   ===================== */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.page-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 22px;
    font-weight: 700;
}

.text-muted { color: var(--text-m); }
.text-gold  { color: var(--gold); }
.text-blue  { color: var(--blue-400); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }

.live-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--success);
    display: inline-block;
    animation: pulse 1.5s infinite;
}

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

.divider { height: 1px; background: var(--border); margin: 16px 0; }

/* Empty state */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-m);
}

.empty-state-icon { font-size: 48px; margin-bottom: 12px; opacity: .4; }
.empty-state p { font-size: 14px; }

/* =====================
   RESPONSIVE
   ===================== */

@media (max-width: 768px) {
    .app-layout { grid-template-columns: 1fr; }
    .sidebar { display: none; }
    .main-content { margin-left: 0; }
    .stat-grid { grid-template-columns: 1fr 1fr; }
    .form-row { grid-template-columns: 1fr; }
}