/**
 * Terminal Modernist Collapsible Dashboard Theme for YOURLS
 * Design System Specification from collapsible_admin_dashboard/DESIGN.md & code.html
 */

/* ==========================================================================
   1. CSS Custom Properties / Design Tokens
   ========================================================================== */
:root {
    --surface: #15130f;
    --surface-main: #16130b;
    --surface-dim: #15130f;
    --surface-bright: #3d392f;
    --surface-container-lowest: #100e0a;
    --surface-container-low: #1e1b17;
    --surface-container: #221f1b;
    --surface-container-high: #2c2a25;
    --surface-container-highest: #373430;
    --surface-variant: #373430;
    --surface-tint: #e0c388;
    
    --on-surface: #e9e2d4;
    --on-surface-variant: #cfc5b6;
    --on-background: #e8e1da;
    
    --outline: #989081;
    --outline-variant: #4c463a;
    --border-muted: rgba(236, 234, 229, 0.25);
    --border-subtle: rgba(236, 234, 229, 0.12);
    
    --accent-amber: #eec35e;
    --primary: #ffffff;
    --primary-container: #fddfa1;
    --on-primary: #3f2e01;
    --on-primary-fixed: #251a00;
    --accent-dim: rgba(238, 195, 94, 0.15);
    --highlight: rgba(238, 195, 94, 0.45);
    
    --error: #ffb4ab;
    --error-red: #ffb4ab;
    --error-container: #93000a;
    --on-error: #690005;
    --on-error-container: #ffdad6;
    
    --sidebar-width: 256px;
    --sidebar-collapsed-width: 68px;
    --topbar-height: 64px;
    
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* ==========================================================================
   2. Global Reset & Base Typography
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    background-color: var(--surface-main);
    color: var(--on-surface);
    font-family: var(--font-mono);
    font-size: clamp(13px, 1.8vw, 14px);
    line-height: 1.54;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    background-color: var(--surface-main) !important;
    color: var(--on-surface) !important;
    font-family: var(--font-mono) !important;
    font-size: clamp(13px, 1.8vw, 14px) !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

/* Material Symbols Outlined Configuration */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    vertical-align: middle;
    user-select: none;
}

/* Selection Highlight */
::selection {
    background-color: var(--accent-amber);
    color: var(--surface-main);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--surface-container-lowest);
}
::-webkit-scrollbar-thumb {
    background: var(--outline-variant);
    border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent-amber);
}

a, a:link, a:visited {
    color: var(--accent-amber);
    text-decoration: none;
    transition: color 0.15s ease, opacity 0.15s ease;
    word-break: break-word;
}
a:hover {
    text-decoration: underline;
    color: #fff;
}

/* Default Heading Overrides with Fluid Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-mono);
    color: var(--on-surface);
    font-weight: 600;
    margin: 0 0 1rem 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

h1 { font-size: clamp(1.35rem, 4vw, 1.85rem); }
h2 { font-size: clamp(1.2rem, 3.2vw, 1.5rem); }
h3 { font-size: clamp(1.05rem, 2.8vw, 1.25rem); }
h4 { font-size: clamp(0.95rem, 2.4vw, 1.1rem); }

/* Paragraphs & Text */
p, div, li {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Code & Pre with Overflow Protection */
code, tt {
    font-family: var(--font-mono);
    background: var(--surface-container-high);
    color: var(--accent-amber);
    padding: 2px 6px;
    border: 1px solid var(--outline-variant);
    border-radius: 0;
    word-break: break-all;
    overflow-wrap: anywhere;
    font-size: clamp(0.75rem, 2vw, 0.85rem);
}

pre {
    font-family: var(--font-mono);
    background: var(--surface-container-high);
    color: var(--accent-amber);
    padding: 10px 14px;
    border: 1px solid var(--outline-variant);
    border-radius: 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: pre-wrap;
    word-break: break-all;
    overflow-wrap: anywhere;
    font-size: clamp(0.75rem, 2vw, 0.85rem);
    line-height: 1.5;
}

/* ==========================================================================
   3. Collapsible Sidebar Navigation (SideNavBar)
   ========================================================================== */
#terminal-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--sidebar-width);
    background-color: var(--surface-container-lowest);
    border-right: 1px solid var(--outline-variant);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* Instance Workspace Badge */
.terminal-workspace-card {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--outline-variant);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: var(--surface-dim);
    flex-shrink: 0;
}

.terminal-workspace-avatar {
    width: 32px;
    height: 32px;
    background-color: var(--surface-container-high);
    border: 1px solid var(--outline-variant);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-amber);
    flex-shrink: 0;
    font-weight: bold;
    font-size: 14px;
}

.terminal-workspace-info {
    flex: 1;
    min-width: 0;
}

.terminal-workspace-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--on-surface);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.terminal-workspace-badge {
    display: inline-block;
    background-color: var(--accent-amber);
    color: var(--on-primary-fixed);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0 4px;
    margin-top: 2px;
    line-height: 1.3;
}

/* Sidebar Navigation Items */
.terminal-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 0;
}

.terminal-nav-section-title {
    padding: 0.75rem 1.25rem 0.35rem 1.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--on-surface-variant);
    white-space: nowrap;
    opacity: 0.8;
}

.terminal-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.terminal-nav-item {
    margin: 1px 0;
}

.terminal-nav-link {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1.25rem;
    color: var(--on-surface-variant);
    text-transform: uppercase;
    font-size: 0.825rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.terminal-nav-link:hover {
    background-color: var(--surface-container-high);
    color: var(--on-surface);
    text-decoration: none;
}

.terminal-nav-link.active {
    background-color: var(--surface-variant);
    color: var(--accent-amber);
    border-left-color: var(--accent-amber);
    font-weight: 700;
}

.terminal-nav-link .material-symbols-outlined {
    font-size: 20px;
    flex-shrink: 0;
    color: inherit;
}

/* Sidebar Footer */
.terminal-sidebar-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--outline-variant);
    background-color: var(--surface-container-lowest);
    flex-shrink: 0;
}

/* Collapsed Sidebar Mode */
body.sidebar-collapsed #terminal-sidebar {
    width: var(--sidebar-collapsed-width);
}

body.sidebar-collapsed .terminal-brand-title span:not(.material-symbols-outlined),
body.sidebar-collapsed .terminal-brand-subtitle,
body.sidebar-collapsed .terminal-workspace-info,
body.sidebar-collapsed .terminal-nav-section-title,
body.sidebar-collapsed .terminal-nav-link span:not(.material-symbols-outlined),
body.sidebar-collapsed .terminal-sidebar-footer span:not(.material-symbols-outlined) {
    display: none !important;
}

body.sidebar-collapsed .terminal-sidebar-brand,
body.sidebar-collapsed .terminal-workspace-card,
body.sidebar-collapsed .terminal-nav-link,
body.sidebar-collapsed .terminal-sidebar-footer a {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

/* ==========================================================================
   4. Top App Bar (TopAppBar)
   ========================================================================== */
#terminal-topbar {
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    height: var(--topbar-height);
    background-color: var(--surface-dim);
    border-bottom: 1px solid var(--outline-variant);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

body.sidebar-collapsed #terminal-topbar {
    left: var(--sidebar-collapsed-width);
}

/* Topbar Left Controls */
.terminal-topbar-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 0 0 auto;
}

.terminal-hamburger-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--on-surface-variant);
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.terminal-hamburger-btn:hover {
    color: var(--accent-amber);
    background-color: var(--surface-container-high);
}

/* Topbar Center Shortener Form - Centered */
.terminal-topbar-center {
    flex: 1;
    max-width: 620px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.terminal-topbar-shortener {
    display: flex;
    width: 100%;
    background-color: var(--surface-container);
    border: 1px solid var(--outline-variant);
    transition: border-color 0.15s ease;
}

.terminal-topbar-shortener:focus-within {
    border-color: var(--accent-amber);
}

.terminal-topbar-shortener input[type="text"] {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--on-surface);
    padding: 8px 12px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    outline: none;
    min-width: 140px;
}

.terminal-topbar-shortener input[type="text"]::placeholder {
    color: var(--on-surface-variant);
    opacity: 0.7;
}

.terminal-topbar-shortener-actions {
    display: flex;
    align-items: center;
    background-color: var(--surface-container-low);
    border-left: 1px solid var(--outline-variant);
    padding: 0 8px;
    gap: 6px;
}

.terminal-topbar-keyword-input {
    width: 90px;
    background: var(--surface-container-lowest) !important;
    border: 1px solid var(--outline-variant) !important;
    color: var(--accent-amber) !important;
    padding: 4px 6px !important;
    font-size: 0.75rem !important;
}

.terminal-topbar-post-btn {
    background: transparent;
    border: 1px solid var(--accent-amber);
    color: var(--accent-amber);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 4px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.terminal-topbar-post-btn:hover {
    background-color: var(--accent-amber);
    color: var(--surface-main);
}

/* Topbar Right Controls (Search URLs) */
.terminal-topbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.terminal-topbar-search-box {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
    padding: 4px 8px;
    width: 210px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.terminal-topbar-search-box:focus-within {
    border-color: var(--accent-amber);
    background-color: var(--surface-container);
}

.terminal-topbar-search-box .material-symbols-outlined {
    font-size: 16px;
    color: var(--on-surface-variant);
}

.terminal-topbar-search-box input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--on-surface);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    outline: none;
    min-width: 0;
}

.terminal-topbar-search-box input::placeholder {
    color: var(--on-surface-variant);
    opacity: 0.7;
}

.terminal-topbar-search-box kbd {
    background-color: var(--surface-container-highest);
    border: 1px solid var(--outline-variant);
    padding: 1px 4px;
    font-size: 0.65rem;
    color: var(--on-surface-variant);
    font-family: var(--font-mono);
}

/* ==========================================================================
   5. Main Content Container (#wrap)
   ========================================================================== */
#wrap {
    margin-left: var(--sidebar-width) !important;
    margin-right: 0 !important;
    margin-top: var(--topbar-height) !important;
    margin-bottom: 0 !important;
    max-width: calc(100vw - var(--sidebar-width)) !important;
    width: auto !important;
    min-height: calc(100vh - var(--topbar-height)) !important;
    padding: 1.5rem 2rem !important;
    background: var(--surface-main) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: left !important;
    transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.sidebar-collapsed #wrap {
    margin-left: var(--sidebar-collapsed-width) !important;
    max-width: calc(100vw - var(--sidebar-collapsed-width)) !important;
}

/* Hide Default Headers/Menus that are Replaced by the Sidebar & Topbar */
header[role="banner"],
#admin_menu,
#yourls-logo {
    display: none !important;
}

/* Hide or restyle default YOURLS title texts */
p#overall_tracking {
    display: none !important;
}

/* Legacy Add Form Hide (since it is controlled via the sleek topbar or modal) */
#new_url {
    display: none !important;
}

/* ==========================================================================
   6. Table Container Card (.terminal-table-card)
   ========================================================================== */
.terminal-card {
    background-color: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
}

.terminal-card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--outline-variant);
    background-color: var(--surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.terminal-card-title-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.terminal-card-title-group .material-symbols-outlined {
    color: var(--accent-amber);
    font-size: 24px;
}

.terminal-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--on-surface);
    margin: 0;
}

.terminal-card-badge {
    background-color: var(--surface-container-highest);
    border: 1px solid var(--outline-variant);
    color: var(--on-surface-variant);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
}

.terminal-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: transparent;
    border: 1px solid var(--outline-variant);
    color: var(--on-surface);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 6px 14px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.terminal-btn:hover {
    background-color: var(--surface-container-high);
    border-color: var(--outline);
    color: #fff;
    text-decoration: none;
}

.terminal-btn-primary {
    border-color: var(--accent-amber);
    color: var(--accent-amber);
}

.terminal-btn-primary:hover {
    background-color: var(--accent-amber);
    color: var(--surface-main);
}

/* Card Filter Toolbar */
.terminal-card-toolbar {
    padding: 0.875rem 1.5rem;
    border-bottom: 1px solid var(--outline-variant);
    background-color: var(--surface-container);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.terminal-filter-search-box {
    position: relative;
    width: 320px;
    max-width: 100%;
}

.terminal-filter-search-box .material-symbols-outlined {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--on-surface-variant);
    font-size: 18px;
}

.terminal-filter-search-box input {
    width: 100%;
    background-color: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    color: var(--on-surface);
    padding: 8px 36px 8px 36px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    outline: none;
}

.terminal-filter-search-box input:focus {
    border-color: var(--accent-amber);
}

.terminal-filter-search-box kbd {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--surface-container-highest);
    border: 1px solid var(--outline-variant);
    color: var(--on-surface-variant);
    font-size: 0.65rem;
    padding: 1px 4px;
}

/* ==========================================================================
   7. Brutalist High-Contrast Data Table (#main_table, .tblSorter)
   ========================================================================== */
.terminal-table-wrapper {
    overflow-x: auto;
    background-color: var(--surface-container-lowest);
}

table#main_table,
table.tblSorter {
    width: 100% !important;
    border-collapse: collapse !important;
    background-color: var(--surface-container-lowest) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.825rem !important;
    margin: 0 !important;
    border: none !important;
}

/* Table Head */
table#main_table thead th,
table.tblSorter thead th {
    background-color: var(--surface-container) !important;
    color: var(--on-surface) !important;
    border: none !important;
    border-bottom: 1px solid var(--outline-variant) !important;
    border-right: 1px solid var(--outline-variant) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.775rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 12px 14px !important;
    text-align: left !important;
    position: sticky;
    top: 0;
    z-index: 10;
}

table#main_table thead th:last-child,
table.tblSorter thead th:last-child {
    border-right: none !important;
}

/* Sort Arrows */
table.tblSorter thead tr .tablesorter-header {
    background-image: none !important;
    cursor: pointer;
}
table.tblSorter thead tr .tablesorter-header::after {
    content: ' ⇅';
    opacity: 0.4;
    font-size: 0.75rem;
}
table.tblSorter thead tr .tablesorter-headerAsc::after {
    content: ' ▲';
    color: var(--accent-amber);
    opacity: 1;
}
table.tblSorter thead tr .tablesorter-headerDesc::after {
    content: ' ▼';
    color: var(--accent-amber);
    opacity: 1;
}

/* Table Body Cells */
table#main_table tbody td,
table.tblSorter tbody td {
    background-color: transparent !important;
    color: var(--on-surface) !important;
    border: none !important;
    border-bottom: 1px solid var(--outline-variant) !important;
    border-right: 1px solid var(--outline-variant) !important;
    padding: 12px 14px !important;
    font-family: var(--font-mono) !important;
    font-size: 0.825rem !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
}

table#main_table tbody td:last-child,
table.tblSorter tbody td:last-child {
    border-right: none !important;
}

/* Row Striping & Hover */
table#main_table tbody tr:nth-child(even),
table.tblSorter tbody tr.normal-row {
    background-color: var(--surface-container-lowest) !important;
}

table#main_table tbody tr:nth-child(odd),
table.tblSorter tbody tr.alt-row {
    background-color: rgba(55, 52, 48, 0.15) !important;
}

table#main_table tbody tr:hover,
table.tblSorter tbody tr:hover {
    background-color: var(--surface-container-low) !important;
}

/* Custom Table Cells Styling */
td.keyword a {
    color: var(--accent-amber) !important;
    font-weight: 700 !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
td.keyword a::before {
    content: 'link';
    font-family: 'Material Symbols Outlined';
    font-size: 14px;
    font-weight: normal;
    color: var(--on-surface-variant);
}

td.url a:first-child {
    color: var(--on-surface) !important;
    font-weight: 600 !important;
    font-size: 0.85rem;
    display: block;
    margin-bottom: 2px;
}
td.url small {
    display: block;
    color: var(--on-surface-variant) !important;
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 400px;
}
td.url small a {
    color: var(--on-surface-variant) !important;
}

td.timestamp {
    color: var(--on-surface-variant) !important;
    font-size: 0.775rem !important;
    white-space: nowrap;
}

td.clicks {
    font-weight: 700;
    color: var(--on-surface) !important;
    text-align: center;
}

td.ip {
    color: var(--on-surface-variant) !important;
    font-size: 0.75rem;
}

/* Actions Toolbar in Row */
td.actions {
    text-align: right;
    white-space: nowrap;
    min-width: 140px;
}

td.actions .button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border: 1px solid var(--outline-variant) !important;
    background-color: var(--surface-container-high) !important;
    border-radius: 6px !important;
    margin: 0 2px !important;
    cursor: pointer !important;
    font-size: 0 !important;
    text-indent: 0 !important;
    color: transparent !important;
    float: none !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
}

td.actions .button::before {
    font-family: 'Material Symbols Outlined' !important;
    font-size: 16px !important;
    font-weight: normal !important;
    display: inline-block !important;
    color: var(--on-surface-variant) !important;
    transition: color 0.15s ease, transform 0.15s ease !important;
}

td.actions .button_stats::before  { content: 'query_stats' !important; }
td.actions .button_share::before  { content: 'share' !important; }
td.actions .button_edit::before   { content: 'edit' !important; }
td.actions .button_delete::before { content: 'delete' !important; }

td.actions .button_edit:hover {
    border-color: var(--accent-amber) !important;
    background-color: rgba(235, 169, 0, 0.2) !important;
    transform: translateY(-1px);
}
td.actions .button_edit:hover::before {
    color: var(--accent-amber) !important;
}

td.actions .button_delete:hover {
    border-color: var(--error-red) !important;
    background-color: rgba(239, 83, 80, 0.2) !important;
    transform: translateY(-1px);
}
td.actions .button_delete:hover::before {
    color: var(--error-red) !important;
}

td.actions .button_share:hover {
    border-color: #69f0ae !important;
    background-color: rgba(105, 240, 174, 0.2) !important;
    transform: translateY(-1px);
}
td.actions .button_share:hover::before {
    color: #69f0ae !important;
}

td.actions .button_stats:hover {
    border-color: #42a5f5 !important;
    background-color: rgba(66, 165, 245, 0.2) !important;
    transform: translateY(-1px);
}
td.actions .button_stats:hover::before {
    color: #42a5f5 !important;
}

/* ==========================================================================
   8. Table Footer, Search Filter Form & Pagination
   ========================================================================== */
table.tblSorter tfoot th,
#main_table tfoot th {
    background-color: var(--surface-container) !important;
    border-top: 1px solid var(--outline-variant) !important;
    padding: 1.25rem !important;
    color: var(--on-surface) !important;
}

#filter_form {
    float: left;
    max-width: 65%;
    font-size: 0.8rem;
    line-height: 2;
}

#filter_form select,
#filter_form input.text {
    background-color: var(--surface-container-lowest) !important;
    border: 1px solid var(--outline-variant) !important;
    color: var(--on-surface) !important;
    font-family: var(--font-mono) !important;
    padding: 4px 8px !important;
    font-size: 0.75rem !important;
    border-radius: 0 !important;
}

#filter_form select:focus,
#filter_form input.text:focus {
    border-color: var(--accent-amber) !important;
}

#filter_form input.button {
    background-color: var(--accent-amber) !important;
    border: 1px solid var(--accent-amber) !important;
    color: var(--surface-main) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.75rem !important;
    font-weight: bold !important;
    padding: 4px 8px !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    cursor: pointer !important;
}

#filter_form input.button:hover {
    background-color: #ffd54f !important;
}

#filter_buttons {
    margin-top: 4px;
}

/* Pagination */
#pagination {
    float: right;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--on-surface-variant);
    line-height: 2;
}

#pagination span {
    color: var(--accent-amber);
    font-weight: bold;
}

#pagination a {
    color: var(--on-surface) !important;
    margin: 0 4px;
    padding: 2px 6px;
    border: 1px solid var(--outline-variant);
    background: var(--surface-container-high);
    text-decoration: none;
    border-radius: 0;
}

#pagination a:hover {
    border-color: var(--accent-amber) !important;
    color: var(--accent-amber) !important;
}

/* Clearfix for tfoot */
table.tblSorter tfoot tr:after,
#main_table tfoot tr:after {
    content: "";
    display: table;
    clear: both;
}

/* ==========================================================================
   9. Inline Edit Row & Delete Confirmation Dialog
   ========================================================================== */
tr.edit-row {
    background-color: #1a1710 !important;
}

tr.edit-row td {
    background-color: #1a1710 !important;
    border-top: 1px solid var(--accent-amber) !important;
    border-bottom: 1px solid var(--accent-amber) !important;
    padding: 1.25rem 1rem !important;
    vertical-align: top !important;
}

tr.edit-row strong {
    color: var(--accent-amber) !important;
    font-size: 0.75rem !important;
    font-family: var(--font-sans) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-right: 8px !important;
    display: inline-block !important;
    min-width: 75px !important;
}

tr.edit-row input.text {
    background-color: #100e0a !important;
    border: 1px solid var(--outline-variant) !important;
    color: #ffffff !important;
    font-family: var(--font-mono) !important;
    padding: 6px 12px !important;
    font-size: 0.825rem !important;
    margin: 4px 0 !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    outline: none !important;
}

tr.edit-row input.text:focus {
    border-color: var(--accent-amber) !important;
    box-shadow: 0 0 0 2px rgba(235, 169, 0, 0.2) !important;
}

tr.edit-row input.button {
    font-family: var(--font-sans) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Save Button */
tr.edit-row input[id^="edit-submit-"] {
    background-color: var(--accent-amber) !important;
    border: 1px solid var(--accent-amber) !important;
    color: #12100a !important;
    margin-right: 6px !important;
}

tr.edit-row input[id^="edit-submit-"]:hover {
    background-color: #ffd54f !important;
    border-color: #ffd54f !important;
    box-shadow: 0 0 10px rgba(235, 169, 0, 0.3) !important;
}

/* Cancel Button */
tr.edit-row input[id^="edit-close-"] {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--outline-variant) !important;
    color: var(--on-surface-variant) !important;
}

tr.edit-row input[id^="edit-close-"]:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

/* Delete Modal Dialog */
#delete-confirm-dialog {
    background-color: var(--surface-container-low) !important;
    border: 2px solid var(--error-red) !important;
    border-radius: 0 !important;
    color: var(--on-surface) !important;
    font-family: var(--font-mono) !important;
    padding: 0 !important;
    width: 480px !important;
    max-width: 90vw !important;
}

#delete-confirm-dialog::backdrop {
    background-color: rgba(16, 14, 10, 0.85) !important;
    backdrop-filter: blur(2px);
}

#delete-confirm-dialog > div[name="dialog_title"] {
    background-color: var(--surface-container-high) !important;
    color: var(--error-red) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.875rem 1.25rem !important;
    border-bottom: 1px solid var(--outline-variant) !important;
}

#delete-confirm-dialog div.confirm-message {
    background-color: var(--surface-container-low) !important;
    padding: 1.25rem !important;
    color: var(--on-surface) !important;
    width: 100% !important;
    height: auto !important;
}

#delete-confirm-dialog div.confirm-message ul {
    border-left: 3px solid var(--error-red) !important;
    background-color: var(--surface-container-lowest) !important;
    padding: 0.75rem 1rem !important;
    list-style: none !important;
}

#delete-confirm-dialog div.confirm-message ul li {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    color: var(--on-surface-variant);
}

#delete-confirm-dialog div.confirm-message ul li span {
    color: var(--on-surface) !important;
    font-weight: 600;
    border: none !important;
}

#delete-confirm-dialog div.button-group {
    background-color: var(--surface-container) !important;
    border-top: 1px solid var(--outline-variant) !important;
    padding: 0.875rem 1.25rem !important;
    text-align: right !important;
    width: 100% !important;
    height: auto !important;
}

#delete-confirm-dialog div.button-group input.button {
    font-family: var(--font-mono) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 6px 14px !important;
    border-radius: 0 !important;
    cursor: pointer !important;
}

#delete-confirm-dialog div.button-group input.primary {
    background-color: var(--error-container) !important;
    border: 1px solid var(--error-red) !important;
    color: var(--error-red) !important;
}

#delete-confirm-dialog div.button-group input.primary:hover {
    background-color: var(--error-red) !important;
    color: var(--surface-main) !important;
}

/* ==========================================================================
   10. Quick Share Box (#shareboxes)
   ========================================================================== */
#shareboxes {
    margin: 1.5rem 0 !important;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

div.share {
    background-color: var(--surface-container-low) !important;
    border: 1px solid var(--outline-variant) !important;
    border-radius: 0 !important;
    padding: 1.25rem !important;
    height: auto !important;
    float: none !important;
}

#copybox {
    flex: 1;
    min-width: 280px;
}

#sharebox {
    flex: 2;
    min-width: 320px;
}

div.share h2 {
    font-size: 0.9rem !important;
    text-transform: uppercase;
    color: var(--accent-amber);
    margin-bottom: 0.75rem !important;
}

#copylink {
    width: 100%;
    background-color: var(--surface-container-lowest) !important;
    border: 1px solid var(--accent-amber) !important;
    color: var(--accent-amber) !important;
    font-family: var(--font-mono) !important;
    font-weight: bold;
    padding: 8px 10px !important;
    border-radius: 0 !important;
}

#tweet_body {
    width: 100% !important;
    height: 80px !important;
    background-color: var(--surface-container-lowest) !important;
    border: 1px solid var(--outline-variant) !important;
    color: var(--on-surface) !important;
    font-family: var(--font-mono) !important;
    padding: 8px 10px !important;
    border-radius: 0 !important;
    resize: vertical;
}

#share_links a {
    display: inline-flex;
    align-items: center;
    background-color: var(--surface-container-high);
    border: 1px solid var(--outline-variant);
    color: var(--on-surface);
    padding: 4px 10px;
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-right: 6px;
}

#share_links a:hover {
    border-color: var(--accent-amber);
    color: var(--accent-amber);
    text-decoration: none;
}

/* ==========================================================================
   11. Notifications (.jquery-notify-bar, .notice)
   ========================================================================== */
.jquery-notify-bar {
    background-color: var(--surface-container-high) !important;
    border-bottom: 2px solid var(--accent-amber) !important;
    color: var(--on-surface) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    padding: 1rem !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
    z-index: 99999 !important;
}

.jquery-notify-bar.success {
    background-color: #142818 !important;
    border-bottom-color: #5ef084 !important;
    color: #5ef084 !important;
}

.jquery-notify-bar.error,
.jquery-notify-bar.fail {
    background-color: #2a1212 !important;
    border-bottom-color: var(--error-red) !important;
    color: var(--error-red) !important;
}

.notice {
    background-color: var(--surface-container-low) !important;
    border: 1px solid var(--outline-variant) !important;
    border-left: 4px solid var(--accent-amber) !important;
    border-radius: 0 !important;
    color: var(--on-surface) !important;
    padding: 10px 16px !important;
    margin: 1rem 0 !important;
    width: auto !important;
}

/* ==========================================================================
   12. Login Screen (#login)
   ========================================================================== */
body.login {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--surface-main) !important;
}

body.login #wrap {
    margin: 0 auto !important;
    max-width: 440px !important;
    padding: 0 !important;
    background: transparent !important;
}

#login {
    background-color: var(--surface-container-low) !important;
    border: 1px solid var(--outline-variant) !important;
    padding: 2rem !important;
    max-width: 420px !important;
    margin: 4rem auto 0 auto !important;
    position: relative;
}

#login input.text {
    width: 100% !important;
    background-color: var(--surface-container-lowest) !important;
    border: 1px solid var(--outline-variant) !important;
    color: var(--on-surface) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.85rem !important;
    padding: 10px !important;
    border-radius: 0 !important;
    margin-top: 4px !important;
}

#login input.text:focus {
    border-color: var(--accent-amber) !important;
}

#login input#submit {
    background-color: var(--accent-amber) !important;
    border: 1px solid var(--accent-amber) !important;
    color: var(--surface-main) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 8px 18px !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    margin-top: 1rem !important;
}

#login input#submit:hover {
    background-color: #ffffff !important;
}

/* ==========================================================================
   13. Floating Action Button (Support/Help)
   ========================================================================== */
#terminal-fab-support {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    background-color: var(--surface-variant);
    border: 1px solid var(--outline-variant);
    color: var(--accent-amber);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 800;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

#terminal-fab-support:hover {
    background-color: var(--surface-container);
    border-color: var(--accent-amber);
    transform: scale(1.05);
}

/* ==========================================================================
   14. Subpages: Tools, Plugins, Stats & Footer
   ========================================================================== */
.sub_wrap {
    max-width: 100% !important;
    text-align: left !important;
    color: var(--on-surface) !important;
}

a.bookmarklet {
    background-color: var(--surface-container-high) !important;
    border: 1px solid var(--accent-amber) !important;
    color: var(--accent-amber) !important;
    border-radius: 0 !important;
    font-family: var(--font-mono) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    padding: 6px 12px 6px 28px !important;
}

a.bookmarklet:hover {
    background-color: var(--accent-amber) !important;
    color: var(--surface-main) !important;
}

#footer {
    display: none !important; /* Replaced by dashboard status and sidebar */
}

/* ==========================================================================
   15. API Key Management Interface Styles
   ========================================================================== */
.terminal-api-keys-container {
    max-width: 1200px;
    margin: 0 auto;
}

.terminal-page-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--outline-variant);
}

.terminal-alert {
    padding: 1rem 1.25rem;
    border: 1px solid var(--outline-variant);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
}

.terminal-alert-success {
    background-color: rgba(76, 175, 80, 0.1);
    border-color: #4caf50;
    color: #a5d6a7;
}

.terminal-alert-success .material-symbols-outlined {
    color: #4caf50;
    font-size: 20px;
}

.terminal-key-reveal-box {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    padding: 6px 10px;
    width: fit-content;
}

.terminal-key-reveal-box code {
    color: var(--accent-amber);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

.terminal-btn-copy {
    background: var(--accent-amber);
    color: var(--surface-main);
    border: none;
    padding: 3px 8px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
}

.terminal-key-display {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    padding: 4px 8px;
}

.terminal-key-display code {
    color: var(--accent-amber);
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

.terminal-btn-icon {
    background: transparent;
    border: none;
    color: var(--on-surface-variant);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
}

.terminal-btn-icon:hover {
    color: var(--accent-amber);
}

.terminal-status-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 0.7rem;
    font-weight: 700;
    font-family: var(--font-mono);
    border-radius: 0;
    letter-spacing: 0.05em;
}

.badge-active {
    background: rgba(76, 175, 80, 0.15);
    color: #81c784;
    border: 1px solid rgba(76, 175, 80, 0.4);
}

.badge-disabled {
    background: rgba(255, 84, 73, 0.15);
    color: #ff8a80;
    border: 1px solid rgba(255, 84, 73, 0.4);
}

.terminal-data-table th {
    background-color: var(--surface-container-lowest) !important;
    color: var(--on-surface-variant) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--outline-variant) !important;
    text-align: left;
}

.terminal-data-table td {
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--outline-variant) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.825rem !important;
    vertical-align: middle;
}

/* API Stats Grid & KPI Cards */
.terminal-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.terminal-stat-card {
    background-color: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.terminal-stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.terminal-stat-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--on-surface-variant);
    font-family: var(--font-mono);
}

.terminal-stat-icon {
    font-size: 20px;
    color: var(--on-surface-variant);
}

.terminal-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    font-family: var(--font-mono);
    line-height: 1.2;
}

/* Key Badge in Logs */
.terminal-key-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--surface-container-highest);
    border: 1px solid var(--outline-variant);
    color: var(--accent-amber);
    padding: 2px 6px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--font-mono);
}

/* Progress Bar Component */
.terminal-progress-bar {
    width: 100%;
    height: 6px;
    background-color: var(--surface-container-highest);
    border-radius: 0;
    overflow: hidden;
    margin-top: 4px;
}

.terminal-progress-fill {
    height: 100%;
    background-color: var(--accent-amber);
    border-radius: 0;
    transition: width 0.4s ease;
}

/* Domain Statistics Dashboard Wrapper */
.terminal-stats-dashboard {
    max-width: 1200px;
    margin: 0 auto;
}

/* Visual SVG World Map Pins */
.terminal-map-pin {
    transition: transform 0.2s ease, filter 0.2s ease;
}

.terminal-map-pin:hover {
    filter: brightness(1.3);
}

/* =========================================================================
   Link Created Popup Modal (Matches Screenshot)
   ========================================================================= */

.terminal-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.terminal-modal-backdrop.active {
    opacity: 1;
}

.terminal-modal-card {
    background: #1c1912;
    border: 1px solid var(--outline-variant);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    width: 100%;
    max-width: 560px;
    overflow: hidden;
    transform: translateY(20px) scale(0.98);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: var(--font-sans);
}

.terminal-modal-backdrop.active .terminal-modal-card {
    transform: translateY(0) scale(1);
}

.terminal-modal-header {
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}

.terminal-modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 4px 0;
    font-family: var(--font-sans);
    display: flex;
    align-items: center;
    gap: 8px;
}

.terminal-modal-subtitle {
    font-size: 0.825rem;
    color: var(--on-surface-variant);
    font-family: var(--font-mono);
    word-break: break-all;
    margin: 0;
}

.terminal-modal-subtitle a {
    color: var(--accent-amber);
    text-decoration: underline;
}

.terminal-modal-close-btn {
    background: transparent;
    border: none;
    color: var(--on-surface-variant);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.terminal-modal-close-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.terminal-modal-body {
    padding: 0 1.5rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.terminal-modal-section-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--on-surface);
    margin-bottom: 6px;
    display: block;
}

/* Slug Box */
.terminal-slug-container {
    display: flex;
    align-items: center;
    background: #12100a;
    border: 1.5px solid #2e7d32;
    border-radius: 12px;
    padding: 6px 10px 6px 14px;
    gap: 8px;
    box-shadow: 0 0 0 1px rgba(46, 125, 50, 0.2);
}

.terminal-slug-text {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: var(--on-surface-variant);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.terminal-slug-highlight {
    color: #69f0ae;
    font-weight: 700;
    background: rgba(105, 240, 174, 0.12);
    padding: 2px 6px;
    border-radius: 4px;
}

.terminal-slug-copy-btn {
    background: rgba(46, 125, 50, 0.15);
    border: 1px solid rgba(46, 125, 50, 0.4);
    color: #69f0ae;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.8rem;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.terminal-slug-copy-btn:hover {
    background: #2e7d32;
    color: #ffffff;
}

.terminal-slug-copy-btn.copied {
    background: #4caf50;
    color: #000000;
    border-color: #4caf50;
}

/* Action Chips */
.terminal-modal-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.terminal-modal-chip {
    background: #26221a;
    border: 1px solid var(--outline-variant);
    color: var(--on-surface);
    font-size: 0.8rem;
    font-family: var(--font-sans);
    padding: 6px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
}

.terminal-modal-chip:hover {
    background: #332d22;
    border-color: var(--accent-amber);
    color: #ffffff;
}

.terminal-modal-chip.copied {
    background: rgba(76, 175, 80, 0.2);
    border-color: #4caf50;
    color: #69f0ae;
}

.terminal-modal-chip .material-symbols-outlined {
    font-size: 16px;
    color: var(--accent-amber);
    transition: all 0.2s ease;
}

.terminal-modal-chip.copied .material-symbols-outlined {
    color: #69f0ae;
}

/* QR Code Container Drawer */
.terminal-modal-qr-drawer {
    display: none;
    background: #12100a;
    border: 1px solid var(--outline-variant);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    margin-top: 0.5rem;
}

.terminal-modal-qr-img {
    width: 160px;
    height: 160px;
    border-radius: 8px;
    background: #ffffff;
    padding: 6px;
    display: inline-block;
    margin-bottom: 8px;
}

/* Modal Footer */
.terminal-modal-footer {
    padding: 1rem 1.5rem;
    background: #16130b;
    border-top: 1px solid var(--outline-variant);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

/* Mobile Close Button on Sidebar (Hidden on Desktop) */
.terminal-mobile-sidebar-close {
    display: none;
    background: transparent;
    border: 1px solid var(--outline-variant);
    color: var(--on-surface-variant);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    margin-left: auto;
}

.terminal-mobile-sidebar-close:hover {
    color: var(--accent-amber);
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent-amber);
}

/* Desktop default for mobile filter bar */
.terminal-mobile-filter-bar {
    display: none;
}

/* ==========================================================================
   11. Mobile & Responsive Layout System
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablet & Mobile Screens (<= 992px)
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    /* Prevent body scroll when mobile drawer is open */
    body.mobile-menu-open {
        overflow: hidden !important;
    }

    /* Mobile Backdrop Overlay */
    .terminal-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.75);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 99990;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    body.mobile-menu-open .terminal-sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    /* Slide-out Mobile Sidebar Drawer */
    #terminal-sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 280px !important;
        max-width: 85vw !important;
        z-index: 99999 !important;
        transform: translateX(-105%) !important;
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.9) !important;
        background-color: var(--surface-container-lowest) !important;
    }

    body.mobile-menu-open #terminal-sidebar {
        transform: translateX(0) !important;
    }

    /* Show Close Button inside Mobile Sidebar */
    .terminal-mobile-sidebar-close {
        display: flex !important;
    }

    /* Top App Bar on Mobile */
    #terminal-topbar {
        left: 0 !important;
        right: 0 !important;
        padding: 0 1rem !important;
        z-index: 900 !important;
    }

    body.sidebar-collapsed #terminal-topbar {
        left: 0 !important;
    }

    /* Hide desktop search box on tablets/mobile to leave room for shortener */
    .terminal-topbar-search-box {
        display: none !important;
    }

    /* Content Area full width on Mobile */
    #wrap {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100vw !important;
        width: 100% !important;
        padding: 1.25rem 1rem !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    body.sidebar-collapsed #wrap {
        margin-left: 0 !important;
        max-width: 100vw !important;
    }

    /* Stats Grid */
    .terminal-stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    }
}

/* --------------------------------------------------------------------------
   Tablet & Phone Responsive Layout (<= 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Show Mobile Search Bar on Dashboard */
    .terminal-mobile-filter-bar {
        display: block !important;
        margin-bottom: 1rem !important;
    }

    .terminal-mobile-search-box {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        background: #14120c !important;
        border: 1px solid var(--outline-variant) !important;
        border-radius: 8px !important;
        padding: 10px 14px !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    }

    .terminal-mobile-search-box:focus-within {
        border-color: var(--accent-amber) !important;
        box-shadow: 0 0 0 2px rgba(238, 195, 94, 0.15) !important;
    }

    .terminal-mobile-search-box .material-symbols-outlined {
        font-size: 20px !important;
        color: var(--on-surface-variant) !important;
    }

    .terminal-mobile-search-box input {
        flex: 1 !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        color: #ffffff !important;
        font-family: var(--font-mono) !important;
        font-size: 0.85rem !important;
    }

    .terminal-mobile-search-box input::placeholder {
        color: var(--on-surface-variant) !important;
        opacity: 0.75 !important;
    }

    /* Card Wrapper Outer Container */
    .terminal-card {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .terminal-card-header {
        background: transparent !important;
        border: none !important;
        padding: 0 0 0.875rem 0 !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .terminal-table-wrapper {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /* ----------------------------------------------------------------------
       A. Main URLs Dashboard Table (#main_table on Index) -> Card Transformation
       ---------------------------------------------------------------------- */
    body.index #main_table thead,
    body.bookmark #main_table thead {
        display: none !important;
    }

    body.index #main_table,
    body.index #main_table tbody,
    body.bookmark #main_table,
    body.bookmark #main_table tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        border: none !important;
        background: transparent !important;
    }

    body.index #main_table tbody tr[id^="id-"],
    body.bookmark #main_table tbody tr[id^="id-"] {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-areas:
            "keyword timestamp"
            "url url"
            "clicks actions" !important;
        align-items: center !important;
        gap: 8px 12px !important;
        background: #18150e !important;
        border: 1px solid var(--outline-variant) !important;
        border-radius: 12px !important;
        padding: 14px 16px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
        transition: border-color 0.2s ease, transform 0.15s ease !important;
    }

    body.index #main_table tbody tr[id^="id-"]:hover,
    body.bookmark #main_table tbody tr[id^="id-"]:hover {
        border-color: var(--accent-amber) !important;
    }

    /* Top Left: Short URL / Keyword with Amber Dot */
    body.index #main_table tbody tr[id^="id-"] td.keyword,
    body.bookmark #main_table tbody tr[id^="id-"] td.keyword {
        grid-area: keyword !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
    }

    body.index #main_table tbody tr[id^="id-"] td.keyword a,
    body.bookmark #main_table tbody tr[id^="id-"] td.keyword a {
        color: var(--accent-amber) !important;
        font-family: var(--font-mono) !important;
        font-size: clamp(0.88rem, 2.5vw, 0.95rem) !important;
        font-weight: 700 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        text-decoration: none !important;
    }

    body.index #main_table tbody tr[id^="id-"] td.keyword a::before,
    body.bookmark #main_table tbody tr[id^="id-"] td.keyword a::before {
        content: '' !important;
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        background-color: var(--accent-amber) !important;
        box-shadow: 0 0 8px rgba(238, 195, 94, 0.7) !important;
        display: inline-block !important;
        flex-shrink: 0 !important;
    }

    /* Top Right: Date/Timestamp */
    body.index #main_table tbody tr[id^="id-"] td.timestamp,
    body.bookmark #main_table tbody tr[id^="id-"] td.timestamp {
        grid-area: timestamp !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        font-size: clamp(0.7rem, 1.8vw, 0.75rem) !important;
        color: var(--on-surface-variant) !important;
        font-family: var(--font-mono) !important;
        white-space: nowrap !important;
    }

    body.index #main_table tbody tr[id^="id-"] td.timestamp .timestamp,
    body.bookmark #main_table tbody tr[id^="id-"] td.timestamp .timestamp {
        display: none !important;
    }

    /* Middle Destination URL Container (Dashed Box) */
    body.index #main_table tbody tr[id^="id-"] td.url,
    body.bookmark #main_table tbody tr[id^="id-"] td.url {
        grid-area: url !important;
        display: block !important;
        width: 100% !important;
        background: #100e0a !important;
        border: 1px dashed var(--outline-variant) !important;
        border-radius: 8px !important;
        padding: 8px 12px !important;
        margin: 4px 0 !important;
        font-family: var(--font-mono) !important;
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
    }

    body.index #main_table tbody tr[id^="id-"] td.url a:first-child,
    body.bookmark #main_table tbody tr[id^="id-"] td.url a:first-child {
        color: var(--on-surface) !important;
        font-size: clamp(0.78rem, 2vw, 0.825rem) !important;
        font-weight: 600 !important;
        margin-bottom: 2px !important;
        display: block !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.index #main_table tbody tr[id^="id-"] td.url small,
    body.bookmark #main_table tbody tr[id^="id-"] td.url small {
        color: var(--on-surface-variant) !important;
        font-size: clamp(0.7rem, 1.8vw, 0.75rem) !important;
        opacity: 0.85 !important;
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.index #main_table tbody tr[id^="id-"] td.url small a,
    body.bookmark #main_table tbody tr[id^="id-"] td.url small a {
        color: var(--on-surface-variant) !important;
    }

    /* Hide IP on mobile card */
    body.index #main_table tbody tr[id^="id-"] td.ip,
    body.bookmark #main_table tbody tr[id^="id-"] td.ip {
        display: none !important;
    }

    /* Bottom Left: Clicks Counter */
    body.index #main_table tbody tr[id^="id-"] td.clicks,
    body.bookmark #main_table tbody tr[id^="id-"] td.clicks {
        grid-area: clicks !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        text-align: left !important;
    }

    body.index #main_table tbody tr[id^="id-"] td.clicks::before,
    body.bookmark #main_table tbody tr[id^="id-"] td.clicks::before {
        content: 'CLICKS' !important;
        font-size: 0.65rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.06em !important;
        color: var(--on-surface-variant) !important;
        font-family: var(--font-mono) !important;
        margin-bottom: 2px !important;
    }

    body.index #main_table tbody tr[id^="id-"] td.clicks,
    body.bookmark #main_table tbody tr[id^="id-"] td.clicks {
        font-size: clamp(1rem, 2.5vw, 1.15rem) !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        font-family: var(--font-mono) !important;
    }

    /* Bottom Right: Action Toolbar */
    body.index #main_table tbody tr[id^="id-"] td.actions,
    body.bookmark #main_table tbody tr[id^="id-"] td.actions {
        grid-area: actions !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        min-width: 0 !important;
    }

    body.index #main_table tbody tr[id^="id-"] td.actions .button,
    body.bookmark #main_table tbody tr[id^="id-"] td.actions .button {
        width: 34px !important;
        height: 34px !important;
        border-radius: 6px !important;
        background-color: var(--surface-container-high) !important;
        margin: 0 !important;
    }

    /* Inline Edit Row inside Mobile Card */
    body.index #main_table tbody tr.edit-row,
    body.bookmark #main_table tbody tr.edit-row {
        display: block !important;
        width: 100% !important;
        background: #1c1912 !important;
        border: 1.5px solid var(--accent-amber) !important;
        border-radius: 12px !important;
        padding: 14px 16px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    }

    body.index #main_table tbody tr.edit-row td,
    body.bookmark #main_table tbody tr.edit-row td {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
    }

    body.index #main_table tbody tr.edit-row input.text,
    body.bookmark #main_table tbody tr.edit-row input.text {
        width: 100% !important;
        margin: 4px 0 10px 0 !important;
        font-size: 0.85rem !important;
        padding: 8px 12px !important;
    }

    body.index #main_table tbody tr.edit-row td:last-child,
    body.bookmark #main_table tbody tr.edit-row td:last-child {
        margin-top: 10px !important;
        display: flex !important;
        gap: 8px !important;
    }

    body.index #main_table tbody tr.edit-row input.button,
    body.bookmark #main_table tbody tr.edit-row input.button {
        flex: 1 !important;
        justify-content: center !important;
        padding: 10px 14px !important;
        min-height: 40px !important;
    }

    /* ----------------------------------------------------------------------
       B. Manage Plugins Page (`admin/plugins.php`) -> Mobile Card System
       ---------------------------------------------------------------------- */
    body.plugins #main_table thead {
        display: none !important;
    }

    body.plugins #main_table,
    body.plugins #main_table tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        border: none !important;
        background: transparent !important;
    }

    body.plugins #main_table tbody tr.plugin {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        background: #18150e !important;
        border: 1px solid var(--outline-variant) !important;
        border-radius: 12px !important;
        padding: 14px 16px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
        transition: border-color 0.2s ease !important;
    }

    body.plugins #main_table tbody tr.plugin.active {
        border-left: 4px solid var(--accent-amber) !important;
    }

    body.plugins #main_table tbody tr.plugin.inactive {
        border-left: 4px solid var(--outline-variant) !important;
        opacity: 0.85;
    }

    body.plugins #main_table tbody tr.plugin td {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
    }

    body.plugins #main_table tbody tr.plugin td.plugin_name {
        font-size: clamp(0.95rem, 2.5vw, 1.05rem) !important;
        font-weight: 700 !important;
        color: #ffffff !important;
    }

    body.plugins #main_table tbody tr.plugin td.plugin_name a {
        color: #ffffff !important;
        text-decoration: none !important;
    }

    body.plugins #main_table tbody tr.plugin td.plugin_version {
        font-size: 0.75rem !important;
        color: var(--accent-amber) !important;
        font-weight: 600 !important;
    }

    body.plugins #main_table tbody tr.plugin td.plugin_desc {
        font-size: clamp(0.8rem, 2vw, 0.85rem) !important;
        color: var(--on-surface-variant) !important;
        line-height: 1.5 !important;
        word-break: break-word !important;
    }

    body.plugins #main_table tbody tr.plugin td.plugin_author {
        font-size: 0.75rem !important;
        color: var(--outline) !important;
    }

    body.plugins #main_table tbody tr.plugin td.plugin_actions {
        margin-top: 6px !important;
        padding-top: 8px !important;
        border-top: 1px solid var(--outline-variant) !important;
    }

    body.plugins #main_table tbody tr.plugin td.plugin_actions a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 40px !important;
        padding: 8px 14px !important;
        border-radius: 6px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        font-size: 0.8rem !important;
        letter-spacing: 0.05em !important;
    }

    body.plugins #main_table tbody tr.plugin.active td.plugin_actions a {
        background: rgba(255, 84, 73, 0.15) !important;
        border: 1px solid var(--error-red) !important;
        color: var(--error-red) !important;
    }

    body.plugins #main_table tbody tr.plugin.inactive td.plugin_actions a {
        background: var(--accent-dim) !important;
        border: 1px solid var(--accent-amber) !important;
        color: var(--accent-amber) !important;
    }

    /* ----------------------------------------------------------------------
       C. Tools & Bookmarklets Page (`admin/tools.php`) -> Mobile Scroll & Buttons
       ---------------------------------------------------------------------- */
    body.tools .sub_wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body.tools table.tblSorter {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 1.5rem !important;
    }

    body.tools table.tblSorter th,
    body.tools table.tblSorter td {
        padding: 10px 12px !important;
        font-size: 0.8rem !important;
    }

    a.bookmarklet {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 40px !important;
        padding: 8px 14px !important;
        margin: 4px 0 !important;
        border-radius: 6px !important;
        font-size: clamp(0.78rem, 2vw, 0.85rem) !important;
        word-break: break-word !important;
        white-space: normal !important;
        text-align: center !important;
        line-height: 1.3 !important;
    }

    /* ----------------------------------------------------------------------
       D. Stats & Infos Page (`infos` Context) -> Responsive Tabs & Charts
       ---------------------------------------------------------------------- */
    #tabs {
        width: 100% !important;
        max-width: 100% !important;
    }

    #tabs ul#headers {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        float: none !important;
        width: 100% !important;
        border-bottom: 1px solid var(--outline-variant) !important;
        padding: 0 0 8px 0 !important;
        margin: 0 0 1rem 0 !important;
    }

    #tabs ul#headers li {
        display: block !important;
        margin: 0 !important;
    }

    #tabs ul#headers li a {
        display: inline-flex !important;
        align-items: center !important;
        padding: 8px 12px !important;
        border-radius: 6px 6px 0 0 !important;
        font-size: clamp(0.78rem, 2vw, 0.85rem) !important;
        background: var(--surface-container-high) !important;
        border: 1px solid var(--outline-variant) !important;
        color: var(--on-surface-variant) !important;
        text-decoration: none !important;
    }

    #tabs ul#headers li a.selected {
        background: var(--accent-amber) !important;
        color: var(--surface-main) !important;
        border-color: var(--accent-amber) !important;
        font-weight: 700 !important;
    }

    #stats_lines {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin: 8px 0 !important;
        list-style: none !important;
        padding: 0 !important;
    }

    #stats_lines li {
        display: inline-block !important;
        margin: 0 !important;
    }

    #stats_lines li a {
        display: inline-flex !important;
        align-items: center !important;
        padding: 6px 10px !important;
        border-radius: 4px !important;
        font-size: 0.78rem !important;
        background: var(--surface-container-high) !important;
        border: 1px solid var(--outline-variant) !important;
        color: var(--on-surface-variant) !important;
    }

    #stats_lines li a.selected {
        background: var(--accent-amber) !important;
        color: var(--surface-main) !important;
        border-color: var(--accent-amber) !important;
    }

    #historical_clicks {
        float: none !important;
        width: 100% !important;
        margin-bottom: 1rem !important;
    }

    #historical_clicks li {
        padding: 4px 8px !important;
        font-size: 0.8rem !important;
    }

    /* Charts Container */
    #chart_div,
    #sources_table,
    #locations_table {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ----------------------------------------------------------------------
       E. Table Footer & Pagination
       ---------------------------------------------------------------------- */
    #filter_form {
        display: none !important;
    }

    tfoot,
    table.tblSorter tfoot,
    table.tblSorter tfoot th,
    #main_table tfoot,
    #main_table tfoot th {
        display: block !important;
        width: 100% !important;
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    #pagination {
        float: none !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 1.5rem 0 2rem 0 !important;
        padding: 0 !important;
        flex-wrap: wrap !important;
    }

    #pagination a,
    #pagination span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 16px !important;
        border-radius: 8px !important;
        font-size: 0.85rem !important;
        font-family: var(--font-mono) !important;
        background: #18150e !important;
        border: 1px solid var(--outline-variant) !important;
        color: var(--on-surface) !important;
        text-decoration: none !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }

    #pagination a:hover {
        border-color: var(--accent-amber) !important;
        color: var(--accent-amber) !important;
    }

    #pagination span {
        background: var(--accent-amber) !important;
        color: #12100a !important;
        font-weight: 700 !important;
        border-color: var(--accent-amber) !important;
    }
}

/* --------------------------------------------------------------------------
   Compact Smartphone Screens (<= 640px)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    /* Compact Topbar */
    #terminal-topbar {
        height: 56px !important;
        padding: 0 0.65rem !important;
    }

    #wrap {
        margin-top: 56px !important;
        padding: 0.85rem 0.65rem !important;
    }

    .terminal-topbar-left {
        gap: 0.5rem !important;
    }

    .terminal-hamburger-btn {
        padding: 8px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 6px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-color: var(--outline-variant) !important;
    }

    .terminal-topbar-center {
        margin: 0 4px !important;
        flex: 1 !important;
    }

    .terminal-topbar-shortener {
        border-radius: 6px !important;
    }

    .terminal-topbar-shortener input[type="text"] {
        padding: 6px 8px !important;
        font-size: clamp(0.75rem, 2.2vw, 0.82rem) !important;
    }

    .terminal-topbar-keyword-input {
        display: none !important;
    }

    .terminal-topbar-shortener-actions {
        padding: 0 4px !important;
    }

    .terminal-topbar-post-btn {
        padding: 6px 10px !important;
        font-size: 0.7rem !important;
        border-radius: 4px !important;
        min-height: 32px !important;
    }

    .terminal-topbar-post-btn span:not(.material-symbols-outlined) {
        display: none !important;
    }

    /* Stats Grid on phones */
    .terminal-stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.65rem !important;
    }

    .terminal-stat-card {
        padding: 0.85rem !important;
    }

    .terminal-stat-value {
        font-size: clamp(1.15rem, 3.5vw, 1.35rem) !important;
    }

    .terminal-stat-label {
        font-size: 0.68rem !important;
    }

    /* Single URL Stats Dashboard on Mobile */
    .terminal-stats-breakdown-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .terminal-stats-dashboard .terminal-card {
        margin-bottom: 1rem !important;
    }

    /* Modal Dialog Mobile Adaptation */
    .terminal-modal-card {
        margin: 8px !important;
        max-width: calc(100vw - 16px) !important;
        border-radius: 12px !important;
    }

    .terminal-modal-header {
        padding: 1.25rem 1rem 0.75rem 1rem !important;
    }

    .terminal-modal-title {
        font-size: clamp(1.05rem, 3.2vw, 1.25rem) !important;
    }

    .terminal-modal-body {
        padding: 0 1rem 1rem 1rem !important;
        gap: 1rem !important;
    }

    .terminal-slug-container {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 8px 10px !important;
    }

    .terminal-slug-copy-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 8px !important;
        min-height: 38px !important;
    }

    .terminal-modal-chips-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    .terminal-modal-chip {
        width: 100% !important;
        justify-content: center !important;
        padding: 8px 6px !important;
        font-size: 0.75rem !important;
        min-height: 38px !important;
    }

    .terminal-modal-footer {
        padding: 0.75rem 1rem !important;
    }

    .terminal-modal-footer .terminal-btn {
        width: 100% !important;
        justify-content: center !important;
        min-height: 42px !important;
    }

    /* Delete Confirmation Dialog on Mobile */
    #delete-confirm-dialog {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        margin: auto !important;
    }

    #delete-confirm-dialog div.button-group input.button {
        width: 100% !important;
        margin-bottom: 6px !important;
        min-height: 40px !important;
    }
}

/* --------------------------------------------------------------------------
   Login Screen Styling (Terminal Modernist)
   -------------------------------------------------------------------------- */
body.login {
    background-color: var(--surface-dim, #12100a) !important;
    background-image: 
        radial-gradient(circle at 50% 15%, rgba(238, 195, 94, 0.1) 0%, transparent 60%),
        linear-gradient(to bottom, #16130b 0%, #12100a 100%) !important;
    color: var(--on-surface, #ffffff) !important;
    font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif) !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 1.5rem !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

body.login main {
    width: 100% !important;
    max-width: 420px !important;
}

body.login #login {
    background: var(--surface-container-low, #18150e) !important;
    border: 1px solid var(--outline-variant, #383329) !important;
    border-radius: 16px !important;
    padding: clamp(1.5rem, 5vw, 2.25rem) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 auto !important;
    width: 100% !important;
}

body.login #login::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent, var(--accent-amber, #eec35e), transparent) !important;
}

body.login #login form p {
    margin-bottom: 1.25rem !important;
}

body.login #login label {
    display: block !important;
    font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
    font-size: clamp(0.75rem, 2vw, 0.8rem) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--accent-amber, #eec35e) !important;
    margin-bottom: 6px !important;
}

body.login #login input[type="text"],
body.login #login input[type="password"] {
    width: 100% !important;
    background: var(--surface-container-lowest, #100e0a) !important;
    border: 1.5px solid var(--outline-variant, #383329) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
    font-size: clamp(0.85rem, 2vw, 0.95rem) !important;
    padding: 10px 14px !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

body.login #login input[type="text"]:focus,
body.login #login input[type="password"]:focus {
    border-color: var(--accent-amber, #eec35e) !important;
    box-shadow: 0 0 0 3px rgba(238, 195, 94, 0.2) !important;
}

body.login #login input[type="submit"] {
    width: 100% !important;
    background: var(--accent-amber, #eec35e) !important;
    color: #12100a !important;
    border: none !important;
    border-radius: 8px !important;
    font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
    font-size: clamp(0.85rem, 2vw, 0.95rem) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 12px 16px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 14px rgba(238, 195, 94, 0.35) !important;
    margin-top: 0.5rem !important;
    min-height: 44px !important;
}

body.login #login input[type="submit"]:hover {
    background: #ffd54f !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(238, 195, 94, 0.5) !important;
}

body.login #error-message {
    background: rgba(255, 84, 73, 0.12) !important;
    border: 1px solid rgba(255, 84, 73, 0.3) !important;
    color: #ff8a80 !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
    font-size: 0.825rem !important;
    margin-bottom: 1.25rem !important;
}