/**
 * Windows XP Luna Theme - TugasKu Pro
 * Desain nostalgia otentik Windows XP Luna Blue (Classic 2001-2006).
 */

body.theme-winxp {
    font-family: Tahoma, "Segoe UI", Arial, sans-serif;
    background-color: #004e98;
    background-image: radial-gradient(circle at 50% 50%, #2989d8 0%, #004e98 100%);
    color: #000000;
}

/* Sidebar Windows XP (Mirip Windows Explorer Task Pane) */
.theme-winxp .sidebar {
    background: #7ba2e7;
    border-right: 2px solid #002b80;
    box-shadow: 2px 0 5px rgba(0,0,0,0.3);
}

.theme-winxp .sidebar-header {
    background: linear-gradient(to bottom, #0055ea 0%, #0d6cfc 50%, #0055ea 100%);
    color: #ffffff;
    border-bottom: 2px solid #002b80;
    padding: 0.75rem 1rem;
}

.theme-winxp .sidebar-header h2 {
    font-size: 1.1rem;
    color: #ffffff;
    text-shadow: 1px 1px 1px #000;
}

.theme-winxp .nav-item {
    color: #002b80;
    font-weight: bold;
    border: 1px solid transparent;
    border-radius: 3px;
    margin: 2px 0;
}

.theme-winxp .nav-item:hover {
    background: #d3e5fa;
    border: 1px solid #316ac5;
    color: #000;
}

.theme-winxp .nav-item.active {
    background: linear-gradient(to right, #ffffff, #d3e5fa);
    border: 1px solid #0055ea;
    color: #003399;
    box-shadow: inset 0 0 4px rgba(0,85,234,0.2);
}

/* Topbar Windows XP (Mirip Toolbar Internet Explorer / Windows Explorer) */
.theme-winxp .topbar {
    background: linear-gradient(to bottom, #ece9d8 0%, #d8d4c4 100%);
    border-bottom: 2px groove #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Card & Window XP */
.theme-winxp .modern-card,
.theme-winxp .winxp-window {
    background: #ece9d8;
    border: 2px outset #ffffff;
    border-radius: 6px 6px 0 0;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.35);
}

/* Titlebar Windows XP */
.theme-winxp .winxp-titlebar {
    background: linear-gradient(to bottom, #0058ee 0%, #3593ff 4%, #288eff 6%, #127dff 8%, #036ffc 10%, #0262ee 14%, #0057e5 20%, #0054e3 90%, #003dd7 100%);
    color: #ffffff;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    font-size: 0.85rem;
    border-radius: 4px 4px 0 0;
    text-shadow: 1px 1px 1px #002277;
}

.theme-winxp .winxp-controls {
    display: flex;
    gap: 3px;
}

.theme-winxp .winxp-btn-ctrl {
    width: 21px;
    height: 21px;
    border-radius: 3px;
    border: 1px solid #ffffff;
    background: linear-gradient(to bottom, #ece9d8 0%, #b5b2a0 100%);
    color: #000;
    font-weight: bold;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #888;
}

.theme-winxp .winxp-btn-ctrl.winxp-close {
    background: linear-gradient(to bottom, #f28a77 0%, #d93d25 50%, #b71f09 100%);
    color: #ffffff;
    border-color: #ffffff;
    text-shadow: 1px 1px 0 #660000;
}

/* Kanban XP */
.theme-winxp .kanban-column {
    background: #ece9d8;
    border: 2px outset #ffffff;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.25);
    border-radius: 4px;
}

.theme-winxp .kanban-column-header {
    background: linear-gradient(to bottom, #0055ea, #0044bb);
    color: #ffffff;
    font-size: 0.85rem;
    text-shadow: 1px 1px 0 #002277;
    border-radius: 2px 2px 0 0;
}

.theme-winxp .kanban-card {
    background: #ffffff;
    border: 1px solid #7f9db9;
    border-radius: 2px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.15);
}

.theme-winxp .kanban-card:hover {
    border-color: #0055ea;
    box-shadow: 0 0 5px rgba(0,85,234,0.5);
}

/* Modal XP */
.theme-winxp .modal-box {
    background: #ece9d8;
    border: 3px outset #ffffff;
    border-radius: 6px 6px 0 0;
    box-shadow: 4px 6px 20px rgba(0,0,0,0.5);
}

.theme-winxp .modal-header {
    background: linear-gradient(to bottom, #0058ee 0%, #0054e3 90%, #003dd7 100%);
    color: #ffffff;
    padding: 6px 10px;
    border-bottom: 2px solid #002277;
}

.theme-winxp .modal-header h3 {
    color: #ffffff;
    font-size: 0.95rem;
    text-shadow: 1px 1px 1px #002277;
}

.theme-winxp .modal-tabs {
    background: #ece9d8;
    border-bottom: 2px groove #ffffff;
}

.theme-winxp .modal-tab-btn {
    border: 2px outset #ffffff;
    border-bottom: none;
    background: #ece9d8;
    color: #000;
    font-size: 0.825rem;
    border-radius: 4px 4px 0 0;
}

.theme-winxp .modal-tab-btn.active {
    background: #ffffff;
    border-bottom: 2px solid #ffffff;
    font-weight: bold;
    color: #003399;
}

.theme-winxp .modal-footer {
    background: #ece9d8;
    border-top: 2px groove #ffffff;
}

/* Inputs & Form XP */
.theme-winxp input,
.theme-winxp select,
.theme-winxp textarea {
    border: 2px inset #d4d0c8;
    background: #ffffff;
    color: #000000;
    font-family: Tahoma, sans-serif;
    font-size: 0.85rem;
    padding: 0.35rem 0.5rem;
    border-radius: 2px;
}

.theme-winxp input:focus,
.theme-winxp select:focus,
.theme-winxp textarea:focus {
    border-color: #316ac5;
    outline: none;
}

/* Buttons XP (Beveled Luna Button) */
.theme-winxp .btn,
.theme-winxp .winxp-btn {
    background: linear-gradient(to bottom, #ffffff 0%, #ece9d8 15%, #d8d4c4 85%, #b5b2a0 100%);
    border: 1px solid #003c74;
    border-radius: 3px;
    color: #000000;
    font-family: Tahoma, sans-serif;
    font-size: 0.825rem;
    padding: 0.35rem 1rem;
    cursor: pointer;
    box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #ffffff;
    text-decoration: none;
}

.theme-winxp .btn:hover,
.theme-winxp .winxp-btn:hover {
    background: linear-gradient(to bottom, #fff5e5 0%, #fed898 50%, #febe4e 100%);
    border-color: #e58700;
}

.theme-winxp .btn:active,
.theme-winxp .winxp-btn:active {
    background: linear-gradient(to bottom, #b5b2a0 0%, #ece9d8 100%);
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4);
}

.theme-winxp .btn-primary {
    background: linear-gradient(to bottom, #5cb0ff 0%, #0055ea 50%, #0038a8 100%);
    color: #ffffff;
    border-color: #002277;
    text-shadow: 1px 1px 0 #002277;
}

.theme-winxp .btn-primary:hover {
    background: linear-gradient(to bottom, #7fc1ff 0%, #206ef8 50%, #0044cc 100%);
    border-color: #001155;
}

.theme-winxp .btn-danger {
    background: linear-gradient(to bottom, #f28a77 0%, #d93d25 50%, #b71f09 100%);
    color: #ffffff;
    border-color: #770000;
}