/* ============================================================
   CARRIERWEB EAI — Design System v2.0
   Professional, clean, enterprise-grade
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ---------- CSS Custom Properties ---------- */
:root {
    --cw-bg:        #f1f5f9;
    --cw-surface:   #ffffff;
    --cw-nav:       #0f172a;
    --cw-sidebar:   #1e293b;
    --cw-sidebar-hover: #334155;
    --cw-primary:   #3b82f6;
    --cw-primary-dark: #2563eb;
    --cw-accent:    #6366f1;
    --cw-success:   #10b981;
    --cw-warning:   #f59e0b;
    --cw-danger:    #ef4444;
    --cw-info:      #06b6d4;
    --cw-text:      #1e293b;
    --cw-text-muted:#64748b;
    --cw-border:    #e2e8f0;
    --cw-radius:    0.625rem;
    --cw-radius-lg: 0.875rem;
    --cw-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --cw-shadow:    0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
    --cw-shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
    --cw-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
    --cw-transition: 150ms cubic-bezier(.4,0,.2,1);
}

/* ---------- Base ---------- */
*,*::before,*::after { box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--cw-bg);
    color: var(--cw-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: .9rem;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ---------- Navbar ---------- */
.navbar {
    background: var(--cw-nav) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.05);
    padding: .5rem 1rem;
    border: none;
}
.navbar-brand {
    font-weight: 700;
    font-size: 1.125rem;
    color: #f8fafc !important;
    letter-spacing: -.025em;
}
.navbar-brand i { color: var(--cw-primary); }
.navbar .navbar-text { color: #94a3b8 !important; font-size: .8rem; }
.navbar .btn-outline-light {
    border-color: #334155;
    color: #94a3b8;
    font-size: .8rem;
    padding: .35rem .75rem;
    border-radius: var(--cw-radius);
}
.navbar .btn-outline-light:hover { background: #334155; color: #f8fafc; border-color: #475569; }

/* ---------- Sidebar ---------- */
.sidebar {
    background: var(--cw-sidebar) !important;
    box-shadow: 1px 0 0 rgba(255,255,255,.05) !important;
    padding: 1.5rem 0 0 !important;
    border: none !important;
}
.sidebar .nav-link {
    color: #94a3b8 !important;
    font-weight: 500;
    font-size: .8125rem;
    padding: .6rem 1.25rem !important;
    border-radius: var(--cw-radius) !important;
    margin: 2px .75rem !important;
    transition: all var(--cw-transition);
    border-left: 3px solid transparent !important;
}
.sidebar .nav-link i { width: 1.25rem; margin-right: .5rem; font-size: .875rem; }
.sidebar .nav-link:hover {
    color: #f1f5f9 !important;
    background: var(--cw-sidebar-hover) !important;
    border-left-color: transparent !important;
    transform: none !important;
}
.sidebar .nav-link.active {
    color: #f8fafc !important;
    background: rgba(59,130,246,.15) !important;
    border-left-color: var(--cw-primary) !important;
}

/* ---------- Main Content ---------- */
main {
    margin-left: 250px;
    padding: 1.5rem 2rem !important;
}

main h2 {
    font-weight: 700;
    font-size: 1.375rem;
    letter-spacing: -.025em;
    color: var(--cw-text);
}

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--cw-border) !important;
    border-radius: var(--cw-radius-lg) !important;
    box-shadow: var(--cw-shadow-sm) !important;
    transition: box-shadow var(--cw-transition) !important;
    overflow: hidden;
}
.card:hover {
    box-shadow: var(--cw-shadow) !important;
    transform: none !important;
}
.card-header {
    background: var(--cw-surface) !important;
    color: var(--cw-text) !important;
    border-bottom: 1px solid var(--cw-border) !important;
    border-radius: var(--cw-radius-lg) var(--cw-radius-lg) 0 0 !important;
    padding: .875rem 1.25rem !important;
    font-weight: 600;
    font-size: .875rem;
}
.card-header h5 { font-weight: 600; font-size: .875rem; margin: 0; color: var(--cw-text); }
.card-header i { color: var(--cw-text-muted); }
.card-body { padding: 1.25rem !important; }

.card-header.bg-primary, .card-header.bg-info {
    background: var(--cw-surface) !important;
    color: var(--cw-text) !important;
    border-bottom: 1px solid var(--cw-border) !important;
}
.card-header.bg-primary h5, .card-header.bg-info h5 { color: var(--cw-text); }
.card-header.bg-primary .text-white, .card-header.bg-info .text-white { color: var(--cw-text) !important; }
.card.border-primary, .card.border-info { border-color: var(--cw-border) !important; }

/* ---------- Stats Cards ---------- */
.stats-card {
    border-radius: var(--cw-radius-lg) !important;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--cw-border) !important;
}
.stats-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.stats-card:nth-child(1)::before { background: var(--cw-primary); }
.stats-card:nth-child(2)::before { background: var(--cw-success); }
.stats-card:nth-child(3)::before { background: var(--cw-warning); }
.stats-card:nth-child(4)::before { background: var(--cw-info); }
.stats-card:hover { transform: none !important; box-shadow: var(--cw-shadow-md) !important; }
.stats-card .card-body { padding: 1.25rem !important; }

/* ---------- Tables ---------- */
.table { background: var(--cw-surface); margin-bottom: 0; }
.table thead th {
    background: #f8fafc !important;
    border-bottom: 2px solid var(--cw-border) !important;
    font-weight: 600;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cw-text-muted);
    padding: .75rem 1rem;
    white-space: nowrap;
}
.table tbody td { padding: .75rem 1rem; vertical-align: middle; border-bottom: 1px solid #f1f5f9; font-size: .8125rem; }
.table tbody tr { transition: background var(--cw-transition); }
.table tbody tr:hover { background: #f8fafc !important; transform: none !important; }
.table-hover tbody tr:hover { background: #f8fafc !important; }

/* ---------- Buttons ---------- */
.btn {
    font-family: inherit;
    font-weight: 500;
    border-radius: var(--cw-radius) !important;
    transition: all var(--cw-transition) !important;
    font-size: .8125rem;
    padding: .5rem 1rem;
    border: 1px solid transparent;
}
.btn:hover { transform: none !important; box-shadow: var(--cw-shadow-sm) !important; }
.btn:active { transform: scale(.98) !important; }

.btn-primary {
    background: var(--cw-primary) !important;
    border-color: var(--cw-primary) !important;
    color: #fff !important;
}
.btn-primary:hover { background: var(--cw-primary-dark) !important; border-color: var(--cw-primary-dark) !important; }

.btn-success { background: var(--cw-success) !important; border-color: var(--cw-success) !important; color: #fff !important; }
.btn-success:hover { background: #059669 !important; border-color: #059669 !important; }

.btn-warning { background: var(--cw-warning) !important; border-color: var(--cw-warning) !important; color: #fff !important; }
.btn-warning:hover { background: #d97706 !important; border-color: #d97706 !important; }

.btn-danger { background: var(--cw-danger) !important; border-color: var(--cw-danger) !important; color: #fff !important; }
.btn-danger:hover { background: #dc2626 !important; border-color: #dc2626 !important; }

.btn-info { background: var(--cw-info) !important; border-color: var(--cw-info) !important; color: #fff !important; }

.btn-outline-primary { color: var(--cw-primary); border-color: var(--cw-border); background: transparent; }
.btn-outline-primary:hover { background: rgba(59,130,246,.08); color: var(--cw-primary); border-color: var(--cw-primary); }

.btn-outline-secondary { color: var(--cw-text-muted); border-color: var(--cw-border); }
.btn-outline-secondary:hover { background: #f8fafc; color: var(--cw-text); border-color: #cbd5e1; }

/* Quick test buttons (API section) */
[data-quick-test] {
    font-size: .75rem !important;
    padding: .35rem .65rem !important;
    border-radius: .5rem !important;
}

/* ---------- Badges ---------- */
.badge {
    font-size: .6875rem;
    font-weight: 600;
    padding: .3rem .6rem;
    border-radius: .375rem;
    letter-spacing: .01em;
}
.badge-status-active { background: var(--cw-success) !important; }
.badge-status-inactive { background: #94a3b8 !important; }
.badge-status-suspended { background: var(--cw-danger) !important; }

/* ---------- Forms ---------- */
.form-control, .form-select {
    border-radius: var(--cw-radius) !important;
    border: 1px solid var(--cw-border) !important;
    font-size: .8125rem;
    padding: .5rem .75rem;
    transition: border-color var(--cw-transition), box-shadow var(--cw-transition);
    color: var(--cw-text);
}
.form-control:focus, .form-select:focus {
    border-color: var(--cw-primary) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.1) !important;
    outline: none;
}
.form-label {
    font-weight: 600;
    font-size: .8rem;
    color: var(--cw-text);
    margin-bottom: .375rem;
}

/* ---------- Modals ---------- */
.modal-content {
    border: none !important;
    border-radius: var(--cw-radius-lg) !important;
    box-shadow: var(--cw-shadow-lg), 0 0 0 1px rgba(0,0,0,.05) !important;
}
.modal-header {
    background: var(--cw-surface) !important;
    color: var(--cw-text) !important;
    border-bottom: 1px solid var(--cw-border) !important;
    border-radius: var(--cw-radius-lg) var(--cw-radius-lg) 0 0 !important;
    padding: 1rem 1.25rem;
}
.modal-header .modal-title { font-weight: 700; font-size: 1rem; }
.modal-header .btn-close { filter: none; }
.modal-footer {
    background: #f8fafc !important;
    border-top: 1px solid var(--cw-border) !important;
    border-radius: 0 0 var(--cw-radius-lg) var(--cw-radius-lg) !important;
    padding: .875rem 1.25rem;
}

/* ---------- Alerts ---------- */
.alert {
    border: 1px solid transparent !important;
    border-radius: var(--cw-radius) !important;
    font-size: .8125rem;
    padding: .75rem 1rem;
    box-shadow: var(--cw-shadow) !important;
}
.alert-success { background: #ecfdf5 !important; color: #065f46 !important; border-color: #a7f3d0 !important; border-left: 4px solid var(--cw-success) !important; }
.alert-danger  { background: #fef2f2 !important; color: #991b1b !important; border-color: #fecaca !important; border-left: 4px solid var(--cw-danger) !important; }
.alert-warning { background: #fffbeb !important; color: #92400e !important; border-color: #fde68a !important; border-left: 4px solid var(--cw-warning) !important; }
.alert-info    { background: #ecfeff !important; color: #155e75 !important; border-color: #a5f3fc !important; border-left: 4px solid var(--cw-info) !important; }

/* ---------- Alert Container ---------- */
.alert-container {
    position: fixed;
    top: 60px;
    right: 1rem;
    z-index: 1080;
    max-width: 380px;
}

/* ---------- Login ---------- */
#loginSection {
    background: var(--cw-sidebar);
    min-height: 100vh;
}
#loginSection .card {
    border: none !important;
    border-radius: var(--cw-radius-lg) !important;
    box-shadow: var(--cw-shadow-lg) !important;
    overflow: visible;
}
#loginSection .card-header {
    background: var(--cw-surface) !important;
    border-bottom: 1px solid var(--cw-border) !important;
    text-align: center;
    padding: 1.5rem !important;
}
#loginSection .card-header h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cw-text);
    margin: 0;
}
#loginSection .card-body { padding: 1.5rem !important; }

/* ---------- API Test Section ---------- */
#apiResponse {
    background: #0f172a !important;
    color: #e2e8f0 !important;
    border-radius: 0 0 var(--cw-radius-lg) var(--cw-radius-lg) !important;
    padding: 1.25rem !important;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: .775rem;
    line-height: 1.65;
    max-height: 500px;
    overflow-y: auto;
}

/* ---------- Logs Section ---------- */
#logsContainer {
    background: #0f172a !important;
    color: #e2e8f0;
    border-radius: var(--cw-radius) !important;
    padding: 1rem;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: .775rem;
    line-height: 1.65;
}
.log-entry { padding: .5rem .75rem; border-radius: var(--cw-radius); margin-bottom: .25rem; border-left: 3px solid; }
.log-entry.info  { background: rgba(6,182,212,.08);  border-left-color: var(--cw-info); }
.log-entry.warn  { background: rgba(245,158,11,.08); border-left-color: var(--cw-warning); }
.log-entry.error { background: rgba(239,68,68,.08);  border-left-color: var(--cw-danger); }

/* ---------- Activity Items ---------- */
.activity-item {
    padding: .75rem 1rem;
    border-radius: var(--cw-radius);
    margin-bottom: .5rem;
    background: #f8fafc;
    border-left: 3px solid var(--cw-primary);
    transition: background var(--cw-transition);
}
.activity-item:hover { background: #f1f5f9; transform: none; }

/* ---------- Loading ---------- */
.loading { opacity: .5; pointer-events: none; position: relative; }
.loading::after {
    content: '';
    position: absolute; top: 50%; left: 50%;
    width: 1.25rem; height: 1.25rem;
    margin: -.625rem 0 0 -.625rem;
    border: 2px solid var(--cw-border);
    border-top-color: var(--cw-primary);
    border-radius: 50%;
    animation: cw-spin .6s linear infinite;
}

/* ---------- Animations ---------- */
@keyframes cw-spin { to { transform: rotate(360deg); } }
@keyframes cw-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cw-pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

.content-section { animation: cw-fade-in .3s ease-out; }
.pulse { animation: cw-pulse 2s infinite; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    main { margin-left: 0 !important; padding: 1rem !important; }
    .sidebar { position: relative !important; height: auto !important; padding: .75rem 0 !important; }
    .stats-card .card-body { padding: 1rem !important; }
    .table-responsive { font-size: .8rem; }
}