/* === RESET & ROOT === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --color-bg:      #0b0b0b;
    --color-surface: #141414;
    --color-text:    #cccccc;
    --color-muted:   #777777;
    --color-accent:  #00ffff;
    --color-error:   #ff00ff;
    --color-border:  #2a2a2a;
    --font-mono:     'Courier New', 'Consolas', 'Monaco', 'Lucida Console', monospace;
    --shadow-offset: 4px 4px 0px;
}

/* === LIGHT THEME === */
[data-theme="light"] {
    --color-bg:      #f5f5f0;
    --color-surface: #e8e8e0;
    --color-text:    #1a1a1a;
    --color-muted:   #5c5c5c;
    --color-accent:  #008b8b;
    --color-error:   #cc00cc;
    --color-border:  #cccccc;
}

/* Reduce film grain opacity in light mode */
[data-theme="light"] body::after {
    opacity: 0.015;
}

/* ============================================================
   AGENT DASHBOARD
   ============================================================ */

/* Dashboard layout: main content + floating softphone */
.agent-dashboard {
    display: flex;
    gap: 0;
    min-height: calc(100vh - 200px);
    position: relative;
}

.agent-main {
    flex: 1;
    min-width: 0;
}

/* ---------- Stats Row ---------- */
.agent-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (max-width: 900px) {
    .agent-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .agent-stats-row {
        grid-template-columns: 1fr;
    }
}

.agent-stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 2px 2px 0px var(--color-border);
    transition: box-shadow 0.15s, transform 0.15s;
}

.agent-stat-card:hover {
    box-shadow: 4px 4px 0px var(--color-accent);
    transform: translate(-1px, -1px);
}

.agent-stat-icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

.agent-stat-info {
    min-width: 0;
}

.agent-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.agent-stat-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
    margin-top: 0.2rem;
}

/* ---------- Section Titles ---------- */
.agent-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text);
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    display: inline-block;
}

/* ---------- Lead Grid ---------- */
.agent-lead-section {
    margin-bottom: 2rem;
}

.agent-lead-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.agent-lead-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.25rem;
    box-shadow: 2px 2px 0px var(--color-border);
}

.agent-lead-card h3 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    margin-bottom: 1rem;
    font-weight: 700;
}

.agent-lead-card dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 1rem;
    font-size: 0.85rem;
}

.agent-lead-card dt {
    color: var(--color-muted);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.agent-lead-card dd {
    color: var(--color-text);
    word-break: break-word;
}

.agent-phone {
    font-weight: 700;
    color: var(--color-accent) !important;
    font-size: 1.1rem;
    letter-spacing: 0.03em;
}

/* ---------- Badges ---------- */
.agent-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.agent-badge--high {
    background: rgba(255, 0, 255, 0.15);
    color: var(--color-error);
    border: 1px solid var(--color-error);
}

.agent-badge--medium {
    background: rgba(255, 165, 0, 0.15);
    color: #ffa500;
    border: 1px solid #ffa500;
}

.agent-badge--low {
    background: rgba(0, 255, 255, 0.1);
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
}

/* ---------- Role Badges ---------- */
.agent-role-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-left: 0.4rem;
    vertical-align: middle;
    border: 1px solid transparent;
}

.agent-role-badge--agent {
    background: rgba(0, 200, 0, 0.15);
    color: #00cc00;
    border-color: #00cc00;
}

.agent-role-badge--company-admin {
    background: rgba(255, 165, 0, 0.15);
    color: #ffa500;
    border-color: #ffa500;
}

.agent-role-badge--campaign-admin {
    background: rgba(255, 255, 0, 0.15);
    color: #ffff00;
    border-color: #ffff00;
}

.agent-role-badge--queue {
    background: rgba(200, 130, 255, 0.12);
    color: #c882ff;
    border-color: #c882ff;
}

.agent-role-badge--outside {
    background: rgba(255, 0, 0, 0.15);
    color: #ff3333;
    border-color: #ff3333;
}

/* Light theme overrides */
[data-theme="light"] .agent-role-badge--agent {
    background: rgba(0, 180, 0, 0.12);
    color: #008800;
    border-color: #008800;
}

[data-theme="light"] .agent-role-badge--company-admin {
    background: rgba(200, 120, 0, 0.12);
    color: #cc5500;
    border-color: #cc5500;
}

[data-theme="light"] .agent-role-badge--campaign-admin {
    background: rgba(200, 200, 0, 0.12);
    color: #999900;
    border-color: #999900;
}

[data-theme="light"] .agent-role-badge--queue {
    background: rgba(130, 80, 180, 0.12);
    color: #6a30a0;
    border-color: #6a30a0;
}

[data-theme="light"] .agent-role-badge--outside {
    background: rgba(200, 0, 0, 0.12);
    color: #cc0000;
    border-color: #cc0000;
}

/* ---------- Empty State ---------- */
.agent-empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.agent-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.agent-empty-state h3 {
    font-size: 1.25rem;
    color: var(--color-text);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.agent-empty-state p {
    color: var(--color-muted);
    font-size: 0.9rem;
}

/* ---------- Forms ---------- */
.agent-form-section {
    max-width: 700px;
}

.agent-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 600px) {
    .agent-form-grid {
        grid-template-columns: 1fr;
    }
}

.agent-form-group {
    margin-bottom: 0;
}

.agent-form-group label {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
    color: var(--color-muted);
}

.agent-label-hint {
    text-transform: none;
    font-weight: 400;
    color: var(--color-muted);
    font-size: 0.7rem;
    letter-spacing: 0;
}

.agent-form-group input {
    width: 100%;
    padding: 0.7rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.agent-form-group input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.15);
}

/* ---------- Buttons ---------- */
.agent-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    transition: all 0.15s;
    font-size: 0.8rem;
    padding: 0.6rem 1.2rem;
    background: var(--color-surface);
    color: var(--color-text);
}

.agent-btn:hover {
    box-shadow: 2px 2px 0px var(--color-accent);
    transform: translate(-1px, -1px);
}

.agent-btn--primary {
    background: var(--color-accent);
    color: #000;
    border-color: var(--color-accent);
    font-size: 0.85rem;
    padding: 0.75rem 2rem;
}

.agent-btn--primary:hover {
    background: var(--color-text);
    color: var(--color-bg);
    border-color: var(--color-text);
    box-shadow: 3px 3px 0px var(--color-accent);
}

.agent-btn--small {
    font-size: 0.7rem;
    padding: 0.4rem 0.8rem;
    flex: 1;
}

.agent-btn--icon {
    font-size: 1.1rem;
    padding: 0.4rem 0.6rem;
    line-height: 1;
    min-width: 36px;
}

.agent-btn--call {
    flex: 2;
    background: #0d3320;
    color: #4ade80;
    border-color: #166534;
    font-size: 0.85rem;
    padding: 0.75rem;
    transition: flex 0.2s ease, opacity 0.2s ease;
}

.agent-btn--call:hover {
    background: #166534;
    color: #86efac;
    border-color: #22c55e;
    box-shadow: 2px 2px 0px #22c55e;
}

/* Shrunken call button when a call is active — reduce width only, keep height */
.agent-btn--call.agent-btn--call-shrunk {
    flex: 0.5;
    opacity: 0.4;
    pointer-events: none;
}
.agent-btn--call.agent-btn--call-shrunk + .agent-btn--hangup {
    flex: 2.5;
}

.agent-btn--hangup {
    flex: 1;
    background: #3b0a0a;
    color: #f87171;
    border-color: #7f1d1d;
    font-size: 0.85rem;
    padding: 0.75rem;
    transition: flex 0.2s ease, opacity 0.2s ease;
}

.agent-btn--hangup:hover:enabled {
    background: #7f1d1d;
    color: #fca5a5;
    border-color: #ef4444;
    box-shadow: 2px 2px 0px #ef4444;
}

.agent-btn--hangup:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Mute button */
.agent-btn--mute {
    background: #2a2a2a;
    color: #cccccc;
    border-color: #555;
    flex: 1;
    font-size: 0.85rem;
    padding: 0.75rem;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.agent-btn--mute:hover:enabled {
    background: #444;
    color: #fff;
    border-color: #888;
}

.agent-btn--mute.muted {
    background: #5a1a1a;
    color: #ff6666;
    border-color: #ff4444;
}

.agent-btn--mute:disabled {
    display: none;
}

/* Light theme overrides for mute button */
[data-theme="light"] .agent-btn--mute {
    background: #e0e0e0;
    color: #333;
    border-color: #aaa;
}

[data-theme="light"] .agent-btn--mute:hover:enabled {
    background: #ccc;
    color: #000;
    border-color: #888;
}

[data-theme="light"] .agent-btn--mute.muted {
    background: #fdd;
    color: #c00;
    border-color: #c00;
}

.agent-btn-icon {
    font-size: 1rem;
    line-height: 1;
}

/* ============================================================
   FLOATING SOFTPHONE
   ============================================================ */

.agent-softphone {
    position: fixed;
    right: 0;
    top: 0;
    width: 360px;
    height: 100vh;
    background: var(--color-surface);
    border-left: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    z-index: 50;
    box-shadow: -4px 0px 20px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
}

@media (max-width: 1100px) {
    .agent-softphone {
        position: relative;
        width: 100%;
        height: auto;
        border-left: none;
        border-top: 1px solid var(--color-border);
        box-shadow: none;
        margin-top: 2rem;
    }
}

.agent-softphone-header {
    padding: 1.25rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.agent-softphone-header h3 {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    margin-bottom: 0.3rem;
}

.agent-softphone-status {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
    font-weight: 700;
    min-height: 1.2em;
}

.agent-softphone-body {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

/* Phone number input */
.agent-phone-input {
    width: 100%;
    padding: 0.8rem 1rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text);
    font-family: var(--font-mono);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.agent-phone-input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.1);
}

.agent-phone-input::placeholder {
    color: var(--color-muted);
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.03em;
}

/* Softphone action row */
.agent-softphone-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.agent-recent-wrapper {
    position: relative;
}

.agent-recent-popout {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-accent);
    border-radius: 8px;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3);
    min-width: 180px;
    z-index: 60;
    padding: 0.5rem;
}

.agent-recent-popout ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.agent-recent-empty {
    padding: 0.5rem;
    color: var(--color-muted);
    font-size: 0.8rem;
    font-style: italic;
}

.agent-recent-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--color-text);
    border-radius: 4px;
    transition: background 0.1s;
}

.agent-recent-item:hover {
    background: var(--color-accent);
    color: #000;
}

/* Dialpad */
.agent-dialpad {
    margin: 0.25rem 0;
}

.agent-dialpad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
}

.agent-dialpad-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.3rem;
    font-size: 1.2rem;
    font-weight: 700;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    font-family: var(--font-mono);
    cursor: pointer;
    transition: all 0.1s;
    line-height: 1.2;
}

.agent-dialpad-btn:hover {
    background: var(--color-accent);
    color: #000;
    border-color: var(--color-accent);
    transform: scale(1.03);
}

.agent-dialpad-btn:active {
    transform: scale(0.97);
}

.agent-dialpad-btn span {
    font-size: 0.5rem;
    font-weight: 400;
    color: var(--color-muted);
    letter-spacing: 0.1em;
    margin-top: 0.15rem;
}

.agent-dialpad-btn:hover span {
    color: #000;
}

/* Call actions */
.agent-call-actions {
    display: flex;
    gap: 0.5rem;
}

/* Roster */
.agent-roster {
    border-top: 1px solid var(--color-border);
    padding-top: 0.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.agent-roster h4 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    margin-bottom: 0.5rem;
}

.agent-roster input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    outline: none;
    margin-bottom: 0.5rem;
    transition: border-color 0.15s;
}

.agent-roster input:focus {
    border-color: var(--color-accent);
}

.agent-roster ul {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.agent-roster-empty {
    padding: 0.5rem;
    color: var(--color-muted);
    font-size: 0.8rem;
    font-style: italic;
}

.agent-roster-more {
    padding: 0.3rem 0.5rem;
    color: var(--color-muted);
    font-size: 0.7rem;
    font-style: italic;
}

.agent-roster-btn {
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-mono);
    transition: all 0.1s;
    margin-bottom: 0.3rem;
}

.agent-roster-btn--online {
    background: var(--color-bg);
    color: var(--color-text);
}

.agent-roster-btn--online:hover {
    background: var(--color-accent);
    color: #000;
    border-color: var(--color-accent);
}

.agent-roster-btn--offline {
    background: var(--color-bg);
    color: var(--color-muted);
    opacity: 0.7;
}

.agent-roster-btn--offline:hover {
    opacity: 1;
    background: var(--color-surface);
}

.offline-contact {
    margin-top: 0.3rem;
    margin-bottom: 0.5rem;
    font-size: 0.7rem;
    color: var(--color-muted);
    padding-left: 0.5rem;
}

.offline-contact a {
    color: var(--color-accent);
    text-decoration: underline;
}

/* Video */
.agent-video {
    margin-top: 0.5rem;
}

.agent-video video {
    width: 100%;
    border-radius: 6px;
    border: 1px solid var(--color-border);
}

.agent-video--local {
    margin-top: 0.3rem;
}

.agent-video--local video {
    max-height: 120px;
    object-fit: cover;
}

/* ---------- Incoming Call Notification ---------- */
.agent-incoming-notification {
    display: none;
    background: var(--color-accent);
    color: #000;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.85rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.agent-incoming-notification.show {
    display: flex;
}

.agent-incoming-notification .caller-info {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.agent-incoming-notification .action-btns {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.agent-incoming-notification .action-btns button {
    font-size: 0.7rem;
    padding: 0.3rem 0.8rem;
    border: 1px solid #000;
    background: #000;
    color: var(--color-accent);
    cursor: pointer;
    font-family: var(--font-mono);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
    transition: background 0.1s, color 0.1s;
}

.agent-incoming-notification .action-btns button:hover {
    background: var(--color-text);
    color: var(--color-bg);
}

/* ---------- Missed Calls Section ---------- */
.agent-missed-calls {
    border-top: 1px solid var(--color-border);
    padding-top: 0.75rem;
    margin-top: 0.5rem;
}

.agent-missed-calls h4 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-error);
    margin-bottom: 0.5rem;
    cursor: pointer;
    user-select: none;
}

.agent-missed-calls h4 .toggle-icon {
    font-size: 0.7rem;
    margin-right: 0.3rem;
}

.agent-missed-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 150px;
    overflow-y: auto;
}

.agent-missed-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    flex-wrap: wrap;
    gap: 0.25rem;
}

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

.agent-missed-item .missed-number {
    font-weight: 700;
    color: var(--color-error);
}

.agent-missed-item .missed-time {
    font-size: 0.7rem;
    color: var(--color-muted);
}

.agent-missed-item .missed-dismiss {
    background: none;
    border: none;
    color: var(--color-muted);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0 0.2rem;
    line-height: 1;
}

.agent-missed-item .missed-dismiss:hover {
    color: var(--color-error);
}

/* Active call indicator */
.agent-softphone--active {
    border-left: 2px solid var(--color-accent) !important;
    box-shadow: -4px 0px 25px rgba(0, 255, 255, 0.25), 0 0 30px rgba(0, 255, 255, 0.05);
}

/* Call duration display */
.agent-softphone-duration {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: 0.1em;
    text-align: center;
    margin-top: 0.25rem;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 12px rgba(0,255,255,0.6);
}

/* Light theme overrides for softphone */
[data-theme="light"] .agent-softphone {
    box-shadow: -4px 0px 20px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .agent-softphone--active {
    border-left-color: #008b8b;
    box-shadow: -4px 0px 25px rgba(0, 139, 139, 0.3), 0 0 30px rgba(0, 139, 139, 0.08);
}

[data-theme="light"] .agent-softphone-duration {
    text-shadow: 0 0 12px rgba(0,139,139,0.6);
}

[data-theme="light"] .agent-btn--call {
    background: #dcfce7;
    color: #166534;
    border-color: #86efac;
}

[data-theme="light"] .agent-btn--call:hover {
    background: #bbf7d0;
    color: #14532d;
    border-color: #22c55e;
}

[data-theme="light"] .agent-btn--hangup {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fca5a5;
}

[data-theme="light"] .agent-btn--hangup:hover:enabled {
    background: #fecaca;
    color: #7f1d1d;
    border-color: #ef4444;
}

[data-theme="light"] .agent-recent-popout {
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
}

html, body {
    height: 100%;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: 16px;
    line-height: 1.7;
    position: relative;
    overflow-y: scroll;
    margin: 0 auto;
    padding: 0 2rem;
    max-width: 2500px;          /* wide enough for bento grids */
}

/* Tighter padding on phones */
@media (max-width: 750px) {
    body {
        padding: 0 1rem;
    }
}

/* === FILM GRAIN OVERLAY === */
body::after {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

/* === TYPOGRAPHY === */
h1 {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--color-text);
}

h2 {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 0.5rem;
    display: inline-block;
    margin-bottom: 1.5rem;
}

a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

a:hover {
    color: var(--color-text);
    text-decoration-color: var(--color-accent);
}

/* === HEADER === */
header {
    padding: 2rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 2.5rem;
}

/* === HEADER LEFT (logo + dropdown) === */
.header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Override dropdown menu to open to the right when under the logo */
.header-left .nav-dropdown-menu {
    left: 0;
    right: auto;
}

header h1 {
    font-size: 1.5rem;
    border: none;
    padding: 0;
    margin: 0;
}

header h1 a {
    text-decoration: none;
    color: var(--color-text);
}

header h1 a:hover {
    color: var(--color-accent);
}

/* === NAVIGATION === */
nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

nav > a {
    border: 1px solid var(--color-border);
    padding: 0.4rem 1rem;
    text-decoration: none;
    color: var(--color-text);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    box-shadow: var(--shadow-offset) var(--color-accent);
    transition: box-shadow 0.1s, transform 0.1s;
}

nav > a:hover {
    box-shadow: 2px 2px 0px var(--color-accent);
    transform: translate(2px, 2px);
}

/* === NAV DROPDOWN === */
.nav-dropdown {
    position: relative;
    z-index: 100;
}

.nav-dropdown-trigger {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    padding: 0.4rem 1rem;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    box-shadow: var(--shadow-offset) var(--color-accent);
    transition: box-shadow 0.1s, transform 0.1s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-dropdown-trigger:hover {
    box-shadow: 2px 2px 0px var(--color-accent);
    transform: translate(2px, 2px);
}

.nav-dropdown-trigger .arrow {
    font-size: 0.6rem;
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-accent);
    list-style: none;
    min-width: 200px;
    z-index: 101;
    box-shadow: var(--shadow-offset) #000;
    padding: 0;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    display: block;
}

.nav-dropdown-menu li {
    border-bottom: 1px solid var(--color-border);
}

.nav-dropdown-menu li:last-child {
    border-bottom: none;
}

.nav-dropdown-menu li a,
.nav-dropdown-menu li button {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    color: var(--color-text);
    text-decoration: none;
    text-align: left;
    background: none;
    border: none;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nav-dropdown-menu li a:hover,
.nav-dropdown-menu li button:hover {
    background: var(--color-accent);
    color: #000;
}

/* === MAIN CONTENT === */
main {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* === FORMS === */
form > div {
    margin-bottom: 1.5rem;
}

label {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.4rem;
    color: var(--color-muted);
}

input[type="email"],
input[type="password"],
input[type="text"] {
    width: 100%;
    padding: 0.7rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.15s;
}

input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus {
    border-color: var(--color-accent);
    box-shadow: 2px 2px 0px var(--color-accent);
}

input[type="file"] {
    width: 100%;
    padding: 0.7rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.15s;
}
input[type="file"]:focus {
    border-color: var(--color-accent);
    box-shadow: 2px 2px 0px var(--color-accent);
}

button[type="submit"],
button {
    background: var(--color-surface);
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    padding: 0.7rem 2rem;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    box-shadow: var(--shadow-offset) var(--color-accent);
    transition: box-shadow 0.1s, transform 0.1s, background 0.1s, color 0.1s;
}

button[type="submit"]:hover,
button:hover {
    background: var(--color-accent);
    color: #000;
    box-shadow: 2px 2px 0px var(--color-accent);
    transform: translate(2px, 2px);
}

/* === ERRORS === */
.error {
    color: var(--color-error);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    border: 1px solid var(--color-error);
    padding: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-offset) var(--color-error);
}

span.error {
    display: block;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: 0.3rem;
    margin-top: 0.2rem;
    font-size: 0.75rem;
}

/* === FOOTER === */
footer {
    position: sticky;
    top: 100vh;
    padding: 1.5rem 0;
    margin-top: 2rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* === THEME TOGGLE === */
#theme-toggle {
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    padding: 0.4rem 0.6rem;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: none;
    line-height: 1;
    transition: box-shadow 0.1s, transform 0.1s;
}

#theme-toggle:hover {
    box-shadow: var(--shadow-offset) var(--color-accent);
    transform: translate(2px, 2px);
    background: var(--color-surface);
    color: var(--color-accent);
}

/* === USER ROLE GROUPS (inside hero) === */                                                                                                                                  
  .user-role-groups {                                                                                                                                                           
    display: flex;                                                                                                                                                              
    gap: 1.5rem;                                                                                                                                                                
  }                                                                                                                                                                             
                                                                                                                                                                                
  .user-role-group {                                                                                                                                                            
    flex: 1;                                                                                                                                                                    
    min-width: 0;          /* allow tables to shrink */                                                                                                                         
  }                                                                                                                                                                             
                                                                                                                                                                                
  @media (max-width: 750px) {                                                                                                                                                   
    .user-role-groups {                                                                                                                                                         
      flex-direction: column;                                                                                                                                                   
    }                                                                                                                                                                           
  }  

/* === TABLES === */
table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--color-border);
}

th, td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.85rem;
}

th {
    background: var(--color-surface);
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

tr:hover td {
    background: var(--color-surface);
}

/* === SELECT === */
select {
    width: 100%;
    padding: 0.7rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: 1rem;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23777' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    padding-right: 2rem;
}

select:focus {
    border-color: var(--color-accent);
    box-shadow: 2px 2px 0px var(--color-accent);
}

/* === BENTO GRID LAYOUT === */
.bento-grid {
    display: grid;
    gap: 1.5vw;
    padding: 1vw;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
}

.bento-box {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-offset) var(--color-border);
    padding: 1rem;
    min-width: 0;
    overflow: hidden;
}

.bento-hero    { grid-area: hero; }
.bento-aside   { grid-area: aside; }
.bento-bottom  { grid-area: bottom; }
.bento-form    { grid-area: form; }
.bento-sidebar { grid-area: sidebar; }
.bento-list    { grid-area: list; }
.bento-agents  { grid-area: agents; }
.bento-top     { grid-area: top; }
.bento-logs    { grid-area: logs; }

/* Companies list grid */
.bento-grid--companies-list {
    grid-template-areas:
        "hero hero hero hero aside aside"
        "hero hero hero hero aside aside"
        "hero hero hero hero aside aside"
        "bottom bottom bottom bottom bottom bottom";
}

/* Companies create/edit grid */
.bento-grid--companies-create,
.bento-grid--companies-edit {
    grid-template-areas:
        "form form form form sidebar sidebar"
        "form form form form sidebar sidebar"
        "list list list list list list";
}

/* Users bento layouts */
.bento-grid--users-list {
    grid-template-areas:
        "top top top top top top"
        "hero hero hero hero hero hero"
        "hero hero hero hero hero hero"
        "hero hero hero hero hero hero"
        "bottom bottom bottom bottom bottom bottom";
}

.bento-grid--users-create,
.bento-grid--users-edit {
    grid-template-areas:
        "form form form form sidebar sidebar"
        "form form form form sidebar sidebar"
        "list list list list list list";
}

.bento-grid--campaigns-list {
    grid-template-areas:
        "hero hero hero hero aside aside"
        "hero hero hero hero aside aside"
        "hero hero hero hero agents agents"
        "logs logs logs logs logs logs"
        "bottom bottom bottom bottom bottom bottom";
}

.bento-grid--campaigns-create,
.bento-grid--campaigns-edit {
    grid-template-areas:
        "form form form form sidebar sidebar"
        "form form form form sidebar sidebar"
        "list list list list list list";
}

/* Lead Lists bento layouts */
.bento-grid--lead-lists-list {
    grid-template-areas:
        "hero hero hero hero aside aside"
        "hero hero hero hero aside aside"
        "hero hero hero hero aside aside"
        "bottom bottom bottom bottom bottom bottom";
}

.bento-grid--lead-lists-create,
.bento-grid--lead-lists-edit {
    grid-template-areas:
        "form form form form sidebar sidebar"
        "form form form form sidebar sidebar"
        "list list list list list list";
}

.bento-grid--leads-list {
    grid-template-areas:
        "hero hero hero hero aside aside"
        "hero hero hero hero aside aside"
        "hero hero hero hero aside aside"
        "bottom bottom bottom bottom bottom bottom";
}

.bento-grid--leads-create,
.bento-grid--leads-edit {
    grid-template-areas:
        "form form form form sidebar sidebar"
        "form form form form sidebar sidebar"
        "list list list list list list";
}

.bento-grid--import-leads {
    grid-template-areas:
        "form form form form sidebar sidebar"
        "list list list list list list";
}

@media (max-width: 1000px) {
    .bento-grid {
        grid-template-columns: 1fr;
        grid-template-areas: none;
    }

    .bento-grid > * {
        grid-area: auto;
    }

    .bento-grid--companies-list {
        grid-template-areas:
            "hero hero hero hero"
            "hero hero hero hero"
            "hero hero hero hero"
            "aside aside bottom bottom";
    }

    .bento-grid--companies-create,
    .bento-grid--companies-edit {
        grid-template-areas:
            "form form form sidebar"
            "form form form sidebar"
            "list list list list";
    }

    .bento-grid--users-list {
        grid-template-areas:
            "top top top top"
            "hero hero hero hero"
            "hero hero hero hero"
            "hero hero hero hero"
            "bottom bottom bottom bottom";
    }

    .bento-grid--users-create,
    .bento-grid--users-edit {
        grid-template-areas:
            "form form form sidebar"
            "form form form sidebar"
            "list list list list";
    }

    .bento-grid--campaigns-list {
        grid-template-areas:
            "hero hero hero hero"
            "hero hero hero hero"
            "aside aside agents agents"
            "logs logs logs logs"
            "bottom bottom bottom bottom";
    }

    .bento-grid--campaigns-create,
    .bento-grid--campaigns-edit {
        grid-template-areas:
            "form form form sidebar"
            "form form form sidebar"
            "list list list list";
    }

    .bento-grid--lead-lists-list {
        grid-template-areas:
            "hero hero hero hero"
            "hero hero hero hero"
            "hero hero hero hero"
            "aside aside bottom bottom";
    }

    .bento-grid--lead-lists-create,
    .bento-grid--lead-lists-edit {
        grid-template-areas:
            "form form form sidebar"
            "form form form sidebar"
            "list list list list";
    }

    .bento-grid--leads-list {
        grid-template-areas:
            "hero hero hero hero"
            "hero hero hero hero"
            "hero hero hero hero"
            "aside aside bottom bottom";
    }

    .bento-grid--leads-create,
    .bento-grid--leads-edit {
        grid-template-areas:
            "form form form sidebar"
            "form form form sidebar"
            "list list list list";
    }

    .bento-grid--import-leads {
        grid-template-areas:
            "form form form sidebar"
            "list list list list";
    }
}

@media (max-width: 750px) {
    .bento-grid {
        grid-template-columns: 1fr;
        grid-template-areas: none;
    }

    .bento-grid > * {
        grid-area: auto;
    }

    .bento-grid--users-list,
    .bento-grid--users-create,
    .bento-grid--users-edit {
        grid-template-areas: none;
        grid-template-columns: 1fr;
    }

    .bento-grid--users-list > *,
    .bento-grid--users-create > *,
    .bento-grid--users-edit > * {
        grid-area: auto;
    }

    .bento-grid--campaigns-list,
    .bento-grid--campaigns-create,
    .bento-grid--campaigns-edit {
        grid-template-areas: none;
        grid-template-columns: 1fr;
    }

    .bento-grid--campaigns-list > *,
    .bento-grid--campaigns-create > *,
    .bento-grid--campaigns-edit > * {
        grid-area: auto;
    }

    .bento-grid--lead-lists-list,
    .bento-grid--lead-lists-create,
    .bento-grid--lead-lists-edit {
        grid-template-areas: none;
        grid-template-columns: 1fr;
    }

    .bento-grid--lead-lists-list > *,
    .bento-grid--lead-lists-create > *,
    .bento-grid--lead-lists-edit > * {
        grid-area: auto;
    }

    .bento-grid--leads-list,
    .bento-grid--leads-create,
    .bento-grid--leads-edit {
        grid-template-areas: none;
        grid-template-columns: 1fr;
    }

    .bento-grid--leads-list > *,
    .bento-grid--leads-create > *,
    .bento-grid--leads-edit > * {
        grid-area: auto;
    }

    .bento-grid--import-leads {
        grid-template-areas: none;
        grid-template-columns: 1fr;
    }
    .bento-grid--import-leads > * {
        grid-area: auto;
    }
}

.bento-grid--import-leads {
    grid-template-areas:
        "form form form form sidebar sidebar"
        "list list list list list list";
}

/* DID Lists bento layouts */
.bento-grid--did-lists-list {
    grid-template-areas:
        "hero hero hero hero hero aside"
        "hero hero hero hero hero aside"
        "hero hero hero hero hero aside";
}

.bento-grid--did-lists-create,
.bento-grid--did-lists-edit {
    grid-template-areas:
        "form form form form sidebar sidebar"
        "form form form form sidebar sidebar"
        "form form form form sidebar sidebar";
}

.bento-grid--iframe-logs-list {
    grid-template-areas:
        "hero hero hero hero aside aside"
        "hero hero hero hero aside aside"
        "hero hero hero hero aside aside"
        "bottom bottom bottom bottom bottom bottom";
}

/* Reseller users list grid */
.bento-grid--reseller-users {
    grid-template-areas:
        "top top top top top top"
        "hero hero hero hero hero hero"
        "hero hero hero hero hero hero"
        "hero hero hero hero hero hero"
        "bottom bottom bottom bottom bottom bottom";
}

/* Reseller users create/edit/reset grids */
.bento-grid--reseller-users-create,
.bento-grid--reseller-users-edit,
.bento-grid--reseller-users-reset {
    grid-template-areas:
        "form form form form sidebar sidebar"
        "form form form form sidebar sidebar"
        "list list list list list list";
}

/* Reseller dashboard grid */
.bento-grid--reseller-dashboard {
    grid-template-areas:
        "top top top top top top"
        "hero hero hero hero aside aside"
        "hero hero hero hero aside aside"
        "hero hero hero hero aside aside"
        "bottom bottom bottom bottom bottom bottom";
}

@media (max-width: 1000px) {
    .bento-grid--iframe-logs-list {
        grid-template-areas:
            "hero hero hero hero"
            "hero hero hero hero"
            "aside aside bottom bottom";
    }

    .bento-grid--import-leads {
        grid-template-areas:
            "form form form sidebar"
            "list list list list";
    }

    .bento-grid--did-lists-list {
        grid-template-areas:
            "hero hero hero hero"
            "hero hero hero hero"
            "aside aside aside aside";
    }

    .bento-grid--did-lists-create,
    .bento-grid--did-lists-edit {
        grid-template-areas:
            "form form form form"
            "sidebar sidebar sidebar sidebar";
    }

    .bento-grid--reseller-users {
        grid-template-areas:
            "top top top top"
            "hero hero hero hero"
            "hero hero hero hero"
            "hero hero hero hero"
            "bottom bottom bottom bottom";
    }

    .bento-grid--reseller-users-create,
    .bento-grid--reseller-users-edit,
    .bento-grid--reseller-users-reset {
        grid-template-areas:
            "form form form sidebar"
            "form form form sidebar"
            "list list list list";
    }

    .bento-grid--reseller-dashboard {
        grid-template-areas:
            "top top top top"
            "hero hero hero hero"
            "hero hero hero hero"
            "aside aside bottom bottom";
    }
}

@media (max-width: 750px) {
    .bento-grid--iframe-logs-list {
        grid-template-areas: none;
        grid-template-columns: 1fr;
    }
    .bento-grid--iframe-logs-list > * {
        grid-area: auto;
    }

    .bento-grid--import-leads {
        grid-template-areas: none;
        grid-template-columns: 1fr;
    }
    .bento-grid--import-leads > * {
        grid-area: auto;
    }

    .bento-grid--did-lists-list,
    .bento-grid--did-lists-create,
    .bento-grid--did-lists-edit {
        grid-template-areas: none;
        grid-template-columns: 1fr;
    }

    .bento-grid--did-lists-list > *,
    .bento-grid--did-lists-create > *,
    .bento-grid--did-lists-edit > * {
        grid-area: auto;
    }

    .bento-grid--reseller-users,
    .bento-grid--reseller-users-create,
    .bento-grid--reseller-users-edit,
    .bento-grid--reseller-users-reset,
    .bento-grid--reseller-dashboard {
        grid-template-areas: none;
        grid-template-columns: 1fr;
    }

    .bento-grid--reseller-users > *,
    .bento-grid--reseller-users-create > *,
    .bento-grid--reseller-users-edit > *,
    .bento-grid--reseller-users-reset > *,
    .bento-grid--reseller-dashboard > * {
        grid-area: auto;
    }
}

/* Company billing detail (reseller manage page) */
.bento-grid--company-billing {
    grid-template-areas:
        "top    top    top    top    top    top"
        "form   form   form   form   sidebar sidebar"
        "form   form   form   form   sidebar sidebar"
        "hero   hero   hero   hero   aside  aside"
        "hero   hero   hero   hero   aside  aside"
        "bottom bottom bottom bottom bottom bottom";
}

@media (max-width: 1000px) {
    .bento-grid--company-billing {
        grid-template-areas:
            "top    top    top    top"
            "form   form   form   sidebar"
            "form   form   form   sidebar"
            "hero   hero   hero   hero"
            "aside  aside  bottom bottom";
    }
}

@media (max-width: 750px) {
    .bento-grid--company-billing {
        grid-template-areas: none;
        grid-template-columns: 1fr;
    }
    .bento-grid--company-billing > * {
        grid-area: auto;
    }
}

/* Company billing overview (company admin view) */
.bento-grid--company-billing-overview {
    grid-template-areas:
        "top    top    top    top    top    top"
        "form   form   form   form   form   form"
        "hero   hero   hero   hero   hero   hero"
        "bottom bottom bottom bottom bottom bottom";
}

@media (max-width: 1000px) {
    .bento-grid--company-billing-overview {
        grid-template-areas:
            "top    top    top    top"
            "form   form   form   form"
            "hero   hero   hero   hero"
            "bottom bottom bottom bottom";
    }
}

@media (max-width: 750px) {
    .bento-grid--company-billing-overview {
        grid-template-areas: none;
        grid-template-columns: 1fr;
    }
    .bento-grid--company-billing-overview > * {
        grid-area: auto;
    }
}