/* ═══════════════════════════════════════════════════════════════
   ЕКОТРАНС - Common Styles
   Shared CSS for all pages
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS VARIABLES ── */
:root {
    --bg:        #f0f2f5;
    --surface:   #ffffff;
    --surface2:  #f8fafc;
    --sidebar:   #0d1117;
    --sidebar2:  #161b22;
    --border:    #e2e8f0;
    --text:      #0f172a;
    --text-2:    #475569;
    --text-3:    #94a3b8;
    --primary:   #2563eb;
    --primary-l: #dbeafe;
    --ok:        #16a34a;
    --ok-l:      #dcfce7;
    --warn:      #d97706;
    --warn-l:    #fef3c7;
    --crit:      #dc2626;
    --crit-l:    #fee2e2;
    --shadow:    0 1px 3px rgba(0,0,0,0.07), 0 4px 12px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.10);
}

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

body { 
    font-family: 'Inter', sans-serif; 
    background: var(--bg); 
    display: flex; 
    height: 100vh; 
    overflow: hidden; 
    color: var(--text); 
    font-size: 14px; 
}

/* ── SIDEBAR ── */
.sidebar { 
    width: 240px; 
    background: var(--sidebar); 
    display: flex; 
    flex-direction: column; 
    flex-shrink: 0; 
}

.sb-logo { padding: 22px 20px 18px; border-bottom: 1px solid #21262d; }
.sb-logo-row { display: flex; align-items: center; gap: 11px; }
.sb-logo-icon { 
    width: 38px; 
    height: 38px; 
    background: linear-gradient(135deg, #2563eb, #7c3aed); 
    border-radius: 10px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 19px; 
    flex-shrink: 0; 
}
.sb-logo-name { 
    font-size: 15px; 
    font-weight: 800; 
    color: #f0f6ff; 
    letter-spacing: 0.5px; 
    text-transform: uppercase; 
}
.sb-logo-sub { 
    font-size: 10px; 
    color: #6e7681; 
    margin-top: 2px; 
    font-family: 'JetBrains Mono', monospace; 
    white-space: nowrap; 
}

.sb-nav { flex: 1; padding: 10px 0; overflow-y: auto; }

.sb-section { 
    padding: 14px 18px 5px; 
    font-size: 9.5px; 
    font-weight: 700; 
    letter-spacing: 1.2px; 
    color: #484f58; 
    text-transform: uppercase; 
}

.sb-item { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 10px 14px; 
    margin: 1px 8px; 
    border-radius: 8px; 
    cursor: pointer; 
    transition: all 0.15s; 
    color: #8b949e; 
    text-decoration: none; 
}

.sb-item:hover { background: var(--sidebar2); color: #e6edf3; }
.sb-item.active { 
    background: linear-gradient(90deg,rgba(37,99,235,.2),rgba(37,99,235,.05)); 
    color: #58a6ff; 
    border-left: 2px solid #2563eb; 
    padding-left: 12px; 
}

.sb-item-left { display: flex; align-items: center; gap: 11px; font-size: 13.5px; font-weight: 500; }
.sb-item-left i { width: 16px; text-align: center; font-size: 13px; }

.sb-badge { 
    font-size: 10px; 
    font-weight: 700; 
    padding: 1px 7px; 
    border-radius: 20px; 
    background: rgba(220,38,38,.2); 
    color: #f87171; 
}
.sb-badge.ok { background: rgba(22,163,74,.2); color: #4ade80; }

.sb-footer { padding: 14px 16px; border-top: 1px solid #21262d; }

.sb-user { display: flex; align-items: center; gap: 10px; }

.sb-avatar { 
    width: 32px; 
    height: 32px; 
    border-radius: 50%; 
    background: linear-gradient(135deg,#2563eb,#7c3aed); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 13px; 
    font-weight: 700; 
    color: white; 
    flex-shrink: 0; 
}

.sb-user-name { font-size: 13px; font-weight: 600; color: #e6edf3; }
.sb-user-role { font-size: 10.5px; color: #6e7681; }

/* ── TOPBAR ── */
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.topbar { 
    background: var(--surface); 
    border-bottom: 1px solid var(--border); 
    padding: 12px 28px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 16px; 
    flex-shrink: 0; 
}

.topbar-left { display: flex; align-items: center; gap: 8px; }

.breadcrumb { font-size: 13px; color: var(--text-2); }
.breadcrumb b { color: var(--text); }

.topbar-right { display: flex; align-items: center; gap: 10px; }

.tb-btn { 
    width: 36px; 
    height: 36px; 
    border-radius: 8px; 
    background: var(--bg); 
    border: 1px solid var(--border); 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: var(--text-2); 
    transition: 0.15s; 
    font-size: 14px; 
}

.tb-btn:hover { background: var(--primary-l); color: var(--primary); }

.tb-time { 
    font-family: 'JetBrains Mono', monospace; 
    font-size: 13px; 
    font-weight: 500; 
    color: var(--text-2); 
    background: var(--bg); 
    padding: 7px 13px; 
    border-radius: 8px; 
    border: 1px solid var(--border); 
}

/* ── CONTENT ── */
.content { 
    flex: 1; 
    overflow-y: auto; 
    padding: 24px 28px; 
    display: flex; 
    flex-direction: column; 
    gap: 22px; 
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }