/* =====================================================================
   MUA Premium - Admin Panel (Black & Gold)
   Layered on top of Bootstrap 5 (loaded via CDN).
   ===================================================================== */
:root {
    --ad-black: #0B0B0B;
    --ad-black2: #121212;
    --ad-card: #1B1B1B;
    --ad-card2: #222222;
    --ad-gold: #D4AF37;
    --ad-gold-light: #F5DE9D;
    --ad-gold-dark: #b8932b;
    --ad-muted: #9a9a9a;
    --ad-white: #f3f3f3;
    --ad-border: rgba(212,175,55,.18);
    --ad-sidebar-w: 264px;
}

body.admin-body { background: var(--ad-black2); color: #c9c9c9; font-family: "Poppins","Inter",system-ui,sans-serif; min-height: 100vh; }

/* Sidebar */
.admin-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--ad-sidebar-w); background: linear-gradient(180deg, #0e0e0e, var(--ad-black)); border-right: 1px solid var(--ad-border); z-index: 1040; display: flex; flex-direction: column; transition: transform .3s ease; }
.admin-sidebar .sb-brand { padding: 1.4rem 1.5rem; border-bottom: 1px solid var(--ad-border); }
.admin-sidebar .sb-brand .nm { font-family: "Playfair Display",serif; font-size: 1.3rem; color: var(--ad-white); font-weight: 700; }
.admin-sidebar .sb-brand .nm span { color: var(--ad-gold); }
.admin-sidebar .sb-brand .tag { font-size: .68rem; color: var(--ad-muted); letter-spacing: .2em; text-transform: uppercase; }
.admin-sidebar .sb-menu { flex: 1; overflow-y: auto; padding: 1rem .75rem; }
.admin-sidebar .sb-menu .sb-section { font-size: .65rem; color: #5b5b5b; letter-spacing: .18em; text-transform: uppercase; padding: 1rem .85rem .4rem; }
.admin-sidebar .sb-menu a { display: flex; align-items: center; gap: .8rem; padding: .72rem .9rem; border-radius: 10px; color: #b0b0b0; font-size: .9rem; font-weight: 500; transition: all .2s ease; margin-bottom: 2px; }
.admin-sidebar .sb-menu a i { width: 20px; text-align: center; color: var(--ad-gold); opacity: .85; font-size: 1rem; }
.admin-sidebar .sb-menu a:hover { background: rgba(212,175,55,.08); color: var(--ad-white); }
.admin-sidebar .sb-menu a.active { background: linear-gradient(90deg, rgba(212,175,55,.18), transparent); color: var(--ad-gold); border-left: 3px solid var(--ad-gold); padding-left: calc(.9rem - 3px); }
.admin-sidebar .sb-foot { padding: 1rem 1.5rem; border-top: 1px solid var(--ad-border); font-size: .76rem; color: var(--ad-muted); }

/* Main wrapper */
.admin-main { margin-left: var(--ad-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.admin-topbar { position: sticky; top: 0; z-index: 1030; background: rgba(11,11,11,.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ad-border); padding: .85rem 1.6rem; display: flex; align-items: center; justify-content: space-between; }
.admin-topbar .pg-title { color: var(--ad-white); font-family: "Playfair Display",serif; font-size: 1.25rem; font-weight: 700; margin: 0; }
.admin-topbar .pg-title i { color: var(--ad-gold); }
.admin-topbar .tb-right { display: flex; align-items: center; gap: 1rem; }
.admin-topbar .tb-badge { background: rgba(212,175,55,.12); color: var(--ad-gold); border: 1px solid var(--ad-border); padding: .35rem .7rem; border-radius: 50px; font-size: .78rem; }
.admin-topbar .admin-chip { display: flex; align-items: center; gap: .55rem; color: var(--ad-white); font-size: .86rem; }
.admin-topbar .admin-chip .av { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--ad-gold-light), var(--ad-gold-dark)); color: #1a1300; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.admin-topbar .menu-btn { display: none; background: none; border: none; color: var(--ad-gold); font-size: 1.4rem; cursor: pointer; }

.admin-content { padding: 1.8rem; flex: 1; }

/* Stat tiles */
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem; margin-bottom: 1.6rem; }
.stat-tile { background: var(--ad-card); border: 1px solid var(--ad-border); border-radius: 14px; padding: 1.4rem; position: relative; overflow: hidden; transition: transform .2s ease; }
.stat-tile:hover { transform: translateY(-4px); }
.stat-tile::after { content: ""; position: absolute; right: -20px; top: -20px; width: 80px; height: 80px; border-radius: 50%; background: rgba(212,175,55,.07); }
.stat-tile .st-ico { width: 50px; height: 50px; border-radius: 12px; background: rgba(212,175,55,.12); color: var(--ad-gold); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 1rem; }
.stat-tile .st-num { font-family: "Playfair Display",serif; font-size: 2.1rem; font-weight: 700; color: var(--ad-white); line-height: 1; }
.stat-tile .st-lbl { color: var(--ad-muted); font-size: .82rem; margin-top: .3rem; }
.stat-tile.pending .st-ico, .stat-tile.unread .st-ico { color: #ffb84d; background: rgba(255,184,77,.12); }

/* Cards */
.ad-card { background: var(--ad-card); border: 1px solid var(--ad-border); border-radius: 14px; margin-bottom: 1.6rem; }
.ad-card .ad-card-hd { padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--ad-border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem; }
.ad-card .ad-card-hd h5 { margin: 0; color: var(--ad-white); font-size: 1.05rem; font-family: "Playfair Display",serif; }
.ad-card .ad-card-hd .sub { color: var(--ad-muted); font-size: .82rem; }
.ad-card .ad-card-bd { padding: 1.4rem; }

/* Buttons */
.btn-ad-gold { background: linear-gradient(135deg, var(--ad-gold-light), var(--ad-gold-dark)); color: #1a1300; border: none; font-weight: 600; padding: .55rem 1.2rem; border-radius: 9px; font-size: .86rem; transition: all .2s ease; }
.btn-ad-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(212,175,55,.3); color: #1a1300; }
.btn-ad-ghost { background: transparent; border: 1px solid var(--ad-border); color: var(--ad-gold); padding: .5rem 1.1rem; border-radius: 9px; font-size: .85rem; transition: all .2s ease; }
.btn-ad-ghost:hover { background: rgba(212,175,55,.1); color: var(--ad-gold-light); }
.btn-ad-danger { background: rgba(220,53,69,.15); border: 1px solid rgba(220,53,69,.4); color: #ff8080; padding: .5rem 1.1rem; border-radius: 9px; font-size: .85rem; }
.btn-ad-danger:hover { background: #dc3545; color: #fff; }
.btn-ad-sm { padding: .3rem .7rem; font-size: .78rem; }

/* Forms */
.ad-form .form-label, .form-label { color: var(--ad-white); font-size: .85rem; font-weight: 500; margin-bottom: .4rem; }
.ad-form .form-control, .ad-form .form-select, .ad-form textarea,
.form-control, .form-select, textarea {
    background: var(--ad-black); border: 1px solid var(--ad-border); color: var(--ad-white);
    border-radius: 9px; padding: .6rem .85rem; font-size: .9rem;
}
.ad-form .form-control:focus, .ad-form .form-select:focus, .ad-form textarea:focus,
.form-control:focus, .form-select:focus, textarea:focus {
    background: var(--ad-black); border-color: var(--ad-gold); color: var(--ad-white); box-shadow: 0 0 0 3px rgba(212,175,55,.12);
}
.ad-form select.form-select { appearance: none; cursor: pointer; }
.form-check-input { background-color: var(--ad-black); border-color: var(--ad-border); }
.form-check-input:checked { background-color: var(--ad-gold); border-color: var(--ad-gold-dark); }
.form-check-label { color: #c9c9c9; font-size: .9rem; }
.input-required { color: var(--ad-gold); }

/* Tables / DataTables */
.table-ad-wrap { overflow-x: auto; }
table.ad-table { width: 100% !important; color: #c9c9c9; border-collapse: separate; border-spacing: 0; }
table.ad-table thead th { color: var(--ad-gold); font-weight: 600; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--ad-border); padding: .85rem 1rem; background: rgba(212,175,55,.04); white-space: nowrap; }
table.ad-table tbody td { padding: .8rem 1rem; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; font-size: .88rem; }
table.ad-table tbody tr:hover { background: rgba(212,175,55,.05); }
table.ad-table .tb-thumb { width: 54px; height: 54px; border-radius: 9px; object-fit: cover; border: 1px solid var(--ad-border); background: var(--ad-black); }
table.ad-table .tb-thumb-ph { width: 54px; height: 54px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--ad-black); border: 1px solid var(--ad-border); color: #555; }

/* Badges */
.ad-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 50px; font-size: .72rem; font-weight: 600; letter-spacing: .03em; }
.ad-badge.active { background: rgba(40,200,120,.15); color: #5dffa0; border: 1px solid rgba(40,200,120,.3); }
.ad-badge.inactive { background: rgba(150,150,150,.15); color: #b0b0b0; border: 1px solid rgba(150,150,150,.3); }
.ad-badge.published { background: rgba(212,175,55,.15); color: var(--ad-gold); border: 1px solid var(--ad-border); }
.ad-badge.unpublished { background: rgba(150,150,150,.1); color: #999; border: 1px solid rgba(150,150,150,.2); }
.ad-badge.status-pending { background: rgba(255,184,77,.15); color: #ffb84d; border: 1px solid rgba(255,184,77,.3); }
.ad-badge.status-confirmed { background: rgba(64,156,255,.15); color: #6bb6ff; border: 1px solid rgba(64,156,255,.3); }
.ad-badge.status-completed { background: rgba(40,200,120,.15); color: #5dffa0; border: 1px solid rgba(40,200,120,.3); }
.ad-badge.status-cancelled { background: rgba(255,90,90,.15); color: #ff8a8a; border: 1px solid rgba(255,90,90,.3); }
.row-actions { display: flex; gap: .35rem; flex-wrap: nowrap; }
.row-actions button { background: transparent; border: 1px solid transparent; border-radius: 8px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s ease; font-size: .85rem; }
.row-actions button:hover { background: rgba(255,255,255,.06); }
.row-actions .act-edit { color: var(--ad-gold); }
.row-actions .act-view { color: #6bb6ff; }
.row-actions .act-wa { color: #25d366; }
.row-actions .act-toggle { color: #9a9a9a; }
.row-actions .act-del { color: #ff8080; }

/* DataTables overrides */
.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate { color: #9a9a9a !important; font-size: .85rem; }
.dataTables_filter input, .dataTables_length select { background: var(--ad-black) !important; border: 1px solid var(--ad-border) !important; color: var(--ad-white) !important; border-radius: 8px !important; padding: .35rem .6rem !important; }
.paginate_button { color: #9a9a9a !important; border-radius: 6px !important; }
.paginate_button.current, .paginate_button.current:hover { background: var(--ad-gold) !important; color: #1a1300 !important; border: none !important; }
.paginate_button:hover { background: rgba(212,175,55,.1) !important; color: var(--ad-gold) !important; border: none !important; }

/* Modals */
.modal-content { background: var(--ad-card); border: 1px solid var(--ad-border); border-radius: 14px; color: #c9c9c9; }
.modal-header { border-bottom: 1px solid var(--ad-border); }
.modal-header .modal-title { color: var(--ad-white); font-family: "Playfair Display",serif; }
.modal-footer { border-top: 1px solid var(--ad-border); }
.modal-content .form-control, .modal-content .form-select { background: var(--ad-black); color: var(--ad-white); }

/* Upload preview */
.upload-preview { width: 130px; height: 130px; border-radius: 12px; background: var(--ad-black); border: 1px dashed var(--ad-border); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: .8rem; color: #555; }
.upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.upload-drop { border: 1px dashed var(--ad-border); border-radius: 10px; padding: 1rem; text-align: center; color: var(--ad-muted); cursor: pointer; transition: all .2s ease; }
.upload-drop:hover, .upload-drop.dragover { border-color: var(--ad-gold); color: var(--ad-gold); background: rgba(212,175,55,.05); }

/* Empty state */
.ad-empty { text-align: center; padding: 3rem 1rem; color: var(--ad-muted); }
.ad-empty i { font-size: 2.4rem; color: #555; margin-bottom: .8rem; }

/* Login */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 20%, #1a1a1a, var(--ad-black)); padding: 1.5rem; position: relative; overflow: hidden; }
.login-page::before { content: ""; position: absolute; inset: 0; background: url('https://images.unsplash.com/photo-1457972729786-0411a3b2b626?w=1600&q=70') center/cover; opacity: .12; }
.login-card { position: relative; z-index: 2; width: 100%; max-width: 420px; background: rgba(27,27,27,.92); border: 1px solid var(--ad-border); border-radius: 18px; padding: 2.6rem 2.2rem; box-shadow: 0 30px 80px rgba(0,0,0,.6); backdrop-filter: blur(8px); }
.login-card .lc-brand { text-align: center; margin-bottom: 1.6rem; }
.login-card .lc-brand .nm { font-family: "Playfair Display",serif; font-size: 1.8rem; color: var(--ad-white); font-weight: 700; }
.login-card .lc-brand .nm span { color: var(--ad-gold); }
.login-card .lc-brand .tag { color: var(--ad-muted); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; }
.login-card h4 { color: var(--ad-white); text-align: center; margin-bottom: 1.6rem; font-family: "Playfair Display",serif; }
.login-card .input-icon { position: relative; }
.login-card .input-icon i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--ad-gold); }
.login-card .input-icon input { padding-left: 2.6rem; }
.login-alert { background: rgba(255,90,90,.12); border: 1px solid rgba(255,90,90,.3); color: #ff9a9a; border-radius: 10px; padding: .7rem .9rem; font-size: .85rem; margin-bottom: 1.1rem; display: none; }
.login-alert.show { display: block; }
.login-meta { font-size: .78rem; color: var(--ad-muted); text-align: center; margin-top: 1.3rem; line-height: 1.6; }

/* Tabs (used in About / Portfolio modules) */
.ad-tabs { display: flex; gap: .5rem; border-bottom: 1px solid var(--ad-border); margin-bottom: 1.4rem; flex-wrap: wrap; }
.ad-tabs button { background: transparent; border: none; color: var(--ad-muted); padding: .7rem 1.1rem; font-size: .88rem; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all .2s ease; }
.ad-tabs button.active { color: var(--ad-gold); border-bottom-color: var(--ad-gold); }
.ad-tabs button:hover { color: var(--ad-white); }

/* Responsive admin */
@media (max-width: 992px) {
    .admin-sidebar { transform: translateX(-100%); }
    .admin-sidebar.open { transform: translateX(0); }
    .admin-main { margin-left: 0; }
    .admin-topbar .menu-btn { display: inline-flex; }
    .stat-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px) {
    .stat-grid { grid-template-columns: 1fr; }
    .admin-content { padding: 1.1rem; }
    .admin-topbar { padding: .8rem 1rem; }
    .admin-topbar .pg-title { font-size: 1.05rem; }
}
.sb-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1035; }
.sb-backdrop.show { display: block; }