/* --- LiveDrop Host Control Center Styles (v7.4) --- */
/* Built for the structure based on final prototype HTML */
/*-----style.css----*/

/* --- Base Styles & Variables --- */
:root {
    /* Core Colors */
    --share-bg-light: #f8f9fa;
    --share-bg-dark: #212529;
    --share-text-light: #212529;
    --share-text-dark: #f8f9fa;
    --share-accent: #007bff;
    --share-stop-color: #dc3545;
    --share-stream-color: #28a745;
    --share-button-text: white;
    --share-border-light: #dee2e6;
    --share-border-dark: #495057;
    --share-disabled-bg: #6c757d;
    --share-disabled-text: #e9ecef;
    --mute-neutral-bg: #6c757d;
    /* Hover Colors */
    --share-accent-hover: #0056b3;
    --share-stop-hover: #c82333;
    --share-stream-hover: #218838;
    --mute-neutral-hover: #5a6268;
    /* Chat Colors */
    --chat-bg: #ffffff;
    --chat-bg-dark: #343a40;
    --chat-input-bg: #ffffff;
    --chat-input-bg-dark: #495057;
    --chat-border: var(--share-border-light);
    --chat-border-dark: var(--share-border-dark);
    --chat-text-light: var(--share-text-light);
    --chat-text-dark: var(--share-text-dark);
    --chat-sender-text: #6c757d;
    --chat-timestamp-text: #adb5bd;
    --chat-bubble-sent-bg: var(--share-accent);
    --chat-bubble-sent-text: white;
    --chat-bubble-received-bg: #e9ecef;
    --chat-bubble-received-text: var(--share-text-light);
    --chat-bubble-received-bg-dark: #495057;
    --chat-bubble-received-text-dark: var(--share-text-dark);
    --chat-bubble-system-bg: rgba(108, 117, 125, 0.1);
    --chat-bubble-system-text: #6c757d;
    --chat-bubble-system-bg-dark: rgba(248, 249, 250, 0.1);
    --chat-bubble-system-text-dark: #adb5bd;
    /* Tab Colors */
    --tab-inactive-bg: transparent;
    --tab-inactive-text: #6c757d;
    --tab-active-bg: var(--share-bg-light); /* Unused now, kept for reference */
    --tab-active-text: var(--share-accent);
    --tab-hover-bg: rgba(0, 123, 255, 0.1);
    --tab-border: var(--share-border-light);
    --tab-active-bg-dark: var(--share-bg-dark); /* Unused */
    --tab-border-dark: var(--share-border-dark);
    --tab-inactive-text-dark: #adb5bd;
    /* Sub-tab colors */
    --subtab-border: #e9ecef;
    --subtab-border-dark: #495057;
    --subtab-inactive-text: #6c757d;
    --subtab-active-text: var(--share-accent);
    --subtab-hover-bg: #f1f3f5;
    --subtab-hover-bg-dark: #495057;
    /* Status Colors */
    --status-error-bg: rgba(220, 53, 69, 0.1);
    --status-success-bg: rgba(40, 167, 69, 0.1);
    --status-warning-bg: rgba(255, 193, 7, 0.1);
    --status-info-bg: transparent;
    /* Estimator Styles */
    --estimator-label-color: #495057;
    --estimator-label-color-dark: #ced4da;
    --estimator-input-bg: #fff;
    --estimator-input-bg-dark: #495057;
    --estimator-input-border: #ced4da;
    --estimator-input-border-dark: #6c757d;
    --estimator-result-bg: #e9ecef;
    --estimator-result-bg-dark: #343a40;
}

/* --- Global & Body --- */
html, body { height: 100%; margin: 0; font-family: 'Inter', sans-serif; box-sizing: border-box; font-size: 15px; }
*, *:before, *:after { box-sizing: inherit; }
body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; transition: background-color 0.3s ease, color 0.3s ease; }
body.bg-light { background-color: var(--share-bg-light); color: var(--share-text-light); }
body.bg-dark { background-color: var(--share-bg-dark); color: var(--share-text-dark); }

/* --- App Header --- */
.app-header { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: 60px; flex-shrink: 0; border-bottom: 1px solid var(--share-border-light); background-color: #ffffff; }
.app-header .logo { font-size: 1.4rem; font-weight: 700; color: var(--share-accent); }
.app-header .user-info { font-size: 0.9rem; color: #6c757d; }
body.bg-dark .app-header { background-color: var(--chat-bg-dark); border-bottom-color: var(--share-border-dark); }
body.bg-dark .app-header .user-info { color: var(--chat-timestamp-text); }

/* --- Main Tab Navigation --- */
.tab-navigation { display: flex; flex-shrink: 0; border-bottom: 1px solid var(--tab-border); background-color: #ffffff; padding: 0 10px; overflow-x: auto; }
body.bg-dark .tab-navigation { border-bottom-color: var(--tab-border-dark); background-color: var(--chat-bg-dark); }
.tab-button { padding: 12px 18px; border: none; border-bottom: 3px solid transparent; background-color: var(--tab-inactive-bg); color: var(--tab-inactive-text); font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-bottom-color 0.2s ease; display: inline-flex; align-items: center; gap: 6px; margin-bottom: -1px; white-space: nowrap; }
body.bg-dark .tab-button { color: var(--tab-inactive-text-dark); }
.tab-button:hover { background-color: var(--tab-hover-bg); color: var(--share-accent); }
body.bg-dark .tab-button:hover { background-color: rgba(0, 123, 255, 0.15); }
.tab-button.active { color: var(--tab-active-text); border-bottom-color: var(--share-accent); font-weight: 600; }

/* --- Tab Content Area & Panes --- */
.tab-content-area { flex-grow: 1; position: relative; overflow: hidden; background-color: inherit; }
.tab-pane { display: none; width: 100%; height: 100%; overflow: auto; background-color: inherit; padding: 25px; }
.tab-pane.active { display: block; }
#ld-live-tab.active { display: flex; padding: 0; overflow: hidden; }
#ld-dashboard-tab.active { background-color: #f4f7f9; padding: 30px; }
body.bg-dark #ld-dashboard-tab.active { background-color: var(--share-bg-dark); }
#ld-toolbox-tab, #ld-drops-tab, #ld-comms-tab, #ld-pages-tab, #ld-customers-tab, #ld-payments-tab, #ld-account-tab { padding: 30px; }
/* Special padding removal for tabs with internal sub-nav */
#ld-comms-tab, #ld-pages-tab { padding: 0; display: none; flex-direction: column; }
#ld-comms-tab.active, #ld-pages-tab.active { display: flex; }

/* --- Live Studio Tab & Sub-Tabs --- */
#ld-live-tab .studio-container { display: flex; width: 100%; height: 100%; }
#ld-live-tab .studio-main { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; padding: 15px 20px; }
#ld-live-tab .studio-sub-navigation { display: flex; border-bottom: 1px solid var(--subtab-border); padding: 0 0 5px 0; margin-bottom: 15px; flex-shrink: 0; overflow-x: auto; }
body.bg-dark #ld-live-tab .studio-sub-navigation { border-bottom-color: var(--subtab-border-dark); }
.studio-subtab-button { padding: 8px 12px; border: none; border-bottom: 2px solid transparent; background-color: transparent; color: var(--subtab-inactive-text); font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: color 0.2s ease, border-bottom-color 0.2s ease; display: inline-flex; align-items: center; gap: 5px; margin-right: 10px; margin-bottom: -1px; white-space: nowrap; }
body.bg-dark .studio-subtab-button { color: var(--subtab-inactive-text-dark); }
.studio-subtab-button:hover { color: var(--subtab-active-text); background-color: var(--subtab-hover-bg); }
body.bg-dark .studio-subtab-button:hover { background-color: var(--subtab-hover-bg-dark); }
.studio-subtab-button.active { color: var(--subtab-active-text); border-bottom-color: var(--subtab-active-text); font-weight: 600; }
.studio-subtab-button:disabled { color: #bdc3c7; cursor: not-allowed; opacity: 0.6; }
body.bg-dark .studio-subtab-button:disabled { color: #6c757d; }
#ld-live-tab .studio-content-area { flex-grow: 1; position: relative; overflow: hidden; }
.studio-sub-pane { display: none; width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; }
.studio-sub-pane.active { display: flex; }

/* --- Vertical Controls Layout & Preview --- */
.studio-sub-pane-inner { display: flex; width: 100%; height: 100%; gap: 15px; padding: 5px; }
.preview-area { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }
.preview-area h3 { font-size: 1rem; margin-bottom: 10px; color: inherit; text-align: center; font-weight: 500; }
.preview-video { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; border-radius: 8px; background-color: #333; border: 1px solid var(--share-border-light); margin-bottom: 10px; max-height: calc(100% - 90px); object-fit: contain; transition: aspect-ratio 0.3s ease; }
.preview-video.vertical { aspect-ratio: 9 / 16; } /* Applied by JS */
.audio-placeholder { width: 100%; height: auto; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; border-radius: 8px; background-color: #444; border: 1px solid var(--share-border-light); margin-bottom: 10px; max-height: calc(100% - 90px); flex-direction: column; color: #ccc; transition: aspect-ratio 0.3s ease; }
.audio-placeholder.vertical { aspect-ratio: 9 / 16; } /* Applied by JS */
.audio-placeholder i { font-size: 4rem; margin-bottom: 15px; opacity: 0.6; }
.audio-placeholder span { font-size: 1rem; font-style: italic; opacity: 0.8; }
body.bg-dark .preview-video, body.bg-dark .audio-placeholder { border-color: var(--share-border-dark); }
.format-controls { text-align: center; margin-bottom: 10px; flex-shrink: 0; }
.format-controls label { font-size: 0.8rem; margin-right: 8px; font-weight: 500; color: var(--malcolm-text-muted-light); }
body.bg-dark .format-controls label { color: var(--malcolm-text-muted-dark); }
.format-controls button { font-size: 0.8rem; padding: 3px 8px; margin: 0 3px; border-radius: 4px; border: 1px solid var(--malcolm-border); background-color: var(--chat-bg); color: var(--malcolm-text-muted-light); cursor: pointer; }
body.bg-dark .format-controls button { background-color: var(--chat-bg-dark); border-color: var(--malcolm-border-dark); color: var(--malcolm-text-muted-dark); }
.format-controls button.active { background-color: var(--share-accent); color: white; border-color: var(--share-accent); font-weight: 500; }
.format-controls button:disabled { opacity: 0.5; cursor: not-allowed; background-color: var(--share-disabled-bg) !important; border-color: var(--share-disabled-bg) !important; color: var(--share-disabled-text) !important;}

.vertical-controls { display: flex; flex-direction: column; gap: 10px; width: 150px; flex-shrink: 0; }
.vertical-controls button { width: 100%; padding: 10px 15px; font-size: 0.9rem; border: none; border-radius: 5px; cursor: pointer; color: var(--share-button-text); transition: background-color 0.2s ease, opacity 0.2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 500; }
/* Polished Button Colors */
.vertical-controls button.start-rec-btn, .vertical-controls button.start-share-btn { background-color: var(--share-accent); }
.vertical-controls button.start-rec-btn:hover:not(:disabled), .vertical-controls button.start-share-btn:hover:not(:disabled) { background-color: var(--share-accent-hover); }
.vertical-controls button.stop-rec-btn, .vertical-controls button.stop-share-btn, .vertical-controls button.stop-stream-btn { background-color: var(--share-stop-color); }
.vertical-controls button.stop-rec-btn:hover:not(:disabled), .vertical-controls button.stop-share-btn:hover:not(:disabled), .vertical-controls button.stop-stream-btn:hover:not(:disabled) { background-color: var(--share-stop-hover); }
.vertical-controls button.go-live-btn { background-color: var(--share-stream-color); }
.vertical-controls button.go-live-btn:hover:not(:disabled) { background-color: var(--share-stream-hover); }
.vertical-controls button.mute-btn { background-color: var(--mute-neutral-bg); }
.vertical-controls button.mute-btn:hover:not(:disabled) { background-color: var(--mute-neutral-hover); }
.vertical-controls button.mute-btn.muted { background-color: var(--share-stop-color); }
.vertical-controls button.mute-btn.muted:hover:not(:disabled) { background-color: var(--share-stop-hover); }
.vertical-controls button:disabled { background-color: var(--share-disabled-bg); color: var(--share-disabled-text); cursor: not-allowed; opacity: 0.7; }
.vertical-controls button.hidden { display: none; }
.sub-status { margin-top: auto; font-size: 0.85rem; text-align: center; padding: 5px; border-radius: 4px; min-height: 1.2em; width: 100%; font-weight: 500; }
.sub-status.error { color: var(--share-stop-color); background-color: var(--status-error-bg);}
.sub-status.success { color: var(--share-stream-color); background-color: var(--status-success-bg); }
.sub-status.warning { color: #ffc107; background-color: var(--status-warning-bg); }
.sub-status.info { color: inherit; background-color: var(--status-info-bg); }

/* SketchDrop & PodDrop Placeholders */
#sketchdrop-studio-content .placeholder-content, #poddrop-studio-content .placeholder-content, #combined-studio-content .placeholder-content { height: auto; padding: 50px 20px; align-self: center; }
#sketch-canvas-placeholder { display: flex; align-items: center; justify-content: center; } /* Center placeholder inside */


/* --- Chat Sidebar Styling --- */
#ld-live-tab .chat-sidebar { width: 320px; flex-shrink: 0; height: 100%; display: flex; flex-direction: column; border-left: 1px solid var(--chat-border); transition: background-color 0.3s ease, border-color 0.3s ease; }
body.bg-light #ld-live-tab .chat-sidebar { background-color: var(--chat-bg); border-left-color: var(--chat-border); } body.bg-dark #ld-live-tab .chat-sidebar { background-color: var(--chat-bg-dark); border-left-color: var(--chat-border-dark); }
#ld-live-tab .chat-header { padding: 10px 15px; font-weight: 600; border-bottom: 1px solid var(--chat-border); flex-shrink: 0; text-align: center; font-size: 1rem; } body.bg-light #ld-live-tab .chat-header { border-bottom-color: var(--chat-border); } body.bg-dark #ld-live-tab .chat-header { border-bottom-color: var(--chat-border-dark); color: var(--share-text-dark); }
#ld-live-tab .chat-messages { flex-grow: 1; overflow-y: auto; padding: 15px 12px; display: flex; flex-direction: column; background-color: inherit; }
#ld-live-tab .typing-indicator-area { height: 20px; padding: 0 12px; flex-shrink: 0; display: flex; align-items: center; overflow: hidden; border-top: 1px solid var(--chat-border); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } body.bg-light #ld-live-tab .typing-indicator-area { border-top-color: var(--chat-border); } body.bg-dark #ld-live-tab .typing-indicator-area { border-top-color: var(--chat-border-dark); } #ld-live-tab .typing-indicator-area.visible { opacity: 1; visibility: visible; } #ld-live-tab #typing-indicator-text { font-size: 0.8rem; color: var(--chat-sender-text); font-style: italic; animation: typing-fade 1.5s infinite ease-in-out; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @keyframes typing-fade { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
#ld-live-tab .chat-input-container { display: flex; align-items: center; padding: 10px 10px; flex-shrink: 0; border-top: 1px solid var(--chat-border); gap: 8px; transition: background-color 0.3s ease, border-color 0.3s ease; } body.bg-light #ld-live-tab .chat-input-container { background-color: var(--chat-input-bg); border-top-color: var(--chat-border); } body.bg-dark #ld-live-tab .chat-input-container { background-color: var(--chat-input-bg-dark); border-top-color: var(--chat-border-dark); }
#ld-live-tab #chat-input-field { flex-grow: 1; padding: 8px 10px; border: 1px solid var(--chat-border); border-radius: 5px; font-size: 0.9rem; outline: none; height: 38px; transition: border-color 0.2s ease, background-color 0.3s ease, color 0.3s ease; } body.bg-light #ld-live-tab #chat-input-field { background-color: var(--chat-input-bg); color: var(--chat-text-light); border-color: var(--chat-border); } body.bg-dark #ld-live-tab #chat-input-field { background-color: var(--chat-input-bg-dark); color: var(--chat-text-dark); border-color: var(--chat-border-dark); } #ld-live-tab #chat-input-field:focus { border-color: var(--share-accent); } #ld-live-tab #chat-input-field:disabled { background-color: rgba(108, 117, 125, 0.2); cursor: not-allowed; opacity: 0.7; }
#ld-live-tab #chat-send-btn { flex-shrink: 0; height: 38px; width: 45px; border: none; border-radius: 5px; cursor: pointer; background-color: var(--share-accent); color: white; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease; } #ld-live-tab #chat-send-btn:hover:not(:disabled) { background-color: var(--share-accent-hover); } #ld-live-tab #chat-send-btn:disabled { background-color: var(--share-disabled-bg); cursor: not-allowed; opacity: 0.6; }
/* Message Bubbles */ #ld-live-tab .message-container { display: flex; margin-bottom: 12px; width: 100%; } #ld-live-tab .message-container.align-left { justify-content: flex-start; } #ld-live-tab .message-container.align-right { justify-content: flex-end; } #ld-live-tab .message-container.align-center { justify-content: center; margin-top: 5px; margin-bottom: 15px;} #ld-live-tab .chat-message { border-radius: 8px; padding: 8px 12px; max-width: 85%; display: flex; flex-direction: column; position: relative; word-wrap: break-word; line-height: 1.4; font-size: 0.9rem; transition: background-color 0.3s ease, color 0.3s ease; } #ld-live-tab .message-container.align-right .chat-message { background-color: var(--chat-bubble-sent-bg); color: var(--chat-bubble-sent-text); border-top-right-radius: 2px; align-items: flex-end; } #ld-live-tab .message-container.align-left .chat-message { border: 1px solid var(--chat-border); border-top-left-radius: 2px; } body.bg-light #ld-live-tab .message-container.align-left .chat-message { background-color: var(--chat-bubble-received-bg); color: var(--chat-bubble-received-text); border-color: var(--chat-border); } body.bg-dark #ld-live-tab .message-container.align-left .chat-message { background-color: var(--chat-bubble-received-bg-dark); color: var(--chat-bubble-received-text-dark); border-color: var(--chat-border-dark); } #ld-live-tab .message-container.align-center .chat-message { border: none !important; box-shadow: none !important; font-size: 0.8rem; font-style: italic; text-align: center; max-width: 90%; padding: 2px 0; background-color: transparent !important; } #ld-live-tab .message-container.align-center .chat-message span { display: inline-block; padding: 3px 8px; border-radius: 10px; transition: background-color 0.3s ease, color 0.3s ease; } body.bg-light #ld-live-tab .message-container.align-center .chat-message span { background-color: var(--chat-bubble-system-bg); color: var(--chat-bubble-system-text); } body.bg-dark #ld-live-tab .message-container.align-center .chat-message span { background-color: var(--chat-bubble-system-bg-dark); color: var(--chat-bubble-system-text-dark); } #ld-live-tab .chat-message .sender-name { font-weight: 600; font-size: 0.8rem; margin-bottom: 3px; color: var(--chat-sender-text); opacity: 0.9; } body.bg-dark #ld-live-tab .chat-message .sender-name { color: var(--chat-timestamp-text); } #ld-live-tab .message-container.align-right .chat-message .sender-name { display: none; } #ld-live-tab .chat-message .timestamp { font-size: 0.7rem; opacity: 0.8; margin-top: 4px; align-self: flex-end; color: var(--chat-timestamp-text); }

/* --- Placeholder Styles --- */
.placeholder-content { display: flex; align-items: center; justify-content: center; height: 100%; flex-direction: column; text-align: center; color: #6c757d; font-size: 1.1rem; padding: 20px; }
body.bg-dark .placeholder-content { color: #adb5bd; }
.placeholder-content i { font-size: 3rem; margin-bottom: 15px; color: #adb5bd; }
body.bg-dark .placeholder-content i { color: #6c757d; }
.placeholder-content h3 { color: #495057; margin-bottom: 10px; font-weight: 600; }
body.bg-dark .placeholder-content h3 { color: #dee2e6; }
.placeholder-content p { font-size: 0.95rem; }
/* Comms & Pages Sub-tabs */
#ld-comms-tab .studio-sub-navigation, #ld-pages-tab .studio-sub-navigation { margin-bottom: 0; padding-left: 15px; /* Match main tab padding? */ border-bottom: 1px solid var(--subtab-border); background-color: var(--chat-bg); /* Give subnav a background */ }
body.bg-dark #ld-comms-tab .studio-sub-navigation, body.bg-dark #ld-pages-tab .studio-sub-navigation { border-bottom-color: var(--subtab-border-dark); background-color: var(--chat-bg-dark); }
#ld-comms-tab .content-area, #ld-pages-tab .content-area { padding: 25px; height: calc(100% - 40px); overflow-y: auto; }
/* Hide/Show Sub-Panes within Comms/Pages */
.comms-sub-pane, .pages-sub-pane { display: none; }
.comms-sub-pane.active, .pages-sub-pane.active { display: block; }


/* --- Dashboard Tab Styles --- */
#ld-dashboard-tab .sd-admin-header { font-size: 1.5em; margin-bottom: 25px; color: var(--share-text-light); display: flex; align-items: center; border-bottom: 1px solid var(--share-border-light); padding-bottom: 10px; } body.bg-dark #ld-dashboard-tab .sd-admin-header { color: var(--share-text-dark); border-bottom-color: var(--share-border-dark); } #ld-dashboard-tab .sd-admin-header i { color: var(--share-accent); margin-right: 10px; }
#ld-dashboard-tab .sd-admin-grid { display: grid; gap: 25px; grid-template-columns: 1fr 300px; } #ld-dashboard-tab .sd-main-content { display: flex; flex-direction: column; gap: 25px; } #ld-dashboard-tab .sd-sidebar-widgets { display: flex; flex-direction: column; gap: 20px; }
#ld-dashboard-tab .sd-section { background-color: var(--chat-bg); border-radius: 8px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); border: 1px solid var(--share-border-light); } body.bg-dark #ld-dashboard-tab .sd-section { background-color: var(--chat-bg-dark); border-color: var(--share-border-dark); }
#ld-dashboard-tab .sd-section h3, #ld-dashboard-tab .sd-widget h4 { font-size: 1.1em; color: var(--chat-text-light); margin-bottom: 15px; display: flex; align-items: center; border-bottom: 1px solid var(--share-border-light); padding-bottom: 8px;} body.bg-dark #ld-dashboard-tab .sd-section h3, body.bg-dark #ld-dashboard-tab .sd-widget h4 { color: var(--chat-text-dark); border-bottom-color: var(--share-border-dark); } #ld-dashboard-tab .sd-section h3 i, #ld-dashboard-tab .sd-widget h4 i { margin-right: 8px; color: var(--share-accent); }
#ld-dashboard-tab .sd-summary-section .sd-table-container { width: 100%; overflow-x: auto; } #ld-dashboard-tab .dashboard-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } #ld-dashboard-tab .dashboard-table th, #ld-dashboard-tab .dashboard-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--share-border-light); white-space: nowrap; } body.bg-dark #ld-dashboard-tab .dashboard-table th, body.bg-dark #ld-dashboard-tab .dashboard-table td { border-bottom-color: var(--share-border-dark); } #ld-dashboard-tab .dashboard-table thead th { background-color: var(--share-bg-light); font-weight: 600; color: var(--chat-sender-text); font-size: 0.8rem; text-transform: uppercase; border-bottom-width: 2px; } body.bg-dark #ld-dashboard-tab .dashboard-table thead th { background-color: var(--chat-bg-dark); color: var(--chat-timestamp-text); border-bottom-color: var(--share-border-dark); } #ld-dashboard-tab .dashboard-table tbody tr:hover { background-color: rgba(0, 123, 255, 0.05); } body.bg-dark #ld-dashboard-tab .dashboard-table tbody tr:hover { background-color: rgba(0, 123, 255, 0.1); }
#ld-dashboard-tab .sd-status-badge, #ld-dashboard-tab .sd-access-badge { padding: 3px 8px; border-radius: 12px; font-size: 0.8em; font-weight: 500; white-space: nowrap; } #ld-dashboard-tab .sd-status-live { background-color: var(--status-success-bg); color: var(--share-stream-color); border: 1px solid var(--share-stream-color); } #ld-dashboard-tab .sd-status-scheduled { background-color: var(--status-warning-bg); color: #c88f0a; border: 1px solid #ffc107; } #ld-dashboard-tab .sd-status-ended { background-color: #e9ecef; color: #6c757d; border: 1px solid #adb5bd; } body.bg-dark #ld-dashboard-tab .sd-status-ended { background-color: #495057; color: #adb5bd; border-color: #6c757d; } #ld-dashboard-tab .sd-access-paid { background-color: rgba(0, 123, 255, 0.1); color: var(--share-accent); border: 1px solid var(--share-accent); } #ld-dashboard-tab .sd-access-free { background-color: rgba(108, 117, 125, 0.1); color: #6c757d; border: 1px solid #adb5bd; } body.bg-dark #ld-dashboard-tab .sd-access-free { color: #adb5bd; border-color: #6c757d; }
#ld-dashboard-tab .dashboard-actions a, #ld-dashboard-tab .dashboard-actions button { color: var(--share-accent); text-decoration: none; margin-right: 12px; background: none; border: none; padding: 0; font-size: 1em; cursor: pointer; vertical-align: middle; } #ld-dashboard-tab .dashboard-actions a:hover, #ld-dashboard-tab .dashboard-actions button:hover { color: var(--share-accent-hover); } #ld-dashboard-tab .dashboard-actions .delete-btn { color: var(--share-stop-color); } #ld-dashboard-tab .dashboard-actions .delete-btn:hover { color: var(--share-stop-hover); }
#ld-dashboard-tab .sd-pagination { margin-top: 15px; text-align: right; font-size: 0.9rem; } #ld-dashboard-tab .sd-pagination a, #ld-dashboard-tab .sd-pagination span { margin-left: 10px; color: var(--share-accent); text-decoration: none; } #ld-dashboard-tab .sd-pagination a:hover { text-decoration: underline; } #ld-dashboard-tab .sd-pagination span { color: var(--chat-sender-text); } body.bg-dark #ld-dashboard-tab .sd-pagination span { color: var(--chat-timestamp-text); }
#ld-dashboard-tab .sd-widget { background-color: var(--chat-bg); border-radius: 8px; padding: 15px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); border: 1px solid var(--share-border-light); } body.bg-dark #ld-dashboard-tab .sd-widget { background-color: var(--chat-bg-dark); border-color: var(--share-border-dark); }
#ld-dashboard-tab .sd-sales-widget .sd-sales-total { text-align: center; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid var(--share-border-light); } body.bg-dark #ld-dashboard-tab .sd-sales-widget .sd-sales-total { border-bottom-color: var(--share-border-dark); } #ld-dashboard-tab .sd-sales-widget .sd-sales-total span { display: block; font-size: 0.85em; color: var(--chat-sender-text); margin-bottom: 2px; } body.bg-dark #ld-dashboard-tab .sd-sales-widget .sd-sales-total span { color: var(--chat-timestamp-text); } #ld-dashboard-tab .sd-sales-widget .sd-sales-total strong { font-size: 1.8em; font-weight: 600; color: var(--share-stream-color); }
#ld-dashboard-tab .sd-sales-widget h5 { font-size: 0.9em; font-weight: 600; margin-bottom: 8px; color: var(--chat-text-light); } body.bg-dark #ld-dashboard-tab .sd-sales-widget h5 { color: var(--chat-text-dark); } #ld-dashboard-tab .sd-recent-payments { list-style: none; padding: 0; margin: 0 0 15px 0; font-size: 0.85rem; } #ld-dashboard-tab .sd-recent-payments li { margin-bottom: 5px; color: var(--chat-text-light); display: flex; justify-content: space-between; } body.bg-dark #ld-dashboard-tab .sd-recent-payments li { color: var(--chat-text-dark); } #ld-dashboard-tab .sd-recent-payments li span { font-weight: 500; color: var(--share-stream-color); }
#ld-dashboard-tab .sd-no-sales-message { margin-top: 15px; font-size: 0.9em; text-align: center; color: var(--chat-sender-text); font-style: italic;} body.bg-dark #ld-dashboard-tab .sd-no-sales-message { color: var(--chat-timestamp-text); } #ld-dashboard-tab .sd-no-sales-message i { margin-right: 5px; color: var(--share-stream-color); }

/* --- Account Settings & Estimator Styles --- */
#ld-account-tab h2 { font-size: 1.5em; margin-bottom: 25px; color: var(--share-text-light); display: flex; align-items: center; border-bottom: 1px solid var(--share-border-light); padding-bottom: 10px; } body.bg-dark #ld-account-tab h2 { color: var(--share-text-dark); border-bottom-color: var(--share-border-dark); } #ld-account-tab h2 i { color: var(--share-accent); margin-right: 10px; }
#ld-account-tab .account-sections { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); }
#ld-account-tab .account-section { background-color: var(--chat-bg); border: 1px solid var(--share-border-light); border-radius: 8px; padding: 20px; } body.bg-dark #ld-account-tab .account-section { background-color: var(--chat-bg-dark); border-color: var(--share-border-dark); }
#ld-account-tab .account-section h3 { font-size: 1.2em; margin-bottom: 15px; display: flex; align-items: center; color: var(--chat-text-light); } body.bg-dark #ld-account-tab .account-section h3 { color: var(--chat-text-dark); } #ld-account-tab .account-section h3 i { margin-right: 8px; color: var(--share-accent); width: 20px; text-align: center; }
.estimator-container label { display: block; margin-bottom: 5px; font-weight: 500; color: var(--estimator-label-color); font-size: 0.9rem; } body.bg-dark .estimator-container label { color: var(--estimator-label-color-dark); }
.estimator-container input[type="number"] { width: 100%; padding: 8px 10px; margin-bottom: 15px; border: 1px solid var(--estimator-input-border); border-radius: 4px; font-size: 1rem; background-color: var(--estimator-input-bg); color: var(--chat-text-light); } body.bg-dark .estimator-container input[type="number"] { background-color: var(--estimator-input-bg-dark); border-color: var(--estimator-input-border-dark); color: var(--chat-text-dark); }
.estimator-container button { padding: 10px 20px; background-color: var(--share-accent); color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; font-weight: 500; transition: background-color 0.2s ease; } .estimator-container button:hover { background-color: var(--share-accent-hover); }
#estimator-result { margin-top: 20px; font-size: 1.1em; padding: 15px; border-radius: 5px; background-color: var(--estimator-result-bg); border: 1px solid var(--share-border-light); line-height: 1.6; } body.bg-dark #estimator-result { background-color: var(--estimator-result-bg-dark); border-color: var(--share-border-dark); }
#estimator-result strong { font-weight: 600; color: var(--chat-text-light); } body.bg-dark #estimator-result strong { color: var(--chat-text-dark); }
#estimator-result span.error { color: var(--share-stop-color); }

/* --- Responsive --- */
@media (max-width: 992px) { #ld-dashboard-tab .sd-admin-grid { grid-template-columns: 1fr; } #ld-dashboard-tab .sd-sidebar-widgets { order: -1; }}
@media (max-width: 768px) { .tab-pane { padding: 15px; } #ld-dashboard-tab.active, #ld-account-tab { padding: 20px; } .studio-sub-pane-inner { flex-direction: column; } .vertical-controls { width: 100%; flex-direction: row; flex-wrap: wrap; margin-top: 15px; } .vertical-controls button { flex-grow: 1; min-width: 100px; } .sub-status { margin-top: 10px; } #ld-live-tab .chat-sidebar { width: 100%; height: 300px; border-left: none; border-top: 1px solid var(--chat-border); } body.bg-dark #ld-live-tab .chat-sidebar { border-top-color: var(--chat-border-dark); } #ld-live-tab .studio-container { flex-direction: column; } #ld-live-tab .studio-main { padding-bottom: 10px; } #ld-dashboard-tab .sd-table-container { margin-left: -15px; margin-right: -15px; } #ld-account-tab .account-sections { grid-template-columns: 1fr; } }