/* ========================================
   ADMIN PANEL CSS - FUADITECH STUDIO
   ======================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background: #0A0A0F; color: #E5E7EB; overflow-x: hidden; }

/* ===== SIDEBAR ===== */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100%;
    background: #111827;
    border-right: 1px solid #1F2937;
    padding: 25px 20px;
    overflow-y: auto;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: #00E5FF; border-radius: 10px; }

.sidebar .logo { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #1F2937; }
.sidebar .logo img { height: 45px; width: auto; }
.sidebar .logo h2 { font-size: 1.2rem; font-weight: 800; line-height: 1.2; }
.sidebar .logo h2 span { color: #00E5FF; }

.sidebar .search { background: #0A0A0F; border: 1px solid #1F2937; border-radius: 12px; padding: 8px 14px; display: flex; align-items: center; gap: 10px; margin-bottom: 25px; }
.sidebar .search input { background: transparent; border: none; color: white; width: 100%; font-size: 0.9rem; outline: none; }
.sidebar .search input::placeholder { color: #6B7280; }

.sidebar .menu { list-style: none; flex: 1; }
.sidebar .menu .menu-label { color: #6B7280; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1px; padding: 10px 12px 5px; }
.sidebar .menu li a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; color: #D1D5DB; text-decoration: none; transition: 0.3s; font-size: 0.9rem; }
.sidebar .menu li a:hover { background: #1F2937; color: #00E5FF; }
.sidebar .menu li a.active { background: rgba(0,229,255,0.1); color: #00E5FF; border-left: 3px solid #00E5FF; }
.sidebar .menu li a i { width: 22px; }
.sidebar .menu li a .badge { background: #00E5FF; color: #0A0A0F; padding: 2px 8px; border-radius: 30px; font-size: 0.65rem; font-weight: 700; margin-left: auto; }
.sidebar .menu li a .badge-red { background: #FF6B6B; color: white; }
.sidebar .menu li a .badge-orange { background: #FF9F43; color: white; }

/* ===== LOGOUT DI PALING BAWAH ===== */
.logout-bottom { padding: 15px 0 5px 0; border-top: 1px solid #1F2937; margin-top: auto; }
.logout-bottom a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px; color: #D1D5DB; text-decoration: none; transition: 0.3s; font-weight: 500; font-size: 0.9rem; }
.logout-bottom a:hover { background: #1F2937; color: #FF6B6B; }
.logout-bottom a i { width: 22px; }

/* ===== MAIN CONTENT ===== */
.main { margin-left: 280px; padding: 25px 30px; min-height: 100vh; }

.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.topbar h1 { font-size: 1.5rem; font-weight: 700; }
.topbar h1 span { color: #00E5FF; }
.topbar .right { display: flex; align-items: center; gap: 20px; }
.topbar .right .notif { position: relative; cursor: pointer; font-size: 1.2rem; color: #D1D5DB; }
.topbar .right .notif .count { position: absolute; top: -8px; right: -8px; background: #FF6B6B; color: white; width: 20px; height: 20px; border-radius: 50%; font-size: 0.65rem; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.topbar .right .user { display: flex; align-items: center; gap: 10px; background: #111827; padding: 8px 16px 8px 12px; border-radius: 40px; border: 1px solid #1F2937; cursor: pointer; }
.topbar .right .user .avatar { width: 35px; height: 35px; border-radius: 50%; background: linear-gradient(135deg, #00E5FF, #007BFF); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #0A0A0F; }

/* ===== STATS ===== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 30px; }
.stat-card { background: #111827; padding: 20px 25px; border-radius: 16px; border: 1px solid #1F2937; transition: 0.3s; }
.stat-card:hover { border-color: #00E5FF40; transform: translateY(-3px); }
.stat-card .stat-number { font-size: 2rem; font-weight: 800; margin-top: 12px; color: white; }
.stat-card .stat-label { color: #9CA3AF; font-size: 0.85rem; margin-top: 5px; }

/* ===== TABLES ===== */
.table-container { background: #111827; border-radius: 16px; border: 1px solid #1F2937; padding: 20px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
table th { text-align: left; padding: 10px 12px; color: #9CA3AF; font-weight: 500; font-size: 0.8rem; border-bottom: 1px solid #1F2937; }
table td { padding: 10px 12px; border-bottom: 1px solid #1F2937; font-size: 0.9rem; }
table tr:hover td { background: #1A1A2E; }

/* ===== BUTTONS ===== */
.btn-add { background: linear-gradient(135deg, #00E5FF, #007BFF); padding: 10px 20px; border: none; border-radius: 30px; color: white; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: 0.3s; border: none; }
.btn-add:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(0,229,255,0.3); }

.btn-action { padding: 6px 12px; border-radius: 20px; text-decoration: none; font-size: 0.7rem; font-weight: 600; margin-right: 5px; border: none; cursor: pointer; transition: 0.3s; }
.btn-edit { background: rgba(0,229,255,0.2); color: #00E5FF; }
.btn-edit:hover { background: #00E5FF; color: #0A0A0F; }
.btn-delete { background: rgba(255,107,107,0.2); color: #FF6B6B; }
.btn-delete:hover { background: #FF6B6B; color: #0A0A0F; }
.btn-view { background: rgba(155,89,182,0.2); color: #9B59B6; }
.btn-view:hover { background: #9B59B6; color: white; }

/* ===== BADGES ===== */
.status-badge { padding: 4px 12px; border-radius: 30px; font-size: 0.7rem; font-weight: 600; }
.status-badge.waiting { background: #FF9F4320; color: #FF9F43; }
.status-badge.process { background: #00E5FF20; color: #00E5FF; }
.status-badge.done { background: #00FF9620; color: #00FF96; }
.status-badge.cancel { background: #FF6B6B20; color: #FF6B6B; }
.status-badge.published { background: #00E5FF20; color: #00E5FF; }
.status-badge.draft { background: #FF6B6B20; color: #FF6B6B; }
.status-badge.active { background: #00FF9620; color: #00FF96; }
.status-badge.inactive { background: #FF6B6B20; color: #FF6B6B; }

/* ===== MODAL ===== */
.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 1000; justify-content: center; align-items: center; }
.modal-content { background: #111827; padding: 30px; border-radius: 20px; max-width: 600px; width: 100%; border: 1px solid #1F2937; }
.modal-content h2 { margin-bottom: 20px; }
.modal-content .form-group { margin-bottom: 15px; }
.modal-content .form-group label { display: block; margin-bottom: 5px; font-weight: 600; }
.modal-content .form-group input, .modal-content .form-group select, .modal-content .form-group textarea { width: 100%; padding: 10px 14px; background: #0A0A0F; border: 1px solid #1F2937; border-radius: 12px; color: white; font-family: inherit; }
.modal-content .form-group input:focus, .modal-content .form-group select:focus, .modal-content .form-group textarea:focus { outline: none; border-color: #00E5FF; }
.modal-content .btn-submit { padding: 10px 20px; background: linear-gradient(135deg, #00E5FF, #007BFF); border: none; border-radius: 30px; color: white; font-weight: 600; cursor: pointer; transition: 0.3s; }
.modal-content .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(0,229,255,0.3); }
.modal-content .btn-cancel { padding: 10px 20px; background: #1F2937; border: none; border-radius: 30px; color: #D1D5DB; font-weight: 600; cursor: pointer; margin-left: 10px; transition: 0.3s; }
.modal-content .btn-cancel:hover { background: #2A2A40; }
.modal-content .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); width: 280px; }
    .sidebar.open { transform: translateX(0); }
    .main { margin-left: 0; padding: 15px; }
    .stats { grid-template-columns: 1fr; }
    .modal-content .form-row { grid-template-columns: 1fr; }
    .hamburger { display: block !important; }
}

.hamburger { display: none; font-size: 1.5rem; cursor: pointer; color: white; background: none; border: none; }