/* ==========================================================================
   lazyDash - Common & Shared Styles
   ========================================================================== */

@import url('widgets.css');

/* --- Reset & Base Elements --- */
* {
    box-sizing: border-box;
}

body {
    font-family: monospace;
    max-width: 100%;
    margin: 1.5rem auto;
    padding: 0 1rem;
    background: #1a1a1a;
    color: #ddd;
}

a {
    color: #58a6ff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.muted {
    color: #777;
}

input[type="text"],
input[type="password"] {
    background: #2a2a2a;
    border: 1px solid #444;
    color: #fff;
    padding: 0.4rem;
    font-family: monospace;
}

button {
    background: #444;
    border: none;
    color: #fff;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
    font-family: monospace;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
}

th, td {
    text-align: left;
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid #333;
}

/* --- Unified Header Navigation --- */
.header-nav, .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #2d2d2d;
    padding-bottom: 0.8rem;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.header-user {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
}

.nav-logout-btn {
    color: #ff7b72 !important;
}

.nav-logout-btn:hover {
    color: #ffa198 !important;
    text-decoration: underline;
}

.nav-group {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 5px;
    font-size: 0.82rem;
    font-family: inherit;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.2;
    transition: all 0.15s ease;
    user-select: none;
    border: 1px solid transparent;
}

.nav-btn:active {
    transform: scale(0.97);
}

.nav-btn-home {
    background: #18261e;
    border-color: rgba(63, 185, 80, 0.4);
    color: #3fb950;
}
.nav-btn-home:hover {
    background: #203829;
    border-color: #3fb950;
    color: #7ee787;
    text-decoration: none;
}
.nav-btn-home.active {
    background: #238636;
    border-color: #2ea043;
    color: #fff;
    cursor: default;
}

.nav-btn-watch {
    background: #2d1f14;
    border-color: rgba(240, 136, 62, 0.4);
    color: #f0883e;
}
.nav-btn-watch:hover {
    background: #3d2a1b;
    border-color: #f0883e;
    color: #ffa657;
    text-decoration: none;
}
.nav-btn-watch.active {
    background: #bd5c00;
    border-color: #f0883e;
    color: #fff;
    cursor: default;
}

.nav-btn-bittorrent {
    background: #152238;
    border-color: rgba(88, 166, 255, 0.4);
    color: #58a6ff;
}
.nav-btn-bittorrent:hover {
    background: #1f3556;
    border-color: #58a6ff;
    color: #79c0ff;
    text-decoration: none;
}
.nav-btn-bittorrent.active {
    background: #1f6feb;
    border-color: #388bfd;
    color: #fff;
    cursor: default;
}

.nav-btn-ai {
    background: #261938;
    border-color: rgba(188, 140, 255, 0.4);
    color: #bc8cff;
}
.nav-btn-ai:hover {
    background: #372352;
    border-color: #bc8cff;
    color: #d2a8ff;
    text-decoration: none;
}
.nav-btn-ai.active {
    background: #8957e5;
    border-color: #a371f7;
    color: #fff;
    cursor: default;
}

.nav-btn-weather {
    background: #11283b;
    border-color: rgba(56, 189, 248, 0.4);
    color: #38bdf8;
}
.nav-btn-weather:hover {
    background: #163a56;
    border-color: #38bdf8;
    color: #7dd3fc;
    text-decoration: none;
}
.nav-btn-weather.active {
    background: #0284c7;
    border-color: #38bdf8;
    color: #fff;
    cursor: default;
}

.nav-btn-hiking {
    background: #0f2d1e;
    border-color: rgba(34, 197, 94, 0.4);
    color: #22c55e;
}
.nav-btn-hiking:hover {
    background: #15412b;
    border-color: #22c55e;
    color: #4ade80;
    text-decoration: none;
}
.nav-btn-hiking.active {
    background: #16a34a;
    border-color: #22c55e;
    color: #fff;
    cursor: default;
}

.nav-btn-files {
    background: #282112;
    border-color: rgba(227, 179, 65, 0.4);
    color: #e3b341;
}
.nav-btn-files:hover {
    background: #382e16;
    border-color: #e3b341;
    color: #f2cc60;
    text-decoration: none;
}
.nav-btn-files.active {
    background: #9e6a03;
    border-color: #d29922;
    color: #fff;
    cursor: default;
}

.nav-btn-shell {
    background: #0f2b26;
    border-color: rgba(45, 212, 191, 0.4);
    color: #2dd4bf;
}
.nav-btn-shell:hover {
    background: #143832;
    border-color: #2dd4bf;
    color: #5eead4;
    text-decoration: none;
}
.nav-btn-shell.active {
    background: #0f766e;
    border-color: #14b8a6;
    color: #fff;
    cursor: default;
}

.nav-btn-rdp {
    background: #231633;
    border-color: rgba(168, 85, 247, 0.4);
    color: #c084fc;
}
.nav-btn-rdp:hover {
    background: #331f47;
    border-color: #c084fc;
    color: #e9d5ff;
    text-decoration: none;
}
.nav-btn-rdp.active {
    background: #7e22ce;
    border-color: #a855f7;
    color: #fff;
    cursor: default;
}

.nav-btn-spotify {
    background: #112b18;
    border-color: rgba(29, 185, 84, 0.4);
    color: #1db954;
}
.nav-btn-spotify:hover {
    background: #184024;
    border-color: #1db954;
    color: #1ed760;
    text-decoration: none;
}
.nav-btn-spotify.active {
    background: #15803d;
    border-color: #1ed760;
    color: #fff;
    cursor: default;
}

/* --- Shared Buttons & Actions --- */
.btn-sm {
    background: #2d2d2d;
    border: 1px solid #444;
    color: #ddd;
    padding: 0.25rem 0.6rem;
    font-family: inherit;
    font-size: 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.btn-sm:hover {
    background: #383838;
    border-color: #58a6ff;
    color: #fff;
}
.btn-sm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-delete {
    background: none;
    border: none;
    color: #ff7b72;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}
.btn-delete:hover {
    text-decoration: underline;
}

.btn-link {
    background: none;
    border: none;
    color: #58a6ff;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    font-size: 0.85rem;
}
.btn-link:hover {
    text-decoration: underline;
}

/* --- Shared Badges --- */
.badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
}
.badge-success {
    background: rgba(126, 231, 135, 0.12);
    color: #7ee787;
    border: 1px solid rgba(126, 231, 135, 0.3);
}
.badge-failed {
    background: rgba(255, 123, 114, 0.15);
    color: #ff7b72;
    border: 1px solid rgba(255, 123, 114, 0.35);
}
.badge-running {
    background: rgba(210, 153, 34, 0.15);
    color: #e3b341;
    border: 1px solid rgba(210, 153, 34, 0.35);
}
.badge-unknown {
    background: #2d2d2d;
    color: #999;
    border: 1px solid #444;
}

/* --- Shared Forms & Inputs --- */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.8rem;
}
.form-group:last-child {
    margin-bottom: 0;
}
.form-label {
    font-size: 0.78rem;
    font-weight: bold;
    color: #aaa;
}
.form-input, .form-select, .form-textarea {
    background: #141414;
    border: 1px solid #383838;
    color: #fff;
    padding: 0.45rem 0.65rem;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.84rem;
    outline: none;
    transition: border-color 0.15s ease;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: #58a6ff;
}

/* --- Shared Modals --- */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}
.modal-box {
    background: #222;
    border: 1px solid #444;
    border-radius: 6px;
    width: 92%;
    max-width: 520px;
    padding: 1.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.modal-title {
    margin: 0;
    font-size: 1.15rem;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-close {
    background: none;
    border: none;
    color: #888;
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 0.2rem;
}
.modal-close:hover {
    color: #fff;
}

/* --- Media Status Classes --- */
.released, .on-drive {
    color: #7ee787;
    text-decoration: none;
}
.released:hover, .on-drive:hover {
    text-decoration: underline;
}
.to-download {
    color: #58a6ff;
    text-decoration: none;
}
.to-download:hover {
    text-decoration: underline;
}
.unreleased {
    color: #ff7b72;
    text-decoration: none;
}
.unreleased:hover {
    text-decoration: underline;
}
.watched {
    opacity: 0.55;
}
.watched a.released, .watched a.on-drive, .watched a.to-download, .watched a.unreleased {
    text-decoration: line-through;
}