body {
    font-family: 'Exo', sans-serif;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f4f6f9de;
}

#main-container {
    display: flex;
    flex-grow: 1;
}

#sidebar {
    min-width: 220px;
    max-width: 220px;
    background: #030149;
    color: white;
    transition: all 0.3s;
    overflow: hidden;
    font-size: 16px;
}

#sidebar.collapsed {
    min-width: 70px;
    max-width: 70px;
}

#content {
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto;
}

.sidebar-item span {
    transition: opacity 0.3s;
}

#sidebar.collapsed .sidebar-item span {
    display: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.3s;
}

.nav-link i {
    font-size: 18px;
    width: 20px;
    color: #e9ecef8f;
    align-items: center;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.nav-link.collapsed .fa-chevron-down {
    transform: rotate(-90deg);
    transition: transform 0.3s ease;
}

.navbar {
    background: white;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
}

.dashboard-card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
    border: 0.5px solid #a9a9a96c !important;
}

.otr-card {
    background: white;
    border-radius: 15px;
    border: 1px solid #0057b335;
    padding: 15px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
a {
    color: #478bb3;
    text-decoration: underline;
}

.otr-input {
    padding: 10px;
    border: 1px solid #ccc;
    margin-bottom: 15px;
    border-radius: 10px;
}

.navbar-brand img {
    height: 40px;
    margin-right: 10px;
}

.sidebar_subtitle {
    font-size: 12px;
    font-style: bold;
    margin-left: 10px;
    color: #828586;
    letter-spacing: 2px;
}

.page_title {
    font-size: 22px;
    font-weight: 500;
    color: #797b7d;
}

.page_subtitle {
    font-size: 12px;
    font-style: bold;
    color: #828586;
    letter-spacing: 2px;
}

footer {
    background: white;
    padding: 15px;
    text-align: center;
    box-shadow: 0px -4px 6px rgba(0, 0, 0, 0.1);
}


#uploadFile::file-selector-button {
    background-color: #2d3a551a;
    color: #cfd5db;
    border: 0;
    border-right: 1px solid #3d4e72;
    padding: 0.25rem 0.75rem;
    margin-right: 0.75rem;
    border-radius: 20px;
    cursor: pointer;
}
#uploadFile::file-selector-button:hover {
    background-color: #3a4a6b;
}

@media (max-width: 768px) {
    /* On mobile the sidebar is a slide-in DRAWER, and `.collapsed` — the single
       class the hamburger toggles — means OPEN here, the opposite of what it
       means on desktop (narrow, icons only). Two consequences had to be undone:

       1. `#sidebar.collapsed .sidebar-item span { display:none }` also fired, so
          opening the drawer hid every label and left a column of unlabelled
          icons. The rule below puts the labels back.
       2. The base `#sidebar` sets `overflow: hidden`, and with `height: 100vh`
          everything below the fold — Affiliates onwards — was clipped with no
          way to scroll to it. */
    #sidebar {
        position: absolute;
        left: -280px;
        height: 100vh;
        z-index: 1000;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    #sidebar.collapsed {
        left: 0px;
        /* Full width while open — it is a drawer, not a rail. */
        min-width: 240px;
        max-width: 240px;
    }

    #sidebar.collapsed .sidebar-item span {
        display: inline;
        visibility: visible;
        opacity: 1;
    }
}

.table-container {
    background-color: rgb(255, 255, 255);
    overflow: hidden;
}

table.dataTable {
    border-collapse: collapse;
    width: 100%;
    border: 0.5px solid #a9a9a944 !important;
}

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dt-search {
    margin-bottom: 10px;
}

.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dt-search label {
    font-size: 13px;
    font-weight: 600;
    color: #5f6670;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dt-search input {
    min-width: 220px;
    height: 38px;
    border: 1px solid #d6dde6;
    border-radius: 10px;
    padding: 8px 12px;
    background-color: #ffffff;
    margin-left: 6px;
    color: #1f2937;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dataTables_wrapper .dataTables_filter input::placeholder,
.dataTables_wrapper .dt-search input::placeholder {
    color: #9aa6b2;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dt-search input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

table.dataTable thead {
    background-color: #ffffff;
    color: #000000;

}

table.dataTable thead th {
    text-align: left;
    font-weight: bold;
    padding: 12px 15px;
    font-size: 14px;
    border-bottom: 0.5px solid #d9d9d9;
}

table.dataTable tbody tr {
    border-bottom: 0.5px solid #d9d9d97b;
}

table.dataTable tbody td {
    padding: 12px 15px;
    text-align: left;
    font-size: 14px;
}

table.dataTable tbody tr:hover {
    background-color: #e1eaf6;
    cursor: pointer;
}

.dataTables_wrapper .dataTables_length select {
    border: 0.5px solid #e3e3e3;
    border-radius: 5px;
    padding: 5px;
    background-color: transparent;
    padding: 4px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background-color: #385a7b;
    color: white;
    border-radius: 5px;
    padding: 8px 12px;
    margin: 5px;
    font-size: 14px;
    transition: background-color 0.3s;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: #37393b;
    color: white;
    border-radius: 5px;
    padding: 8px 12px;
    margin: 5px;
    font-size: 14px;
    transition: background-color 0.3s;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #0056b3;
}

.dataTables_length select {
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
}


.dataTables_wrapper .dataTables_info {
    font-size: 14px;
    padding: 10px;
}

.dataTables_wrapper .dataTables_length {
    padding: 10px;
}

.login-page {
    width: 100%;
    height: 100vh;
    display: inline-block;
    display: flex;
    align-items: center;
    margin-bottom: 50px;
}

.hyperlink {
    text-decoration: none;
    color: #044ea2;
    font-weight: 500;
}

.text-sm {
    font-size: 12px;
}

.text_fix_40px {
    width: 40px;
    display: inline-block;
    font-weight: 500;
    color: #464545;

}

.text_fix_140px {
    width: 140px;
    display: inline-block;
    font-weight: 500;
    color: #464545;

}

.text_fix_45px {
    width: 45px;
    display: inline-block;
    font-weight: 500;
    color: #464545;
}

.text_fix_60px {
    width: 60px;
    display: inline-block;
    font-weight: 500;
    color: #464545;
}

.float-right {
    float: right;
}

.form-compact-text {
    font-size: 0.85rem;
}

.deploy-confirm-title {
    font-size: 1.05rem;
    font-weight: 600;
}

.deploy-log-pre {
    background: #1e1e1e;
    color: #d4d4d4;
    max-height: 320px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
    scrollbar-color: #555 #2d2d2d;
    scrollbar-width: thin;
}

.deploy-log-pre::-webkit-scrollbar {
    width: 8px;
}

.deploy-log-pre::-webkit-scrollbar-track {
    background: #2d2d2d;
    border-radius: 4px;
}

.deploy-log-pre::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

.deploy-log-pre::-webkit-scrollbar-thumb:hover {
    background: #777;
}

.redis-master-picker-hidden {
    display: none;
}

.analytics-progress-thin {
    height: 6px;
    background: #39507a;
}

.analytics-donut-wrap {
    max-width: 260px;
    margin: 0 auto;
}

.analytics-url-cell {
    max-width: 280px;
}

.logs-col-ts {
    min-width: 145px;
}

.logs-col-path {
    min-width: 200px;
}

.logs-host-cell {
    max-width: 180px;
}

.logs-path-cell {
    max-width: 240px;
}

.portal-action-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9998;
    align-items: center;
    justify-content: center;
}

.portal-action-modal-card {
    background: #1e2130;
    border-radius: 12px;
    padding: 1.75rem 2rem;
    min-width: 320px;
    max-width: 440px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.portal-action-modal-title {
    font-size: 1rem;
    color: #f0f0f0;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.portal-action-modal-subtext {
    color: #aab;
}

.portal-action-modal-message {
    color: #ccd;
}

.portal-modal-btn-reset {
    letter-spacing: normal;
    text-transform: none;
}

.portal-modal-body-sm {
    font-size: 0.875rem;
}

.portal-action-modal-overlay-strong {
    background: rgba(0, 0, 0, 0.75);
    z-index: 9999;
}

.portal-action-modal-overlay-low {
    z-index: 9997;
}

.portal-action-modal-card-420 {
    max-width: 420px;
}

.portal-action-modal-card-480 {
    min-width: 340px;
    max-width: 480px;
}

.portal-action-modal-card-520 {
    min-width: 360px;
    max-width: 520px;
}

.portal-action-modal-card-fluid {
    width: 100%;
}

.portal-modal-title-gap {
    margin-bottom: 0.75rem;
}

.portal-modal-title-lg {
    margin-bottom: 1rem;
}

.portal-modal-message-leading {
    line-height: 1.6;
}

.portal-modal-hidden {
    display: none;
}

.portal-progress-10 {
    height: 10px;
}

.portal-progress-zero {
    width: 0%;
}

.portal-min-msg {
    min-height: 1.2em;
}

.upload-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.upload-overlay-card {
    background: #1e2130;
    border-radius: 12px;
    padding: 2rem 2.5rem;
    min-width: 340px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.upload-overlay-title {
    font-size: 1rem;
    color: #cdd;
    font-weight: 600;
}

.word-break-all {
    word-break: break-all;
}

.upload-progress-track {
    background: #2a2e45;
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
}

.upload-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4f8ef7, #6ec6ff);
    border-radius: 999px;
    transition: width 0.2s;
}

.text-soft-muted {
    color: #aab;
}

.btn-text-reset {
    letter-spacing: normal;
    text-transform: none;
}

.font-size-11 {
    font-size: 1.1rem;
}

.card-title-xs {
    font-size: 0.85rem;
}

.card-body-xs {
    font-size: 0.82rem;
}

.progress-h8 {
    height: 8px;
}

.progress-h10 {
    height: 10px;
}

.max-w-140 {
    max-width: 140px;
}

.bg-warning-soft {
    background: rgba(255, 193, 7, 0.08);
}

.thumb-90x50 {
    width: 90px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

.thumb-placeholder-90x50 {
    width: 90px;
    height: 50px;
    background: #1e2540;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3a4a65;
}

/* ── Video library browser (redesign) ─────────────────────────────── */
.vlib-header { margin-bottom: 1.25rem; }

.vlib-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 600;
}
.vlib-crumb-back {
    color: #8a9bb5;
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 6px;
    transition: color .15s, background .15s;
}
.vlib-crumb-back:hover { color: #cfd5db; background: rgba(255,255,255,.05); }
.vlib-crumb-link { color: #8a9bb5; text-decoration: none; }
.vlib-crumb-link:hover { color: #cfd5db; }
.vlib-crumb-sep { color: #45506b; }
.vlib-crumb-current { color: #eef2f7; }
.vlib-crumb-current .fa-folder { color: #4f8ef7; }

/* Toolbar: upload + search */
.vlib-upload-btn { cursor: pointer; }
.vlib-search-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 420px;
}
.vlib-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #667;
    pointer-events: none;
}
.vlib-search-input { padding-left: 34px; }

/* Filter chips */
.vlib-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 6px 14px;
    background: #1a2035;
    border: 1px solid #2d3a55;
    color: #8a9bb5;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.vlib-chip:hover { border-color: #3d4d70; color: #cfd5db; }
.vlib-chip.active {
    background: rgba(79,142,247,.12);
    border-color: #4f8ef7;
    color: #dbe8ff;
}
.vlib-chip-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.vlib-dot-all { background: #4f8ef7; }
.vlib-ico-ready { color: #35c37d; }
.vlib-ico-proc  { color: #e0a83a; }
.vlib-ico-queued { color: #8a9bb5; }
.vlib-ico-failed { color: #eb5757; }
.vlib-ico-brand { color: #4f8ef7; }
.vlib-ico-muted { color: #667; }

/* Drop zone */
.vlib-dropzone { position: relative; border-radius: 12px; transition: box-shadow .15s; }
.vlib-dropzone.dragover { box-shadow: 0 0 0 2px #4f8ef7 inset; }
.vlib-drop-hint {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 5;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(16, 22, 40, .88);
    border: 2px dashed #4f8ef7;
    border-radius: 12px;
    color: #dbe8ff;
    pointer-events: none;
}
.vlib-dropzone.dragover .vlib-drop-hint { display: flex; }
.vlib-drop-hint .fa { font-size: 2.4rem; color: #4f8ef7; }
.vlib-drop-hint-text { font-size: 1rem; font-weight: 600; }

/* Row list */
.vlib-list { display: flex; flex-direction: column; gap: 10px; }

.vlib-row {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #161c2e;
    border: 1px solid #2a3550;
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color .15s, background .15s;
}
.vlib-row:hover { border-color: #3a4a70; background: #18203494; }

.vlib-row-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    background: #101627;
    border: 1px solid #2a3550;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #3f4c68;
    font-size: 1.4rem;
}
.vlib-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vlib-row-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.35);
    color: #fff;
    font-size: 1.1rem;
    opacity: 0;
    text-decoration: none;
    transition: opacity .15s;
}
.vlib-row:hover .vlib-row-thumb-play { opacity: 1; }

.vlib-row-main { flex: 1 1 auto; min-width: 0; }
.vlib-row-title-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vlib-row-title {
    font-size: 0.98rem;
    font-weight: 600;
    color: #eef2f7;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vlib-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.vlib-status .fa { font-size: 0.6rem; }
.vlib-status-ready { background: rgba(53,195,125,.14); color: #4fd99a; }
.vlib-status-ready .fa-circle { font-size: 0.5rem; }
.vlib-status-processing { background: rgba(224,168,58,.14); color: #f0bd5c; }
.vlib-status-queued { background: rgba(138,155,181,.14); color: #a9b6cc; }
.vlib-status-failed { background: rgba(235,87,87,.14); color: #f57676; }

.vlib-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
    font-size: 0.8rem;
    color: #8a9bb5;
}
.vlib-row-meta .fa { margin-right: 4px; color: #667; }
.vlib-row-meta .vlib-dot { color: #45506b; margin: 0; }
.vlib-row-error { color: #f57676; }
.vlib-row-error .fa { color: #eb5757; }

.vlib-row-progress { display: flex; align-items: center; gap: 10px; margin-top: 8px; max-width: 340px; }
.vlib-row-progress-track { flex: 1; height: 6px; background: #232d47; border-radius: 999px; overflow: hidden; }
.vlib-row-progress-bar { height: 100%; background: linear-gradient(90deg, #4f8ef7, #6ec6ff); border-radius: 999px; }
.vlib-row-progress-bar.indeterminate { width: 40%; animation: vlibIndet 1.2s ease-in-out infinite; }
@keyframes vlibIndet {
    0%   { margin-left: -40%; }
    100% { margin-left: 100%; }
}
.vlib-row-progress-label { font-size: 0.74rem; color: #f0bd5c; white-space: nowrap; }

.vlib-row-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.vlib-kebab { padding: 5px 10px; }
.vlib-dropdown {
    background: #161c2e;
    border: 1px solid #2a3550;
    border-radius: 10px;
    padding: 6px;
    min-width: 160px;
}
.vlib-dropdown .dropdown-item { color: #cfd5db; border-radius: 6px; font-size: 0.85rem; padding: 7px 10px; }
.vlib-dropdown .dropdown-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.vlib-dropdown .dropdown-item.text-danger:hover { background: rgba(235,87,87,.14); }
.vlib-dropdown .dropdown-item.disabled { color: #556; }

/* Empty / no-results */
.vlib-empty { text-align: center; padding: 3.5rem 1rem; color: #8a9bb5; }
.vlib-empty .fa { font-size: 2.6rem; color: #3a4a65; margin-bottom: 1rem; display: block; }
.vlib-empty h5 { color: #cfd5db; }

/* Footer + stats */
.vlib-footer { border-top: 1px solid #232d47; padding-top: 14px; }
.vlib-stats {
    background: #161c2e;
    border: 1px solid #2a3550;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 0.82rem;
    color: #8a9bb5;
}
.vlib-stat { display: inline-flex; align-items: center; gap: 6px; }
.vlib-stat strong { color: #eef2f7; font-weight: 600; }
.vlib-stat-sep { color: #45506b; }
.vlib-quota { gap: 10px; }
.vlib-quota-track { width: 120px; height: 6px; background: #232d47; border-radius: 999px; overflow: hidden; }
.vlib-quota-bar { display: block; height: 100%; background: linear-gradient(90deg, #4f8ef7, #6ec6ff); border-radius: 999px; }

@media (max-width: 640px) {
    .vlib-row { flex-wrap: wrap; }
    .vlib-row-actions { width: 100%; justify-content: flex-end; }
    .vlib-quota { width: 100%; margin-left: 0 !important; }
}

.storage-file-input-dark {
    color: #cfd5db;
    background-color: #1a2035;
    border-color: #2d3a55;
}

.grid-full-span {
    grid-column: 1 / -1;
}

.share-picker-card {
    padding: 1.5rem 1.75rem;
    min-width: 300px;
    max-width: 380px;
}

.share-picker-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #f0f0f0;
    margin-bottom: 1rem;
}

.share-picker-status {
    min-height: 1.4em;
}

.dns-loading-overlay {
    background: rgba(0, 0, 0, 0.55);
    flex-direction: column;
}

.dns-loading-spinner {
    width: 3rem;
    height: 3rem;
}

.dns-label-icon {
    height: 20px;
    vertical-align: middle;
    margin-right: 6px;
}

.text-warning-soft {
    color: #ffd166;
}

.token-ability-badge {
    font-size: 0.7rem;
}

.storage-search-input {
    width: 300px;
}

.storage-code-sm {
    font-size: 0.8rem;
}

.storage-used-progress-wide {
    height: 6px;
    min-width: 90px;
}

.storage-alert-compact {
    font-size: 0.82rem;
}

.storage-creds-card {
    max-width: 700px;
}

.storage-creds-col-head {
    width: 40%;
}

.storage-creds-pre {
    font-size: 0.78rem;
}

.storage-secret-key {
    filter: blur(4px);
    cursor: pointer;
}

.storage-secret-key.revealed {
    filter: none;
}

.dns-table-compact {
    font-size: 0.85rem;
}

.dns-zone-type-badge {
    font-size: 0.7rem;
}

.invoice-credit-balance {
    font-size: 1.1rem;
}

.dns-records-table {
    font-size: 0.82rem;
}

.dns-record-code {
    font-size: 0.8rem;
}

.dns-record-type-badge {
    font-size: 0.7rem;
}

.dns-record-proxy-badge {
    font-size: 0.68rem;
}

.domain-check-ns-btn {
    font-size: 0.75rem;
    padding: 2px 7px;
}

.dashboard-section-header {
    font-size: 0.85rem;
}

.dashboard-invoices-table {
    font-size: 0.82rem;
}

.ticket-create-card {
    max-width: 720px;
}

.ticket-meta-row {
    font-size: 0.88rem;
}

.ticket-message-body {
    white-space: pre-wrap;
    font-size: 0.9rem;
}

.ticket-staff-badge {
    font-size: 0.7rem;
}

.plan-change-section-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--text-muted);
}

.plan-popular-ribbon {
    font-size: 0.75rem;
    border-radius: 0.375rem 0.375rem 0 0;
}

.domain-create-card {
    max-width: 700px;
}

.payment-status-card {
    max-width: 520px;
    margin: 2rem auto;
    text-align: center;
}

.payment-status-icon {
    font-size: 3rem;
}

.payment-status-icon-success {
    color: var(--bs-success, #28a745);
}

.payment-status-icon-warning {
    color: var(--bs-warning, #ffc107);
}

.analytics-rawlogs-th-ts {
    min-width: 145px;
}

.analytics-rawlogs-th-path {
    min-width: 200px;
}

.analytics-rawlogs-cell-host {
    max-width: 180px;
}

.analytics-rawlogs-cell-path {
    max-width: 240px;
}

.admin-users-search-input {
    width: 280px;
}

.admin-users-role-filter {
    width: auto;
}

.admin-traffic-domain-host {
    max-width: 120px;
}

.admin-traffic-domain-path {
    max-width: 200px;
}

.admin-api-rate-action-col {
    width: 120px;
}

.admin-companies-status-filter {
    width: auto;
}

.storage-cluster-json {
    font-size: 0.8rem;
    max-height: 400px;
    overflow: auto;
}

.storage-used-progress {
    height: 6px;
    min-width: 80px;
}

.badge {
    font-size: 12px;
    border-radius: 5px;
}

/* Role badges say what a node IS; status badges say how it is DOING. The
   Traffic Router role used bg-danger, which put a red badge next to a green
   "Active" one and read as an alert on a perfectly healthy node. Violet is
   distinct from every role colour already in use (primary/success/info/
   warning/dark/secondary) and leaves red reserved for real failure. */
.badge.bg-role-tr {
    background-color: #7c5cff !important;
    color: #fff;
}

.btn-success {
    --bg-opacity: 0.5;
    --border-opacity: 0.6;
    --accent-color: #0bac86; /* Bootstrap Primary */
    
    background-color: #097058;
    border: 1px solid #4b9987;
    color: #eaf2f3;
    backdrop-filter: blur(8px); /* Modern frosted glass effect */
    transition: all 0.3s ease;
    border-radius: 5px;
    padding: 5px 24px;
    font-weight: 500;
    font-size: 12px;
    text-transform: none;
}

.btn-success:hover {
    background-color: #0bac86;
    border: 1px solid #6b7d89;
}

.btn-outline-table {
    background-color: #3b4b5f;
    color: #f7f8f9;
    font-size: 12px;
    margin-top: 2px;
    border-radius: 5px;
    border: 1px solid #646872;
    padding-left: 10px;
    padding-right: 10px;
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    gap: 4px;
}

.btn-outline-table:hover {
    background-color: #10568b;
    color: #ffff;
    border: 1px solid #6b7d89;
}
.btn-primary {
    --bg-opacity: 0.5;
    --border-opacity: 0.6;
    --accent-color: #11d1f3; /* Bootstrap Primary */
    
    background-color: #033c68;
    border: 1px solid #10568b;
    color: #7bd1e0;
    backdrop-filter: blur(8px); /* Modern frosted glass effect */
    transition: all 0.3s ease;
    border-radius: 5px;
    padding: 5px 24px;
    font-weight: 500;
    font-size: 12px;
    text-transform: none;
}

.btn-primary:hover {
    background-color: #10568b;
    border: 1px solid #6b7d89;
}

.btn-secondary {
   --bg-opacity: 0.5;
    --border-opacity: 0.6;
    --accent-color: #6f7b7d; /* Bootstrap Primary */
    
    background-color:  #4f4f52;
    border: 1px solid #6d6e70;
    color: #b1b7b8;
    backdrop-filter: blur(8px); /* Modern frosted glass effect */
    transition: all 0.3s ease;
    border-radius: 5px;
    padding: 5px 24px;
    font-weight: 500;
    font-size: 12px;
}

.btn-danger {
   --bg-opacity: 0.8;
    --border-opacity: 0.6;
    --accent-color: #c16f6f; /* Bootstrap Primary */
    background-color: rgba(200, 62, 62, var(--bg-opacity));
    border: 1px solid #b38e8e;
    color: #f5eeee;
    backdrop-filter: blur(8px); /* Modern frosted glass effect */
    transition: all 0.3s ease;
    border-radius: 5px;
    padding: 5px 24px;
    font-weight: 500;
    font-size: 12px;
}

.btn-info {
    --bg-opacity: 0.5;
    --border-opacity: 0.6;
    --accent-color: #468893; /* Bootstrap Primary */
    
    background-color: #468893;
    border: 1px solid #7fbbc6;
    color: #b1b7b8;
    backdrop-filter: blur(8px); /* Modern frosted glass effect */
    transition: all 0.3s ease;
    border-radius: 5px;
    padding: 5px 24px;
    font-weight: 500;
    font-size: 12px;
}


.btn-warning {
    --bg-opacity: 0.2;
    --border-opacity: 0.6;
    --accent-color: #f3b711; /* Bootstrap Primary */
    
    background-color: #c6a007;
    border: 1px solid #62561c;
    color: #1e1f1f;
    backdrop-filter: blur(8px); /* Modern frosted glass effect */
    transition: all 0.3s ease;
    border-radius: 5px;
    padding: 5px 24px;
    font-weight: 500;
    font-size: 12px;
}
.page_title_div {
    background-color: #ffffff;
    border-left: 6px solid #183ba1;
    color: #797b7d;
    padding: 10px;
    border-radius: 15px;
    margin-bottom: 20px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
}

.text-sidebar {
    font-size: 12px;
    color: #a0b1c1;
    font-weight: 500;
}

.list-group-item {
    position: relative;
    display: block;
    padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);
    color: var(--bs-list-group-color);
    text-decoration: none;
    background-color: transparent;
    border: transparent;
}

.cdn_table_text_sm {
    background-color: transparent;
    color: #97b4c0;
    font-size: 12px;
    font-weight: 700;
    width: 25px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.tab .nav-tabs li a {
    color: #fff;
    padding: 10px 10px;
    margin-right: 4px;
    background: #0a0155;
    border: none;

    position: relative;
    transition: all 0.3s ease 0s;
    border-radius: 5px;
}

.tab .nav-tabs li a:hover {
    background: #100386;
}

.tab .nav-tabs li.active a {
    opacity: 1;
}

.tab .nav-tabs li.active a,
.tab .nav-tabs li.active a:hover,
.tab .nav-tabs li.active a:focus {
    color: #fff;
    background: #0a0155;
    border: none;
    border-radius: 0;
    border-radius: 5px;

}

.tab .nav-tabs li a i,
.tab .nav-tabs li.active a i {
    display: inline-block;
    padding-right: 5px;
    text-shadow: none;
    margin-top: 26px;

}

.tab .nav-tabs li a span {
    display: inline-block;
    letter-spacing: -19px;
    opacity: 0;
    transition: all 0.3s ease 0s;
}

.tab .nav-tabs li a:hover span,
.tab .nav-tabs li.active a span {
    letter-spacing: 1px;
    opacity: 1;
    transition: all 0.3s ease 0s;
}

.tab .tab-content {
    padding-top: 20px;

}

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

.stat-card {
    background: white;
    border-radius: 20px;
    padding: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.stat-card h3 {
    margin-top: 0;
    color: #02083e;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.stat-card .value {
    font-size: 28px;
    font-weight: bold;
    color: #6f6f70;
}

.stat-card .trend {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.trend.up {
    color: var(--success);
}

.trend.down {
    color: var(--danger);
}

.card-left-green {
    border-left: 6px solid #07b413;
}

.card-left-orange {
    border-left: 6px solid #f57b3f;
}

.card-left-red {
    border-left: 6px solid #dd0303;
}

.card-left-blue {
    border-left: 6px solid #135eb9;
}

.card-left-purple {
    border-left: 6px solid #9d4edd;
}

.card-left-liteblue {
    border-left: 6px solid #669ef2;
}


.recent-activity {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.activity-item {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(67, 97, 238, 0.1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
}

.activity-content {
    flex-grow: 1;
}

.activity-time {
    color: var(--gray);
    font-size: 12px;
}

#card-element {
    padding: 10px;
    border: 1px solid #ccc;
    margin-bottom: 15px;
    border-radius: 8px;
}

/* ============================================================
   DARK MODE
   Applied via: <html data-theme="dark">
   Toggled by #themeToggle, persisted in localStorage
   ============================================================ */

[data-theme="dark"] body {
    background-color: #111318;
    color: #c9cdd4;
}

/* Topbar / Navbar */
[data-theme="dark"] .navbar {
    background: #151821 !important;
    box-shadow: 0 4px 6px rgba(0,0,0,.4);
    color: #c9cdd4;
}
[data-theme="dark"] .navbar .navbar-brand,
[data-theme="dark"] .navbar span,
[data-theme="dark"] .navbar .text-muted {
    color: #9aa0b5 !important;
}

/* Sidebar — already dark navy, just tweak borders/text */
[data-theme="dark"] #sidebar {
    background: #1c1f2b;
    border-right: 1px solid #2a2d3e;
}
[data-theme="dark"] .sidebar_subtitle {
    color: #5a6080;
}

/* Main content area */
[data-theme="dark"] #content {
    background-color: #111318;
}

/* Footer */
[data-theme="dark"] footer {
    background: #151821;
    color: #6b7280;
    box-shadow: 0 -4px 6px rgba(0,0,0,.3);
}

/* ---- Cards (Bootstrap + custom) ---- */
[data-theme="dark"] .card,
[data-theme="dark"] .dashboard-card,
[data-theme="dark"] .otr-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .recent-activity {
    background: #1c1f2b !important;
    border-color: #2a2d3e !important;
    color: #c9cdd4;
}

[data-theme="dark"] .card-header {
    background: #20233299 !important;
    border-bottom-color: #2a2d3e !important;
    color: #c9cdd4 !important;
}

[data-theme="dark"] .card-body {
    color: #c9cdd4;
}

/* SB-Admin-2 gray text utilities (dashboard stat cards): in dark mode the
   "dark text" becomes light and the faint icon gray dims, so card values stay
   readable. Higher specificity than the page-level .text-gray-* !important. */
[data-theme="dark"] .text-gray-800 {
    color: #e3e6eb !important;
}
[data-theme="dark"] .text-gray-300 {
    color: #3a3d4d !important;
}

[data-theme="dark"] .stat-card h3 {
    color: #7b8dbf;
}
[data-theme="dark"] .stat-card .value {
    color: #9aa0b5;
}

/* Page title block */
[data-theme="dark"] .page_title_div {
    background-color: #1c1f2b;
    color: #9aa0b5;
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
[data-theme="dark"] .page_title {
    color: #9aa0b5;
}
[data-theme="dark"] .page_subtitle {
    color: #6b7280;
}

/* ---- Tables ---- */
[data-theme="dark"] .table-container {
    background-color: #1c1f2b;
}

[data-theme="dark"] table.dataTable {
    border-color: #2a2d3e !important;
    color: #c9cdd4;
}

[data-theme="dark"] table.dataTable thead {
    background-color: #151821;
    color: #9aa0b5;
}

[data-theme="dark"] table.dataTable thead th {
    border-bottom-color: #2a2d3e;
    color: #9aa0b5;
}

[data-theme="dark"] table.dataTable tbody tr,
[data-theme="dark"] table.dataTable tbody tr td {
    background-color: #1c1f2b !important;
    border-bottom-color: #2a2d3e66;
    color: #a4aab2;
}

[data-theme="dark"] table.dataTable tbody tr:hover,
[data-theme="dark"] table.dataTable tbody tr:hover td {
    background-color: #232844 !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
[data-theme="dark"] .dataTables_filter input,
[data-theme="dark"] .dataTables_length select {
    background-color: #1c1f2b;
    border-color: #444446;
    color: #9a9ca1;
    height: 32px;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_length,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter {
    color: #9aa0b5;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {

    color: #c9cdd4 !important;
    border-color: #2a2d3e;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #2e3870 !important;
    color: #fff !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    
    color: #9c9fa1 !important;
    border-color: #3d4a8a !important;
}

/* ---- Bootstrap table ---- */
[data-theme="dark"] .table {
    color: #c9cdd4;
    border-color: #2a2d3e;
}
[data-theme="dark"] .table thead th,
[data-theme="dark"] .table thead td {
    border-bottom-color: #2a2d3e;
    color: #9aa0b5;
    background-color: #151821 !important;
}
[data-theme="dark"] .table tbody tr td,
[data-theme="dark"] .table tbody tr th {
    background-color: #1c1f2b !important;
    border-bottom-color: #2a2d3e66;
    color: #c9cdd4;
}
[data-theme="dark"] .table tbody tr:hover td,
[data-theme="dark"] .table tbody tr:hover th {
    background-color: #232844 !important;
}
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) td {
    background-color: rgba(255,255,255,.02) !important;
}

/* ---- Forms ---- */

[data-theme="dark"] .form-select,
[data-theme="dark"] .otr-input,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    --bg-opacity: 0.5;
    --border-opacity: 0.6;
    --accent-color: #11d1f3; /* Bootstrap Primary */
    
    background-color: #111318;
    border: 1px solid rgba(15, 134, 186, var(--border-opacity));
    color: #929696;
    backdrop-filter: blur(8px); /* Modern frosted glass effect */
    transition: all 0.3s ease;
    border-radius: 5px;
    padding: 5px 24px;
    font-weight: 500;
    font-size: 12px;
   
}
[data-theme="dark"] .form-control{
--bg-opacity: 0.5;
    --border-opacity: 0.6;
    --accent-color: #11d1f3; /* Bootstrap Primary */
    
    background-color: #111318;
    border: 1px solid rgba(15, 134, 186, var(--border-opacity));
    color: #798c8f;
    backdrop-filter: blur(8px); /* Modern frosted glass effect */
    transition: all 0.3s ease;
    border-radius: 5px;
    padding: 5px 24px;
    font-weight: 500;
    font-size: 12px;
}


[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: #232844;
    border-color: #3d4a8a;
    color: #e0e4f0;
    box-shadow: 0 0 0 0.2rem rgba(61,74,138,.25);
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #4a5068;
}

[data-theme="dark"] .input-group-text {
    background-color: #20233299;
    border-color: #2a2d3e;
    color: #9aa0b5;
}

[data-theme="dark"] label,
[data-theme="dark"] .form-label {
    color: #9ea1a6;
}

/* ---- Modals ---- */
[data-theme="dark"] .modal-content {
    background-color: #1c1f2b;
    border-color: #2a2d3e;
    color: #c9cdd4;
}
[data-theme="dark"] .modal-header {
    border-bottom-color: #2a2d3e;
}
[data-theme="dark"] .modal-footer {
    border-top-color: #2a2d3e;
}
[data-theme="dark"] .modal-title {
    color: #e0e4f0;
}
[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(1);
}

/* ---- Dropdowns ---- */
[data-theme="dark"] .dropdown-menu {
    background-color: #1c1f2b;
    border-color: #2a2d3e;
}
[data-theme="dark"] .dropdown-item {
    color: #c9cdd4;
}
[data-theme="dark"] .dropdown-item:hover {
    background-color: #232844;
    color: #e0e4f0;
}
[data-theme="dark"] .dropdown-divider {
    border-color: #2a2d3e;
}

/* ---- Alerts ---- */
[data-theme="dark"] .alert-success {
    background-color: #0f2d1f;
    border-color: #1a5c3a;
    color: #6ee7b7;
}
[data-theme="dark"] .alert-danger {
    background-color: #2d0f0f;
    border-color: #5c1a1a;
    color: #fca5a5;
}
[data-theme="dark"] .alert-warning {
    background-color: #2d200f;
    border-color: #5c4a1a;
    color: #fcd34d;
}
[data-theme="dark"] .alert-info {
    background-color: #0f1e2d;
    border-color: #1a3a5c;
    color: #93c5fd;
}
/* Neutral/empty-state alerts. Bootstrap's default is near-white, which reads
   as a bright panel on the dark admin theme. */
[data-theme="dark"] .alert-secondary {
    background-color: #1b1f2b;
    border-color: #2a2d3e;
    color: #b9c2d0;
}
[data-theme="dark"] .alert-secondary a {
    color: #93c5fd;
}
[data-theme="dark"] .alert-light,
[data-theme="dark"] .alert-primary {
    background-color: #16202e;
    border-color: #24344a;
    color: #b9c2d0;
}

/* ---- Misc ---- */
[data-theme="dark"] .text-muted {
    color: #8d96a6 !important;
}
/* Bootstrap's .form-text falls back to --bs-secondary-color, which is a light-mode
   grey and all but vanishes against the dark cards — field hints were unreadable.
   Match .text-muted so they read the same as every other secondary line. */
[data-theme="dark"] .form-text {
    color: #8d96a6;
}
[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom {
    border-color: #2a2d3e !important;
}
[data-theme="dark"] hr {
    border-color: #2a2d3e;
}
[data-theme="dark"] .activity-item {
    border-bottom-color: #2a2d3e;
}
[data-theme="dark"] .hyperlink {
    color: #6b8fde;
}
[data-theme="dark"] .text_fix_40px,
[data-theme="dark"] .text_fix_45px,
[data-theme="dark"] .text_fix_60px,
[data-theme="dark"] .text_fix_140px {
    color: #9aa0b5;
}
[data-theme="dark"] .shadow-sm {
    box-shadow: 0 1px 2px rgba(0,0,0,.4) !important;
}

/* ---- Code blocks & light-background utilities ----
   Bootstrap's .bg-light/.bg-white and unstyled <pre>/<code> stay white in dark
   mode, which renders faint grey text on white — unreadable. Used across the
   API token, storage credential, webhook and docs pages, so they are themed
   here rather than patched per view. Inset one step darker than .otr-card
   (#1c1f2b) so a code block reads as recessed. */
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white {
    background-color: #12151d !important;
    color: #c9cdd4 !important;
}

[data-theme="dark"] pre {
    background-color: #12151d;
    border-color: #2a2d3e !important;
    color: #c9cdd4;
}

[data-theme="dark"] code {
    color: #7fd6ea;
}

/* A <code> inside <pre> inherits the block's colour — it must not pick up the
   standalone inline-code accent, or every token in a snippet turns cyan. */
[data-theme="dark"] pre code,
[data-theme="dark"] pre .text-muted {
    background-color: transparent;
    color: inherit;
}



/* Sidebar toggle button */
#toggleSidebar {
    background: transparent;
    border: none;
    box-shadow: none;
    font-size: 20px;
    padding: 0 8px;
    color: inherit;
}
#toggleSidebar:hover,
#toggleSidebar:focus,
#toggleSidebar:active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 0.7;
}

/* Theme toggle button */
#themeToggle {
    background: transparent;
    border: 1px solid rgba(150,150,150,.3);
    color: inherit;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}
#themeToggle:hover {
    background: rgba(150,150,150,.15);
}
[data-theme="dark"] #themeToggle {
    color: #f5c542;
    border-color: rgba(245,197,66,.3);
}

#cdnSharkTabs {
    background-color: #252e3c;
    border-radius: 50px;
    padding: 0.2rem;
    display: inline-flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border: none !important;
    --bs-nav-tabs-border-color: transparent;
}
#cdnSharkTabs .nav-link {
    color: #e2e8f0;
    font-weight: 500;
    padding: 0.625rem 1.25rem;
    transition: all 0.2s ease;
    border-radius: 50px;
    border: none;
    background-color: transparent;
}
#cdnSharkTabs .nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}
#cdnSharkTabs .nav-link.active {
    color: #fff;
    background-color: #085c88;

}
.tab-content {
    animation: fadeIn 0.15s ease;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Dark mode scrollbar */
[data-theme="dark"] * {
    scrollbar-color: #4a5a77 #111318;
    scrollbar-width: thin;
}

[data-theme="dark"] *::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

[data-theme="dark"] *::-webkit-scrollbar-track {
    background: #111318;
}

[data-theme="dark"] *::-webkit-scrollbar-thumb {
    background-color: #4a5a77;
    border-radius: 10px;
    border: 2px solid #111318;
}

[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
    background-color: #5d7092;
}



/* ===================== Select2 Dark Mode (tickets/create) ===================== */
.select2-container .select2-selection--single { height: 31px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 29px; font-size: 0.875rem; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 29px; }
.select2-container--default .select2-selection--single {
    background-color: #111318;
    border: 1px solid #14507b;
    color: #cfd5db;
    border-radius: 20px;
    font-size: 12px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #cfd5db;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #8a9bb5 transparent transparent transparent;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #8a9bb5 transparent;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #667;
}
.select2-dropdown {
    background-color: #111318;
    border: 1px solid rgba(15, 134, 186, var(--border-opacity));
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: #131929;
    border: 1px solid rgba(15, 134, 186, var(--border-opacity));
    color: #cfd5db;
    outline: none;
}
.select2-container--default .select2-results__option {
    color: #cfd5db;
    background-color: #111318;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #111318;
    color: #d0e0ff;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #1e3060;
    color: #fff;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
    color: #8a9bb5;
}

/* ============================================================
   Storage bucket browser — file manager (grid / list)
   Theme-aware via CSS vars; lives inside .otr-card
   ============================================================ */
.fm-card {
    --fm-item-bg: #ffffff;
    --fm-item-border: #e6ecf1;
    --fm-item-hover: #f6f9fb;
    --fm-name: #2c3742;
    --fm-muted: #7d8f9e;
    --fm-toolbar-bg: #eef3f7;
    --fm-btn: #56697a;
    --fm-accent: #17a2b8;
    padding: 16px;
}
[data-theme="dark"] .fm-card {
    --fm-item-bg: #171a24;
    --fm-item-border: #2a2d3e;
    --fm-item-hover: #20232f;
    --fm-name: #dbe2ea;
    --fm-muted: #8b93a7;
    --fm-toolbar-bg: #12151d;
    --fm-btn: #9aa3b5;
    --fm-accent: #11d1f3;
}

/* toolbar */
.fm-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.fm-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.fm-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--fm-btn);
    font-size: 13px;
    font-family: inherit;
    padding: 6px 13px;
    border-radius: 20px;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}
.fm-btn i { font-size: 13px; }
.fm-btn:hover { background: var(--fm-item-hover); color: var(--fm-name); }
.fm-btn.disabled { opacity: .4; pointer-events: none; }
.fm-viewtoggle {
    display: flex;
    gap: 3px;
    background: var(--fm-toolbar-bg);
    border: 1px solid var(--fm-item-border);
    border-radius: 22px;
    padding: 3px;
}
.fm-viewtoggle .fm-btn { padding: 6px 12px; border-radius: 18px; }
.fm-viewtoggle .fm-btn.active {
    background: var(--fm-item-bg);
    color: var(--fm-accent);
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* grid container */
.fm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}

/* item card */
.fm-item {
    position: relative;
    background: var(--fm-item-bg);
    border: 1px solid var(--fm-item-border);
    border-radius: 14px;
    transition: transform .15s, border-color .15s, background .15s, box-shadow .15s;
}
.fm-item:hover {
    border-color: var(--fm-accent);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -12px rgba(0,0,0,.35);
}
.fm-open {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 18px 12px 15px;
    text-decoration: none;
    color: inherit;
}
.fm-open:hover { text-decoration: none; }
.fm-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    margin-bottom: 11px;
    flex: 0 0 auto;
}
.fm-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-width: 0;
}
.fm-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--fm-name);
    word-break: break-word;
    line-height: 1.35;
    max-width: 100%;
}
.fm-meta { font-size: 12px; color: var(--fm-muted); margin-top: 5px; }
.fm-sub  { font-size: 10.5px; color: var(--fm-muted); margin-top: 3px; opacity: .85; }

/* per-type icon colors (soft tinted bg + colored glyph) */
.type-folder  { color: #d99b00; background: rgba(224,169,10,.14); }
.type-image   { color: #a06fd6; background: rgba(160,111,214,.14); }
.type-video   { color: #2fa99a; background: rgba(47,169,154,.14); }
.type-audio   { color: #c08a4a; background: rgba(192,138,74,.14); }
.type-pdf     { color: #dc5a5a; background: rgba(220,90,90,.14); }
.type-archive { color: #d38a3e; background: rgba(211,138,62,.14); }
.type-code    { color: #4d9ac2; background: rgba(77,154,194,.15); }
.type-sheet   { color: #5aa86a; background: rgba(90,168,106,.15); }
.type-doc     { color: #7d94a8; background: rgba(125,148,168,.16); }
.type-file    { color: #6d8296; background: rgba(109,130,150,.15); }

/* action buttons (share / copy / delete) */
.fm-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 5px;
    opacity: 0;
    transition: opacity .15s;
}
.fm-item:hover .fm-actions,
.fm-actions:focus-within { opacity: 1; }
.fm-actions form { display: inline; margin: 0; }
.fm-action-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--fm-item-border);
    background: var(--fm-item-bg);
    color: var(--fm-btn);
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,.15);
    transition: background .15s, color .15s, border-color .15s;
}
.fm-action-btn:hover { color: var(--fm-name); border-color: var(--fm-accent); }
.fm-action-btn.primary { color: #fff; background: #26648b; border-color: #2f7aa8; }
.fm-action-btn.primary:hover { background: #2e77a3; color: #fff; }
.fm-action-btn.danger:hover { color: #fff; background: #c0392b; border-color: #c0392b; }

/* signed-url note */
.fm-note {
    margin-top: 14px;
    font-size: 12px;
    color: var(--fm-muted);
}
.fm-note i { color: #dc5a5a; margin-right: 5px; }

/* empty state */
.fm-empty {
    text-align: center;
    padding: 48px 12px;
    color: var(--fm-muted);
}
.fm-empty i { font-size: 46px; opacity: .55; margin-bottom: 14px; display: block; }

/* -------- LIST VIEW -------- */
.fm-grid.fm-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.fm-list .fm-item {
    display: flex;
    align-items: center;
}
.fm-list .fm-item:hover { transform: none; }
.fm-list .fm-open {
    flex: 1;
    min-width: 0;
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 9px 14px;
    gap: 13px;
}
.fm-list .fm-icon {
    width: 38px;
    height: 38px;
    font-size: 16px;
    border-radius: 10px;
    margin-bottom: 0;
}
.fm-list .fm-text {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    flex: 1;
}
.fm-list .fm-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fm-list .fm-meta { margin-top: 0; flex: 0 0 auto; min-width: 96px; }
.fm-list .fm-sub  { margin-top: 0; flex: 0 0 auto; width: 118px; text-align: right; }
.fm-list .fm-actions {
    position: static;
    opacity: 1;
    padding-right: 12px;
    box-shadow: none;
}
.fm-list .fm-action-btn { box-shadow: none; }

@media (max-width: 576px) {
    .fm-list .fm-meta, .fm-list .fm-sub { display: none; }
    .fm-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .fm-btn span { display: none; }
}

/* -------- Upload dropzone + multi-file queue -------- */
.upload-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-align: center;
    padding: 22px 14px;
    border: 2px dashed #c6d2dc;
    border-radius: 14px;
    cursor: pointer;
    color: #7d8f9e;
    transition: border-color .15s, background .15s, color .15s;
    margin: 0;
}
.upload-dropzone:hover,
.upload-dropzone.dragover {
    border-color: #2f7aa8;
    background: rgba(47,122,168,.06);
    color: #2f7aa8;
}
.upload-dropzone i { font-size: 26px; }
.upload-dropzone-text { font-size: 13px; line-height: 1.4; }
.upload-dropzone-text small { opacity: .8; font-size: 12px; }
[data-theme="dark"] .upload-dropzone { border-color: #2a2d3e; color: #8b93a7; }
[data-theme="dark"] .upload-dropzone:hover,
[data-theme="dark"] .upload-dropzone.dragover {
    border-color: #11d1f3;
    background: rgba(17,209,243,.07);
    color: #11d1f3;
}

.upload-selected { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.upload-selected .usel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    background: #eef3f7;
    border: 1px solid #e0e7ec;
    border-radius: 8px;
    padding: 5px 6px 5px 10px;
}
.upload-selected .usel-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-selected .usel-size { color: #8a9bb5; flex: 0 0 auto; margin-left: auto; }
.upload-selected .usel-remove {
    flex: 0 0 auto;
    cursor: pointer;
    border: 0;
    background: transparent;
    color: #c0392b;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 12px;
}
.upload-selected .usel-remove:hover { background: rgba(192,57,43,.12); }
[data-theme="dark"] .upload-selected .usel { background: #12151d; border-color: #2a2d3e; }

/* listing drop overlay */
.fm-card.fm-dragover {
    outline: 2px dashed #2f7aa8;
    outline-offset: -6px;
}
[data-theme="dark"] .fm-card.fm-dragover { outline-color: #11d1f3; }

/* -------- File manager: action bar (search + buttons) + reveal panels -------- */
.fm-actionbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.fm-search {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--fm-toolbar-bg);
    border: 1px solid var(--fm-item-border);
    border-radius: 22px;
    padding: 7px 15px;
    flex: 1 1 220px;
    max-width: 360px;
    transition: border-color .15s, box-shadow .15s;
}
.fm-search:focus-within { border-color: var(--fm-accent); box-shadow: 0 0 0 3px rgba(47,122,168,.15); }
.fm-search i { color: var(--fm-muted); font-size: 13px; }
.fm-search input {
    border: 0;
    background: transparent;
    outline: none;
    color: var(--fm-name);
    font-size: 13px;
    font-family: inherit;
    width: 100%;
}
.fm-search input::placeholder { color: var(--fm-muted); }

.fm-hbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.fm-hbtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--fm-item-border);
    background: var(--fm-item-bg);
    color: var(--fm-name);
    font-size: 13px;
    font-family: inherit;
    padding: 8px 15px;
    border-radius: 22px;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}
.fm-hbtn i { color: var(--fm-btn); font-size: 13px; }
.fm-hbtn:hover { border-color: var(--fm-accent); background: var(--fm-item-hover); color: var(--fm-name); text-decoration: none; }
.fm-hbtn.primary { background: #26648b; border-color: #2f7aa8; color: #fff; }
.fm-hbtn.primary i { color: #c1def5; }
.fm-hbtn.primary:hover { background: #2e77a3; color: #fff; }

.fm-panel {
    border: 1px solid var(--fm-item-border);
    background: var(--fm-toolbar-bg);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 16px;
}
.fm-panel[hidden] { display: none; }

.fm-newfolder { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fm-newfolder .form-control { flex: 1 1 180px; max-width: 320px; }
.fm-newfolder-icon { color: #d99b00; font-size: 18px; }

@media (max-width: 576px) {
    .fm-hbtn span { display: none; }
    .fm-search { max-width: none; }
}

/* -------- Storage usage bar (top, single column) -------- */
.fm-usage-card { margin-bottom: 16px; padding: 15px 18px; }
.fm-usage-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.fm-usage-label { font-size: 13px; font-weight: 700; color: #56697a; letter-spacing: .4px; }
.fm-usage-label i { margin-right: 7px; color: #478bb3; }
.fm-usage-value { font-size: 12.5px; color: #7d8f9e; }
.fm-usage-track {
    height: 10px;
    background: #dbe3ea;
    border: 1px solid #cdd8e1;
    border-radius: 20px;
    overflow: hidden;
}
.fm-usage-bar {
    height: 100%;
    width: 0;
    min-width: 6px;
    background: #26648b;
    border-radius: 20px;
    transition: width .3s ease;
}
.fm-usage-bar.danger { background: #c0392b; }
[data-theme="dark"] .fm-usage-label { color: #dbe2ea; }
[data-theme="dark"] .fm-usage-label i { color: #11d1f3; }
[data-theme="dark"] .fm-usage-value { color: #8b93a7; }
[data-theme="dark"] .fm-usage-track { background: #2c3444; border-color: #3a4457; }
[data-theme="dark"] .fm-usage-bar { background: #11d1f3; }
[data-theme="dark"] .fm-usage-bar.danger { background: #e5534b; }

/* -------- File manager: current path (next to Back/Up/Refresh) -------- */
.fm-nav { flex: 1 1 auto; min-width: 0; align-items: center; }
.fm-path {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    font-size: 13px;
    color: var(--fm-muted);
    padding-left: 12px;
    margin-left: 6px;
    border-left: 1px solid var(--fm-item-border);
    white-space: nowrap;
}
.fm-path a { color: var(--fm-btn); text-decoration: none; }
.fm-path a:hover { color: var(--fm-accent); text-decoration: underline; }
.fm-path-home i { font-size: 13px; }
.fm-path-sep { color: var(--fm-muted); opacity: .55; }
.fm-path-current {
    color: var(--fm-name);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
@media (max-width: 576px) {
    .fm-path { padding-left: 8px; margin-left: 4px; }
}

/* Dark-mode progress track (Bootstrap .progress) — storage list, encryption bars, etc. */
[data-theme="dark"] .progress {
    background-color: #2c3444;
}

/* -------- File manager: search clear + pagination -------- */
.fm-search-clear { color: var(--fm-muted); margin-left: 2px; text-decoration: none; flex: 0 0 auto; }
.fm-search-clear:hover { color: var(--fm-accent); }

.fm-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    flex-wrap: wrap;
    margin-top: 18px;
}
.fm-pager-info { font-size: 12.5px; color: var(--fm-muted); }
.fm-pager .pagination { margin: 0; }
.fm-pager .page-link {
    color: var(--fm-btn);
    background: var(--fm-item-bg);
    border-color: var(--fm-item-border);
    font-size: 13px;
}
.fm-pager .page-link:hover { background: var(--fm-item-hover); color: var(--fm-name); }
.fm-pager .page-item.active .page-link { background: #26648b; border-color: #2f7aa8; color: #fff; }
.fm-pager .page-item.disabled .page-link { color: var(--fm-muted); background: var(--fm-item-bg); border-color: var(--fm-item-border); }

/* -------- File manager: multi-select + bulk delete -------- */
.fm-check {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    margin: 0;
    display: flex;
}
.fm-check input {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #26648b;
}
.fm-item.selected {
    border-color: var(--fm-accent);
    box-shadow: 0 0 0 2px rgba(38,100,139,.35);
}
.fm-list .fm-check {
    position: static;
    margin: 0 2px 0 10px;
    align-items: center;
    flex: 0 0 auto;
}

.fm-bulkbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin-bottom: 14px;
    border: 1px solid var(--fm-item-border);
    background: var(--fm-toolbar-bg);
    border-radius: 12px;
}
.fm-bulkbar[hidden] { display: none; }
.fm-bulk-all {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--fm-muted);
    cursor: pointer;
    margin: 0;
}
.fm-bulk-all input { width: 15px; height: 15px; accent-color: #26648b; }
.fm-bulk-count { font-size: 13px; color: var(--fm-name); font-weight: 600; }
.fm-bulk-actions { margin-left: auto; display: flex; gap: 8px; }
.fm-bulk-actions .btn { letter-spacing: normal; text-transform: none; }

/* Custom (darker) file-manager checkboxes — native ones render bright white in
   dark mode because accent-color only tints the checked state. */
.fm-check input,
.fm-bulk-all input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    flex: 0 0 auto;
    border-radius: 4px;
    border: 1px solid #b6c2ce;
    background: #f3f6f9;
    cursor: pointer;
    position: relative;
    transition: background .12s, border-color .12s;
}
.fm-check input:hover,
.fm-bulk-all input:hover { border-color: #2f7aa8; }
.fm-check input:checked,
.fm-check input:indeterminate,
.fm-bulk-all input:checked,
.fm-bulk-all input:indeterminate {
    background: #26648b;
    border-color: #2f7aa8;
}
.fm-check input:checked::after,
.fm-bulk-all input:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.fm-check input:indeterminate::after,
.fm-bulk-all input:indeterminate::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 7px;
    width: 8px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
}
[data-theme="dark"] .fm-check input,
[data-theme="dark"] .fm-bulk-all input {
    background: #1b2029;
    border-color: #3a4457;
}
[data-theme="dark"] .fm-check input:hover,
[data-theme="dark"] .fm-bulk-all input:hover { border-color: #4a86a3; }
[data-theme="dark"] .fm-check input:checked,
[data-theme="dark"] .fm-check input:indeterminate,
[data-theme="dark"] .fm-bulk-all input:checked,
[data-theme="dark"] .fm-bulk-all input:indeterminate {
    background: #1f6f86;
    border-color: #2b7f99;
}

/* ── Sidebar: services that are switched off ──────────────────────────────────
   A disabled service used to vanish from the sidebar, which reads as "CDNShark
   does not offer this" to someone who just saw it advertised. The entry now
   stays, dimmed and unclickable, with a Soon badge. */
.nav-link-soon {
    /* .45 read as "this entry is gone" next to its full-strength neighbours,
       which defeats the purpose of keeping it. Muted enough to say "not
       available", strong enough to be read. */
    opacity: .75;
    cursor: default;
    display: flex;
    align-items: center;
    /* The live items are <a>; this is a <div>, so inherit rather than let the
       browser fall back to body colour. */
    color: inherit;
}

.nav-link-soon:hover {
    /* Kill the hover affordance the sibling links have — nothing happens here. */
    background: none;
    opacity: .75;
}

.nav-soon-badge {
    margin-left: auto;
    padding: 1px 6px;
    border: 1px solid currentColor;
    border-radius: 10px;
    font-size: 9px;
    line-height: 1.5;
    letter-spacing: .04em;
    text-transform: uppercase;
    /* Full strength, and amber rather than inherited: the badge is the part
       that says WHY the row is muted, so it must not be muted too. */
    opacity: 1;
    color: #e0a83a;
    white-space: nowrap;
}

/* ── Sidebar: products this customer's PLAN does not include ──────────────────
   Different from .nav-link-soon above, and deliberately so. "Soon" means nobody
   can buy it — present and readable, but not a link, because there is nowhere
   useful to send them. "Upgrade" means the product exists and this customer just
   isn't on a plan that sells it, so the entry stays a live link to the upgrade
   page at full strength: dimming it would hide the very thing we want them to
   click. Neither state may ever remove the row. */
.nav-link-locked {
    display: flex;
    align-items: center;
}

.nav-upgrade-badge {
    border-color: #3ddc84;
    color: #3ddc84;
    opacity: 1;
}

/* ── Impersonation banner ────────────────────────────────────────────────────
   Shown while an admin is signed in as another user. body is `display:flex;
   flex-direction:column`, so this sits above #main-container as a flex item and
   needs no offset compensation. flex-shrink:0 keeps it from being squeezed away
   when the content below is tall. */
.impersonation-banner {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 16px;
    background: #ffc107;
    color: #212529;
    font-size: 14px;
    border-bottom: 1px solid #d39e00;
}

[data-theme="dark"] .impersonation-banner {
    background: #b8860b;
    color: #fff;
    border-bottom-color: #8a6508;
}

/* ── Getting-started checklist (customer dashboard) ────────────────────────── */
.onboarding-step-mark {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    background: #e9ecef;
    color: #6c757d;
    border: 1px solid #dee2e6;
}

.onboarding-step-mark.is-next {
    background: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}

.onboarding-step-mark.is-done {
    background: #198754;
    border-color: #198754;
    color: #fff;
}

[data-theme="dark"] .onboarding-step-mark {
    background: #2a2f3d;
    border-color: #3a4152;
    color: #9aa3b2;
}


/* ── Responsive tables ────────────────────────────────────────────────────────
   Portal list tables carry `dt-responsive`; the shared initializer in the footer
   turns them into DataTables with `responsive: true`, so low-priority columns
   fold into a tap-to-expand row instead of falling off the side of the screen.
   Priority is declared per column with data-priority on the <th>.

   These rules only make the result comfortable on a phone. */
table.dt-responsive td .btn,
table.dataTable td .btn {
    white-space: nowrap;
}

@media (max-width: 576px) {
    table.dt-responsive,
    table.dataTable {
        font-size: 13px;
    }

    table.dt-responsive th,
    table.dt-responsive td {
        padding: 8px 6px;
    }

    /* Several icon buttons crushed together at the row edge are hard to hit;
       give each its own line and a real tap target. */
    table.dt-responsive td:last-child .btn {
        margin-bottom: 4px;
    }

    /* The expanded child row lists hidden columns as label/value pairs — let the
       values wrap rather than forcing the page sideways again. */
    table.dtr-details td,
    ul.dtr-details li {
        word-break: break-word;
    }
}


/* ── Tab strips (.settings-tabs) ──────────────────────────────────────────────
   Bootstrap's .nav-tabs draws a box around every item, which bursts its
   container once there are more than a handful — the Pull Zone editor has nine
   and admin Settings has twelve. This is the same underline treatment as the
   Cloud VPS manage panel: one row of plain labels, active one underlined.

   Lifted out of admin/system-settings/index.blade.php so the customer portal can
   use it too rather than the rule living inside one page's inline <style>. */
#content .settings-tabs { display:flex; gap:.25rem; padding:0; border-bottom:1px solid #232936; overflow-x:auto; flex-wrap:nowrap; }
#content .settings-tabs .nav-item { flex:0 0 auto; }
#content .settings-tabs .nav-link { background:transparent; border:0; border-bottom:2px solid transparent; color:#8b93a3; padding:.7rem .9rem; font-size:.85rem; white-space:nowrap; border-radius:0; }
#content .settings-tabs .nav-link:hover { color:#cdd3dd; }
#content .settings-tabs .nav-link.active { color:#7aa2ff; border-bottom-color:#5b8cff; background:transparent; }

@media (max-width: 768px) {
    /* On a phone a sideways scroller hides that other tabs even exist — there is
       no affordance for it. Wrap instead, so every tab is on screen at once. */
    #content .settings-tabs {
        flex-wrap: wrap;
        overflow-x: visible;
        gap: 0;
    }
    #content .settings-tabs .nav-link {
        padding: .55rem .7rem;
        font-size: .8rem;
    }
}


/* ── Raw request logs: column priority ────────────────────────────────────────
   Ten columns with min-widths (Timestamp 145px, Path 200px) come to roughly
   1000px, so on a phone you could scroll as far as Path and the rest — Status
   included — sat off the end. This table is built by hand in
   public/js/CDNShark/portal-analytics-raw-logs.js, not by DataTables, so it
   cannot use the shared tap-to-expand initializer; nth-child is safe here
   because that one file is the only thing that emits these cells, in this order:

     1 Timestamp  2 Host  3 Method  4 Path  5 Status
     6 Cache      7 Country  8 TTFB  9 Bytes  10 IP

   Timestamp, Path and Status are what make a log line readable, so they stay.
   Everything dropped is still on the row's title attribute or recoverable by
   widening the window. */
@media (max-width: 992px) {
    #logs-table th:nth-child(6),  #logs-table td:nth-child(6),   /* Cache   */
    #logs-table th:nth-child(7),  #logs-table td:nth-child(7),   /* Country */
    #logs-table th:nth-child(8),  #logs-table td:nth-child(8),   /* TTFB    */
    #logs-table th:nth-child(9),  #logs-table td:nth-child(9) {  /* Bytes   */
        display: none;
    }
}

@media (max-width: 768px) {
    #logs-table th:nth-child(2),  #logs-table td:nth-child(2),   /* Host   */
    #logs-table th:nth-child(3),  #logs-table td:nth-child(3),   /* Method */
    #logs-table th:nth-child(10), #logs-table td:nth-child(10) { /* IP     */
        display: none;
    }

    /* Freed of the other columns, the path can have the room it actually needs. */
    #logs-table .analytics-rawlogs-cell-path { max-width: none; }
    .analytics-rawlogs-th-ts   { min-width: 0; }
    .analytics-rawlogs-th-path { min-width: 0; }

    /* A sticky header inside a horizontally scrolling box misplaces itself on
       mobile Safari; it earns nothing on a short page. */
    #logs-table thead.sticky-top { position: static; }
}


/* ── Checkout on a phone ──────────────────────────────────────────────────────
   The global `.nav-link` rule further up is written for the SIDEBAR — it puts
   display:flex, padding and an 8px radius on every nav link on the site. In the
   checkout's gateway picker that squeezed each option into a narrow box whose
   label wrapped over four lines, rounded into a blob, with "Credit Balance"
   pushed off the right edge. The picker now uses .settings-tabs; these rules
   cover the rest of the page. */
@media (max-width: 576px) {
    /* Stripe lays its Card Element out inline (number · MM/YY · CVC) and drops
       fields off the right when the box is too narrow, which is why no CVC was
       reachable. Trim the padding and make sure it can never exceed the screen. */
    #card-element {
        padding: 8px 6px;
        max-width: 100%;
        overflow: hidden;
    }

    #card-element iframe {
        width: 100% !important;
        max-width: 100%;
    }

    /* Long summary values should wrap rather than widen the card. */
    .checkout-summary td,
    .checkout-summary th {
        word-break: break-word;
    }

    /* Give the last control room instead of sitting flush against the bottom of
       the viewport, where it collides with anything floating there. */
    #content {
        padding-bottom: 5rem;
    }
}


/* ── Checkout payment methods ─────────────────────────────────────────────────
   A stacked list of selectable rows rather than a tab strip. Tabs put three
   gateways in one horizontal row, which on a phone squeezed each into a narrow
   box, wrapped its label over four lines and pushed the last option off screen.
   A row per method reads the same at any width and shows the accepted card
   brands before the customer commits. */
.pay-methods {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.pay-method {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem .9rem;
    border: 1px solid rgba(128, 128, 128, .3);
    border-radius: 10px;
    cursor: pointer;
    margin: 0;
    transition: border-color .15s, background .15s;
}

.pay-method:hover {
    border-color: rgba(91, 140, 255, .55);
}

.pay-method.active {
    border-color: #5b8cff;
    background: rgba(91, 140, 255, .10);
}

/* A real radio, not a faked one: it stays keyboard reachable and screen readers
   announce the group correctly. */
.pay-method-radio {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #5b8cff;
}

.pay-method-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(128, 128, 128, .3);
    border-radius: 6px;
    font-size: 1.05rem;
}

.pay-method-label {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: .92rem;
}

.pay-method-brands {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: 1.5rem;
    line-height: 1;
    opacity: .9;
}

.pay-method-amount {
    font-size: .8rem;
    font-weight: 600;
    opacity: .75;
}

@media (max-width: 480px) {
    /* Keep the row on one line on the narrowest phones — the label and the tap
       target matter more than the brand marks, which are decorative here. */
    .pay-method-brands:not(.pay-method-amount) {
        display: none;
    }
    .pay-method {
        padding: .7rem .75rem;
        gap: .6rem;
    }
}