/* ============================================================
   Antispam Monitor - Main Stylesheet
   Design: Sade, yüksek kontrast, okunabilir, gradient yok
   ============================================================ */

:root {
    --bg-body:      #0f1117;
    --bg-sidebar:   #141820;
    --bg-card:      #1a1f2e;
    --bg-card2:     #1e2435;
    --bg-input:     #252b3b;
    --bg-hover:     #222840;
    --border:       #2a3148;
    --border-light: #323a52;

    --text-primary:   #e8ecf5;
    --text-secondary: #8b95b0;
    --text-muted:     #525d7a;

    --accent-blue:    #3d7cfa;
    --accent-cyan:    #00c8e0;
    --accent-green:   #22c55e;
    --accent-yellow:  #f59e0b;
    --accent-red:     #ef4444;
    --accent-purple:  #a855f7;

    --risk-low:      #22c55e;
    --risk-medium:   #f59e0b;
    --risk-high:     #ef4444;
    --risk-critical: #a855f7;

    --sidebar-width: 240px;
    --topbar-height: 56px;
    --font: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    --radius: 6px;
    --radius-lg: 10px;
    --shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; overflow-x: hidden; }
body {
    font-family:      var(--font);
    background-color: var(--bg-body);
    color:            var(--text-primary);
    min-height:       100vh;
    line-height:      1.5;
    overflow-x:       hidden;
}
a { color: var(--accent-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Layout ---- */
.app-wrapper { display: flex; min-height: 100vh; }

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

.sidebar-brand {
    padding:       16px 20px;
    border-bottom: 1px solid var(--border);
    display:       flex;
    align-items:   center;
    gap:           10px;
    min-height:    var(--topbar-height);
}
.sidebar-brand .brand-icon { color: var(--accent-blue); font-size: 1.3rem; }
.sidebar-brand .brand-name { font-size: .95rem; font-weight: 700; color: var(--text-primary); letter-spacing: .02em; }
.sidebar-brand .brand-sub  { font-size: .7rem; color: var(--text-muted); }

.sidebar-nav { padding: 12px 0; flex: 1; }
.nav-section-title {
    padding:      8px 20px 4px;
    font-size:    .65rem;
    font-weight:  700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:        var(--text-muted);
}

.nav-item {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     9px 20px;
    color:       var(--text-secondary);
    font-size:   .85rem;
    font-weight: 500;
    transition:  background .15s, color .15s;
    cursor:      pointer;
    border-left: 3px solid transparent;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
.nav-item.active {
    background:  rgba(61,124,250,.1);
    color:       var(--accent-blue);
    border-left-color: var(--accent-blue);
}
.nav-item .nav-icon { width: 18px; text-align: center; font-size: .9rem; opacity: .8; }
.nav-badge {
    margin-left: auto;
    background:  var(--accent-red);
    color:       #fff;
    font-size:   .65rem;
    font-weight: 700;
    padding:     1px 6px;
    border-radius: 10px;
    min-width:   18px;
    text-align:  center;
}
.nav-badge.badge-yellow { background: var(--accent-yellow); color: #000; }
.nav-badge.badge-blue   { background: var(--accent-blue); }
.nav-badge.badge-red    { background: var(--accent-red, #ef4444); }

.sidebar-footer {
    padding:    12px 20px;
    border-top: 1px solid var(--border);
    font-size:  .75rem;
    color:      var(--text-muted);
}
.sidebar-footer .user-info { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sidebar-footer .user-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--accent-blue);
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 700; color: #fff;
}
.sidebar-footer .logout-link { color: var(--accent-red); font-size: .75rem; }

/* ---- Main Content ---- */
.main-wrapper {
    margin-left:   var(--sidebar-width);
    flex:          1;
    display:       flex;
    flex-direction: column;
    min-height:    100vh;
}

/* ---- Topbar ---- */
.topbar {
    height:        var(--topbar-height);
    background:    var(--bg-sidebar);
    border-bottom: 1px solid var(--border);
    display:       flex;
    align-items:   center;
    padding:       0 24px;
    gap:           16px;
    position:      sticky;
    top: 0;
    z-index:       50;
}
.topbar-title { font-size: .95rem; font-weight: 600; color: var(--text-primary); flex: 1; }
.topbar-status {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   .75rem;
    color:       var(--text-secondary);
}
.status-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent-green);
    animation: pulse 2s infinite;
}
.status-dot.offline { background: var(--accent-red); animation: none; }
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .4; }
}

/* ---- Page Content ---- */
.page-content { flex: 1; padding: 24px; }
.page-header {
    display:       flex;
    align-items:   center;
    gap:           12px;
    margin-bottom: 20px;
}
.page-header h1 { font-size: 1.2rem; font-weight: 700; }
.page-header .page-subtitle { font-size: .8rem; color: var(--text-secondary); margin-left: auto; }

/* ---- Cards ---- */
.card {
    background:    var(--bg-card);
    border:        1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
}
.card-header {
    padding:       14px 18px;
    border-bottom: 1px solid var(--border);
    display:       flex;
    align-items:   center;
    gap:           10px;
    font-weight:   600;
    font-size:     .85rem;
}
.card-header .card-icon { color: var(--accent-blue); }
.card-body { padding: 16px 18px; }

/* ---- Stat Cards (Dashboard) ---- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat-card {
    background:    var(--bg-card);
    border:        1px solid var(--border);
    border-radius: var(--radius-lg);
    padding:       16px;
    display:       flex;
    flex-direction: column;
    gap:           6px;
}
.stat-card .stat-label { font-size: .75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; }
.stat-card .stat-value { font-size: 1.8rem; font-weight: 700; line-height: 1; color: var(--text-primary); }
.stat-card .stat-sub   { font-size: .72rem; color: var(--text-muted); }
.stat-card .stat-icon  { font-size: 1.4rem; margin-bottom: 4px; }

.stat-card.green  { border-left: 3px solid var(--accent-green);  }
.stat-card.blue   { border-left: 3px solid var(--accent-blue);   }
.stat-card.yellow { border-left: 3px solid var(--accent-yellow); }
.stat-card.red    { border-left: 3px solid var(--accent-red);    }
.stat-card.purple { border-left: 3px solid var(--accent-purple); }
.stat-card.cyan   { border-left: 3px solid var(--accent-cyan);   }

/* ---- Tables ---- */
.table-responsive { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.data-table-wide { min-width: 780px; }
.data-table thead th {
    background:    var(--bg-card2);
    padding:       10px 12px;
    text-align:    left;
    font-size:     .72rem;
    font-weight:   600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:         var(--text-secondary);
    border-bottom: 1px solid var(--border);
    white-space:   nowrap;
}
.data-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition:    background .1s;
}
.data-table tbody tr:hover { background: var(--bg-hover); }
.data-table tbody td {
    padding:    9px 12px;
    color:      var(--text-primary);
    font-size:  .82rem;
    vertical-align: middle;
}
.data-table tbody td.mono { font-family: var(--mono); font-size: .78rem; }
.data-table tbody tr:last-child { border-bottom: none; }
.data-table .empty-row td { text-align: center; color: var(--text-muted); padding: 32px; }

/* ---- Badges ---- */
.badge {
    display:       inline-flex;
    align-items:   center;
    padding:       2px 8px;
    border-radius: 4px;
    font-size:     .7rem;
    font-weight:   600;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space:   nowrap;
}
.badge-low      { background: rgba(34,197,94,.15);  color: var(--risk-low);      }
.badge-medium   { background: rgba(245,158,11,.15); color: var(--risk-medium);   }
.badge-high     { background: rgba(239,68,68,.15);  color: var(--risk-high);     }
.badge-critical { background: rgba(168,85,247,.2);  color: var(--risk-critical); }
.badge-blue     { background: rgba(61,124,250,.15); color: var(--accent-blue);   }
.badge-cyan     { background: rgba(0,200,224,.15);  color: var(--accent-cyan);   }
.badge-green    { background: rgba(34,197,94,.15);  color: var(--accent-green);  }
.badge-red      { background: rgba(239,68,68,.15);  color: var(--accent-red);    }
.badge-yellow   { background: rgba(245,158,11,.15); color: var(--accent-yellow); }
.badge-gray     { background: rgba(139,149,176,.1); color: var(--text-secondary);}

/* ---- Buttons ---- */
.btn {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    padding:     7px 14px;
    border:      1px solid var(--border);
    border-radius: var(--radius);
    font-size:   .82rem;
    font-weight: 500;
    cursor:      pointer;
    transition:  background .15s, border-color .15s, color .15s;
    background:  transparent;
    color:       var(--text-primary);
}
.btn:hover { background: var(--bg-hover); text-decoration: none; }
.btn-primary  { background: var(--accent-blue);   border-color: var(--accent-blue);   color: #fff; }
.btn-primary:hover { background: #2d6ce0; }
.btn-danger   { background: rgba(239,68,68,.15);  border-color: var(--accent-red);    color: var(--accent-red); }
.btn-danger:hover  { background: rgba(239,68,68,.25); }
.btn-success  { background: rgba(34,197,94,.15);  border-color: var(--accent-green);  color: var(--accent-green); }
.btn-success:hover { background: rgba(34,197,94,.25); }
.btn-warning  { background: rgba(245,158,11,.15); border-color: var(--accent-yellow); color: var(--accent-yellow); }
.btn-sm { padding: 4px 10px; font-size: .75rem; }
.btn-xs { padding: 2px 7px;  font-size: .7rem;  }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Forms ---- */
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: .78rem; color: var(--text-secondary); margin-bottom: 5px; font-weight: 500; }
.form-control, select, textarea {
    width:         100%;
    background:    var(--bg-input);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    color:         var(--text-primary);
    padding:       8px 12px;
    font-size:     .83rem;
    font-family:   var(--font);
    outline:       none;
    transition:    border-color .15s;
}
.form-control:focus, select:focus, textarea:focus { border-color: var(--accent-blue); }
select option { background: var(--bg-card); }

.filter-bar {
    display:    flex;
    gap:        10px;
    flex-wrap:  wrap;
    align-items: center;
    padding:    14px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card2);
}
.filter-bar select,
.filter-bar input { width: auto; flex: 1; min-width: 140px; max-width: 220px; }

/* ---- Pagination ---- */
.pagination {
    display:     flex;
    gap:         4px;
    align-items: center;
    padding:     12px 18px;
    border-top:  1px solid var(--border);
    font-size:   .78rem;
    color:       var(--text-secondary);
}
.pagination a, .pagination span {
    padding:       5px 10px;
    border-radius: var(--radius);
    border:        1px solid var(--border);
    color:         var(--text-secondary);
}
.pagination a:hover    { background: var(--bg-hover); text-decoration: none; }
.pagination .active    { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }
.pagination .disabled  { opacity: .4; pointer-events: none; }
.pagination-info       { margin-left: auto; }

/* ---- Alerts ---- */
.alert {
    padding:       11px 16px;
    border-radius: var(--radius);
    font-size:     .82rem;
    display:       flex;
    align-items:   center;
    gap:           8px;
    margin-bottom: 14px;
}
.alert-success { background: rgba(34,197,94,.1);  border: 1px solid rgba(34,197,94,.25);  color: var(--accent-green);  }
.alert-danger  { background: rgba(239,68,68,.1);  border: 1px solid rgba(239,68,68,.25);  color: var(--accent-red);    }
.alert-warning { background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.25); color: var(--accent-yellow); }
.alert-info    { background: rgba(61,124,250,.1); border: 1px solid rgba(61,124,250,.25); color: var(--accent-blue);   }

/* ---- Live Feed ---- */
.live-feed {
    height:     280px;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: var(--mono);
    font-size:  .74rem;
    padding:    10px 14px;
    background: var(--bg-body);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.live-feed-item {
    padding:       3px 0;
    border-bottom: 1px solid rgba(255,255,255,.03);
    display:       flex;
    gap:           10px;
    color:         var(--text-secondary);
}
.live-feed-item .feed-time  { color: var(--text-muted); white-space: nowrap; }
.live-feed-item .feed-dir   { width: 70px; white-space: nowrap; }
.live-feed-item .feed-sender { color: var(--accent-cyan); min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-feed-item .feed-action { margin-left: auto; }
.live-feed-item.anomaly     { color: var(--accent-yellow); }
.live-feed-item.blocked     { color: var(--accent-red); }
.live-feed-item.spam        { color: var(--accent-red); opacity: .75; }

/* ---- Risk Score Bar ---- */
.risk-bar { display: flex; align-items: center; gap: 8px; }
.risk-bar-track {
    flex:          1;
    height:        6px;
    background:    var(--bg-input);
    border-radius: 3px;
    overflow:      hidden;
    max-width:     100px;
}
.risk-bar-fill { height: 100%; border-radius: 3px; transition: width .3s; }
.risk-bar-fill.low      { background: var(--risk-low);      }
.risk-bar-fill.medium   { background: var(--risk-medium);   }
.risk-bar-fill.high     { background: var(--risk-high);     }
.risk-bar-fill.critical { background: var(--risk-critical); }
.risk-bar-val { font-size: .75rem; font-weight: 600; min-width: 28px; text-align: right; }

/* ---- Charts placeholder ---- */
.chart-container { position: relative; min-height: 200px; }
canvas { max-width: 100%; }

/* ---- Dashboard ---- */
.dash-chart { height: 240px; }
.dash-bottom-grid {
    display:               grid;
    grid-template-columns: 1fr 1.6fr;
    gap:                   16px;
}

/* ---- Page chart (outbound/inbound mini trend) ---- */
.page-chart { height: 140px; }

/* ---- Queue stat grid (4 col) ---- */
.stat-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---- Settings grids ---- */
.settings-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap:                   20px;
    align-items:           start;
}
.settings-2col {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   12px;
    margin-bottom:         12px;
}

/* ---- Modals ---- */
.modal-overlay {
    position:    fixed; inset: 0;
    background:  rgba(0,0,0,.65);
    z-index:     500;
    display:     none;
    align-items: center;
    justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
    background:    var(--bg-card);
    border:        1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding:       24px;
    min-width:     360px;
    max-width:     520px;
    width:         100%;
    box-shadow:    var(--shadow);
}
.modal-title     { font-size: .95rem; font-weight: 700; margin-bottom: 16px; }
.modal-actions   { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }

/* ---- Login Page ---- */
.login-wrapper {
    min-height:   100vh;
    display:      flex;
    align-items:  center;
    justify-content: center;
    background:   var(--bg-body);
}
.login-box {
    background:    var(--bg-card);
    border:        1px solid var(--border);
    border-radius: var(--radius-lg);
    padding:       36px 32px;
    width:         100%;
    max-width:     380px;
    box-shadow:    var(--shadow);
}
.login-logo {
    text-align:    center;
    margin-bottom: 28px;
}
.login-logo .logo-icon { font-size: 2.2rem; color: var(--accent-blue); }
.login-logo h1 { font-size: 1.1rem; font-weight: 700; margin-top: 8px; }
.login-logo p  { font-size: .75rem; color: var(--text-muted); }
.login-btn { width: 100%; justify-content: center; padding: 10px; font-size: .9rem; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar            { width: 6px; height: 6px; }
::-webkit-scrollbar-track      { background: var(--bg-body); }
::-webkit-scrollbar-thumb      { background: var(--border-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ---- Sidebar overlay (mobile) ---- */
.sidebar-overlay {
    display:        none;
    position:       fixed;
    inset:          0;
    background:     rgba(0,0,0,.55);
    z-index:        99;
    opacity:        0;
    pointer-events: none;
    transition:     opacity .25s;
}
.sidebar-overlay.active { opacity: 1; pointer-events: auto; }

/* ---- Responsive: Tablet (≤900px) ---- */
@media (max-width: 900px) {
    /* Sidebar: gizle, slide-in ile aç */
    .sidebar { transform: translateX(-100%); transition: transform .25s; }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay { display: block; }
    .main-wrapper { margin-left: 0; }

    /* Hamburger buton */
    #mobile-menu-btn { display: block !important; }

    /* Topbar */
    .topbar { padding: 0 12px; gap: 10px; }
    .topbar-title { font-size: .88rem; }
    .topbar-date { display: none; }

    /* Stat grid 2 kolon */
    .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    /* Dashboard alt grid: tek kolon */
    .dash-bottom-grid { grid-template-columns: 1fr; }
    .dash-chart { height: 180px; }

    /* Page chart */
    .page-chart { height: 110px; }

    /* Queue 4-col → 2-col */
    .stat-grid-4 { grid-template-columns: repeat(2, 1fr); }

    /* Settings grids */
    .settings-grid { grid-template-columns: 1fr; }
    .settings-2col { grid-template-columns: 1fr 1fr; }

    /* Kart padding küçült */
    .card-body { padding: 12px 14px; }
    .card-header { padding: 11px 14px; }

    /* Sayfa padding */
    .page-content { padding: 16px; }

    /* Sayfa başlığı */
    .page-header { flex-wrap: wrap; gap: 6px; }
    .page-header .page-subtitle { margin-left: 0; width: 100%; }

    /* Filter bar */
    .filter-bar { flex-wrap: wrap; padding: 10px 14px; gap: 8px; }
    .filter-bar select, .filter-bar input { min-width: 0; flex: 1 1 calc(50% - 8px); max-width: 100%; }
    .filter-bar .filter-date-sep { display: none; }

    /* Tablo: touch scroll */
    .table-responsive { -webkit-overflow-scrolling: touch; }

    /* Pagination */
    .pagination { flex-wrap: wrap; gap: 4px; }
    .pagination-info { margin-left: 0; width: 100%; text-align: center; margin-top: 4px; }

    /* Modal */
    .modal { min-width: 0; width: calc(100vw - 32px); margin: 0 16px; }

    /* Login */
    .login-box { max-width: 95vw; padding: 28px 20px; }
}

/* ---- Responsive: Mobile (≤600px) ---- */
@media (max-width: 600px) {
    /* Topbar: sadece hamburger + başlık + ws dot */
    .topbar { padding: 0 10px; gap: 8px; }
    .topbar-date { display: none; }
    #ws-status-text { display: none; }

    /* Stat grid 1 kolon */
    .stat-grid { grid-template-columns: 1fr; gap: 8px; }
    .stat-card { padding: 12px; }
    .stat-card .stat-value { font-size: 1.5rem; }

    /* Dashboard */
    .dash-bottom-grid { grid-template-columns: 1fr; gap: 10px; }
    .dash-chart { height: 140px; }

    /* Page chart */
    .page-chart { height: 100px; }

    /* Queue 4-col → 1-col */
    .stat-grid-4 { grid-template-columns: 1fr 1fr; }

    /* Settings grids */
    .settings-grid { grid-template-columns: 1fr; gap: 12px; }
    .settings-2col { grid-template-columns: 1fr; }

    /* Sayfa padding */
    .page-content { padding: 10px; }
    .page-header { margin-bottom: 12px; }
    .page-header h1 { font-size: 1rem; }

    /* Filter bar: tüm alanlar tam genişlik */
    .filter-bar { flex-direction: column; padding: 8px 10px; gap: 6px; }
    .filter-bar select, .filter-bar input { width: 100%; max-width: 100%; flex: unset; min-width: 0; }
    .filter-bar .btn { width: 100%; justify-content: center; }

    /* Tablo: yatay kaydırma + hücre küçültme */
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .data-table { min-width: 600px; }
    .data-table thead th { padding: 8px 8px; font-size: .66rem; }
    .data-table tbody td { padding: 7px 8px; font-size: .78rem; }
    .filter-date-sep { display: none; }

    /* Chart yüksekliği küçült */
    .chart-container { min-height: 120px; }

    /* Live feed */
    .live-feed { height: 200px; font-size: .7rem; }
    .live-feed-item .feed-sender { min-width: 0; max-width: 120px; }

    /* Kart */
    .card-body { padding: 10px; }
    .card-header { padding: 9px 10px; font-size: .8rem; }
    .card-header .btn-xs { display: none; }

    /* Butonlar */
    .btn { font-size: .78rem; padding: 6px 10px; }
    .btn-sm { font-size: .72rem; padding: 4px 8px; }

    /* Pagination */
    .pagination { padding: 8px 10px; justify-content: center; }
    .pagination-info { width: 100%; text-align: center; }

    /* Modal */
    .modal { width: calc(100vw - 20px); padding: 16px; border-radius: var(--radius); }
    .modal-title { font-size: .88rem; }

    /* Risk bar kısa ekranlarda taşmasın */
    .risk-bar-track { max-width: 60px; }

    /* Yardımcı */
    .nowrap { white-space: normal; }
}

/* ---- Utility ---- */
.d-flex       { display: flex; }
.align-center { align-items: center; }
.gap-2        { gap: 8px; }
.gap-3        { gap: 12px; }
.ml-auto      { margin-left: auto; }
.text-muted   { color: var(--text-muted); }
.text-small   { font-size: .75rem; }
.text-red     { color: var(--accent-red); }
.text-green   { color: var(--accent-green); }
.text-yellow  { color: var(--accent-yellow); }
.text-blue    { color: var(--accent-blue); }
.text-cyan    { color: var(--accent-cyan); }
.mono         { font-family: var(--mono); }
.truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bold         { font-weight: 700; }
.nowrap       { white-space: nowrap; }
.mb-0         { margin-bottom: 0; }
.mb-1         { margin-bottom: 6px; }
.mb-2         { margin-bottom: 12px; }
.mb-3         { margin-bottom: 20px; }
.mt-1         { margin-top: 6px; }
.mt-2         { margin-top: 12px; }