/* Custom styles for CifraGuard
 *
 * Default theme: DARK MODE
 * ------------------------
 * You asked for dark mode to be the default across the whole site.
 * We implement this by defining a small set of theme tokens (CSS variables)
 * and applying them to Bootstrap components used in the templates.
 *
 * If you ever want a light-mode toggle later, we can add:
 *   body[data-theme="light"] { ...override variables... }
 */

/* Shared tokens (both themes) */
:root {
    --cg-primary: #2563eb;
    --cg-primary-hover: #1d4ed8;
    --cg-success: #16a34a;
    --cg-success-hover: #15803d;
}

/* Default theme is DARK (theme.js sets html[data-theme="dark"] unless user chooses light) */
html[data-theme="dark"] {
    --cg-bg: #0b1220;         /* page background */
    --cg-surface: #0f172a;    /* cards/panels */
    --cg-surface-2: #111c33;  /* subtle contrast surface */
    --cg-text: #e5e7eb;       /* primary text */
    --cg-muted: #c7d0dc;      /* secondary text */
    --cg-border: #23304a;     /* borders */
    --cg-shadow: rgba(0, 0, 0, 0.35);

    --cg-link: #93c5fd;
    --cg-link-hover: #bfdbfe;

    --cg-input-bg: rgba(255, 255, 255, 0.04);
    --cg-input-bg-focus: rgba(255, 255, 255, 0.06);
    --cg-input-placeholder: rgba(154, 164, 178, 0.85);

    /* Hint to the browser to render native UI (form controls, scrollbars) in dark mode */
    color-scheme: dark;
}

/* Light mode (optional; user can toggle; dark remains the default) */
html[data-theme="light"] {
    --cg-bg: #f8fafc;
    --cg-surface: #ffffff;
    --cg-surface-2: #0f172a; /* keep headers/nav dark for brand consistency */
    --cg-text: #0f172a;
    --cg-muted: #475569;
    --cg-border: #e2e8f0;
    --cg-shadow: rgba(15, 23, 42, 0.08);

    --cg-link: #2563eb;
    --cg-link-hover: #1d4ed8;

    --cg-input-bg: #ffffff;
    --cg-input-bg-focus: #ffffff;
    --cg-input-placeholder: rgba(71, 85, 105, 0.7);

    color-scheme: light;
}

body {
    background-color: var(--cg-bg);
    color: var(--cg-text);
}

/* Links */
a {
    color: var(--cg-link);
}
a:hover {
    color: var(--cg-link-hover);
}

.navbar-brand {
    font-weight: bold;
}

.card {
    background-color: var(--cg-surface);
    color: var(--cg-text);
    border: 1px solid var(--cg-border);
    box-shadow: 0 10px 28px var(--cg-shadow);
}

.card-header {
    background-color: var(--cg-surface-2);
    color: var(--cg-text);
    border-bottom: 1px solid var(--cg-border);
}

.btn-primary {
    background-color: var(--cg-primary);
    border-color: var(--cg-primary);
}

.btn-primary:hover {
    background-color: var(--cg-primary-hover);
    border-color: var(--cg-primary-hover);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.35);
}

.btn-outline-primary {
    color: #93c5fd;
    border-color: #3b82f6;
}

.btn-outline-primary:hover {
    color: var(--cg-text);
    background-color: rgba(59, 130, 246, 0.16);
    border-color: #60a5fa;
}

/* Light mode: outline-primary should be darker (better contrast) */
html[data-theme="light"] .btn-outline-primary {
    color: var(--cg-primary);
    border-color: var(--cg-primary);
}
html[data-theme="light"] .btn-outline-primary:hover {
    color: #0f172a;
    background-color: rgba(37, 99, 235, 0.10);
    border-color: var(--cg-primary-hover);
}

.btn-outline-secondary {
    color: var(--cg-text);
    border-color: var(--cg-border);
}

.btn-outline-secondary:hover {
    color: var(--cg-text);
    background-color: rgba(148, 163, 184, 0.10);
    border-color: #334155;
}

.btn-success {
    background-color: var(--cg-success);
    border-color: var(--cg-success);
}

.btn-success:hover {
    background-color: var(--cg-success-hover);
    border-color: var(--cg-success-hover);
    box-shadow: 0 8px 18px rgba(22, 163, 74, 0.30);
}

.form-control:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.35);
}

/* Warning state for file input during encryption */
.form-control.is-warning {
    border-color: #ffc107;
    background-color: #fff3cd;
}

.form-control.is-warning:focus {
    border-color: #ffc107;
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
}

.navbar-dark.bg-dark {
    /* Keep navbar dark in both themes (templates use navbar-dark bg-dark) */
    background-color: var(--cg-surface-2) !important;
}

.hero-panel {
    border: 1px solid var(--cg-border);
    border-radius: 24px;
    padding: 48px 40px;
    box-shadow: 0 18px 38px var(--cg-shadow);
}

/* Hero background per-theme */
html[data-theme="dark"] .hero-panel {
    background: radial-gradient(
        circle at 20% 20%,
        rgba(59, 130, 246, 0.16) 0,
        rgba(59, 130, 246, 0.12) 22%,
        rgba(15, 23, 42, 0.9) 60%
    );
}

html[data-theme="light"] .hero-panel {
    /* Keep it simple and bright in light mode (no white→dark transition). */
    background: radial-gradient(circle at 20% 20%, #eef2ff 0, #eef2ff 22%, #f8fafc 60%);
}

.hero-cta .btn {
    min-width: 180px;
}

.feature-card {
    background-color: var(--cg-surface);
    border: 1px solid var(--cg-border);
    color: var(--cg-text);
}

.feature-icon {
    font-size: 1.5rem;
}

/* Bootstrap utility overrides used throughout templates */
.bg-light {
    background-color: var(--cg-bg) !important;
}
.bg-white {
    background-color: var(--cg-surface) !important;
}
.text-muted {
    color: var(--cg-muted) !important;
}
.text-secondary {
    color: rgba(183, 192, 205, 0.92) !important;
}

/* Bootstrap helper text under inputs (e.g., upload page guidance text) */
.form-text {
    color: var(--cg-muted) !important;
}

/*
 * Fix common “dark-mode + Bootstrap utility” collisions in templates.
 *
 * Example: <span class="badge bg-light text-dark">...</span>
 * In dark mode, .bg-light becomes dark, but .text-dark stays dark => unreadable.
 */
html[data-theme="dark"] .badge.bg-light.text-dark {
    background-color: rgba(255, 255, 255, 0.10) !important;
    color: var(--cg-text) !important;
}

/* Keep proper contrast when text-dark is used on warning backgrounds */
.bg-warning.text-dark,
.bg-warning .text-dark {
    color: #0f172a !important;
}
.border-top,
.border,
.border-bottom {
    border-color: var(--cg-border) !important;
}

/* Forms */
.form-control,
.form-select,
textarea.form-control {
    background-color: var(--cg-input-bg);
    border-color: var(--cg-border);
    color: var(--cg-text);
}

/* Native <select> dropdown menu items (important on Windows dark mode) */
html[data-theme="dark"] select.form-select,
html[data-theme="dark"] select.form-control {
    background-color: var(--cg-input-bg);
    color: var(--cg-text);
}
html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup {
    background-color: var(--cg-surface);
    color: var(--cg-text);
}
.form-control::placeholder {
    color: var(--cg-input-placeholder);
}
.form-control:focus {
    background-color: var(--cg-input-bg-focus);
    color: var(--cg-text);
}

/* Charts / admin panels */
.chart-container {
    background-color: var(--cg-surface) !important;
    border: 1px solid var(--cg-border);
    box-shadow: 0 10px 28px var(--cg-shadow);
}

/* Admin dashboard uses bg-light blocks inside chart containers; make them a readable surface */
.chart-container .bg-light {
    background-color: var(--cg-surface-2) !important;
}

/* Alerts */
.alert-info {
    background-color: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.28);
    color: var(--cg-text);
}
.alert-danger {
    background-color: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.28);
    color: var(--cg-text);
}
.alert-success {
    background-color: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.28);
    color: var(--cg-text);
}
.alert-warning {
    background-color: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.30);
    color: var(--cg-text);
}

/* Alert close button visibility in dark mode */
html[data-theme="dark"] .alert .btn-close {
    filter: invert(1) grayscale(100%);
    opacity: 0.85;
}
html[data-theme="dark"] .alert .btn-close:hover {
    opacity: 1;
}

/* Progress bars on dark backgrounds */
.progress {
    background-color: rgba(255, 255, 255, 0.08);
}

/* Contact page: override inline “light” info box for dark mode */
html[data-theme="dark"] .rate-limit-info {
    background-color: var(--cg-surface-2) !important;
    border-left-color: #3b82f6 !important;
    color: var(--cg-text) !important;
}

/* Guide page cards: override inline light borders for dark mode */
html[data-theme="dark"] .step-card {
    border-color: var(--cg-border) !important;
    background-color: var(--cg-surface) !important;
}

/* Admin dashboard: neutral trend color is too dim on dark */
html[data-theme="dark"] .trend-neutral {
    color: var(--cg-muted) !important;
}

/* Guide page callouts: they use light backgrounds in inline CSS; make them readable in dark mode */
html[data-theme="dark"] .warning-box {
    background-color: rgba(245, 158, 11, 0.14) !important; /* amber */
    border-color: rgba(245, 158, 11, 0.30) !important;
    color: var(--cg-text) !important;
}
html[data-theme="dark"] .tip-box {
    background-color: rgba(59, 130, 246, 0.14) !important; /* blue */
    border-color: rgba(59, 130, 246, 0.30) !important;
    color: var(--cg-text) !important;
}
html[data-theme="dark"] .screenshot-placeholder {
    background-color: var(--cg-surface-2) !important;
    border-color: var(--cg-border) !important;
    color: var(--cg-muted) !important;
}

/* Guide page “feature-list” blocks use a hardcoded light background in inline CSS */
html[data-theme="dark"] .feature-list {
    background-color: var(--cg-surface-2) !important;
    border: 1px solid var(--cg-border) !important;
    color: var(--cg-text) !important;
}

/* Tables (Bootstrap) - improve contrast in default dark mode */
.table {
    color: var(--cg-text);
}
.table > :not(caption) > * > * {
    background-color: transparent;
    border-bottom-color: var(--cg-border);
}
.tier-table th,
.tier-table td {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

/* Tier table readability: make the left “label” column less dim than Bootstrap's default muted */
.tier-table th {
    /* default (light mode): readable muted label */
    color: var(--cg-muted);
}
.tier-table td {
    color: var(--cg-text);
}
.tier-table .text-muted {
    color: var(--cg-muted) !important;
}

/* Dark-mode specific: labels can be brighter than global muted */
html[data-theme="dark"] .tier-table th {
    color: #cbd5e1; /* slate-300 */
}
html[data-theme="dark"] .tier-table .text-muted {
    color: #cbd5e1 !important;
}

/* Bootstrap modals ("popups")
 * We must use !important to override Bootstrap's inline/default styles.
 */
html[data-theme="dark"] .modal-content {
    background-color: var(--cg-surface) !important;
    color: var(--cg-text) !important;
    border: 1px solid var(--cg-border) !important;
    box-shadow: 0 18px 38px var(--cg-shadow);
}
html[data-theme="dark"] .modal-body {
    background-color: var(--cg-surface) !important;
    color: var(--cg-text) !important;
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: var(--cg-border) !important;
}
html[data-theme="dark"] .modal-footer {
    background-color: var(--cg-surface) !important;
}

/* Close button visibility on dark modal header backgrounds */
html[data-theme="dark"] .modal .btn-close {
    filter: invert(1) grayscale(100%);
    opacity: 0.9;
}
html[data-theme="dark"] .modal .btn-close:hover {
    opacity: 1;
}

/* Light mode: keep modals clean and readable */
html[data-theme="light"] .modal-content {
    background-color: #ffffff !important;
    color: #0f172a !important;
}
html[data-theme="light"] .modal-body {
    background-color: #ffffff !important;
    color: #0f172a !important;
}
html[data-theme="light"] .modal-header,
html[data-theme="light"] .modal-footer {
    border-color: var(--cg-border) !important;
}
html[data-theme="light"] .modal-footer {
    background-color: #ffffff !important;
}

/* Theme toggle button (icon-only) */
.theme-toggle {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}
.theme-toggle-icon {
    font-size: 1.05rem;
    line-height: 1;
}

/* The navbar is always dark in this project, so make the icon button high-contrast there */
.navbar .theme-toggle {
    color: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.35);
}
.navbar .theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.55);
}