@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap');

:root {
    --primary: #1a2742;
    --primary-light: #243352;
    --accent: #d4a853;
    --accent-light: #f0d68a;
    --accent-dark: #b8922e;
    --bg: #f0f2f5;
    --card: #ffffff;
    --text: #1a1a2e;
    --text-secondary: #6b7280;
    --text-light: #9ca3af;
    --border: #e5e7eb;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;
    --sidebar-w: 240px;
    --header-h: 64px;
    --radius: 12px;
    --shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.04);
    --shadow-lg: 0 4px 24px rgba(0,0,0,.12);
    --transition: all .25s cubic-bezier(.4,0,.2,1);
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: 'Inter', 'Noto Sans SC', -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
}

a { color: var(--accent-dark); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--accent); }

/* ===== LOGIN PAGE ===== */
.login-page {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg, var(--primary) 0%, #0f1a2e 50%, #1a2742 100%);
    position: relative; overflow: hidden;
}
.login-page::before {
    content:''; position:absolute; width:600px; height:600px; border-radius:50%;
    background: radial-gradient(circle, rgba(212,168,83,.15) 0%, transparent 70%);
    top:-200px; right:-100px;
}
.login-page::after {
    content:''; position:absolute; width:400px; height:400px; border-radius:50%;
    background: radial-gradient(circle, rgba(212,168,83,.1) 0%, transparent 70%);
    bottom:-100px; left:-100px;
}
.login-card {
    background: rgba(255,255,255,.05); backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.1); border-radius: 20px;
    padding: 48px 40px; width: 420px; position: relative; z-index: 1;
    box-shadow: 0 24px 48px rgba(0,0,0,.3);
}
.login-logo { text-align:center; margin-bottom:32px; }
.login-logo img { width:72px; height:72px; border-radius:16px; margin-bottom:12px; }
.login-logo h1 { color:#fff; font-size:24px; font-weight:700; letter-spacing:1px; }
.login-logo p { color:rgba(255,255,255,.5); font-size:13px; margin-top:4px; }
.login-card .form-group { margin-bottom:20px; }
.login-card label { display:block; color:rgba(255,255,255,.7); font-size:13px; font-weight:500; margin-bottom:6px; }
.login-card input[type="text"],
.login-card input[type="password"] {
    width:100%; padding:12px 16px; border-radius:10px; border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.08); color:#fff; font-size:14px; outline:none;
    transition: var(--transition);
}
.login-card input:focus { border-color:var(--accent); background:rgba(255,255,255,.12); }
.login-card input::placeholder { color:rgba(255,255,255,.3); }
.login-btn {
    width:100%; padding:13px; border:none; border-radius:10px; cursor:pointer;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color:#fff; font-size:15px; font-weight:600; letter-spacing:.5px;
    transition: var(--transition); margin-top:8px;
}
.login-btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(212,168,83,.4); }
.login-card .flash-msg { padding:10px 14px; border-radius:8px; margin-bottom:16px; font-size:13px; }
.flash-error { background:rgba(239,68,68,.15); color:#fca5a5; border:1px solid rgba(239,68,68,.3); }
.flash-success { background:rgba(16,185,129,.15); color:#6ee7b7; border:1px solid rgba(16,185,129,.3); }

/* ===== LAYOUT ===== */
.layout { display:flex; min-height:100vh; }

.sidebar {
    width:var(--sidebar-w); background:var(--primary); color:#fff;
    position:fixed; top:0; left:0; bottom:0; z-index:100;
    display:flex; flex-direction:column; overflow-y:auto;
    transition: var(--transition);
}
.sidebar-brand {
    padding:20px; display:flex; align-items:center; gap:12px;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar-brand img { width:40px; height:40px; border-radius:10px; }
.sidebar-brand h2 { font-size:16px; font-weight:700; letter-spacing:.5px; }
.sidebar-brand span { font-size:11px; color:rgba(255,255,255,.5); display:block; margin-top:2px; }

.sidebar-nav { flex:1; padding:12px 0; }
.nav-section { padding:0 16px; margin-bottom:4px; }
.nav-section-title {
    font-size:11px; text-transform:uppercase; color:rgba(255,255,255,.35);
    font-weight:600; letter-spacing:1px; padding:12px 12px 6px; margin-top:4px;
}
.nav-item {
    display:flex; align-items:center; gap:10px; padding:10px 12px;
    border-radius:8px; color:rgba(255,255,255,.7); font-size:14px;
    transition: var(--transition); cursor:pointer; margin:2px 0; position:relative;
}
.nav-item:hover { background:rgba(255,255,255,.08); color:#fff; }
.nav-item.active {
    background: linear-gradient(135deg, rgba(212,168,83,.2) 0%, rgba(212,168,83,.08) 100%);
    color:var(--accent-light); font-weight:500;
}
.nav-item.active::before {
    content:''; position:absolute; left:-16px; top:50%; transform:translateY(-50%);
    width:3px; height:20px; background:var(--accent); border-radius:0 3px 3px 0;
}
.nav-icon { width:20px; text-align:center; font-size:16px; flex-shrink:0; }
.nav-badge {
    margin-left:auto; background:var(--danger); color:#fff; font-size:11px;
    padding:2px 7px; border-radius:10px; font-weight:600;
}

.sidebar-footer {
    padding:16px 20px; border-top:1px solid rgba(255,255,255,.08);
    display:flex; align-items:center; gap:10px;
}
.sidebar-footer .avatar {
    width:36px; height:36px; border-radius:10px;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:14px; color:#fff;
}
.sidebar-footer .user-info { flex:1; }
.sidebar-footer .user-name { font-size:13px; font-weight:600; }
.sidebar-footer .user-role { font-size:11px; color:rgba(255,255,255,.4); }

/* Main Content */
.main-content {
    flex:1; margin-left:var(--sidebar-w); padding:24px 32px;
    min-height:100vh;
}

.page-header { margin-bottom:24px; }
.breadcrumb { font-size:13px; color:var(--text-light); margin-bottom:4px; }
.breadcrumb a { color:var(--text-secondary); }
.breadcrumb span { margin:0 6px; }
.page-title { font-size:22px; font-weight:700; color:var(--text); }

/* Flash Messages */
.flash-container { margin-bottom:16px; }
.flash-msg {
    padding:12px 16px; border-radius:8px; font-size:13px; margin-bottom:8px;
    display:flex; align-items:center; gap:8px; animation: slideIn .3s ease;
}
@keyframes slideIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.main-content .flash-error { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }
.main-content .flash-success { background:#f0fdf4; color:#16a34a; border:1px solid #bbf7d0; }

/* ===== CARDS ===== */
.card {
    background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
    border:1px solid var(--border); transition:var(--transition);
}
.card:hover { box-shadow:var(--shadow-lg); }
.card-header {
    padding:16px 20px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
}
.card-header h3 { font-size:16px; font-weight:600; }
.card-body { padding:20px; }

/* Stats Grid */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-bottom:24px; }
.stat-card {
    background:var(--card); border-radius:var(--radius); padding:20px;
    border:1px solid var(--border); box-shadow:var(--shadow);
    display:flex; align-items:center; gap:16px; transition:var(--transition);
}
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.stat-icon {
    width:48px; height:48px; border-radius:12px; display:flex;
    align-items:center; justify-content:center; font-size:22px; flex-shrink:0;
}
.stat-icon.blue { background:rgba(59,130,246,.1); color:var(--info); }
.stat-icon.green { background:rgba(16,185,129,.1); color:var(--success); }
.stat-icon.amber { background:rgba(245,158,11,.1); color:var(--warning); }
.stat-icon.red { background:rgba(239,68,68,.1); color:var(--danger); }
.stat-value { font-size:24px; font-weight:700; line-height:1.2; }
.stat-label { font-size:13px; color:var(--text-secondary); }

/* Content Grid */
.content-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.content-grid.full { grid-template-columns:1fr; }

/* ===== TABLE ===== */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
thead th {
    padding:12px 16px; text-align:left; font-size:12px; font-weight:600;
    color:var(--text-secondary); text-transform:uppercase; letter-spacing:.5px;
    background:var(--bg); border-bottom:1px solid var(--border);
}
tbody td {
    padding:12px 16px; font-size:14px; border-bottom:1px solid var(--border);
    vertical-align:middle;
}
tbody tr { transition:var(--transition); }
tbody tr:hover { background:rgba(212,168,83,.03); }
tbody tr:last-child td { border-bottom:none; }

/* ===== BADGES ===== */
.badge {
    display:inline-flex; align-items:center; padding:4px 10px; border-radius:6px;
    font-size:12px; font-weight:600; gap:4px;
}
.badge-success { background:rgba(16,185,129,.1); color:#059669; }
.badge-warning { background:rgba(245,158,11,.1); color:#d97706; }
.badge-danger { background:rgba(239,68,68,.1); color:#dc2626; }
.badge-info { background:rgba(59,130,246,.1); color:#2563eb; }
.badge-secondary { background:rgba(107,114,128,.1); color:#4b5563; }

/* ===== PROGRESS ===== */
.progress-bar-wrap {
    width:100%; height:8px; background:var(--bg); border-radius:4px; overflow:hidden;
}
.progress-bar-fill {
    height:100%; border-radius:4px; transition: width .6s ease;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 100%);
}

/* Progress Timeline */
.timeline { position:relative; padding-left:28px; }
.timeline::before {
    content:''; position:absolute; left:10px; top:8px; bottom:8px;
    width:2px; background:var(--border);
}
.timeline-item { position:relative; padding-bottom:24px; }
.timeline-item:last-child { padding-bottom:0; }
.timeline-dot {
    position:absolute; left:-28px; top:4px; width:20px; height:20px;
    border-radius:50%; border:2px solid var(--border); background:#fff;
    display:flex; align-items:center; justify-content:center; font-size:10px;
    z-index:1;
}
.timeline-dot.completed { border-color:var(--success); background:var(--success); color:#fff; }
.timeline-dot.in_progress { border-color:var(--accent); background:var(--accent); color:#fff; animation: pulse 2s infinite; }
.timeline-dot.pending { border-color:var(--border); background:var(--bg); color:var(--text-light); }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(212,168,83,.4)} 50%{box-shadow:0 0 0 8px rgba(212,168,83,0)} }
.timeline-content h4 { font-size:14px; font-weight:600; margin-bottom:2px; }
.timeline-content p { font-size:13px; color:var(--text-secondary); }
.timeline-content .time { font-size:11px; color:var(--text-light); margin-top:2px; }

/* ===== FORMS ===== */
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:13px; font-weight:500; color:var(--text-secondary); margin-bottom:6px; }
.form-control {
    width:100%; padding:10px 14px; border-radius:8px; border:1px solid var(--border);
    font-size:14px; outline:none; transition:var(--transition);
    font-family:inherit; background:#fff;
}
.form-control:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(212,168,83,.15); }
select.form-control { cursor:pointer; }
textarea.form-control { resize:vertical; min-height:80px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-info { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); }
.form-info .label { font-size:14px; color:var(--text-secondary); }
.form-info .value { font-size:14px; font-weight:500; }

/* ===== BUTTONS ===== */
.btn {
    display:inline-flex; align-items:center; gap:6px; padding:8px 16px;
    border-radius:8px; font-size:13px; font-weight:500; border:none;
    cursor:pointer; transition:var(--transition); font-family:inherit;
}
.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color:#fff;
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(212,168,83,.3); }
.btn-secondary { background:var(--bg); color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover { background:var(--border); }
.btn-success { background:var(--success); color:#fff; }
.btn-danger { background:var(--danger); color:#fff; }
.btn-sm { padding:5px 10px; font-size:12px; }
.btn-link { background:none; color:var(--accent-dark); padding:0; }
.btn-link:hover { color:var(--accent); }

/* ===== TABS ===== */
.tabs { display:flex; gap:4px; margin-bottom:20px; background:var(--bg); padding:4px; border-radius:10px; }
.tab {
    padding:8px 16px; border-radius:8px; font-size:13px; font-weight:500;
    color:var(--text-secondary); cursor:pointer; transition:var(--transition); text-align:center;
}
.tab:hover { color:var(--text); }
.tab.active { background:#fff; color:var(--text); box-shadow:var(--shadow); }

/* ===== MESSAGES ===== */
.msg-list { list-style:none; }
.msg-item {
    padding:14px 16px; border-bottom:1px solid var(--border);
    display:flex; gap:12px; transition:var(--transition); cursor:pointer;
}
.msg-item:hover { background:var(--bg); }
.msg-item:last-child { border-bottom:none; }
.msg-item.unread { background:rgba(212,168,83,.03); }
.msg-dot { width:8px; height:8px; border-radius:50%; margin-top:6px; flex-shrink:0; }
.msg-dot.unread { background:var(--accent); }
.msg-dot.read { background:transparent; }
.msg-title { font-size:14px; font-weight:500; margin-bottom:2px; }
.msg-preview { font-size:13px; color:var(--text-secondary); display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.msg-time { font-size:11px; color:var(--text-light); margin-top:4px; }

/* ===== MODAL ===== */
.modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(4px);
    display:none; align-items:center; justify-content:center; z-index:1000;
}
.modal-overlay.active { display:flex; }
.modal {
    background:#fff; border-radius:16px; width:500px; max-width:90vw;
    max-height:85vh; overflow-y:auto; box-shadow:var(--shadow-lg);
    animation: modalIn .3s ease;
}
@keyframes modalIn { from { opacity:0; transform:scale(.95); } to { opacity:1; transform:scale(1); } }
.modal-header {
    padding:20px 24px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
}
.modal-header h3 { font-size:18px; font-weight:600; }
.modal-close { width:32px; height:32px; border:none; background:var(--bg); border-radius:8px; cursor:pointer; font-size:18px; transition:var(--transition); }
.modal-close:hover { background:var(--border); }
.modal-body { padding:24px; }
.modal-footer { padding:16px 24px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; }

/* ===== EMPTY STATE ===== */
.empty-state { text-align:center; padding:48px 20px; color:var(--text-light); }
.empty-state .icon { font-size:48px; margin-bottom:12px; }
.empty-state p { font-size:14px; }

/* ===== RESPONSIVE ===== */
@media (max-width:768px) {
    .sidebar { transform:translateX(-100%); }
    .sidebar.open { transform:translateX(0); }
    .main-content { margin-left:0; padding:16px; }
    .content-grid { grid-template-columns:1fr; }
    .form-row { grid-template-columns:1fr; }
    .stats-grid { grid-template-columns:1fr 1fr; }
}