/* ==========================================================================
   RemoteDesk Product Site — Design System
   Deep space blacks + electric aqua accents, sharp geometry, DM Sans/Mono.
   Built on top of Bootstrap 5.3 (native color-mode support), NOT Tailwind.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

/* ── Design tokens ────────────────────────────────────────────────────────── */
:root,
[data-bs-theme="dark"] {
    /* Surfaces */
    --rd-bg:            #06070a;
    --rd-bg-elevated:    #0c0e13;
    --rd-surface:        #10131a;
    --rd-surface-2:      #161a23;
    --rd-border:         #21262f;
    --rd-border-strong:  #2c333e;

    /* Text */
    --rd-text:           #e9edf3;
    --rd-text-muted:     #8b93a1;
    --rd-text-faint:     #576070;

    /* Accent — electric aqua */
    --rd-accent:         #0078d4;
    --rd-accent-strong:  #2b93e0;
    --rd-accent-dim:     rgba(0, 120, 212, 0.14);
    --rd-accent-glow:    rgba(0, 120, 212, 0.38);

    /* Status */
    --rd-success:  #2dd77a;
    --rd-warning:  #e8b73f;
    --rd-danger:   #ef5a6f;

    /* Geometry */
    --rd-radius-sm: 4px;
    --rd-radius:    6px;
    --rd-radius-lg: 10px;

    /* Bootstrap variable overrides (dark mode is default) */
    --bs-body-bg: var(--rd-bg);
    --bs-body-color: var(--rd-text);
    --bs-border-color: var(--rd-border);
    --bs-link-color: var(--rd-accent);
    --bs-link-hover-color: var(--rd-accent-strong);
    color-scheme: dark;
}

[data-bs-theme="light"] {
    --rd-bg:            #f5f7fa;
    --rd-bg-elevated:    #ffffff;
    --rd-surface:        #ffffff;
    --rd-surface-2:      #eef1f5;
    --rd-border:         #dde2e8;
    --rd-border-strong:  #c9d0d9;

    --rd-text:           #12151b;
    --rd-text-muted:     #565f6c;
    --rd-text-faint:     #8993a1;

    --rd-accent:         #0078d4;
    --rd-accent-strong:  #005a9e;
    --rd-accent-dim:     rgba(0, 120, 212, 0.08);
    --rd-accent-glow:    rgba(0, 120, 212, 0.25);

    --rd-success:  #1a9c58;
    --rd-warning:  #b3841f;
    --rd-danger:   #d1354a;

    --bs-body-bg: var(--rd-bg);
    --bs-body-color: var(--rd-text);
    --bs-border-color: var(--rd-border);
    --bs-link-color: var(--rd-accent);
    --bs-link-hover-color: var(--rd-accent-strong);
    color-scheme: light;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
html, body {
    background: var(--rd-bg);
    color: var(--rd-text);
}

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    letter-spacing: -0.01em;
    transition: background-color .2s ease, color .2s ease;
}

code, .font-mono, .rd-mono {
    font-family: 'DM Mono', 'SFMono-Regular', Consolas, monospace;
    letter-spacing: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

a { text-decoration: none; }

::selection {
    background: var(--rd-accent-glow);
    color: var(--rd-text);
}

/* ── Navbar ───────────────────────────────────────────────────────────────── */
.rd-navbar {
    background: var(--rd-bg-elevated);
    border-bottom: 1px solid var(--rd-border);
    backdrop-filter: blur(10px);
}

.rd-brand {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--rd-text) !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rd-brand-mark {
    width: 28px;
    height: 28px;
    border-radius: var(--rd-radius-sm);
    background: linear-gradient(135deg, var(--rd-accent), var(--rd-accent-strong));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
    color: #ffffff;
    flex-shrink: 0;
}

.rd-navbar .nav-link {
    color: var(--rd-text-muted);
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.5rem 0.9rem !important;
    border-radius: var(--rd-radius);
    transition: color .15s ease, background-color .15s ease;
}

.rd-navbar .nav-link:hover,
.rd-navbar .nav-link.active {
    color: var(--rd-text);
    background: var(--rd-surface-2);
}

/* Theme toggle switch */
.rd-theme-toggle {
    width: 38px;
    height: 38px;
    border-radius: var(--rd-radius);
    border: 1px solid var(--rd-border);
    background: var(--rd-surface);
    color: var(--rd-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
    cursor: pointer;
}

.rd-theme-toggle:hover {
    border-color: var(--rd-accent);
    color: var(--rd-accent);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
    border-radius: var(--rd-radius);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.55rem 1.1rem;
    letter-spacing: -0.005em;
    border-width: 1px;
    transition: all .15s ease;
}

.btn-rd-primary {
    background: var(--rd-accent);
    border-color: var(--rd-accent);
    color: #ffffff;
}
.btn-rd-primary:hover {
    background: var(--rd-accent-strong);
    border-color: var(--rd-accent-strong);
    color: #ffffff;
    box-shadow: 0 0 0 3px var(--rd-accent-dim);
}

.btn-rd-outline {
    background: transparent;
    border-color: var(--rd-border-strong);
    color: var(--rd-text);
}
.btn-rd-outline:hover {
    border-color: var(--rd-accent);
    color: var(--rd-accent);
    background: var(--rd-accent-dim);
}

.btn-rd-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--rd-text-muted);
}
.btn-rd-ghost:hover {
    color: var(--rd-text);
    background: var(--rd-surface-2);
}

/* ── Cards / surfaces ─────────────────────────────────────────────────────── */
.rd-card {
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-lg);
    padding: 1.5rem;
}

.rd-card-flat {
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius);
}

.rd-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.rd-panel-header h2, .rd-panel-header h5 {
    margin: 0;
}

/* Sharp geometric accent line (used on hero/section dividers) */
.rd-accent-line {
    height: 2px;
    width: 48px;
    background: linear-gradient(90deg, var(--rd-accent), transparent);
    border-radius: 2px;
}

/* ── Badges / status pills ────────────────────────────────────────────────── */
.rd-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.65rem;
    border-radius: var(--rd-radius-sm);
    border: 1px solid transparent;
}

.rd-badge-active   { background: rgba(45,215,122,0.12); color: var(--rd-success); border-color: rgba(45,215,122,0.25); }
.rd-badge-expiring { background: rgba(232,183,63,0.12);  color: var(--rd-warning); border-color: rgba(232,183,63,0.25); }
.rd-badge-expired  { background: rgba(239,90,111,0.12);  color: var(--rd-danger);  border-color: rgba(239,90,111,0.25); }
.rd-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-control, .form-select {
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    color: var(--rd-text);
    border-radius: var(--rd-radius);
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
}

.form-control:focus, .form-select:focus {
    background: var(--rd-surface);
    border-color: var(--rd-accent);
    color: var(--rd-text);
    box-shadow: 0 0 0 3px var(--rd-accent-dim);
}

.form-control::placeholder { color: var(--rd-text-faint); }

.form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--rd-text-muted);
    margin-bottom: 0.4rem;
}

/* ── Auth pages ───────────────────────────────────────────────────────────── */
.rd-auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse 800px 500px at 50% -10%, var(--rd-accent-dim), transparent),
        var(--rd-bg);
    padding: 2rem 1rem;
}

.rd-auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-lg);
    padding: 2.25rem;
}

/* ── Hero (landing page) ──────────────────────────────────────────────────── */
.rd-hero {
    padding: 6rem 0 4rem;
    background:
        radial-gradient(ellipse 900px 500px at 50% -15%, var(--rd-accent-dim), transparent),
        var(--rd-bg);
    border-bottom: 1px solid var(--rd-border);
}

.rd-hero h1 {
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    line-height: 1.08;
}

.rd-hero .lead {
    color: var(--rd-text-muted);
    font-size: 1.15rem;
    max-width: 560px;
}

.rd-glow-text {
    background: linear-gradient(90deg, var(--rd-accent), var(--rd-accent-strong));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ── Feature grid ─────────────────────────────────────────────────────────── */
.rd-feature-card {
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-lg);
    padding: 1.75rem;
    height: 100%;
    transition: border-color .15s ease, transform .15s ease;
}
.rd-feature-card:hover {
    border-color: var(--rd-border-strong);
    transform: translateY(-2px);
}

.rd-feature-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--rd-radius);
    background: var(--rd-accent-dim);
    color: var(--rd-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

/* ── Download cards ───────────────────────────────────────────────────────── */
.rd-download-card {
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-lg);
    padding: 1.75rem;
    text-align: center;
    transition: all .15s ease;
}
.rd-download-card:hover {
    border-color: var(--rd-accent);
    box-shadow: 0 0 0 3px var(--rd-accent-dim);
}

.rd-os-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--rd-text);
}

.rd-version-tag {
    font-family: 'DM Mono', monospace;
    font-size: 0.75rem;
    color: var(--rd-text-faint);
}

/* ── Sidebar (dashboard) ──────────────────────────────────────────────────── */
.rd-sidebar {
    background: var(--rd-bg-elevated);
    border-right: 1px solid var(--rd-border);
    min-height: calc(100vh - 60px);
    padding: 1.25rem 0.75rem;
}

.rd-sidebar .nav-link {
    color: var(--rd-text-muted);
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.6rem 0.85rem;
    border-radius: var(--rd-radius);
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.rd-sidebar .nav-link:hover {
    background: var(--rd-surface-2);
    color: var(--rd-text);
}

.rd-sidebar .nav-link.active {
    background: var(--rd-accent-dim);
    color: var(--rd-accent);
}

/* ── Tables ───────────────────────────────────────────────────────────────── */
.table {
    color: var(--rd-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--rd-border);
}

.table > thead {
    color: var(--rd-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Misc utility ─────────────────────────────────────────────────────────── */
.rd-text-muted { color: var(--rd-text-muted) !important; }
.rd-text-faint { color: var(--rd-text-faint) !important; }
.rd-surface-2  { background: var(--rd-surface-2) !important; }
.rd-divider    { border-color: var(--rd-border) !important; }

.rd-footer {
    border-top: 1px solid var(--rd-border);
    padding: 2rem 0;
    color: var(--rd-text-faint);
    font-size: 0.85rem;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .rd-hero { padding: 3.5rem 0 2.5rem; text-align: center; }
    .rd-hero .lead { margin-left: auto; margin-right: auto; }
    .rd-sidebar { min-height: auto; border-right: none; border-bottom: 1px solid var(--rd-border); }
}