/* Universal Glassmorphic Dark Theme - Apply to All Pages */
/* Include this file in any HTML page: <link rel="stylesheet" href="glassmorphic-universal.css"> */

:root {
    /* Glassmorphic Dark Background Colors */
    --bg-dark: #0f172a !important;
    --bg-gradient-start: #1e293b !important;
    --bg-gradient-end: #0f172a !important;
    --glass-bg: rgba(255, 255, 255, 0.03) !important;
    --glass-border: rgba(255, 255, 255, 0.08) !important;
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;

    /* DocuGen Pro Brand Colors - limited to one deep navy, one main blue, one accent */
    --primary-color: #4a9eff !important;
    /* main blue */
    --secondary-color: #764ba2 !important;
    /* use accent as secondary for gradients */
    --accent-color: #764ba2 !important;
    /* accent purple */
    --success-color: #28a745 !important;
    --warning-color: #ffc107 !important;
    --danger-color: #dc3545 !important;

    /* Text Colors for Dark Theme */
    --text-color: #f8fafc !important;
    --text-muted: #94a3b8 !important;
    --border-color: rgba(255, 255, 255, 0.08) !important;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
    --border-radius: 8px !important;

    /* Theme-switcher compatible aliases so other stylesheets can use shared tokens */
    --bg-primary: #020617 !important;
    /* slate-950, page background */
    --bg-secondary: var(--bg-dark) !important;
    /* main container/cards */
    --bg-tertiary: #1e293b !important;
    /* slightly lighter surfaces */
    --text-primary: var(--text-color) !important;
    --text-secondary: var(--text-muted) !important;
}

/* Body - Dark Glassmorphic Background */
body {
    background-color: #0f172a !important;
    background-image: radial-gradient(circle at 50% 0%, #1e293b 0%, #0f172a 100%) !important;
    color: var(--text-color) !important;
    min-height: 100vh;
}

/* Override any existing light backgrounds */
.container,
.main-container,
.content-wrapper,
.page-wrapper {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* Text Colors */
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div,
label,
a {
    color: var(--text-color) !important;
}

.text-muted,
small {
    color: var(--text-muted) !important;
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="tel"],
input[type="url"],
select,
textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text-color) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted) !important;
}

input:focus,
select:focus,
textarea:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.2) !important;
}

/* Buttons */
button,
.btn,
.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(74, 158, 255, 0.3) !important;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text-color) !important;
}

/* Cards */
.card,
.panel,
.box {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* Modals */
.modal {
    display: none;
    position: fixed !important;
    z-index: 9000 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(8px) !important;
    justify-content: center;
    align-items: center;
    overflow-y: auto !important;
}

.modal.active,
.modal[style*="display: block"],
.modal[style*="display: flex"] {
    display: flex !important;
}

.modal-content,
.modal-dialog {
    background: var(--slate-900) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
    width: 90% !important;
    max-width: 800px !important;
    border-radius: var(--border-radius) !important;
    margin: auto !important;
    position: relative !important;
}

/* Tables */
table {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

thead {
    background: rgba(255, 255, 255, 0.05) !important;
}

tbody tr:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

th,
td {
    color: var(--text-color) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Cosmic Web Background - Universal Support */
#cosmic-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background: transparent !important;
    overflow: hidden !important;
}

#canvas-bottom,
#canvas-top {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}