/* PIIQ Admin Console - Nearfield Styling */

:root {
    /* Nearfield Color Palette */
    --bg-color: #091426;
    --text-color: #CFCFCF;
    --text-color-light: #FFFFFF;
    --primary-accent: #600EFF;
    --secondary-accent: #CEFFD2;
    --border-color: #6B6B6B;
    --input-bg: #1a2639;
    --hover-bg: #4d0bcf;
    --hover-table-bg: rgba(98, 0, 234, 0.08);
    
    /* Status Colors */
    --success-color: #4caf50;
    --warning-color: #f0ad4e;
    --error-color: #f44336;
    --info-color: #58a6ff;
    
    /* Layout */
    --header-height: 70px;
    --sidebar-width: 260px;
    --border-radius: 8px;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Universal Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Custom Scrollbars */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: var(--input-bg);
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--primary-accent);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) var(--input-bg);
}

/* Base Layout */
html, body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow: hidden;
}

/* Loading Screen */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.loading-content {
    text-align: center;
}

.loading-animation {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
}

.loading-text h2 {
    color: var(--text-color-light);
    font-size: 28px;
    margin-bottom: 8px;
    font-weight: 600;
}

.loading-text p {
    color: var(--text-color);
    font-size: 16px;
}

/* Authentication Screen */
.auth-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.auth-container {
    background: rgba(26, 38, 57, 0.95);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    padding: 40px;
    width: 100%;
    max-width: 400px;
    backdrop-filter: blur(10px);
}

.auth-header {
    text-align: center;
    margin-bottom: 32px;
}

.auth-logo {
    height: 60px;
    width: auto;
    margin-bottom: 16px;
    max-width: 200px;
}

.auth-header h1 {
    color: var(--text-color-light);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
}

.auth-header p {
    color: var(--text-color);
    font-size: 16px;
}

/* Forms */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Modal Header and Body */
.modal-header {
    padding: 0 0 16px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-color-light);
}

.modal-body {
    padding: 0;
    margin-bottom: 24px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.form-group label {
    color: var(--text-color-light);
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input,
.form-input {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 12px 16px;
    color: var(--text-color-light);
    font-size: 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-input:focus {
    outline: none;
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 2px rgba(96, 14, 255, 0.2);
}

.password-input-container {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-container input {
    flex: 1;
    padding-right: 48px;
}

.password-toggle {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.2s;
}

.password-toggle:hover {
    color: var(--text-color-light);
}

/* Buttons */
.auth-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--border-radius);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    text-decoration: none;
}

.auth-button.primary {
    background: var(--primary-accent);
    color: var(--text-color-light);
}

.auth-button.primary:hover {
    background: var(--hover-bg);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(96, 14, 255, 0.3);
}

.auth-button.primary:disabled {
    background: var(--border-color);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Messages */
.error-message {
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid var(--error-color);
    color: var(--error-color);
    padding: 12px;
    border-radius: var(--border-radius);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.loading-message {
    background: rgba(88, 166, 255, 0.1);
    border: 1px solid var(--info-color);
    color: var(--info-color);
    padding: 12px;
    border-radius: var(--border-radius);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.inline-loading {
    width: 20px;
    height: 20px;
}

/* Dashboard Layout */
.dashboard {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: var(--header-height) 1fr;
    grid-template-areas:
        "header header"
        "sidebar main";
    height: 100vh;
    overflow: hidden;
}

/* Header */
.admin-header {
    grid-area: header;
    background: var(--input-bg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    padding: 0 24px;
    z-index: 100;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-logo {
    height: 40px;
    width: auto;
    max-width: 120px;
}

.header-left h1 {
    color: var(--text-color-light);
    font-size: 20px;
    font-weight: 600;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.admin-user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-color);
    font-size: 14px;
}

.logout-button {
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--border-radius);
    transition: all 0.2s;
}

.logout-button:hover {
    background: var(--primary-accent);
    color: var(--text-color-light);
}

/* Sidebar */
.sidebar {
    grid-area: sidebar;
    background: var(--input-bg);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 16px 0 0 0;
}

/* Filter box: fixed at the top of the sidebar (does not scroll) */
.nav-filter {
    flex: 0 0 auto;
    margin: 0 16px 8px 16px;
    box-sizing: border-box;
    padding: 9px 12px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-color-light);
    font-size: 13px;
    font-family: inherit;
}
.nav-filter:focus {
    outline: none;
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 2px rgba(96, 14, 255, 0.2);
}
.nav-empty {
    display: none;
    padding: 8px 16px;
    color: var(--text-color);
    opacity: 0.6;
    font-size: 13px;
}

/* Scrolling list of sections */
.nav-items {
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 16px 24px 16px;
}

.nav-section {
    display: flex;
    flex-direction: column;
}

/* Section header (a button that collapses/expands, and sticks while scrolling) */
.nav-section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--input-bg);
    border: none;
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-color);
    opacity: 0.6;
    padding: 14px 8px 8px 8px;
    font-family: inherit;
    transition: opacity 0.2s;
}
.nav-section-label:hover { opacity: 0.9; }
.nav-section-chevron { font-size: 18px; transition: transform 0.2s; }
.nav-section.collapsed .nav-section-chevron { transform: rotate(-90deg); }

.nav-section-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.nav-section.collapsed .nav-section-items { display: none; }

/* Filtering: hide non-matching items and empty sections; force sections open */
.nav-item.filtered-out { display: none; }
.nav-section.no-matches { display: none; }
.nav-items.filtering .nav-section .nav-section-items { display: flex; }
.nav-items.filtering .nav-section-label { position: static; cursor: default; }
.nav-items.filtering .nav-section-chevron { visibility: hidden; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--border-radius);
    color: var(--text-color);
    text-decoration: none;
    transition: all 0.2s;
    font-size: 14px;
    font-weight: 500;
}

.nav-item:hover {
    background: var(--hover-table-bg);
    color: var(--text-color-light);
}

.nav-item.active {
    background: var(--primary-accent);
    color: var(--text-color-light);
    box-shadow: 0 2px 8px rgba(96, 14, 255, 0.3);
}

.nav-item .material-icons {
    font-size: 20px;
}

/* Main Content */
.main-content {
    grid-area: main;
    overflow-y: auto;
    padding: 24px;
    background: var(--bg-color);
}

/* Views */
.view {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.view.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.view-header {
    margin-bottom: 32px;
    position: relative;
}

.view-header .dashboard-refresh-container {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.view-header .dashboard-refresh-container .dashboard-refresh {
    position: static;
}

.view-header .last-updated {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.7;
}

.view-header h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-color-light);
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 8px;
}

.view-header p {
    color: var(--text-color);
    font-size: 16px;
    margin-bottom: 24px;
}

.view-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Search Box */
.search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box .material-icons {
    position: absolute;
    left: 12px;
    color: var(--text-color);
    font-size: 20px;
}

.search-box input {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 10px 12px 10px 44px;
    color: var(--text-color-light);
    font-size: 14px;
    width: 300px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-box input:focus {
    outline: none;
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 2px rgba(96, 14, 255, 0.2);
}

.search-box input::placeholder {
    color: var(--text-color);
}

/* Action Buttons */
.action-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--border-radius);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    text-decoration: none;
}

.action-button.primary {
    background: var(--primary-accent);
    color: var(--text-color-light);
}

.action-button.primary:hover {
    background: var(--hover-bg);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(96, 14, 255, 0.3);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.stat-card {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.2s;
}

.stat-card:hover {
    border-color: var(--primary-accent);
    box-shadow: 0 4px 16px rgba(96, 14, 255, 0.2);
    transform: translateY(-2px);
}

.stat-icon {
    background: var(--primary-accent);
    color: var(--text-color-light);
    width: 60px;
    height: 60px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon .material-icons {
    font-size: 28px;
}

.stat-content {
    flex: 1;
}

.stat-number {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-color-light);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-loading {
    width: 24px;
    height: 24px;
}

.stat-label {
    font-size: 14px;
    color: var(--text-color);
    margin-bottom: 4px;
}

.stat-change {
    font-size: 12px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(76, 175, 80, 0.1);
    color: var(--success-color);
    display: inline-block;
}

/* Activity stat card with chart */
.stat-card-wide {
    flex-direction: column;
    align-items: stretch;
}

.stat-card-wide .stat-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.stat-card-wide .stat-icon {
    width: 48px;
    height: 48px;
}

.stat-card-wide .stat-icon .material-icons {
    font-size: 24px;
}

.activity-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 50px;
    margin-bottom: 8px;
}

.activity-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
}

.activity-bar-fill {
    width: 100%;
    border-radius: 3px 3px 0 0;
    min-height: 4px;
}

.activity-bar-label {
    font-size: 8px;
    color: var(--text-color);
    white-space: nowrap;
}

.activity-bar-value {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-color-light);
}

.activity-bar-group {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    flex: 4;
    position: relative;
}

.activity-bar-group .activity-bar {
    flex: 1;
}

.activity-bar-group-label {
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    font-size: 8px;
    color: var(--text-color);
    text-align: center;
    opacity: 0.6;
}

.activity-period-buttons {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.period-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 10px;
    color: var(--text-color);
    cursor: pointer;
}

.period-btn:hover {
    border-color: var(--primary-accent);
    color: var(--text-color-light);
}

.period-btn.active {
    background: var(--primary-accent);
    border-color: var(--primary-accent);
    color: white;
}

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.dashboard-section {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 24px;
}

.dashboard-section:last-child {
    grid-column: 1 / -1; /* Span full width */
}

.dashboard-section h3 {
    color: var(--text-color-light);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.recent-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.loading-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px;
    color: var(--text-color);
    font-size: 14px;
}

.loading-placeholder img {
    width: 32px;
    height: 32px;
}

/* Dashboard Charts */
.dashboard-charts {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-top: 24px;
}

.chart-card {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 24px;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 20px;
}

.chart-header h3 {
    color: var(--text-color-light);
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.chart-subtitle {
    color: var(--text-color);
    font-size: 12px;
}

.chart-container {
    min-height: 200px;
    position: relative;
}

/* DAU Line Chart */
.dau-chart-wrapper {
    height: 200px;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding-bottom: 30px;
    position: relative;
}

.dau-bar {
    flex: 1;
    background: var(--primary-accent);
    border-radius: 2px 2px 0 0;
    min-height: 2px;
    position: relative;
    transition: opacity 0.2s;
}

.dau-bar:hover {
    opacity: 0.8;
}

.dau-bar::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 10;
}

.dau-bar:hover::after {
    opacity: 1;
}

.dau-x-axis {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-color);
}

.dau-no-data {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-color);
    font-size: 14px;
}

/* Tier Donut Chart */
.tier-chart-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.tier-donut {
    width: 140px;
    height: 140px;
    position: relative;
}

.tier-donut svg {
    transform: rotate(-90deg);
}

.tier-donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.tier-donut-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-color-light);
}

.tier-donut-label {
    font-size: 11px;
    color: var(--text-color);
}

.tier-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tier-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.tier-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.tier-legend-name {
    color: var(--text-color-light);
    flex: 1;
}

.tier-legend-count {
    color: var(--text-color);
    font-weight: 500;
}

.tier-no-data {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    color: var(--text-color);
    font-size: 14px;
}

@media (max-width: 900px) {
    .dashboard-charts {
        grid-template-columns: 1fr;
    }
}

/* Power Users Section */
.power-users-section {
    margin-top: 24px;
}

.power-users-section .chart-card {
    width: 100%;
}

.power-users-table {
    width: 100%;
    border-collapse: collapse;
}

.power-users-table th,
.power-users-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.power-users-table th {
    color: var(--text-color);
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.power-users-table td {
    color: var(--text-color-light);
    font-size: 14px;
}

.power-users-table tbody tr:hover {
    background: rgba(139, 92, 246, 0.05);
}

.power-users-table .rank-cell {
    width: 40px;
    color: var(--text-color);
    font-weight: 600;
}

.power-users-table .email-cell {
    font-weight: 500;
}

.power-users-table .runs-cell {
    text-align: center;
    width: 80px;
}

.power-users-table .runs-cell.total {
    font-weight: 700;
    color: var(--primary-accent);
}

.power-users-table .date-cell {
    color: var(--text-color);
    width: 100px;
}

.power-users-empty {
    padding: 40px;
    text-align: center;
    color: var(--text-color);
}

/* Table Container - UoI Registry Fix */
.table-container {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    min-height: 400px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* Utility Classes */
.hidden {
    display: none !important;
}

.text-success {
    color: var(--success-color) !important;
}

.text-warning {
    color: var(--warning-color) !important;
}

.text-error {
    color: var(--error-color) !important;
}

.text-info {
    color: var(--info-color) !important;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .dashboard {
        grid-template-columns: 1fr;
        grid-template-rows: var(--header-height) auto 1fr;
        grid-template-areas:
            "header"
            "sidebar"
            "main";
    }

    .sidebar {
        position: static;
        padding: 16px 0;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .nav-items {
        flex-direction: row;
        overflow-x: auto;
        padding: 0 16px;
    }

    .nav-item {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .main-content {
        padding: 16px;
    }

    .view-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .search-box input {
        width: 100%;
    }

    /* Mobile header styles moved to mobile.css */

    .header-left h1 {
        font-size: 18px;
    }

    .auth-container {
        margin: 20px;
        padding: 24px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Data Tables */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--input-bg);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.admin-table th,
.admin-table td {
    text-align: left;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
}

.admin-table th {
    background: var(--bg-color);
    color: var(--text-color-light);
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.admin-table th.sortable:hover {
    background: var(--input-bg);
    color: var(--secondary-accent);
}

.admin-table td {
    color: var(--text-color);
    font-size: 14px;
}

.admin-table tbody tr {
    transition: background-color 0.2s;
}

.admin-table tbody tr:hover {
    background: var(--hover-table-bg);
}

.admin-table tbody tr:last-child td {
    border-bottom: none;
}

/* Table Status Badges */
.status {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status.active,
.status.completed,
.status.verified {
    background: rgba(76, 175, 80, 0.2);
    color: var(--success-color);
}

.status.pending,
.status.processing {
    background: rgba(240, 173, 78, 0.2);
    color: var(--warning-color);
}

.status.inactive,
.status.failed,
.status.cancelled {
    background: rgba(244, 67, 54, 0.2);
    color: var(--error-color);
}

.status.purchased,
.status.credit {
    background: rgba(96, 14, 255, 0.2);
    color: var(--primary-accent);
}

.status.idle {
    background: rgba(76, 175, 80, 0.2);
    color: var(--success-color);
}

.status.busy {
    background: rgba(33, 150, 243, 0.2);
    color: #2196F3;
}

/* Version Badges */
.version-badge {
    color: var(--secondary-accent);
    font-family: 'Roboto Mono', monospace;
}

.version-badge-small {
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 500;
    background: rgba(206, 255, 210, 0.15);
    color: var(--secondary-accent);
    font-family: 'Roboto Mono', monospace;
    margin-left: 6px;
    vertical-align: middle;
}

.version-text {
    color: var(--secondary-accent);
}

/* Plan Badges */
.plan-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.plan-badge.plan-starter {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

.plan-badge.plan-pro {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.plan-badge.plan-enterprise {
    background: rgba(168, 85, 247, 0.2);
    color: #a78bfa;
}

.plan-badge.plan-none {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.plan-badge.plan-expired {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.account-type-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.account-type-badge.account-type-admin {
    background: rgba(168, 85, 247, 0.2);
    color: #a78bfa;
}

.account-type-badge.account-type-web {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.account-type-badge.account-type-desktop {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.account-type-badge.account-type-unset {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

/* Renewal Status */
.renew-yes {
    color: #10b981;
    font-size: 12px;
}

.renew-no {
    color: #f59e0b;
    font-size: 12px;
}

/* Table Actions */
.table-action {
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--border-radius);
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.table-action:hover {
    background: var(--primary-accent);
    color: var(--text-color-light);
}

.table-action .material-icons {
    font-size: 18px;
}

/* Mini Bar Charts for Usage Stats */
.mini-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 24px;
    min-width: 50px;
    padding: 4px 6px;
}

.mini-bar-chart.empty {
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    opacity: 0.5;
}

.mini-bar {
    width: 14px;
    min-height: 1px;
    border-radius: 2px 2px 0 0;
    position: relative;
    cursor: pointer;
}

.mini-bar-value {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 600;
    color: var(--text-color-light);
    margin-bottom: 1px;
}

/* Recent Items */
.recent-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-radius: var(--border-radius);
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    transition: all 0.2s;
}

.recent-item:hover {
    border-color: var(--primary-accent);
    box-shadow: 0 2px 8px rgba(96, 14, 255, 0.2);
}

.item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-info strong {
    color: var(--text-color-light);
    font-size: 14px;
}

.item-info small {
    color: var(--text-color);
    font-size: 12px;
}

.item-stats {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.item-status {
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.item-benefit {
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    background: var(--primary-accent);
    color: white;
}

.recent-item code {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
    background: var(--border-color);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 11px;
}

/* No Data States */
.no-data, .error-placeholder {
    text-align: center;
    padding: 40px;
    color: var(--text-color);
    font-size: 16px;
    background: var(--input-bg);
    border-radius: var(--border-radius);
}

.error-placeholder {
    color: var(--error-color);
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid var(--error-color);
}

/* Responsive Table Additions */
@media (max-width: 768px) {
    .admin-table {
        font-size: 12px;
    }

    .admin-table th,
    .admin-table td {
        padding: 12px 8px;
    }

    .recent-item {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .item-info {
        order: 1;
    }

    .item-status {
        order: 2;
        align-self: flex-start;
    }
}

/* UoI Registry Specific Styles */

/* UoI Status Grid */
.uoi-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.status-card {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
    min-height: 100px;
}

.status-card:hover {
    border-color: var(--primary-accent);
    box-shadow: 0 4px 16px rgba(96, 14, 255, 0.15);
}

.status-icon {
    background: rgba(96, 14, 255, 0.1);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
}

.status-icon .material-icons {
    font-size: 24px;
    color: var(--primary-accent);
}

.status-content {
    flex: 1;
    min-width: 0;
}

.status-content h3 {
    color: var(--text-color-light);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-color-light);
    margin-bottom: 4px;
    line-height: 1;
}

.status-detail {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.8;
}

.status-loading {
    width: 20px;
    height: 20px;
}


/* ========================================
   PRICING MANAGEMENT STYLES
   ======================================== */


.pricing-section {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 24px;
    margin-bottom: 24px;
}

.pricing-section h3 {
    color: var(--text-color-light);
    font-size: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Tier Cards */
.tier-card {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 20px;
    transition: all 0.2s;
}

.tier-card:hover {
    border-color: var(--primary-accent);
    box-shadow: 0 0 20px rgba(96, 14, 255, 0.1);
}

.tier-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.tier-header h4 {
    color: var(--text-color-light);
    font-size: 18px;
    font-weight: 600;
}

.tier-price {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-color-light);
    font-size: 16px;
}

.tier-price input.price-input {
    width: 100px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color-light);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

.tier-price input.price-input:focus {
    outline: none;
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 3px rgba(96, 14, 255, 0.1);
}

/* Features Section */
.tier-features {
    margin-bottom: 20px;
}

.tier-features label {
    display: block;
    color: var(--text-color);
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 500;
}

.features-input {
    width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 100px;
}

.features-input:focus {
    outline: none;
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 3px rgba(96, 14, 255, 0.1);
}

/* Credit Packs */
.credit-packs h5 {
    color: var(--text-color-light);
    font-size: 16px;
    margin-bottom: 12px;
    font-weight: 600;
}

.packs-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.credit-pack-item {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 16px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    transition: all 0.2s;
}

.credit-pack-item:hover {
    border-color: var(--primary-accent);
}

.pack-fields {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    align-items: end;
}

.pack-fields label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 500;
}

.pack-fields input[type="number"] {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color-light);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
}

.pack-fields input[type="number"]:focus {
    outline: none;
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 3px rgba(96, 14, 255, 0.1);
}

.pack-fields input[readonly] {
    background: var(--bg-color);
    opacity: 0.7;
    cursor: not-allowed;
}

.checkbox-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-accent);
}

/* Credit Validity */
.validity-config {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.validity-config label {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-color);
    font-size: 14px;
}

.validity-config input[type="number"],
.validity-config input[type="text"] {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color-light);
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    min-width: 80px;
}

.validity-config input[type="text"] {
    flex: 1;
}

.validity-config input:focus {
    outline: none;
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 3px rgba(96, 14, 255, 0.1);
}

/* Info Card */
.info-card {
    background: rgba(88, 166, 255, 0.08);
    border: 1px solid var(--info-color);
    border-radius: var(--border-radius);
    padding: 16px;
    margin-bottom: 24px;
}

.info-content {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--info-color);
    font-size: 14px;
}

.info-content .material-icons {
    font-size: 24px;
}

.info-content strong {
    color: var(--text-color-light);
}

/* Inline Version Info (in header with buttons) */
.version-info-inline {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.6;
    margin-left: 16px;
    white-space: nowrap;
}

/* View Actions */
.view-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.action-button.small {
    padding: 8px 16px;
    font-size: 13px;
}

.action-button.has-changes {
    background: var(--warning-color) !important;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(240, 173, 78, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(240, 173, 78, 0);
    }
}

/* History Modal Styles */
.history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 0;
    max-height: 400px;
    overflow-y: auto;
}

.history-item {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 16px;
    transition: all 0.2s;
}

.history-item:hover {
    border-color: var(--primary-accent);
}

.history-item.active {
    border-color: var(--success-color);
    background: rgba(76, 175, 80, 0.05);
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.history-header strong {
    color: var(--text-color-light);
    font-size: 16px;
}

.status-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.active {
    background: rgba(76, 175, 80, 0.2);
    color: var(--success-color);
}

.status-badge.inactive {
    background: rgba(107, 107, 107, 0.2);
    color: var(--border-color);
}

.history-details {
    color: var(--text-color);
    font-size: 13px;
}

.history-details div {
    margin-top: 4px;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .pack-fields {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .tier-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .view-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .view-actions button {
        width: 100%;
    }
}

/* UoI Registry Section */
.uoi-registry-section {
    margin-bottom: 32px;
}

.registry-card {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 24px;
}

.registry-card h3 {
    color: var(--text-color-light);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.registry-card p {
    color: var(--text-color);
    font-size: 14px;
    margin-bottom: 20px;
}

/* Filter Controls */
.filter-controls {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.filter-select {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-color);
    padding: 8px 12px;
    font-size: 14px;
    min-width: 160px;
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 2px rgba(96, 14, 255, 0.2);
}

/* Registry Table */
.registry-table {
    background: var(--bg-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.registry-table .data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-color);
}

.registry-table .data-table th {
    background: var(--input-bg);
    color: var(--text-color-light);
    font-weight: 600;
    text-align: left;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.registry-table .data-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: 14px;
    vertical-align: middle;
}

.registry-table .data-table tr:hover {
    background: var(--hover-table-bg);
}

.registry-table .data-table tr:last-child td {
    border-bottom: none;
}

/* Capabilities List */
.capabilities-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.capability-tag {
    background: rgba(96, 14, 255, 0.1);
    color: var(--primary-accent);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(96, 14, 255, 0.2);
}

/* Redaction engine pill — shown in the UoI list "Engine" column.
   V1 (piiHunter) renders neutral; V2 (piiRedactV2) renders accent so a
   swap is visible at a glance. */
.engine-pill {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.engine-pill-v1 {
    background: rgba(120, 120, 120, 0.12);
    color: var(--text-secondary, #888);
    border-color: rgba(120, 120, 120, 0.25);
}
.engine-pill-v2 {
    background: rgba(96, 14, 255, 0.14);
    color: var(--primary-accent);
    border-color: rgba(96, 14, 255, 0.35);
    font-weight: 600;
}
.engine-pill-unknown {
    background: rgba(220, 160, 0, 0.12);
    color: #c08000;
    border-color: rgba(220, 160, 0, 0.25);
}
.engine-pill-missing {
    color: var(--text-secondary, #888);
}

/* UoI Details Expanded Row */
.uoi-details {
    background: var(--bg-color) !important;
}

.uoi-details > td {
    padding: 0 !important;
}

.uoi-details-content {
    background: var(--input-bg);
    border-radius: 8px;
    padding: 20px 24px;
    margin: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.uoi-details-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.uoi-details-header h4 {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.refresh-uoi-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(96, 14, 255, 0.1);
    border: 1px solid rgba(96, 14, 255, 0.3);
    border-radius: 4px;
    color: var(--primary-accent);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.refresh-uoi-btn:hover {
    background: rgba(96, 14, 255, 0.2);
    border-color: var(--primary-accent);
}

.refresh-uoi-btn .material-icons {
    font-size: 16px;
}

.uoi-details-content h4 {
    color: var(--text-color-light);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 24px 0 12px 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    gap: 8px;
}

.uoi-details-content h4:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.uoi-metadata {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
    margin: 16px 0 8px 0;
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.uoi-metadata span {
    font-size: 13px;
    color: var(--text-color);
}

.uoi-metadata strong {
    color: var(--text-color-light);
    font-weight: 500;
    margin-right: 4px;
}

.uoi-status-section,
.uoi-stats-section,
.uoi-schedule-section {
    margin-top: 8px;
}

/* Table Actions for UoI */
.table-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.table-action.danger:hover,
.table-action-danger:hover {
    background: var(--error-color);
    color: var(--text-color-light);
}

/* UoI Actions Section */
.uoi-actions-section {
    margin-bottom: 32px;
}

.action-card {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 24px;
    margin-bottom: 20px;
}

.action-card h3 {
    color: var(--text-color-light);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.info-item label {
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    min-width: 140px;
}

.info-item code {
    background: var(--bg-color);
    color: var(--secondary-accent);
    padding: 6px 12px;
    border-radius: var(--border-radius);
    font-family: 'Courier New', monospace;
    font-size: 13px;
    border: 1px solid var(--border-color);
    flex: 1;
    min-width: 200px;
}

.info-value {
    color: var(--text-color-light);
    font-size: 14px;
}

.copy-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--border-radius);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.copy-btn:hover {
    background: var(--primary-accent);
    color: var(--text-color-light);
    border-color: var(--primary-accent);
}

.copy-btn .material-icons {
    font-size: 16px;
}

/* Empty and Error States */
.empty-state,
.error-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-color);
}

.empty-state .material-icons,
.error-state .material-icons {
    font-size: 48px;
    color: var(--border-color);
    margin-bottom: 16px;
    display: block;
}

.empty-state h3,
.error-state h3 {
    color: var(--text-color-light);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

/* ============================================
   PRICING MANAGEMENT STYLES
   ============================================ */

/* Pricing View Layout */
#pricing-view {
    width: 100%;
    max-width: none;
}

#pricing-view .view-header {
    margin-bottom: 24px;
}

#pricing-view .view-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.version-info-inline {
    color: var(--text-color);
    font-size: 12px;
    padding: 6px 12px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-left: auto;
}

/* Pricing Configuration Container */
.pricing-config-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    max-width: none;
}

/* Pricing Sections */
.pricing-section {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 24px;
    width: 100%;
    max-width: none;
}

.pricing-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.pricing-section h3 {
    color: var(--text-color-light);
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Tiers Table Specific Styles */
#tiers-table {
    background: var(--bg-color);
}

#tiers-table thead {
    background: var(--input-bg);
}

#tiers-table th {
    background: var(--input-bg);
    color: var(--text-color-light);
    font-weight: 600;
    text-align: left;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#tiers-table td {
    padding: 14px 16px;
    color: var(--text-color);
    font-size: 14px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
}

/* Tier Row States */
.tier-row {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.tier-row:hover {
    background: var(--hover-table-bg);
}

.tier-row.expanded {
    background: rgba(96, 14, 255, 0.1);
}

.tier-row:last-child td {
    border-bottom: 1px solid var(--border-color);
}

/* Expand Button */
.expand-btn {
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    border-radius: 4px;
}

.expand-btn:hover {
    background: var(--primary-accent);
    color: var(--text-color-light);
}

.expand-btn .material-icons {
    font-size: 20px;
    transition: transform 0.2s;
}

.tier-row.expanded .expand-btn .material-icons {
    transform: rotate(90deg);
}

/* Tier Name Display */
.tier-name-display {
    font-weight: 600;
    color: var(--text-color-light);
}

/* Tier Details Row */
.tier-details-row {
    background: var(--input-bg);
    border-top: 1px solid var(--border-color);
}

.tier-details-row td {
    padding: 0 !important;
    border-bottom: 1px solid var(--border-color);
}

/* Tier Details Content */
.tier-details-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Tier Edit Section */
.tier-edit-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tier-edit-section h4 {
    color: var(--text-color-light);
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tier-edit-section .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tier-edit-section .form-group label {
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
}

.tier-edit-section .form-group input,
.tier-edit-section .form-group textarea {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 10px 12px;
    color: var(--text-color-light);
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.tier-edit-section .form-group input:focus,
.tier-edit-section .form-group textarea:focus {
    outline: none;
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 2px rgba(96, 14, 255, 0.2);
}

.tier-edit-section .form-group textarea {
    resize: vertical;
    min-height: 100px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Tier Packs Section */
.tier-packs-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tier-packs-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tier-packs-section h4 {
    color: var(--text-color-light);
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Packs List */
.packs-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.no-packs {
    color: var(--text-color);
    font-size: 14px;
    padding: 20px;
    text-align: center;
    background: var(--bg-color);
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius);
}

/* Pack Item */
.pack-item {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    transition: all 0.2s;
}

.pack-item:hover {
    border-color: var(--primary-accent);
    box-shadow: 0 2px 8px rgba(96, 14, 255, 0.2);
}

/* Pack Fields */
.pack-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    align-items: end;
}

.pack-fields .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pack-fields .form-group.inline {
    display: flex;
    flex-direction: column;
}

.pack-fields .form-group label {
    color: var(--text-color);
    font-size: 13px;
    font-weight: 500;
}

.pack-fields .form-group input {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 8px 10px;
    color: var(--text-color-light);
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.pack-fields .form-group input:focus {
    outline: none;
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 2px rgba(96, 14, 255, 0.2);
}

.pack-fields .form-group input[readonly] {
    background: var(--bg-color);
    color: var(--text-color);
    cursor: not-allowed;
}

.pack-fields .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 0;
}

.pack-fields .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-accent);
}

/* Action Buttons */
.action-button.small {
    padding: 6px 12px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.action-button.small .material-icons {
    font-size: 18px;
}

/* Icon Button */
.icon-button {
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--border-radius);
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon-button:hover {
    background: var(--error-color);
    color: var(--text-color-light);
}

.icon-button .material-icons {
    font-size: 20px;
}

.delete-tier-btn:hover,
.delete-pack-btn:hover {
    background: var(--error-color);
    color: var(--text-color-light);
}

/* Credit Validity Section */
.validity-config {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 12px;
}

.validity-config label {
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.validity-config input[type="number"],
.validity-config input[type="text"] {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 8px 12px;
    color: var(--text-color-light);
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
    flex: 1;
    min-width: 200px;
}

.validity-config input:focus {
    outline: none;
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 2px rgba(96, 14, 255, 0.2);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .pack-fields {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    #pricing-view .view-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    
    #pricing-view .view-actions button,
    #pricing-view .view-actions .version-info-inline {
        width: 100%;
        margin-left: 0;
    }
    
    .pricing-section {
        padding: 16px;
    }
    
    .pack-fields {
        grid-template-columns: 1fr;
    }
    
    .tier-details-content {
        padding: 16px;
    }
    
    .validity-config label {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .validity-config input {
        width: 100%;
    }
}
.empty-state p,
.error-state p {
    color: var(--text-color);
    font-size: 14px;
    margin-bottom: 20px;
}

.error-state .material-icons {
    color: var(--error-color);
}

.error-state {
    background: rgba(244, 67, 54, 0.05);
    border: 1px solid rgba(244, 67, 54, 0.2);
    border-radius: var(--border-radius);
}

/* Status Colors for UoI */
.status.online {
    background: rgba(76, 175, 80, 0.2);
    color: var(--success-color);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

.status.offline {
    background: rgba(244, 67, 54, 0.2);
    color: var(--error-color);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

.status .material-icons {
    font-size: 14px;
}

/* Responsive UoI Styles */
@media (max-width: 768px) {
    .uoi-status-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .filter-controls {
        flex-direction: column;
    }
    
    .filter-select {
        min-width: 100%;
    }
    
    .info-item {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .info-item label {
        min-width: auto;
    }
    
    .registry-table {
        overflow-x: auto;
    }
    
    .capabilities-list {
        flex-direction: column;
    }
    
    .table-actions {
        flex-direction: column;
        gap: 4px;
    }
}
/* Data Management Styles */
.data-management-container {
    display: flex;
    height: calc(100vh - 200px);
    gap: 20px;
}

/* Data Sidebar */
.data-sidebar {
    width: 300px;
    background: rgba(26, 38, 57, 0.6);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.data-sidebar-header {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(96, 14, 255, 0.1);
}

.data-sidebar-header h3 {
    color: var(--text-color-light);
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.table-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.table-category {
    margin-bottom: 16px;
}

.table-category-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-color);
    padding: 8px 12px;
    opacity: 0.6;
}

.table-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 2px;
    background: rgba(26, 38, 57, 0.6);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.table-item:hover {
    background: var(--hover-table-bg);
    border-color: var(--primary-accent);
}

.table-item.selected {
    background: rgba(96, 14, 255, 0.15);
    border-color: var(--primary-accent);
}

.table-item .material-icons {
    color: var(--primary-accent);
    font-size: 20px;
}

.table-item-info {
    flex: 1;
}

.table-item-name {
    color: var(--text-color-light);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 4px;
}

.table-item-count {
    color: var(--text-color);
    font-size: 11px;
}

/* Data Content */
.data-content {
    flex: 1;
    background: rgba(26, 38, 57, 0.6);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.data-content-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(96, 14, 255, 0.1);
}

.data-content-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.data-content-title h3 {
    color: var(--text-color-light);
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.record-count {
    color: var(--text-color);
    font-size: 14px;
    background: rgba(96, 14, 255, 0.2);
    padding: 4px 12px;
    border-radius: 12px;
}

.data-actions {
    display: flex;
    gap: 8px;
}

.data-records-container {
    flex: 1;
    overflow: auto;
    padding: 20px;
}

/* Data Table */
.data-table-wrapper {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 13px;
}

.data-table thead {
    position: sticky;
    top: 0;
    background: rgba(96, 14, 255, 0.15);
    z-index: 10;
}

.data-table th {
    padding: 12px 16px;
    text-align: left;
    color: var(--text-color-light);
    font-weight: 600;
    border-bottom: 2px solid var(--primary-accent);
    white-space: nowrap;
}

.data-table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    max-width: 300px;
}

.data-table tbody tr {
    transition: background-color 0.2s ease;
}

.data-table tbody tr:hover {
    background: var(--hover-table-bg);
}

.data-table .actions-column {
    width: 80px;
    text-align: center;
}

.cell-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Section header for sub-sections within views */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color-light);
    margin: 0;
}

.btn-icon {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px;
    cursor: pointer;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover {
    background: var(--hover-bg);
    color: var(--text-color-light);
}

.btn-icon.loading svg {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.section-header p {
    font-size: 13px;
    color: var(--text-color);
    opacity: 0.7;
    margin: 0;
}

/* No data placeholder */
.no-data-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-color);
    text-align: center;
    gap: 12px;
}

.no-data-placeholder .material-icons {
    font-size: 64px;
    color: var(--border-color);
    opacity: 0.5;
}

.no-data-placeholder p {
    font-size: 16px;
    color: var(--text-color);
}

/* Action buttons */
.action-button.small {
    padding: 6px 12px;
    font-size: 13px;
    min-width: auto;
}

.action-button.small .material-icons {
    font-size: 18px;
}

.action-button.danger {
    background: var(--error-color);
}

.action-button.danger:hover {
    background: #d32f2f;
}

.action-button.danger:disabled {
    background: rgba(244, 67, 54, 0.3);
}

/* Delete record button in table */
.delete-record-btn {
    background: transparent !important;
    border: 1px solid var(--error-color) !important;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
}

.delete-record-btn .material-icons {
    font-size: 18px;
    color: var(--error-color);
}

.delete-record-btn:hover {
    background: var(--error-color) !important;
}

.delete-record-btn:hover .material-icons {
    color: white;
}

/* ====================================================================
   Pricing Management Styles
   ==================================================================== */

/* Pricing Configuration Container */

/* Version Info Bar */
.version-info {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.version-info-left {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.version-badge-large {
    background: rgba(206, 255, 210, 0.15);
    color: var(--secondary-accent);
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.version-badge-large .material-icons {
    font-size: 16px;
}

.version-timestamp {
    color: var(--text-color);
    font-size: 13px;
    opacity: 0.8;
}

.version-actions {
    display: flex;
    gap: 12px;
}

/* Subscription Tiers Section */
.subscription-tiers {
    margin-bottom: 40px;
}

.section-title {
    color: var(--text-color-light);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-title .material-icons {
    color: var(--primary-accent);
    font-size: 24px;
}

.tiers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

/* Tier Card */
.tier-card {
    background: var(--input-bg);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 24px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.tier-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--primary-accent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tier-card:hover {
    border-color: var(--primary-accent);
    box-shadow: 0 8px 24px rgba(96, 14, 255, 0.15);
    transform: translateY(-2px);
}

.tier-card:hover::before {
    opacity: 1;
}

.tier-card.enterprise {
    border-color: rgba(96, 14, 255, 0.5);
}

.tier-card.enterprise::before {
    background: linear-gradient(90deg, var(--primary-accent), #9c27b0);
}

.tier-header {
    margin-bottom: 20px;
}

.tier-name {
    color: var(--text-color-light);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tier-price-input {
    position: relative;
}

.tier-price-input::before {
    content: '£';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-accent);
    font-size: 20px;
    font-weight: 700;
}

.tier-price-input input[type="number"] {
    width: 100%;
    padding: 12px 16px 12px 36px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-color-light);
    font-size: 24px;
    font-weight: 700;
    transition: all 0.2s ease;
}

.tier-price-input input[type="number"]:focus {
    outline: none;
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 3px rgba(96, 14, 255, 0.1);
}

.tier-price-suffix {
    color: var(--text-color);
    font-size: 14px;
    margin-top: 8px;
    opacity: 0.7;
}

.tier-features {
    margin-top: 20px;
}

.tier-features label {
    display: block;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tier-features textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-color-light);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    transition: all 0.2s ease;
    line-height: 1.6;
}

.tier-features textarea:focus {
    outline: none;
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 3px rgba(96, 14, 255, 0.1);
}

.tier-features textarea::placeholder {
    color: var(--text-color);
    opacity: 0.5;
}

/* Credit Packs Section */
.credit-packs-section {
    margin-bottom: 40px;
}

.packs-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Credit Pack Item */
.credit-pack-item {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
    transition: all 0.3s ease;
    position: relative;
}

.credit-pack-item:hover {
    border-color: rgba(96, 14, 255, 0.5);
    box-shadow: 0 4px 16px rgba(96, 14, 255, 0.1);
}

.credit-pack-item.popular {
    border-color: var(--primary-accent);
    background: linear-gradient(135deg, var(--input-bg) 0%, rgba(96, 14, 255, 0.05) 100%);
}

.popular-badge {
    position: absolute;
    top: -10px;
    right: 20px;
    background: var(--primary-accent);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(96, 14, 255, 0.3);
}

.pack-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.pack-header h4 {
    color: var(--text-color-light);
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.remove-pack-btn {
    background: transparent;
    border: 1px solid var(--error-color);
    color: var(--error-color);
    padding: 6px 12px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.remove-pack-btn:hover {
    background: var(--error-color);
    color: white;
}

.remove-pack-btn .material-icons {
    font-size: 16px;
}

.pack-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 12px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    color: var(--text-color);
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input[type="number"],
.form-group input[type="text"] {
    padding: 10px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-color-light);
    font-size: 14px;
    transition: all 0.2s ease;
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 3px rgba(96, 14, 255, 0.1);
}

.pack-calculated {
    background: rgba(96, 14, 255, 0.05);
    border: 1px dashed var(--primary-accent);
    border-radius: var(--border-radius);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pack-calculated-label {
    color: var(--text-color);
    font-size: 13px;
    font-weight: 500;
}

.pack-calculated-value {
    color: var(--primary-accent);
    font-size: 18px;
    font-weight: 700;
}

.pack-popular-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 8px 0;
}

.pack-popular-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-accent);
}

.pack-popular-toggle label {
    color: var(--text-color-light);
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}

/* Add Pack Button */
.add-pack-btn {
    background: transparent;
    border: 2px dashed var(--border-color);
    color: var(--text-color);
    padding: 16px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    margin-top: 16px;
}

.add-pack-btn:hover {
    border-color: var(--primary-accent);
    background: rgba(96, 14, 255, 0.05);
    color: var(--primary-accent);
}

.add-pack-btn .material-icons {
    font-size: 20px;
}

/* Credit Validity Settings */
.credit-validity-section {
    margin-bottom: 40px;
}

.validity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.validity-card {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
}

.validity-card h4 {
    color: var(--text-color-light);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
}

.validity-card .form-group {
    margin-bottom: 0;
}

/* Action Buttons */
.pricing-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid var(--border-color);
}

.btn-save {
    background: var(--primary-accent);
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(96, 14, 255, 0.3);
}

.btn-save:hover {
    background: #7b1fa2;
    box-shadow: 0 6px 16px rgba(96, 14, 255, 0.4);
    transform: translateY(-1px);
}

.btn-save:disabled {
    background: rgba(96, 14, 255, 0.3);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn-save .material-icons {
    font-size: 18px;
}

.btn-secondary {
    background: transparent;
    color: var(--text-color-light);
    border: 1px solid var(--border-color);
    padding: 12px 28px;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    border-color: var(--primary-accent);
    color: var(--primary-accent);
    background: rgba(96, 14, 255, 0.05);
}

.btn-secondary .material-icons {
    font-size: 18px;
}

.btn-danger {
    background: var(--error-color);
    color: var(--text-color-light);
    border: none;
    padding: 12px 28px;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-danger:hover {
    background: #d32f2f;
    box-shadow: 0 4px 12px rgba(244, 67, 54, 0.4);
}

.btn-warning {
    background: var(--warning-color);
    color: #000;
    border: none;
    padding: 12px 28px;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-warning:hover {
    background: #e09900;
    box-shadow: 0 4px 12px rgba(240, 173, 78, 0.4);
}

.btn-primary {
    background: var(--primary-accent);
    color: var(--text-color-light);
    border: none;
    padding: 12px 28px;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: var(--hover-bg);
    box-shadow: 0 4px 12px rgba(96, 14, 255, 0.4);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn:disabled:hover {
    box-shadow: none;
    transform: none;
}

/* Table action warning button */
.table-action-warning:hover {
    background: var(--warning-color);
    color: #000;
}

/* Subscription Management Modal */
.modal-content.subscription-modal {
    max-width: 1100px;
    width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
}

.subscription-info {
    background: var(--input-bg);
    padding: 16px;
    border-radius: var(--border-radius);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 24px;
}

.subscription-info p {
    margin: 4px 0;
    color: var(--text-color);
}

.subscription-actions {
    display: block;
}

.sub-modal-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 12px;
}

.sub-modal-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-color);
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: -1px;
}

.sub-modal-tab:hover {
    color: var(--text-color-light);
}

.sub-modal-tab.active {
    color: var(--text-color-light);
    border-bottom-color: var(--accent-color, #7c3aed);
}

.sub-modal-panel {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.sub-modal-panel.active {
    display: grid;
}

/* Invoicing tab: single column so the wide invoice table gets full width (no clipped
   columns), and the contract card sizes to its content instead of stretching. */
.sub-modal-panel[data-sub-panel="invoicing"] {
    grid-template-columns: 1fr;
}

/* Cap the invoice list height and scroll long histories rather than growing the modal. */
#enterprise-invoices-list {
    max-height: 340px;
    overflow: auto;
}
#enterprise-invoices-list table {
    min-width: 600px;
}

.action-group {
    padding: 14px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

.minimum-dsar-actions,
.maximum-dsar-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

.minimum-dsar-actions .btn,
.maximum-dsar-actions .btn {
    flex: 1;
}

/* Compact row for the credit-expiry quick-set buttons (date input stays full width above). */
.expiry-quick-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.expiry-quick-actions .btn {
    flex: 1;
}

.credit-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.credit-input-group input {
    width: 100%;
}

#credit-balance-info,
#minimum-dsar-info,
#maximum-dsar-info,
#co-contract-info,
#enterprise-contract-info {
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    margin-bottom: 12px;
    font-size: 14px;
}

.action-group h4 {
    color: var(--text-color-light);
    margin-bottom: 8px;
    font-size: 14px;
}

.action-group .action-description {
    color: var(--text-color);
    font-size: 12px;
    margin-bottom: 12px;
    flex: 1;
}

.tier-select-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.tier-select-group select {
    flex: 1;
    min-width: 0;
}

.tier-select-group .btn {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Ensure buttons align at bottom of action groups */
.action-group > .btn,
.action-group > .tier-select-group {
    margin-top: auto;
}

#pending-credits-info {
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    margin-bottom: 12px;
    font-size: 14px;
}

.pending-credits-loading {
    color: var(--text-color);
    opacity: 0.7;
}

.pending-badge {
    color: #f59e0b;
    font-weight: 600;
    font-size: 0.9em;
}

.min-dsar-badge {
    display: inline-block;
    padding: 2px 6px;
    background: rgba(124, 58, 237, 0.18);
    color: #c4b5fd;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: 600;
    margin-left: 4px;
    white-space: nowrap;
}

/* Responsive Subscription Modal - for smaller screens (14" MacBook default) */
@media (max-height: 800px) {
    .modal-content.subscription-modal {
        max-height: 90vh;
        display: flex;
        flex-direction: column;
    }

    .modal-content.subscription-modal .modal-header {
        flex-shrink: 0;
    }

    .modal-content.subscription-modal .modal-body {
        padding: 12px 16px;
        overflow-y: auto;
        flex: 1;
        min-height: 0;
    }

    .modal-content.subscription-modal .modal-footer {
        flex-shrink: 0;
        border-top: 1px solid var(--border-color);
    }

    .modal-content.subscription-modal .subscription-info {
        padding: 10px 12px;
        gap: 4px 16px;
    }

    .modal-content.subscription-modal .subscription-info p {
        font-size: 12px;
        margin: 2px 0;
    }

    .modal-content.subscription-modal hr {
        margin: 12px 0;
    }

    .modal-content.subscription-modal .subscription-actions {
        gap: 8px;
    }

    .modal-content.subscription-modal .action-group {
        padding: 10px;
    }

    .modal-content.subscription-modal .action-group h4 {
        font-size: 12px;
        margin-bottom: 4px;
    }

    .modal-content.subscription-modal .action-group .action-description {
        font-size: 11px;
        margin-bottom: 8px;
    }

    .modal-content.subscription-modal .action-group .btn {
        padding: 6px 10px;
        font-size: 12px;
    }

    .modal-content.subscription-modal .action-group .btn .material-icons {
        font-size: 16px;
    }

    .modal-content.subscription-modal #pending-credits-info,
    .modal-content.subscription-modal #credit-balance-info {
        padding: 6px 10px;
        font-size: 12px;
        margin-bottom: 8px;
    }

    .modal-content.subscription-modal .credit-input-group {
        gap: 6px;
        margin-bottom: 8px;
    }

    .modal-content.subscription-modal .credit-input-group input {
        padding: 6px 8px;
        font-size: 12px;
    }

    .modal-content.subscription-modal .tier-select-group {
        gap: 6px;
    }

    .modal-content.subscription-modal .tier-select-group select {
        padding: 6px 8px;
        font-size: 12px;
    }

    .modal-content.subscription-modal .modal-footer {
        padding: 12px 16px;
    }
}

/* Even smaller screens */
@media (max-height: 700px) {
    .modal-content.subscription-modal .subscription-info {
        padding: 8px 10px;
    }

    .modal-content.subscription-modal .subscription-info p {
        font-size: 11px;
    }

    .modal-content.subscription-modal .subscription-actions {
        gap: 6px;
    }

    .modal-content.subscription-modal .action-group {
        padding: 8px;
    }

    .modal-content.subscription-modal .action-group h4 {
        font-size: 11px;
        margin-bottom: 3px;
    }

    .modal-content.subscription-modal .action-group .action-description {
        font-size: 10px;
        margin-bottom: 6px;
    }

    .modal-content.subscription-modal .action-group .btn {
        padding: 5px 8px;
        font-size: 11px;
    }

    .modal-content.subscription-modal #pending-credits-info,
    .modal-content.subscription-modal #credit-balance-info {
        padding: 5px 8px;
        font-size: 11px;
        margin-bottom: 6px;
    }

    .modal-content.subscription-modal .action-group.pending-credits-group,
    .modal-content.subscription-modal .action-group.credit-balance-group {
        min-width: 170px;
    }
}

/* History Modal */
.pricing-history-modal {
    max-width: 900px;
}

.history-timeline {
    max-height: 500px;
    overflow-y: auto;
    padding: 16px;
}

.history-item {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 16px;
    position: relative;
}

.history-item::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 24px;
    width: 12px;
    height: 12px;
    background: var(--primary-accent);
    border-radius: 50%;
    border: 3px solid var(--card-bg);
}

.history-item.active {
    border-color: var(--primary-accent);
    background: linear-gradient(135deg, var(--input-bg) 0%, rgba(96, 14, 255, 0.05) 100%);
}

.history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.history-version {
    color: var(--primary-accent);
    font-size: 16px;
    font-weight: 700;
}

.history-date {
    color: var(--text-color);
    font-size: 13px;
    opacity: 0.7;
}

.history-changes {
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.6;
}

/* Loading States */
.pricing-loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-color);
}

.pricing-loading .material-icons {
    font-size: 48px;
    color: var(--primary-accent);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Unsaved Changes Indicator */
.unsaved-indicator {
    background: #ff9800;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.unsaved-indicator .material-icons {
    font-size: 14px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .tiers-grid {
        grid-template-columns: 1fr;
    }

    .pack-fields {
        grid-template-columns: 1fr;
    }

    .validity-grid {
        grid-template-columns: 1fr;
    }

    /* Manage Subscription modal: stack everything into one column on narrow screens
       so the cards/inputs aren't squeezed (the 2-col grids would be unusably small). */
    .modal-content.subscription-modal {
        width: 94vw;
        /* It's a flex child of the backdrop; without this, min-content (e.g. the
           nowrap two-button rows) overrides the width and the modal exceeds the screen. */
        min-width: 0;
    }
    .sub-modal-panel,
    .subscription-info {
        grid-template-columns: minmax(0, 1fr);
    }
    /* Let grid items + the two-button action rows shrink/wrap instead of forcing width. */
    .action-group {
        min-width: 0;
    }
    .minimum-dsar-actions,
    .maximum-dsar-actions {
        flex-wrap: wrap;
    }
    .minimum-dsar-actions .btn,
    .maximum-dsar-actions .btn {
        min-width: 0;
    }
    .sub-modal-tabs {
        flex-wrap: wrap;
    }
    .sub-modal-tab {
        padding: 10px 12px;
    }
    /* The invoices table can scroll horizontally inside its own (already capped) box. */
    #enterprise-invoices-list table {
        min-width: 520px;
    }
    
    .version-info {
        flex-direction: column;
        align-items: stretch;
    }
    
    .version-actions {
        justify-content: stretch;
    }
    
    .version-actions button {
        flex: 1;
    }
    
    .pricing-actions {
        flex-direction: column-reverse;
    }
    
    .pricing-actions button {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .tier-price-input input[type="number"] {
        font-size: 20px;
    }
    
    .section-title {
        font-size: 16px;
    }
    
    .tier-name {
        font-size: 18px;
    }

/* ====================================================================
   Pricing Table Styles (Table-based Interface)
   ==================================================================== */

/* Pricing Config Container */
.pricing-config-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Pricing Section */
.pricing-section {
    width: 100%;
}

.pricing-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.pricing-section .section-header h3 {
    margin: 0;
    color: var(--text-color-light);
    font-size: 18px;
    font-weight: 600;
}

/* Ensure table container takes full width */
.pricing-section .table-container {
    width: 100%;
    overflow-x: auto;
    min-height: 400px;
}

.pricing-section .admin-table {
    width: 100%;
    min-width: 100%;
}

/* Tier Row Customization */
.tier-row {
    cursor: pointer;
}

.tier-row.expanded {
    background: rgba(96, 14, 255, 0.05);
}

.tier-name-display {
    font-weight: 600;
}

/* Expand Button */
.expand-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    opacity: 0.5;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.expand-btn:hover {
    opacity: 0.8;
}

.expand-btn .material-icons {
    font-size: 20px;
    transition: transform 0.2s ease;
}

.tier-row.expanded .expand-btn .material-icons {
    transform: rotate(90deg);
}

/* Tier Details Row */
.tier-details-row {
    background: var(--input-bg);
}

.tier-details-row td {
    padding: 0;
}

.tier-details-content {
    padding: 24px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 32px;
}

/* Tier Edit Section */
.tier-edit-section h4,
.tier-packs-section h4 {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 15px;
    color: var(--text-color);
}

.tier-edit-section .form-group {
    margin-bottom: 16px;
}

.tier-edit-section .form-group:last-child {
    margin-bottom: 0;
}

.tier-edit-section label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
}

.tier-edit-section input[type="text"],
.tier-edit-section input[type="number"],
.tier-edit-section textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--card-bg);
    color: var(--text-color);
    font-size: 14px;
    font-family: inherit;
}

.tier-edit-section textarea {
    resize: vertical;
    min-height: 100px;
}

/* Tier Packs Section */
.tier-packs-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.packs-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.no-packs {
    padding: 32px;
    text-align: center;
    color: var(--text-color);
    opacity: 0.6;
    font-size: 14px;
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius);
}

/* Pack Item */
.pack-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
}

.pack-fields {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pack-fields .form-group {
    margin: 0;
}

.pack-fields .form-group.inline {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pack-fields .form-group.inline label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-color);
    opacity: 0.8;
}

.pack-fields .form-group.inline input[type="number"] {
    width: 100px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 13px;
}

.pack-fields .form-group.inline input[readonly] {
    background: var(--hover-bg);
    opacity: 0.7;
}

.pack-fields .checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
}

.pack-fields .checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Delete Pack Button */
.delete-pack-btn {
    margin-left: auto;
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: #ef4444;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    border-radius: 4px;
}

.delete-pack-btn:hover {
    opacity: 1;
    background: rgba(239, 68, 68, 0.1);
}

.delete-pack-btn .material-icons {
    font-size: 20px;
}

/* Delete Tier Button */
.delete-tier-btn {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: #ef4444;
    opacity: 0.5;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.delete-tier-btn:hover {
    opacity: 1;
    background: rgba(239, 68, 68, 0.1);
}

.delete-tier-btn .material-icons {
    font-size: 20px;
}

/* Icon Button */
.icon-button {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.icon-button:hover {
    background: var(--hover-bg);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .tier-details-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    #tiers-table th:nth-child(4),
    #tiers-table th:nth-child(5),
    .tier-row td:nth-child(4),
    .tier-row td:nth-child(5) {
        display: none;
    }
    
    .pack-fields {
        flex-direction: column;
        align-items: stretch;
    }
    
    .pack-fields .form-group.inline input[type="number"] {
        width: 100%;
    }
}

}
/* Contact Filter Tabs */
.filter-tabs {
    display: flex;
    gap: 8px;
    margin-right: auto;
}

.filter-tab {
    padding: 8px 16px;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-tab:hover {
    background: #e2e8f0;
    color: #475569;
}

.filter-tab.active {
    background: #6366f1;
    color: white;
}

/* Contacts Stats Inline */
.contacts-stats-inline {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 0 auto;
}

.stat-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
}

.stat-chip-number {
    font-weight: 700;
    font-size: 16px;
    color: #1e293b;
}

.stat-chip-label {
    font-weight: 500;
    color: #64748b;
    font-size: 12px;
}

/* Stat chip variants */
.stat-chip.stat-beta .stat-chip-number {
    color: #10b981;
}

.stat-chip.stat-contact .stat-chip-number {
    color: #6366f1;
}

.stat-chip.stat-new .stat-chip-number {
    color: #f59e0b;
}

/* Environment Switch Styles */
.env-switch-container {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: var(--input-bg);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    margin-right: 16px;
}

.env-label {
    font-size: 12px;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.env-toggle {
    display: flex;
    gap: 4px;
    background: var(--bg-color);
    padding: 3px;
    border-radius: 6px;
}

.env-btn {
    padding: 6px 14px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.env-btn:hover:not(.active) {
    background: var(--hover-table-bg);
}

.env-btn.active[data-env="dev"] {
    background: var(--warning-color);
    color: #000;
}

.env-btn.active[data-env="live"] {
    background: var(--success-color);
    color: #fff;
}

.env-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--warning-color);
}

.env-indicator.live {
    background: var(--success-color);
}

/* Environment badge in title area */
.env-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 8px;
    vertical-align: middle;
}

.env-badge.dev {
    background: var(--warning-color);
    color: #000;
}

.env-badge.live {
    background: var(--success-color);
    color: #fff;
}

/* ============================================
   PRICING - SUBSCRIPTION CARDS
   Scoped to #pricing-view to avoid conflicts
   ============================================ */

#pricing-view #subscriptions-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
}

#pricing-view .subscription-card {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
    overflow: hidden;
}

#pricing-view .subscription-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

#pricing-view .subscription-card-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#pricing-view .subscription-card-title h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color-light);
}

#pricing-view .subscription-id {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.7;
}

#pricing-view .stripe-id {
    font-size: 11px;
    color: var(--accent-color);
    font-family: monospace;
    opacity: 0.8;
}

#sync-stripe-btn.needs-sync {
    background-color: #f59e0b;
    color: white;
}

#sync-stripe-btn.needs-sync::after {
    content: ' *';
}

#pricing-view .subscription-card-actions {
    display: flex;
    gap: 8px;
}

#pricing-view .subscription-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

#pricing-view .subscription-description {
    font-size: 14px;
    color: var(--text-color);
    line-height: 1.4;
}

#pricing-view .subscription-pricing {
    font-size: 14px;
    color: var(--text-color-light);
}

#pricing-view .subscription-adhoc {
    font-size: 13px;
    color: var(--error-color);
}

#pricing-view .credit-packs-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

#pricing-view .credit-packs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

#pricing-view .credit-packs-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
}

#pricing-view .credit-packs-inline-table {
    width: 100%;
    font-size: 12px;
    border-collapse: collapse;
    table-layout: fixed;
}

#pricing-view .credit-packs-inline-table th {
    text-align: left;
    font-weight: 600;
    color: var(--text-color);
    padding: 6px 4px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

#pricing-view .credit-packs-inline-table td {
    padding: 6px 4px;
    color: var(--text-color-light);
    border-bottom: 1px solid var(--border-color);
}

#pricing-view .credit-packs-inline-table tr:last-child td {
    border-bottom: none;
}

#pricing-view .credit-packs-inline-table .empty-packs {
    color: var(--text-color);
    opacity: 0.7;
    font-style: italic;
}

#pricing-view .pack-actions {
    display: flex;
    gap: 4px;
}

#pricing-view .pack-actions button {
    padding: 4px 8px;
    font-size: 11px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-color);
    cursor: pointer;
}

#pricing-view .pack-actions button:hover {
    background: var(--border-color);
}

#pricing-view .pack-actions .delete-pack-btn {
    background: rgba(244, 67, 54, 0.2);
    border-color: var(--error-color);
    color: var(--error-color);
}

#pricing-view .pack-actions .delete-pack-btn:hover {
    background: var(--error-color);
    color: #fff;
}

/* Subscription Editor - Full Page View */
#pricing-view .subscription-editor-page {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0;
}

#pricing-view .editor-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

#pricing-view .editor-toolbar .toolbar-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
}

#pricing-view .editor-toolbar .toolbar-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    background: var(--input-bg);
    color: var(--text-color);
}

#pricing-view .editor-toolbar .toolbar-btn:hover {
    background: var(--border-color);
}

#pricing-view .editor-toolbar .toolbar-btn.save {
    background: var(--primary-accent);
    border-color: var(--primary-accent);
    color: white;
}

#pricing-view .editor-toolbar .toolbar-btn.save:hover {
    background: var(--accent-hover);
}

#pricing-view .editor-toolbar .toolbar-btn .material-icons {
    font-size: 18px;
}

#pricing-view .subscription-editor-form {
    padding: 24px;
}

#pricing-view .subscription-editor-form .form-section {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
}

#pricing-view .subscription-editor-form .form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

#pricing-view .subscription-editor-form .form-section h4 {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#pricing-view .subscription-editor-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 16px;
}

#pricing-view .subscription-editor-form .form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#pricing-view .subscription-editor-form .form-field.full {
    grid-column: span 2;
}

#pricing-view .subscription-editor-form .form-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#pricing-view .subscription-editor-form .form-field input,
#pricing-view .subscription-editor-form .form-field textarea,
#pricing-view .subscription-editor-form .form-field select {
    padding: 10px 12px;
    font-size: 14px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-color-light);
}

#pricing-view .subscription-editor-form .form-field input:focus,
#pricing-view .subscription-editor-form .form-field textarea:focus,
#pricing-view .subscription-editor-form .form-field select:focus {
    border-color: var(--primary-accent);
    outline: none;
}

#pricing-view .subscription-editor-form .form-field input[readonly] {
    background: var(--bg-color);
    opacity: 0.7;
    cursor: not-allowed;
}

#pricing-view .subscription-editor-form .form-field.readonly label {
    opacity: 0.7;
}

#pricing-view .subscription-editor-form .form-field .field-hint {
    font-size: 11px;
    color: var(--text-color);
    opacity: 0.6;
}

#pricing-view .subscription-editor-form .form-field.checkbox-field label {
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: none;
    font-weight: 500;
    cursor: pointer;
}

#pricing-view .subscription-editor-form .form-field.checkbox-field input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

#pricing-view .subscription-editor-form .form-field.stripe-info input {
    font-family: monospace;
    font-size: 12px;
    color: var(--accent-color);
}

#pricing-view .subscription-editor-form .form-field.calculated-price {
    background: var(--bg-color);
    padding: 12px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

#pricing-view .subscription-editor-form .form-field.calculated-price .price-display {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-accent);
}

#pricing-view .subscription-editor-form .form-field.calculated-price .field-hint {
    color: var(--success-color);
    font-weight: 500;
}

/* Efficiency Section (Power Law Pricing) */
#pricing-view .subscription-editor-form .section-description {
    margin: -8px 0 16px 0;
    font-size: 13px;
    color: var(--text-color);
    opacity: 0.8;
    line-height: 1.5;
}

#pricing-view .subscription-editor-form .section-description sup {
    font-size: 10px;
}

#pricing-view .subscription-editor-form .efficiency-preview {
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(var(--primary-accent-rgb), 0.1);
    border-radius: var(--border-radius);
    border: 1px solid rgba(var(--primary-accent-rgb), 0.2);
}

#pricing-view .subscription-editor-form .efficiency-preview .preview-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

#pricing-view .subscription-editor-form .efficiency-preview .preview-examples {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

#pricing-view .subscription-editor-form .efficiency-preview .preview-example {
    text-align: center;
}

#pricing-view .subscription-editor-form .efficiency-preview .preview-size {
    font-size: 11px;
    color: var(--text-color);
    opacity: 0.7;
}

#pricing-view .subscription-editor-form .efficiency-preview .preview-credits {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-accent);
}

#pricing-view .subscription-editor-form .efficiency-preview .preview-rate {
    font-size: 10px;
    color: var(--text-color);
    opacity: 0.6;
}

/* ============================================
   OFFERS - OFFER CARDS & EDITOR
   Scoped to #offers-view to avoid conflicts
   ============================================ */

/* Grid container - #offers-container gets .offers-grid class added by JS */
#offers-view #offers-container.offers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 420px);
    gap: 20px;
    justify-content: start;
}

#offers-view .offer-card {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
}

#offers-view .offer-card.status-live {
    border-left: 3px solid var(--success-color);
}

#offers-view .offer-card.status-suspended {
    border-left: 3px solid var(--error-color);
}

#offers-view .offer-card.status-expired {
    border-left: 3px solid var(--warning-color);
    opacity: 0.8;
}

/* Archived cards - same styling as regular cards */

/* offers.js uses .offer-header not .offer-card-header */
#offers-view .offer-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

/* offers.js uses .offer-title (div containing h3) */
#offers-view .offer-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#offers-view .offer-title h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color-light);
    margin: 0;
}

#offers-view .offer-status {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: capitalize;
    display: inline-block;
}

/* offers.js uses .status-live and .status-suspended classes */
#offers-view .offer-status.status-live {
    background: rgba(76, 175, 80, 0.2);
    color: var(--success-color);
}

#offers-view .offer-status.status-suspended {
    background: rgba(244, 67, 54, 0.2);
    color: var(--error-color);
}

#offers-view .offer-status.status-expired {
    background: rgba(240, 173, 78, 0.2);
    color: var(--warning-color);
}

#offers-view .offer-status.status-archived {
    background: rgba(107, 107, 107, 0.2);
    color: var(--text-color);
}

/* offers.js uses .offer-actions not .offer-card-actions */
#offers-view .offer-actions {
    display: flex;
    gap: 8px;
}

#offers-view .offer-actions .icon-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 4px;
    cursor: pointer;
    color: var(--text-color);
}

#offers-view .offer-actions .icon-btn:hover {
    background: var(--border-color);
}

#offers-view .offer-voucher-code {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: monospace;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-accent);
    background: var(--bg-color);
    padding: 8px 12px;
    border-radius: 4px;
    margin: 12px 0;
}

#offers-view .offer-voucher-code .material-icons {
    font-size: 18px;
    opacity: 0.7;
}

#offers-view .offer-voucher-code code {
    letter-spacing: 2px;
}

#offers-view .offer-voucher-code .copy-btn {
    margin-left: 4px;
    padding: 4px 10px;
    font-size: 12px;
    background: var(--border-color);
    border: none;
    border-radius: 4px;
    color: var(--text-color);
    cursor: pointer;
}

#offers-view .offer-voucher-code .copy-btn:hover {
    background: var(--primary-accent);
    color: #fff;
}

#offers-view .offer-description {
    font-size: 13px;
    color: var(--text-color);
    margin: 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

#offers-view .offer-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}

#offers-view .offer-tag {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

#offers-view .offer-tag.subscription {
    background: rgba(96, 14, 255, 0.2);
    color: var(--primary-accent);
}

/* offers.js uses .credit not .credits */
#offers-view .offer-tag.credit {
    background: rgba(76, 175, 80, 0.2);
    color: var(--success-color);
}

#offers-view .offer-tag.discount {
    background: rgba(255, 152, 0, 0.2);
    color: #ff9800;
}

#offers-view .offer-tag.multi {
    background: rgba(33, 150, 243, 0.2);
    color: #2196f3;
}

#offers-view .offer-meta {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.7;
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

#offers-view .offer-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

#offers-view .offer-meta .material-icons {
    font-size: 14px;
}

/* offers.js uses .offer-footer */
#offers-view .offer-footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

#offers-view .offer-toggle-status {
    padding: 6px 12px;
    font-size: 12px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

#offers-view .offer-toggle-status:hover {
    background: var(--border-color);
}

/* Empty state */
#offers-view .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-color);
    grid-column: 1 / -1;
    width: 100%;
}

#offers-view .empty-state .material-icons {
    font-size: 48px;
    opacity: 0.5;
    margin-bottom: 16px;
}

#offers-view .empty-state p {
    margin-bottom: 20px;
}

#offers-view .empty-state .action-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

#offers-view .empty-state .action-button:hover {
    background: var(--primary-color-hover);
}

#offers-view .empty-state .action-button .material-icons {
    font-size: 18px;
    opacity: 1;
    margin-bottom: 0;
}

/* Loading placeholder */
#offers-view .loading-placeholder {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-color);
}

#offers-view .loading-placeholder img {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
}

/* Error message */
#offers-view .error-message {
    text-align: center;
    padding: 40px 20px;
    color: var(--error-color);
}

#offers-view .error-message .material-icons {
    font-size: 48px;
    margin-bottom: 16px;
}

/* Offer Editor */
#offers-view .offer-editor-page {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 24px;
}

#offers-view .offer-editor-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

#offers-view .offer-editor-form {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
}

#offers-view .offer-editor-form .form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#offers-view .offer-editor-form .form-field.full { grid-column: span 12; }
#offers-view .offer-editor-form .form-field.half { grid-column: span 6; }
#offers-view .offer-editor-form .form-field.third { grid-column: span 4; }
#offers-view .offer-editor-form .form-field.quarter { grid-column: span 3; }

#offers-view .offer-editor-form .form-field.checkbox-centered {
    justify-content: flex-end;
    padding-bottom: 10px;
}

#offers-view .inline-checkbox-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

#offers-view .inline-checkbox-input input[type="date"] {
    flex: 1;
}

/* Date picker calendar icon styling for dark theme */
#offers-view input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

#offers-view .offer-editor-form .form-field label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#offers-view .offer-editor-form .form-field input,
#offers-view .offer-editor-form .form-field select,
#offers-view .offer-editor-form .form-field textarea {
    padding: 10px 12px;
    font-size: 14px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-color-light);
}

#offers-view .offer-editor-form .form-field input:focus,
#offers-view .offer-editor-form .form-field select:focus,
#offers-view .offer-editor-form .form-field textarea:focus {
    border-color: var(--primary-accent);
    outline: none;
}

#offers-view .offer-editor-form .form-divider {
    grid-column: span 12;
    display: flex;
    align-items: center;
    margin: 8px 0;
    padding-top: 8px;
}

#offers-view .offer-editor-form .form-divider span {
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-right: 12px;
    white-space: nowrap;
}

#offers-view .offer-editor-form .form-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

/* Offer Summary Section - Always visible */
#offers-view .offer-summary-section {
    grid-column: span 12;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

#offers-view .offer-summary-display {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 12px 16px;
    min-height: 80px;
}

#offers-view .offer-summary-display .summary-placeholder {
    color: var(--text-color);
    opacity: 0.5;
    font-style: italic;
    margin: 0;
}

#offers-view .offer-summary-display .summary-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

#offers-view .offer-summary-display .summary-list li {
    padding: 4px 0;
    color: var(--text-color-light);
    font-size: 14px;
    line-height: 1.4;
}

#offers-view .offer-summary-display .summary-list li::before {
    content: '\2022';
    color: var(--primary-accent);
    font-weight: bold;
    display: inline-block;
    width: 16px;
}

#offers-view .offer-summary-display .summary-warnings {
    margin: 0 0 8px 0;
    padding: 0;
    list-style: none;
}

#offers-view .offer-summary-display .summary-warnings li {
    padding: 4px 0;
    color: #dc3545;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
}

#offers-view .offer-summary-display .summary-warnings li::before {
    content: '\26A0';
    font-weight: bold;
    display: inline-block;
    width: 20px;
}

/* Offer Editor Tabs */
#offers-view .offer-editor-tabs {
    grid-column: span 12;
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0;
}

#offers-view .offer-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-color);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

#offers-view .offer-tab:hover {
    color: var(--text-color-light);
    background: rgba(255, 255, 255, 0.05);
}

#offers-view .offer-tab.active {
    color: var(--primary-accent);
    border-bottom-color: var(--primary-accent);
}

#offers-view .offer-tab .material-icons {
    font-size: 18px;
}

/* Tab Content */
#offers-view .offer-tab-content {
    display: none;
    grid-column: span 12;
}

#offers-view .offer-tab-content.active {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}

/* Tab Section Header */
#offers-view .tab-section-header {
    grid-column: span 12;
    margin-bottom: 8px;
}

#offers-view .tab-section-header h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color-light);
    margin-bottom: 4px;
}

#offers-view .tab-section-header p {
    font-size: 13px;
    color: var(--text-color);
    opacity: 0.8;
}

/* Info Box */
#offers-view .info-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(96, 14, 255, 0.1);
    border-radius: var(--border-radius);
    border: 1px solid rgba(96, 14, 255, 0.2);
}

#offers-view .info-box .material-icons {
    color: var(--primary-accent);
    font-size: 20px;
    flex-shrink: 0;
}

#offers-view .info-box p {
    margin: 0;
    font-size: 13px;
    color: var(--text-color);
    line-height: 1.5;
}

/* Toolbar buttons */
#offers-view .toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    background: transparent;
    color: var(--text-color);
}

#offers-view .toolbar-btn:hover {
    background: var(--border-color);
}

#offers-view .toolbar-btn.save {
    background: var(--primary-accent);
    border-color: var(--primary-accent);
    color: #fff;
}

#offers-view .toolbar-btn.save:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

#offers-view .toolbar-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color-light);
}

/* Checkbox inline label */
#offers-view .checkbox-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    text-transform: none;
    letter-spacing: normal;
}

#offers-view .checkbox-inline input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

/* Eligibility section */
#offers-view .eligibility-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

#offers-view .eligibility-empty {
    text-align: center;
    padding: 30px;
    background: var(--bg-color);
    border-radius: var(--border-radius);
    color: var(--text-color);
}

#offers-view .eligibility-empty .material-icons {
    font-size: 32px;
    opacity: 0.5;
    margin-bottom: 8px;
}

#offers-view .eligibility-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

#offers-view .eligibility-table th,
#offers-view .eligibility-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

#offers-view .eligibility-table th {
    font-weight: 600;
    color: var(--text-color);
    background: var(--bg-color);
}

#offers-view .eligibility-table td {
    color: var(--text-color-light);
}

#offers-view .status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

#offers-view .status-badge.registered {
    background: rgba(76, 175, 80, 0.2);
    color: var(--success-color);
}

#offers-view .status-badge.not-registered {
    background: rgba(240, 173, 78, 0.2);
    color: var(--warning-color);
}

#offers-view .actions-cell {
    display: flex;
    gap: 8px;
    align-items: center;
}

#offers-view .delete-btn {
    background: transparent;
    border: none;
    color: var(--error-color);
    cursor: pointer;
    padding: 4px;
}

#offers-view .delete-btn:hover {
    background: rgba(244, 67, 54, 0.1);
    border-radius: 4px;
}

/* ============================================
   OFFERS - ADD EMAIL MODAL
   Scoped to #pricing-modal-container for specificity
   ============================================ */

#pricing-modal-container .add-email-modal {
    min-width: 400px;
}

#pricing-modal-container .add-email-modal .search-input-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 10px 12px;
    margin-bottom: 12px;
}

#pricing-modal-container .add-email-modal .search-input-container > .material-icons {
    flex-shrink: 0;
    color: var(--text-color);
    opacity: 0.5;
    font-size: 20px;
}

#pricing-modal-container .add-email-modal .search-input-container input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 14px;
    color: var(--text-color-light);
}

#pricing-modal-container .add-email-modal .search-results {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 12px;
}

#pricing-modal-container .add-email-modal .search-result-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--border-radius);
    cursor: pointer;
}

#pricing-modal-container .add-email-modal .search-result-item:hover {
    background: var(--bg-color);
}

#pricing-modal-container .add-email-modal .search-result-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#pricing-modal-container .add-email-modal .search-result-item.new-email {
    background: rgba(96, 14, 255, 0.1);
    border: 1px dashed var(--primary-accent);
}

#pricing-modal-container .add-email-modal .search-result-item > .material-icons {
    flex-shrink: 0;
    font-size: 24px;
    color: var(--text-color);
    opacity: 0.7;
}

#pricing-modal-container .add-email-modal .search-result-item .result-info {
    flex: 1;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px;
}

#pricing-modal-container .add-email-modal .search-result-item .result-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color-light);
}

#pricing-modal-container .add-email-modal .search-result-item .result-email {
    font-size: 13px;
    color: var(--text-color);
}

#pricing-modal-container .add-email-modal .search-result-item .result-hint {
    font-size: 11px;
    color: var(--primary-accent);
}

#pricing-modal-container .add-email-modal .search-result-item .already-added {
    font-size: 11px;
    color: var(--text-color);
    opacity: 0.7;
}

#pricing-modal-container .add-email-modal .search-no-results {
    text-align: center;
    padding: 20px;
    color: var(--text-color);
}

#pricing-modal-container .add-email-modal .search-no-results .material-icons {
    font-size: 32px;
    opacity: 0.5;
    margin-bottom: 8px;
    display: block;
}

#pricing-modal-container .add-email-modal .search-no-results .hint {
    font-size: 12px;
    opacity: 0.7;
}

#pricing-modal-container .add-email-modal .search-hint {
    text-align: center;
    padding: 20px;
    color: var(--text-color);
    opacity: 0.7;
}

#pricing-modal-container .add-email-modal .modal-hint {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.7;
    text-align: center;
}

/* ============================================================
   Costs View Styles
   ============================================================ */

#costs-view .costs-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 16px;
}

#costs-view .costs-tabs {
    display: flex;
    gap: 8px;
}

#costs-view .costs-tab {
    padding: 8px 16px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-color);
    cursor: pointer;
    font-size: 14px;
}

#costs-view .costs-tab:hover {
    background: var(--hover-bg);
    color: var(--text-color-light);
}

#costs-view .costs-tab.active {
    background: var(--primary-accent);
    border-color: var(--primary-accent);
    color: var(--text-color-light);
}

.costs-summary {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 24px;
    margin-bottom: 24px;
    text-align: center;
}

.costs-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.costs-total-label {
    font-size: 14px;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.costs-total-value {
    font-size: 48px;
    font-weight: 600;
    color: var(--secondary-accent);
}

.costs-period {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.7;
}

.costs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.costs-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.cost-card {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
}

.cost-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-color);
    margin-bottom: 12px;
}

.cost-card-header .material-icons {
    font-size: 20px;
    color: var(--primary-accent);
}

.cost-card-value {
    font-size: 28px;
    font-weight: 600;
    color: var(--text-color-light);
    margin-bottom: 4px;
}

.cost-card-detail {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.7;
}

/* Lambda view — daily-invocations sparkline. Plain CSS bars, no chart
   lib needed. Each bar's height is set inline from the percentage of
   the day's max invocations. */
.lambda-chart-bars {
    display: flex; align-items: flex-end; gap: 2px;
    height: 120px; padding: 8px;
    background: var(--panel-bg, rgba(0,0,0,0.03));
    border-radius: 4px;
}
.lambda-bar {
    flex: 1; min-width: 4px;
    background: var(--accent-color, #4a90e2);
    border-radius: 2px 2px 0 0;
    cursor: default;
}
.lambda-bar:hover { background: var(--accent-color-hover, #5aa1f2); }
.lambda-chart-foot {
    display: flex; justify-content: space-between;
    margin-top: 6px; font-size: 11px; opacity: 0.7;
}
.lambda-chart-foot .muted { opacity: 0.6; }

/* Pulse memory-utilisation sparkline tone classes. Same .lambda-bar
   geometry — only the fill colour differs to flag pressure at a glance.
   Thresholds match the renderPulseMetrics card colouring in app.js. */
.lambda-bar.pulse-bar-green  { background: var(--success-color, #4caf50); }
.lambda-bar.pulse-bar-amber  { background: var(--warning-color, #f0ad4e); }
.lambda-bar.pulse-bar-red    { background: var(--error-color,   #f44336); }
.lambda-bar.pulse-bar-green:hover { background: #5cba60; }
.lambda-bar.pulse-bar-amber:hover { background: #f5b75a; }
.lambda-bar.pulse-bar-red:hover   { background: #f76960; }

/* Pulse Memory-pressure footer — overrides .section-sub's negative
   top margin (-10px), which is designed to pull a sub-heading UP
   under an h3. Our footer is positioned AFTER the cards, so the
   negative margin made it overlap the third detail line on each
   card. Push it back down with a positive top margin and tighten
   the line-height so a long single line wraps cleanly. */
.costs-section #pulse-metrics-footer {
    margin: 14px 0 0 0;
    line-height: 1.5;
}

/* Compact key/value table used inside the Lambda function-meta block.
   Reused by anywhere that wants a tight metadata read-out. */
.info-table {
    width: auto;
    border-collapse: collapse;
    font-size: 13px;
}
.info-table th {
    text-align: left;
    padding: 4px 12px 4px 0;
    color: var(--text-color);
    opacity: 0.6;
    font-weight: 400;
}
.info-table td {
    padding: 4px 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--text-color);
}

.cost-breakdown-sub {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.cost-sub-item {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-color);
    padding: 4px 0;
}

.cost-sub-item span:first-child {
    opacity: 0.7;
}

.cost-sub-item span:last-child {
    font-family: monospace;
    font-weight: 500;
}

.costs-section {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 24px;
}

.costs-section h3,
.costs-section h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color-light);
    margin-bottom: 16px;
}
/* Sub-label under a section heading (e.g. Run History tag-line). */
.costs-section .section-sub {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.6;
    margin: -10px 0 16px 0;
}

/* Run History table — multi-column, needs cell padding + headers
   distinct from the compact key/value .info-table style. */
.runs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.runs-table thead th {
    text-align: left;
    padding: 8px 14px 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-color);
    opacity: 0.55;
    border-bottom: 1px solid var(--border-color);
}
.runs-table tbody td {
    padding: 10px 14px 10px 0;
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.runs-table tbody tr:last-child td {
    border-bottom: none;
}
.runs-table .status-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-color);
}
.runs-table .status-pill.status-finalized { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.runs-table .status-pill.status-released  { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }
.runs-table .status-pill.status-pending   { background: rgba(99, 102, 241, 0.15);  color: #818cf8; }

/* "N recent runs · M running" caption above the run-history table. */
.runs-count {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--text-secondary, #94a3b8);
}
.runs-count strong { color: #818cf8; }

/* Pulse advertised ON/OFF indicator on the Pulse tab. */
.pulse-status {
    margin-top: 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
}
.pulse-status-label { color: var(--text-secondary, #94a3b8); }
.pulse-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-color);
}
.pulse-pill.pulse-on  { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.pulse-pill.pulse-off { background: rgba(248, 113, 113, 0.18); color: #f87171; }
.pulse-pill.pulse-unknown { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }

/* UoI Registry → Run History section heading. */
.uoi-runs-heading {
    margin: 28px 0 12px;
    font-size: 16px;
    color: var(--text-color);
}
.uoi-runs-subtitle {
    font-weight: normal;
    font-size: 13px;
    color: var(--text-secondary, #94a3b8);
    margin-left: 8px;
}

/* Empty-state shown when there are no Pulse runs for the selected stage. */
.empty-state {
    padding: 24px 0;
    text-align: center;
    color: var(--text-color);
    opacity: 0.55;
    font-style: italic;
}

.costs-section .no-data {
    color: var(--text-color);
    opacity: 0.7;
    font-style: italic;
}

.costs-breakdown-table td.cost-value {
    text-align: right;
    font-family: monospace;
    font-weight: 500;
}

.costs-notes {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
}

.costs-notes h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color-light);
    margin: 0 0 12px 0;
}

/* Multi-section Reference block: every h4 after the first gets a clear
   visual break — generous top margin + a thin rule above. The first
   h4 stays flush with the panel top via :first-child. */
.costs-notes h4:not(:first-child) {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.costs-notes ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.costs-notes li {
    font-size: 13px;
    color: var(--text-color);
    padding: 6px 0;
    line-height: 1.55;
    border-bottom: 1px solid rgba(107, 107, 107, 0.18);
}

.costs-notes li:last-child {
    border-bottom: none;
}

/* Intro paragraphs inside a section — same look as li but without the
   row-separator border. */
.costs-notes p {
    font-size: 13px;
    color: var(--text-color);
    line-height: 1.55;
    margin: 0 0 10px 0;
}

/* Inline code chunks (formulas, metric paths, ARNs) — visually quoted
   but compact enough to flow inside the surrounding paragraph. */
.costs-notes code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.04);
    padding: 1px 5px;
    border-radius: 4px;
    color: var(--text-color);
}

/* ========================================
   METADATA EDITOR STYLES
   ======================================== */

.metadata-editor {
    margin-bottom: 12px;
}

.metadata-empty {
    color: var(--text-color);
    opacity: 0.6;
    font-size: 13px;
    font-style: italic;
    padding: 8px 0;
}

.metadata-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
}

.metadata-row input.metadata-key {
    flex: 1;
    min-width: 150px;
}

.metadata-row input.metadata-value {
    flex: 2;
}

.metadata-row .delete-metadata-btn {
    flex-shrink: 0;
    padding: 4px;
    background: transparent;
    border: none;
    color: var(--text-color);
    opacity: 0.6;
    cursor: pointer;
}

.metadata-row .delete-metadata-btn:hover {
    opacity: 1;
    color: #ef4444;
}

/* Large Job Pack Styles */
.large-job-pack {
    background: rgba(59, 130, 246, 0.1);
}

.large-job-pack td:first-child {
    font-weight: 500;
}

/* Credits Section in Subscription Editor */
#monthly-credits-group {
    margin-top: 8px;
}

/* Modal Form Styling */
.modal-content select,
.modal-content #modal-pack-type {
    width: 100%;
    padding: 12px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-color-light);
    font-size: 14px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

.modal-content select:focus,
.modal-content #modal-pack-type:focus {
    outline: none;
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 3px rgba(96, 14, 255, 0.1);
}

.modal-content select option {
    background: var(--bg-color);
    color: var(--text-color-light);
    padding: 8px;
}

/* Large Job Section */
.large-job-section {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 24px;
    margin-top: 24px;
}

.large-job-section .section-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.large-job-section .section-header h3 {
    color: var(--text-color-light);
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.large-job-section .section-header p {
    color: var(--text-color);
    opacity: 0.7;
    font-size: 14px;
    margin: 0;
    flex: 1;
}

.large-job-table {
    width: 100%;
    border-collapse: collapse;
}

.large-job-table th,
.large-job-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.large-job-table th {
    color: var(--text-color);
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.large-job-table td {
    color: var(--text-color-light);
    font-size: 14px;
}

.large-job-table tr:last-child td {
    border-bottom: none;
}

.large-job-table .pack-actions {
    display: flex;
    gap: 8px;
}

.large-job-table .pack-actions button {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    color: var(--text-color-light);
}

.large-job-table .pack-actions button:hover {
    background: var(--primary-accent);
    border-color: var(--primary-accent);
}

.large-job-table .delete-large-job-btn:hover {
    background: #ef4444;
    border-color: #ef4444;
}

/* ============================================
   OFFERS - REDEMPTIONS UI
   ============================================ */

/* Redemptions row in offer card */
#offers-view .offer-redemptions-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    margin-top: 12px;
    background: var(--bg-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 13px;
    color: var(--text-color);
}

#offers-view .offer-redemptions-row:hover {
    background: var(--border-color);
}

#offers-view .offer-redemptions-row .material-icons {
    font-size: 18px;
    color: var(--primary-accent);
}

#offers-view .offer-redemptions-row .redemption-count {
    font-weight: 600;
    color: var(--text-color-light);
}

#offers-view .offer-redemptions-row .redemption-limit {
    color: var(--text-color);
    opacity: 0.7;
    font-size: 12px;
}

#offers-view .offer-redemptions-row .view-redemptions-link {
    margin-left: auto;
    color: var(--primary-accent);
    font-size: 12px;
    font-weight: 500;
}

/* Redemptions page view */
#offers-view .redemptions-page {
    background: var(--surface-color);
    border-radius: var(--border-radius);
    padding: 24px;
}

#offers-view .redemptions-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

#offers-view .redemptions-toolbar .toolbar-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color-light);
}

#offers-view .redemptions-summary {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    padding: 16px;
    background: var(--bg-color);
    border-radius: var(--border-radius);
}

#offers-view .redemptions-summary .summary-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#offers-view .redemptions-summary .summary-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-color);
}

#offers-view .redemptions-summary .summary-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color-light);
}

#offers-view .redemptions-summary .summary-value code {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
    background: var(--border-color);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 14px;
}

/* Redemptions table */
#offers-view .redemptions-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

#offers-view .redemptions-table th,
#offers-view .redemptions-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

#offers-view .redemptions-table th {
    color: var(--text-color);
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg-color);
}

#offers-view .redemptions-table td {
    color: var(--text-color-light);
}

#offers-view .redemptions-table tr:last-child td {
    border-bottom: none;
}

#offers-view .redemptions-table .benefits-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#offers-view .redemptions-table .benefit-item {
    font-size: 12px;
    color: var(--text-color);
}

#offers-view .redemptions-table .benefit-item.subscription {
    color: var(--primary-accent);
}

#offers-view .redemptions-table .benefit-item.credits {
    color: var(--success-color);
}

#offers-view .benefit-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    margin-right: 4px;
}

#offers-view .benefit-tag.subscription {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

#offers-view .benefit-tag.credits {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

#offers-view .benefit-tag.discount {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

#offers-view .redemptions-table .actions-cell {
    width: 80px;
    text-align: center;
}

#offers-view .delete-redemption-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 6px 8px;
    cursor: pointer;
    color: var(--text-color-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#offers-view .delete-redemption-btn:hover {
    background: rgba(244, 67, 54, 0.1);
    border-color: #f44336;
    color: #f44336;
}

#offers-view .delete-redemption-btn .material-icons {
    font-size: 18px;
}

/* Notification toast */
.notification {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 12px 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    animation: slideIn 0.3s ease;
}

.notification.success {
    background: #1b5e20;
    color: white;
}

.notification.error {
    background: #b71c1c;
    color: white;
}

.notification.info {
    background: #0d47a1;
    color: white;
}

.notification .material-icons {
    font-size: 20px;
}

.notification.fade-out {
    animation: fadeOut 0.3s ease forwards;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

#offers-view .redemptions-empty {
    text-align: center;
    padding: 40px;
    color: var(--text-color);
}

#offers-view .redemptions-empty .material-icons {
    font-size: 48px;
    opacity: 0.5;
    margin-bottom: 12px;
}

#offers-view .redemptions-loading {
    text-align: center;
    padding: 40px;
    color: var(--text-color);
}

#offers-view .redemptions-loading img {
    width: 40px;
    margin-bottom: 12px;
}

#offers-view .redemptions-content {
    padding: 0;
}

#offers-view .redemptions-summary .summary-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 16px;
    border-right: 1px solid var(--border-color);
}

#offers-view .redemptions-summary .summary-stat:last-child {
    border-right: none;
}

#offers-view .redemptions-summary .stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color-light);
}

#offers-view .redemptions-summary .stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-color);
}

#offers-view .benefit-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    margin-right: 4px;
}

#offers-view .benefit-tag.subscription {
    background: rgba(99, 102, 241, 0.15);
    color: var(--primary-accent);
}

#offers-view .benefit-tag.credits {
    background: rgba(76, 175, 80, 0.15);
    color: var(--success-color);
}

#offers-view .toolbar-info code {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
    background: var(--bg-color);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 14px;
    color: var(--text-color-light);
}

/* ===== REVENUE VIEW ===== */
.revenue-summary {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.revenue-summary .summary-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 150px;
}

.revenue-summary .summary-card.highlight {
    background: linear-gradient(135deg, var(--primary-accent), var(--accent-color));
    border-color: transparent;
}

.revenue-summary .summary-card.highlight .summary-label,
.revenue-summary .summary-card.highlight .summary-value {
    color: white;
}

.revenue-summary .summary-label {
    font-size: 12px;
    color: var(--text-color-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.revenue-summary .summary-value {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-color);
}

#revenue-view .invoice-link {
    color: var(--primary-accent);
    text-decoration: none;
    font-weight: 500;
}

#revenue-view .invoice-link:hover {
    text-decoration: underline;
}

/* Date Range Controls */
.date-range-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.date-range-controls select {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 14px;
    cursor: pointer;
    min-width: 140px;
}

.date-range-controls select:focus {
    outline: none;
    border-color: var(--primary-accent);
}

#custom-date-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

#custom-date-range input[type="date"] {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 14px;
}

#custom-date-range input[type="date"]:focus {
    outline: none;
    border-color: var(--primary-accent);
}

#custom-date-range span {
    color: var(--text-color);
    font-size: 14px;
}

/* ==========================================================================
   UoI Schedule Calendar & Jobs Section
   ========================================================================== */

.uoi-schedule-section {
    margin-top: 10px;
}

.refresh-btn-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-left: 8px;
    border: none;
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-color);
    cursor: pointer;
    vertical-align: middle;
}

.refresh-btn-small:hover {
    background: var(--primary-accent);
    color: var(--text-color-light);
}

/* Schedule Layout */
.schedule-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 1200px) {
    .schedule-layout {
        grid-template-columns: 1fr;
    }
}

/* Calendar Widget */
.schedule-calendar-widget {
    background: var(--input-bg);
    border-radius: 8px;
    padding: 16px;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.calendar-month {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color-light);
}

.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
}

.calendar-nav:hover {
    background: var(--primary-accent);
    color: var(--text-color-light);
}

.calendar-days-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.day-name {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-color);
    text-transform: uppercase;
    padding: 4px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendar-day {
    min-height: 48px;
    padding: 4px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.calendar-day:hover:not(.empty) {
    background: rgba(96, 14, 255, 0.2);
}

.calendar-day.empty {
    background: transparent;
    cursor: default;
}

.calendar-day.today {
    border: 2px solid var(--primary-accent);
}

.calendar-day.past {
    opacity: 0.6;
}

.day-number {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 4px;
}

.calendar-day.today .day-number {
    color: var(--primary-accent);
    font-weight: 700;
}

.slot-indicators {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    justify-content: center;
}

.slot-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.slot-indicator.slot-booked {
    background: var(--primary-accent);
}

.slot-indicator.slot-reserved {
    background: var(--warning-color);
}

.slot-indicator.slot-available {
    background: var(--success-color);
}

.calendar-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-color);
}

/* Day Slots Detail */
.day-slots-detail {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.day-slots-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color-light);
    margin-bottom: 12px;
}

.no-slots {
    font-size: 13px;
    color: var(--text-color);
    opacity: 0.7;
}

.slots-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.slot-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
}

.slot-row.status-booked {
    border-left: 3px solid var(--primary-accent);
}

.slot-row.status-reserved {
    border-left: 3px solid var(--warning-color);
}

.slot-row.status-available {
    border-left: 3px solid var(--success-color);
}

.slot-time {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color-light);
    min-width: 50px;
}

.slot-status {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-color);
}

.slot-user,
.slot-reserved-info {
    font-size: 12px;
    color: var(--text-color);
    margin-left: auto;
}

/* Day Completed Jobs */
.day-completed-jobs {
    margin-top: 16px;
}

.section-subtitle {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-color);
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* Jobs Panels */
.schedule-jobs {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.jobs-panel {
    background: var(--input-bg);
    border-radius: 8px;
    padding: 16px;
}

.panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color-light);
    margin-bottom: 12px;
}

.no-jobs {
    font-size: 13px;
    color: var(--text-color);
    opacity: 0.7;
    padding: 8px 0;
}

/* Running Job Card */
.running-job-card {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 8px;
    border-left: 3px solid var(--info-color);
}

.running-job-card:last-child {
    margin-bottom: 0;
}

.job-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.job-id {
    font-family: monospace;
    font-size: 13px;
    color: var(--info-color);
}

.job-user {
    font-size: 12px;
    color: var(--text-color);
}

.progress-bar-text {
    font-family: monospace;
    font-size: 12px;
    color: var(--text-color-light);
    background: rgba(0, 0, 0, 0.3);
    padding: 6px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    overflow-x: auto;
}

.job-stats {
    font-size: 12px;
    color: var(--text-color);
    margin-top: 8px;
}

/* Scheduled Job Row */
.scheduled-job-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    margin-bottom: 8px;
    border-left: 3px solid var(--warning-color);
}

.scheduled-job-row:last-child {
    margin-bottom: 0;
}

.job-schedule {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.job-date {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color-light);
}

.job-time {
    font-size: 12px;
    color: var(--text-color);
}

.job-details {
    display: flex;
    gap: 12px;
}

.job-size,
.job-files {
    font-size: 12px;
    color: var(--text-color);
}

.cancel-job-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--error-color);
    cursor: pointer;
}

.cancel-job-btn:hover {
    background: rgba(244, 67, 54, 0.2);
}

.cancel-job-btn .material-icons {
    font-size: 18px;
}

/* Completed Job Row */
.completed-job-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.completed-job-row:last-child {
    border-bottom: none;
}

.job-result {
    font-size: 12px;
    color: var(--text-color);
    margin-left: auto;
}

.job-info {
    font-size: 12px;
    color: var(--text-color);
}

/* ============================================
   View Tabs (for Scheduled Jobs, etc.)
   ============================================ */

.view-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0;
}

.view-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.view-tab:hover {
    color: var(--text-color);
    background: rgba(255, 255, 255, 0.05);
}

.view-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.view-tab .material-icons {
    font-size: 18px;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.tab-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

/* ==================== Legal Documents ==================== */

.version-info-inline {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--input-bg);
    border-radius: 4px;
    color: var(--text-color);
    font-size: 13px;
    margin-left: auto;
}

.badge.current {
    background: var(--success-color);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    margin-left: 8px;
}

.current-version {
    background: rgba(76, 175, 80, 0.1);
}

/* Legal Editor */
.legal-editor {
    background: var(--input-bg);
    border-radius: var(--border-radius);
    margin: 20px 0;
}

.editor-toolbar {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    gap: 16px;
}

.toolbar-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.toolbar-btn.back {
    background: transparent;
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.toolbar-btn.back:hover {
    background: rgba(255, 255, 255, 0.1);
}

.toolbar-btn.save {
    background: var(--primary-accent);
    color: white;
}

.toolbar-btn.save:hover {
    background: var(--hover-bg);
}

.toolbar-title {
    flex: 1;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color-light);
    text-align: center;
}

.editor-form {
    padding: 20px;
}

.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
}

.form-field {
    flex: 1;
}

.form-field.full {
    flex: 1 1 100%;
}

.form-field label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-color);
    font-size: 13px;
}

.form-field input,
.form-field textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-color-light);
    font-size: 14px;
}

.form-field textarea {
    resize: vertical;
    min-height: 60px;
}

/* Document Tabs */
.document-tabs {
    display: flex;
    gap: 4px;
    margin: 16px 0;
    padding: 4px;
    background: var(--bg-color);
    border-radius: 6px;
}

.doc-tab-btn {
    flex: 1;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-color);
    font-size: 14px;
    cursor: pointer;
}

.doc-tab-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

.doc-tab-btn.active {
    background: var(--primary-accent);
    color: white;
}

/* Document Editor Panels */
.document-editor-container {
    margin-top: 16px;
}

.doc-editor-panel {
    display: none;
}

.doc-editor-panel.active {
    display: block;
}

.markdown-editor {
    width: 100%;
    min-height: 400px;
    padding: 16px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-color-light);
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 13px;
    line-height: 1.6;
    resize: vertical;
}

/* Preview */
.preview-toggle {
    margin-top: 16px;
    text-align: center;
}

.toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-color);
    font-size: 13px;
    cursor: pointer;
}

.toggle-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

.preview-container {
    margin-top: 16px;
    padding: 20px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.markdown-preview {
    color: var(--text-color-light);
    line-height: 1.6;
}

.markdown-preview h1,
.markdown-preview h2,
.markdown-preview h3 {
    color: var(--text-color-light);
    margin-top: 20px;
    margin-bottom: 10px;
}

.markdown-preview h1 { font-size: 24px; }
.markdown-preview h2 { font-size: 20px; }
.markdown-preview h3 { font-size: 16px; }

.markdown-preview p {
    margin-bottom: 12px;
}

.markdown-preview ul,
.markdown-preview ol {
    margin-bottom: 12px;
    padding-left: 24px;
}

.markdown-preview li {
    margin-bottom: 4px;
}

.markdown-preview code {
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
}

.markdown-preview pre {
    background: rgba(0, 0, 0, 0.3);
    padding: 16px;
    border-radius: 6px;
    overflow-x: auto;
}

.markdown-preview pre code {
    background: transparent;
    padding: 0;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-color);
}

.empty-state .material-icons {
    font-size: 64px;
    opacity: 0.5;
    margin-bottom: 16px;
}

.empty-state p {
    font-size: 16px;
    opacity: 0.8;
}

/* ============================================================
   Enterprise Calculator
   ============================================================ */

.calc-price-source {
    font-size: 12px;
    color: var(--text-color);
    margin-top: 4px;
}

.calc-inputs {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.calc-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 160px;
}

.calc-input-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.calc-input-group-btn {
    flex: 0 0 auto;
    min-width: auto;
    justify-content: flex-end;
}

.calc-select,
.calc-input {
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--input-bg);
    color: var(--text-color-light);
    font-size: 14px;
    font-family: inherit;
}

.calc-select:focus,
.calc-input:focus {
    outline: none;
    border-color: var(--primary-accent);
}

.calc-results {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.calc-stat-card {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
    text-align: center;
}

.calc-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-color-light);
    margin-bottom: 4px;
}

.calc-stat-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.calc-detail-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 20px;
}

.calc-section {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
}

.calc-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color-light);
    margin-bottom: 16px;
}

.calc-section .data-table {
    width: 100%;
}

.calc-gpu-selected {
    background: rgba(96, 14, 255, 0.15);
}

.calc-gpu-selected td {
    color: var(--text-color-light);
    font-weight: 600;
}

.calc-throughput-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.calc-throughput-label {
    font-size: 13px;
    color: var(--text-color);
}

.calc-throughput-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color-light);
}

.calc-throughput-divider {
    border-top: 1px solid var(--border-color);
    margin: 8px 0;
}

.calc-util-low {
    color: var(--success-color);
}

.calc-util-medium {
    color: var(--warning-color);
}

.calc-util-high {
    color: var(--error-color);
}

@media (max-width: 900px) {
    .calc-results {
        grid-template-columns: repeat(2, 1fr);
    }

    .calc-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .calc-inputs {
        flex-direction: column;
    }

    .calc-results {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Users table: responsive columns + click-to-expand detail
   ============================================================ */

/* Expand chevron column */
.u-expand-col { width: 32px; text-align: center; padding-left: 8px !important; padding-right: 0 !important; }
.u-expand-icon { font-size: 20px; color: var(--text-color); vertical-align: middle; }

/* Clickable rows */
.user-row { cursor: pointer; }
.user-row:hover { background: var(--hover-table-bg); }

/* Progressive column hiding as the viewport narrows. The full detail is always
   available by expanding the row, so hiding here never loses information.
   1700: drop Renew + Version. 1550: drop the D/A/P + Hunters charts (covers
   14" MBP ~1512). 1350: drop Type + Last Active. */
@media (max-width: 1700px) { .u-c3  { display: none !important; } }
@media (max-width: 1550px) { .u-c3b { display: none !important; } }
@media (max-width: 1350px) { .u-c2  { display: none !important; } }

/* Expanded detail panel */
.user-detail-row > td { padding: 0 !important; background: var(--bg-color); }
.user-detail-card { padding: 20px 24px; border-left: 3px solid var(--primary-accent); }
.user-detail-card .ud-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px 28px;
}
.ud-field { min-width: 0; }
.ud-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-color);
    opacity: 0.7;
    margin-bottom: 4px;
}
.ud-value { font-size: 14px; color: var(--text-color-light); word-break: break-word; }
.ud-value code { color: var(--secondary-accent); letter-spacing: 1px; }
.ud-value .table-action { vertical-align: middle; margin-left: 6px; }
.ud-muted { color: var(--text-color); opacity: 0.5; }

/* ===== Email Broadcast tab ===== */
#newsletter-view #email-form-container { width: 100%; }
#newsletter-view .email-compose {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 24px;
    width: 100%;
    box-sizing: border-box;
}
#newsletter-view .email-compose input[type="text"],
#newsletter-view .email-compose input[type="email"],
#newsletter-view .email-compose textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 12px 14px;
    color: var(--text-color-light);
    font-size: 15px;
    font-family: inherit;
}
#newsletter-view .email-compose input:focus,
#newsletter-view .email-compose textarea:focus {
    outline: none;
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 2px rgba(96, 14, 255, 0.2);
}
#newsletter-view .email-compose textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
#newsletter-view .email-choose-link {
    margin-top: 6px;
    background: none;
    border: none;
    padding: 0;
    color: #34d399;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    font-family: inherit;
}
#newsletter-view .email-choose-link:hover { opacity: 0.85; }
#newsletter-view .email-compose .form-row { display: flex; gap: 20px; margin-bottom: 20px; }
#newsletter-view .email-compose .form-row .form-field { flex: 1; }
#newsletter-view .email-compose .form-field label,
#newsletter-view .email-compose .form-group label {
    display: block; margin-bottom: 6px;
    color: var(--text-color-light); font-weight: 500; font-size: 13px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
#newsletter-view .email-mode-options { display: flex; gap: 24px; margin: 8px 0 12px; }
#newsletter-view .email-radio { display: flex; align-items: center; gap: 8px; color: var(--text-color-light); font-size: 15px; cursor: pointer; }
#newsletter-view .email-radio input { width: auto; }
#newsletter-view .email-count-row { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; color: var(--text-color); font-size: 14px; }
#newsletter-view .email-test-btn { display: flex; align-items: flex-end; }
#newsletter-view .email-send-row { margin-top: 4px; padding-top: 20px; border-top: 1px solid var(--border-color); }
#newsletter-view .email-status { margin: 14px 0 0; font-size: 14px; min-height: 20px; }

/* ===== Customer Onboarding view ===== */
#onboarding-view .onb-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(440px, 660px);
    gap: 24px;
    align-items: start;
    max-width: 1400px;
}
@media (max-width: 1080px) {
    #onboarding-view .onb-layout { grid-template-columns: 1fr; }
}
#onboarding-view .onb-card {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 24px;
    margin-bottom: 20px;
}
#onboarding-view .onb-card.onb-result { max-width: 960px; }
#onboarding-view .onb-summary { position: sticky; top: 24px; margin-bottom: 0; }
#onboarding-view .onb-summary-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 8px; padding: 28px 12px; color: var(--text-color); opacity: 0.7;
}
#onboarding-view .onb-summary-empty .material-icons { font-size: 40px; opacity: 0.5; }
#onboarding-view .onb-summary-empty p { margin: 0; font-size: 14px; }
#onboarding-view .onb-grand { color: var(--secondary-accent); }
#onboarding-view .onb-intro { color: var(--text-color); font-size: 14px; margin: 0 0 20px; }
#onboarding-view .onb-field { margin-bottom: 20px; }
#onboarding-view .onb-label {
    display: block;
    color: var(--text-color-light);
    font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 8px;
}
#onboarding-view .onb-hint { font-size: 12px; color: var(--text-color); opacity: 0.7; margin-top: 6px; }
#onboarding-view .onb-users { margin-bottom: 12px; }
#onboarding-view .onb-user-row { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; max-width: 720px; }
#onboarding-view .onb-user-row .onb-email { flex: 1; }
#onboarding-view .onb-lead-label {
    display: flex; align-items: center; gap: 6px; white-space: nowrap;
    color: var(--text-color-light); font-size: 14px; cursor: pointer;
}
#onboarding-view .onb-lead-label input { accent-color: var(--primary-accent); }
#onboarding-view .onb-fields-row { display: flex; gap: 24px; flex-wrap: wrap; }
#onboarding-view .onb-fields-row .onb-field { flex: 1; min-width: 180px; margin-bottom: 20px; }
#onboarding-view .onb-actions { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
#onboarding-view .onb-seed { border: 1px dashed var(--warning-color); color: var(--warning-color); margin-left: auto; }
#onboarding-view .onb-icon-btn { padding: 10px 12px; }
#onboarding-view .onb-totals { max-width: 460px; }
#onboarding-view .onb-totals td { padding: 8px 4px; }
#onboarding-view .onb-totals tr:last-child td { border-top: 1px solid var(--border-color); font-size: 16px; }
#onboarding-view .onb-totals .onb-amt { text-align: right; }
#onboarding-view .onb-success-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
#onboarding-view .onb-email-preview { max-width: 1280px; }
#onboarding-view .onb-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-color); margin-bottom: 12px; }
#onboarding-view .onb-tab {
    background: transparent; border: 0; border-bottom: 2px solid transparent;
    color: var(--text-color); font-size: 13px; font-weight: 600; padding: 8px 14px; cursor: pointer;
    margin-bottom: -1px;
}
#onboarding-view .onb-tab:hover { color: var(--text-color-light); }
#onboarding-view .onb-tab.active { color: var(--text-color-light); border-bottom-color: var(--primary-accent); }
#onboarding-view .onb-email-meta { font-size: 13px; color: var(--text-color); opacity: 0.8; margin: 6px 0 14px; }
#onboarding-view .onb-email-frame-wrap {
    background: #f1f5f9; border: 1px solid var(--border-color);
    border-radius: var(--border-radius); overflow: hidden;
}
#onboarding-view .onb-email-frame { width: 100%; height: 700px; border: 0; display: block; background: #f1f5f9; }

/* --- Company invoice-billing contract (company view) ---------------------- */
/* Reuses .action-group / .form-group / .btn; only layout is defined here. */

.contract-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

/* Buttons sit level with the bottom of any labelled field in the same row. */
.contract-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-end;
}

/* .form-group carries a global margin-bottom: flex-end aligns the MARGIN box, so
   leaving it would sit the field 20px above the button it shares a row with. */
.contract-actions .form-group,
.contract-fields .form-group {
    flex: 0 0 auto;
    margin-bottom: 0;
}

/* ONE control height across the whole card. Left alone, this row mixes four:
   .form-group's rules take text/number inputs to 38px/14px but never reach <select>,
   which keeps .form-input's 46px/16px; and .btn-primary / .btn-secondary render 48px
   and 44px because their material-icons glyphs differ in size. */
.contract-fields .form-input,
.contract-actions .form-input,
.contract-actions .btn {
    height: 38px;
    box-sizing: border-box;
    font-size: 14px;
}

.contract-fields .form-input,
.contract-actions .form-input {
    padding: 0 12px;
}

.contract-actions .btn {
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1;
}

.contract-actions .btn .material-icons {
    font-size: 18px;
    margin: 0;
}

/* The "raise a year's invoices" step is a separate action on the same contract,
   so it sits under a divider rather than in its own card. */
.contract-schedule {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

.contract-schedule .contract-actions .form-input {
    max-width: 140px;
}

.contract-result {
    margin-top: 12px;
    font-size: 13px;
}

.contract-result .contract-result-msg {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.contract-result .admin-table {
    margin-top: 0;
}

/* Mobile styles moved to mobile.css */

/* PIIQ 360 Monitor: the status card's icon in the theme's success / error colour */
.stat-icon.monitor-good { background: var(--success-color); }
.stat-icon.monitor-bad { background: var(--error-color); }