/* ==========================================================
   NAS Lance - Unified Graphite Theme
   Shared by login, dashboard, library and discovery.
   ========================================================== */

:root {
    color-scheme: dark;

    --nas-bg: #090b0e;
    --nas-bg-deep: #07090c;
    --nas-sidebar: #0d1014;
    --nas-panel: #12161b;
    --nas-panel-2: #161b21;
    --nas-panel-3: #1a2027;
    --nas-panel-hover: #1b2128;

    --nas-border: #272e36;
    --nas-border-soft: #20262d;
    --nas-border-strong: #343d47;

    --nas-text: #f2f4f6;
    --nas-text-soft: #c7cdd4;
    --nas-muted: #8b95a1;
    --nas-subtle: #626c78;

    --nas-action: #f1f3f5;
    --nas-action-text: #101318;

    --nas-active: #6fa9e6;
    --nas-active-soft: rgba(111, 169, 230, 0.12);

    --nas-movie: #d7aa68;
    --nas-movie-soft: rgba(215, 170, 104, 0.12);

    --nas-series: #909df0;
    --nas-series-soft: rgba(144, 157, 240, 0.12);

    --nas-ready: #68c79d;
    --nas-ready-soft: rgba(104, 199, 157, 0.12);

    --nas-waiting: #d5b46d;
    --nas-waiting-soft: rgba(213, 180, 109, 0.12);

    --nas-error: #df7f88;
    --nas-error-soft: rgba(223, 127, 136, 0.12);

    --nas-paused: #9aa4af;
    --nas-paused-soft: rgba(154, 164, 175, 0.11);

    --nas-checking: #aa91dd;
    --nas-checking-soft: rgba(170, 145, 221, 0.12);

    --nas-sharing: #70b9bd;
    --nas-sharing-soft: rgba(112, 185, 189, 0.12);

    --nas-radius-sm: 10px;
    --nas-radius: 14px;
    --nas-radius-lg: 20px;
    --nas-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
}

html {
    background: var(--nas-bg);
}

body.nas-login,
body.nas-dashboard,
body.nas-discover {
    color: var(--nas-text);
    background:
        radial-gradient(
            circle at 50% -18%,
            rgba(83, 97, 119, 0.20),
            transparent 38rem
        ),
        var(--nas-bg);
}

body.nas-login *,
body.nas-dashboard *,
body.nas-discover * {
    scrollbar-color: #3a424d #11151a;
}

body.nas-login ::selection,
body.nas-dashboard ::selection,
body.nas-discover ::selection {
    color: #fff;
    background: rgba(111, 169, 230, 0.30);
}

body.nas-login button:focus-visible,
body.nas-login input:focus-visible,
body.nas-dashboard button:focus-visible,
body.nas-dashboard input:focus-visible,
body.nas-dashboard textarea:focus-visible,
body.nas-dashboard select:focus-visible,
body.nas-discover button:focus-visible,
body.nas-discover input:focus-visible,
body.nas-discover summary:focus-visible {
    outline: 2px solid rgba(204, 211, 220, 0.70);
    outline-offset: 2px;
}

/* ==========================================================
   LOGIN
   ========================================================== */

body.nas-login {
    background:
        radial-gradient(
            circle at 50% -12%,
            rgba(83, 97, 119, 0.22),
            transparent 34rem
        ),
        var(--nas-bg);
}

body.nas-login::before {
    opacity: 0.20;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 48px 48px;
}

.nas-login .login-card {
    border-color: var(--nas-border);
    background: rgba(18, 22, 27, 0.92);
    box-shadow: var(--nas-shadow);
    backdrop-filter: blur(16px);
}

.nas-login .logo {
    background: var(--nas-panel-3);
    border: 1px solid var(--nas-border-strong);
    box-shadow: none;
}

.nas-login .logo svg {
    stroke: var(--nas-text);
}

.nas-login .heading p,
.nas-login .status {
    color: var(--nas-muted);
}

.nas-login .field label {
    color: var(--nas-text-soft);
}

.nas-login .input-wrapper > svg {
    stroke: var(--nas-subtle);
}

.nas-login .input-wrapper input {
    border-color: var(--nas-border);
    background: #0e1216;
    color: var(--nas-text);
}

.nas-login .input-wrapper input::placeholder {
    color: #59636f;
}

.nas-login .input-wrapper input:hover {
    border-color: var(--nas-border-strong);
}

.nas-login .input-wrapper input:focus {
    border-color: #596572;
    background: #0c1014;
    box-shadow: 0 0 0 3px rgba(160, 172, 186, 0.08);
}

.nas-login .input-wrapper:focus-within > svg {
    stroke: #adb6c0;
}

.nas-login .password-toggle {
    color: var(--nas-subtle);
}

.nas-login .password-toggle:hover {
    color: var(--nas-text);
    background: rgba(255, 255, 255, 0.05);
}

.nas-login .login-button {
    background: var(--nas-action);
    color: var(--nas-action-text);
    box-shadow: none;
}

.nas-login .login-button:hover {
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
    filter: none;
}

.nas-login .error {
    border-color: rgba(223, 127, 136, 0.28);
    background: var(--nas-error-soft);
    color: #f0a2a8;
}

.nas-login .status-dot {
    background: var(--nas-ready);
    box-shadow: 0 0 0 4px rgba(104, 199, 157, 0.08);
}

.nas-login .footer {
    color: #555f6a;
}

/* ==========================================================
   DASHBOARD / MEDIATHEQUE
   ========================================================== */

body.nas-dashboard {
    --bg: var(--nas-bg);
    --sidebar: var(--nas-sidebar);
    --surface: var(--nas-panel);
    --surface-hover: var(--nas-panel-hover);
    --border: rgba(255, 255, 255, 0.075);
    --text: var(--nas-text);
    --muted: var(--nas-muted);
    --accent: #9aa4af;
    --accent-soft: rgba(154, 164, 175, 0.10);
    --green: var(--nas-ready);
}

.nas-dashboard .sidebar {
    background:
        linear-gradient(
            180deg,
            rgba(16, 20, 25, 0.98),
            rgba(10, 13, 17, 0.99)
        );
    border-right-color: var(--nas-border-soft);
}

.nas-dashboard .brand-icon {
    background: var(--nas-panel-3);
    border: 1px solid var(--nas-border-strong);
    box-shadow: none;
}

.nas-dashboard .brand-icon span {
    background: #e5e8eb;
}

.nas-dashboard .nav-item {
    color: var(--nas-muted);
}

.nas-dashboard .nav-item:hover {
    color: var(--nas-text);
    background: rgba(255, 255, 255, 0.045);
}

.nas-dashboard .nav-item.active {
    color: var(--nas-text);
    background: var(--nas-panel-2);
    box-shadow: inset 0 0 0 1px var(--nas-border);
}

.nas-dashboard .server-status {
    background: rgba(255, 255, 255, 0.025);
    border-color: var(--nas-border-soft);
}

.nas-dashboard .status-dot {
    background: var(--nas-ready);
    box-shadow:
        0 0 0 4px rgba(104, 199, 157, 0.08),
        0 0 12px rgba(104, 199, 157, 0.18);
}

.nas-dashboard .server-status.offline {
    border-color: rgba(223, 127, 136, 0.26);
    background: var(--nas-error-soft);
}

.nas-dashboard .server-status.offline .status-dot {
    background: var(--nas-error);
    box-shadow: 0 0 0 4px rgba(223, 127, 136, 0.10);
}

.nas-dashboard .server-status.offline strong {
    color: #eda0a7;
}

.nas-dashboard .main {
    background:
        radial-gradient(
            circle at 60% -8%,
            rgba(83, 97, 119, 0.12),
            transparent 34rem
        ),
        var(--nas-bg);
}

.nas-dashboard .eyebrow {
    color: #7d8793;
}

.nas-dashboard .add-button,
.nas-dashboard .modal-primary {
    border-color: transparent;
    background: var(--nas-action);
    color: var(--nas-action-text);
    box-shadow: none;
}

.nas-dashboard .add-button:hover,
.nas-dashboard .modal-primary:hover {
    background: #ffffff;
}

.nas-dashboard .stat-card,
.nas-dashboard .downloads,
.nas-dashboard .library-item,
.nas-dashboard .library-modal-content,
.nas-dashboard .modal-card {
    border-color: var(--nas-border);
    background: rgba(18, 22, 27, 0.86);
    box-shadow: none;
}

.nas-dashboard .stat-card {
    transition:
        border-color 160ms ease,
        background 160ms ease,
        transform 160ms ease;
}

.nas-dashboard .stat-card:hover {
    border-color: var(--nas-border-strong);
    background: var(--nas-panel-2);
    transform: translateY(-1px);
}

.nas-dashboard .stat-icon {
    color: var(--nas-text-soft);
    background: rgba(255, 255, 255, 0.045);
}

.nas-dashboard .stat-card:nth-child(1) .stat-icon {
    color: var(--nas-active);
    background: var(--nas-active-soft);
}

.nas-dashboard .stat-card:nth-child(2) .stat-icon {
    color: var(--nas-sharing);
    background: var(--nas-sharing-soft);
}

.nas-dashboard .stat-card:nth-child(3) .stat-icon {
    color: #b1bac4;
    background: rgba(177, 186, 196, 0.09);
}

.nas-dashboard .stat-card:nth-child(4) .stat-icon {
    color: var(--nas-ready);
    background: var(--nas-ready-soft);
}

.nas-dashboard .filters,
.nas-dashboard .library-filters,
.nas-dashboard .modal-tabs {
    border-color: var(--nas-border-soft);
    background: rgba(255, 255, 255, 0.025);
}

.nas-dashboard .filter.active,
.nas-dashboard .library-filter.active,
.nas-dashboard .modal-tab.active {
    color: var(--nas-text);
    background: var(--nas-panel-3);
    box-shadow: inset 0 0 0 1px var(--nas-border-strong);
}

.nas-dashboard .torrent {
    border-color: var(--nas-border-soft);
    border-left: 2px solid transparent;
}

.nas-dashboard .torrent:hover {
    background: rgba(255, 255, 255, 0.022);
}

.nas-dashboard .torrent-icon,
.nas-dashboard .empty-icon {
    color: var(--nas-active);
    background: var(--nas-active-soft);
}

.nas-dashboard .torrent-title span {
    color: var(--nas-active);
}

.nas-dashboard .progress {
    background: rgba(255, 255, 255, 0.055);
}

.nas-dashboard .progress-value {
    background: var(--nas-active);
}

.nas-dashboard .torrent.torrent-active {
    border-left-color: var(--nas-active);
}

.nas-dashboard .torrent.torrent-active .torrent-icon {
    color: var(--nas-active);
    background: var(--nas-active-soft);
}

.nas-dashboard .torrent.torrent-checking {
    border-left-color: var(--nas-checking);
}

.nas-dashboard .torrent.torrent-checking .torrent-icon {
    color: var(--nas-checking);
    background: var(--nas-checking-soft);
}

.nas-dashboard .torrent.torrent-checking .progress-value {
    background: var(--nas-checking);
}

.nas-dashboard .torrent.torrent-paused {
    border-left-color: #68717b;
}

.nas-dashboard .torrent.torrent-paused .torrent-icon {
    color: var(--nas-paused);
    background: var(--nas-paused-soft);
}

.nas-dashboard .torrent.torrent-paused .progress-value {
    background: #747e89;
}

.nas-dashboard .torrent.torrent-sharing {
    border-left-color: var(--nas-sharing);
}

.nas-dashboard .torrent.torrent-sharing .torrent-icon {
    color: var(--nas-sharing);
    background: var(--nas-sharing-soft);
}

.nas-dashboard .torrent.torrent-waiting {
    border-left-color: var(--nas-waiting);
}

.nas-dashboard .torrent.torrent-waiting .torrent-icon {
    color: var(--nas-waiting);
    background: var(--nas-waiting-soft);
}

.nas-dashboard .torrent.torrent-complete {
    border-left-color: var(--nas-ready);
}

.nas-dashboard .torrent-icon.complete,
.nas-dashboard .torrent.torrent-complete .torrent-icon {
    color: var(--nas-ready);
    background: var(--nas-ready-soft);
}

.nas-dashboard .torrent-title .complete-text {
    color: var(--nas-ready);
}

.nas-dashboard .progress-value.complete {
    background: var(--nas-ready);
}

.nas-dashboard .torrent-actions button,
.nas-dashboard .torrent-action-button,
.nas-dashboard .modal-close,
.nas-dashboard .library-modal-close {
    color: var(--nas-muted);
    background: rgba(255, 255, 255, 0.025);
    border-color: var(--nas-border);
}

.nas-dashboard .torrent-actions button:hover,
.nas-dashboard .torrent-action-button:hover:not(:disabled),
.nas-dashboard .modal-close:hover,
.nas-dashboard .library-modal-close:hover {
    color: var(--nas-text);
    background: rgba(255, 255, 255, 0.065);
}

.nas-dashboard .torrent-action-remove:hover:not(:disabled) {
    color: #f0a2a8;
    border-color: rgba(223, 127, 136, 0.30);
    background: var(--nas-error-soft);
}

.nas-dashboard .modal-overlay,
.nas-dashboard .library-modal-backdrop {
    background: rgba(5, 7, 10, 0.76);
    backdrop-filter: blur(10px);
}

.nas-dashboard .modal-panel textarea,
.nas-dashboard .library-search,
.nas-dashboard .library-settings-menu select {
    border-color: var(--nas-border);
    background: #0f1317;
    color: var(--nas-text);
}

.nas-dashboard .modal-panel textarea:focus,
.nas-dashboard .library-search:focus-within,
.nas-dashboard .library-settings-menu select:focus {
    border-color: #596572;
    box-shadow: 0 0 0 3px rgba(160, 172, 186, 0.06);
}

.nas-dashboard .file-drop {
    border-color: var(--nas-border);
    background: rgba(255, 255, 255, 0.018);
}

.nas-dashboard .file-drop:hover {
    border-color: var(--nas-border-strong);
    background: rgba(255, 255, 255, 0.032);
}

.nas-dashboard .modal-secondary {
    color: var(--nas-text-soft);
    border-color: var(--nas-border);
    background: var(--nas-panel-2);
}

.nas-dashboard .modal-error {
    color: #f0a2a8;
    border-color: rgba(223, 127, 136, 0.25);
    background: var(--nas-error-soft);
}

.nas-dashboard .library-item:hover {
    border-color: var(--nas-border-strong);
    background: var(--nas-panel-2);
}

.nas-dashboard .library-item-icon {
    border: 1px solid transparent;
}

.nas-dashboard .library-series .library-item-icon {
    color: var(--nas-series);
    background: var(--nas-series-soft);
    border-color: rgba(144, 157, 240, 0.14);
}

.nas-dashboard .library-movie .library-item-icon {
    color: var(--nas-movie);
    background: var(--nas-movie-soft);
    border-color: rgba(215, 170, 104, 0.14);
}

.nas-dashboard .library-modal-type {
    color: var(--nas-text-soft);
    background: rgba(255, 255, 255, 0.055);
}

.nas-dashboard .library-modal.library-modal-series .library-modal-type {
    color: var(--nas-series);
    background: var(--nas-series-soft);
}

.nas-dashboard .library-modal.library-modal-movie .library-modal-type {
    color: var(--nas-movie);
    background: var(--nas-movie-soft);
}

.nas-dashboard .library-modal-stats > div,
.nas-dashboard .library-episode {
    border-color: var(--nas-border-soft);
    background: rgba(255, 255, 255, 0.022);
}

.nas-dashboard .library-episode:hover {
    border-color: rgba(144, 157, 240, 0.30);
    background: var(--nas-series-soft);
}

.nas-dashboard .library-episode:hover::after {
    color: var(--nas-action-text);
    background: var(--nas-action);
}

.nas-dashboard .library-hls-ready {
    color: #80d6af;
    background: var(--nas-ready-soft);
    border-color: rgba(104, 199, 157, 0.24);
}

.nas-dashboard .library-hls-preparing {
    color: #e4c27d;
    background: var(--nas-waiting-soft);
    border-color: rgba(213, 180, 109, 0.25);
}

.nas-dashboard .library-hls-waiting {
    color: #a8b0ba;
    background: var(--nas-paused-soft);
    border-color: rgba(154, 164, 175, 0.18);
}

.nas-dashboard .library-hls-error {
    color: #eda0a7;
    background: var(--nas-error-soft);
    border-color: rgba(223, 127, 136, 0.25);
}

.nas-dashboard .library-player {
    background: #020304;
    border: 1px solid var(--nas-border-soft);
}

.nas-dashboard .library-video-progress {
    background:
        linear-gradient(
            to right,
            #d8dde3 0%,
            #d8dde3 var(--library-progress),
            rgba(255, 255, 255, 0.25) var(--library-progress),
            rgba(255, 255, 255, 0.25) 100%
        );
}

.nas-dashboard .library-video-progress::-webkit-slider-thumb,
.nas-dashboard .library-video-progress::-moz-range-thumb {
    background: #eef1f4;
}

.nas-dashboard .library-settings-menu {
    border-color: var(--nas-border);
    background: rgba(18, 22, 27, 0.97);
}

.nas-dashboard .library-settings-menu select,
.nas-dashboard .library-settings-menu select option,
.nas-dashboard .library-settings-menu select option:checked {
    color: var(--nas-text);
    background: #1a1f25;
}

/* ==========================================================
   DISCOVERY
   ========================================================== */

body.nas-discover {
    color: var(--nas-text);
    background:
        radial-gradient(
            circle at 50% -18%,
            rgba(83, 97, 119, 0.22),
            transparent 38rem
        ),
        var(--nas-bg);
}

.nas-discover header a,
.nas-discover .back-button {
    color: var(--nas-muted);
}

.nas-discover header a:hover,
.nas-discover .back-button:hover {
    color: var(--nas-text);
}

.nas-discover .eyebrow {
    color: #7f8995;
}

.nas-discover .subtitle,
.nas-discover .status,
.nas-discover .loading,
.nas-discover .overview,
.nas-discover .media-meta,
.nas-discover .release-stats,
.nas-discover .episode-info span,
.nas-discover .episode-size,
.nas-discover .advanced-results {
    color: var(--nas-muted);
}

.nas-discover .search {
    border-color: var(--nas-border);
    background: rgba(18, 22, 27, 0.92);
    box-shadow: 0 12px 38px rgba(0, 0, 0, 0.16);
}

.nas-discover .search:focus-within {
    border-color: var(--nas-border-strong);
    box-shadow: 0 0 0 3px rgba(160, 172, 186, 0.055);
}

.nas-discover .search input {
    color: var(--nas-text);
}

.nas-discover .search input::placeholder {
    color: #626d79;
}

.nas-discover .search button,
.nas-discover .download,
.nas-discover .episode-button,
.nas-discover .advanced-download {
    background: var(--nas-action);
    color: var(--nas-action-text);
    box-shadow: none;
}

.nas-discover .search button:hover,
.nas-discover .download:hover:not(:disabled),
.nas-discover .episode-button:hover:not(:disabled),
.nas-discover .advanced-download:hover:not(:disabled) {
    background: #ffffff;
}

.nas-discover .media-card .poster {
    border: 1px solid transparent;
    background: var(--nas-panel-2);
    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.nas-discover .media-card:hover .poster {
    transform: translateY(-2px);
    border-color: var(--nas-border-strong);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
}

.nas-discover .media-card--movie .media-meta {
    color: var(--nas-movie);
}

.nas-discover .media-card--series .media-meta {
    color: var(--nas-series);
}

.nas-discover .selected-media,
.nas-discover .quality-card,
.nas-discover .plan-block,
.nas-discover .season-card,
.nas-discover .episode-choice {
    border-color: var(--nas-border);
    background: rgba(18, 22, 27, 0.90);
    box-shadow: none;
}

.nas-discover .selected-media--movie #selected-type {
    color: var(--nas-movie);
}

.nas-discover .selected-media--series #selected-type {
    color: var(--nas-series);
}

.nas-discover .quality-card,
.nas-discover .episode-choice {
    transition:
        border-color 160ms ease,
        background 160ms ease;
}

.nas-discover .quality-card:not(.unavailable):hover,
.nas-discover .episode-choice:hover {
    border-color: var(--nas-border-strong);
    background: var(--nas-panel-2);
}

.nas-discover .quality-card.unavailable {
    opacity: 0.46;
}

.nas-discover .quality-name {
    color: var(--nas-text);
}

.nas-discover .release-name,
.nas-discover .episode-filename,
.nas-discover .advanced-row strong {
    color: var(--nas-text-soft);
}

.nas-discover .file-label,
.nas-discover .advanced-row span {
    color: var(--nas-subtle);
}

.nas-discover .episode-row {
    border-color: var(--nas-border-soft);
    background: #11151a;
}

.nas-discover .advanced-row {
    border: 1px solid var(--nas-border-soft);
    background: #0e1216;
}

.nas-discover .advanced-row.accepted:hover {
    border-color: var(--nas-border-strong);
    background: #12171c;
}

.nas-discover .episode-button:disabled,
.nas-discover .advanced-download:disabled {
    background: #262c33;
    color: #747e89;
}

.nas-discover .unknown-quality-card,
.nas-discover .unknown-quality-choice {
    border-color: rgba(213, 180, 109, 0.28);
    background: rgba(213, 180, 109, 0.055);
}

.nas-discover .unknown-quality-card .quality-name,
.nas-discover .unknown-quality-choice > strong {
    color: var(--nas-waiting);
}

/* ==========================================================
   RESPONSIVE POLISH
   ========================================================== */

@media (max-width: 700px) {
    .nas-login .login-card {
        background: rgba(18, 22, 27, 0.96);
    }

    .nas-discover .page {
        width: min(100% - 24px, 1100px);
    }
}


/* ==========================================================
   DISCOVERY - SIDEBAR + SEARCH FOCUS OVERRIDES
   ========================================================== */

.nas-discover .sidebar {
    background:
        linear-gradient(
            180deg,
            rgba(16, 20, 25, 0.98),
            rgba(10, 13, 17, 0.99)
        );
    border-right-color: var(--nas-border-soft);
}

.nas-discover .brand-icon {
    background: var(--nas-panel-3);
    border: 1px solid var(--nas-border-strong);
    box-shadow: none;
}

.nas-discover .brand-icon span {
    background: #e5e8eb;
}

.nas-discover .nav-item {
    color: var(--nas-muted);
}

.nas-discover .nav-item:hover {
    color: var(--nas-text);
    background: rgba(255, 255, 255, 0.045);
}

.nas-discover .nav-item.active {
    color: var(--nas-text);
    background: var(--nas-panel-2);
    box-shadow: inset 0 0 0 1px var(--nas-border);
}

.nas-discover .server-status {
    background: rgba(255, 255, 255, 0.025);
    border-color: var(--nas-border-soft);
}

.nas-discover .logout-button {
    color: var(--nas-muted);
}

body.nas-discover .search input:focus,
body.nas-discover .search input:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}