@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Poppins&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.2.0/sweetalert2.min.css');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css");

/* ============================================
   AM0X PANEL — MATRIX RAIN THEME
   Black BG + Green text, preserve layout
   ============================================ */

:root {
    --mg:   #00ff41;      /* matrix green        */
    --mgd:  #00b32c;      /* dim green           */
    --mgx:  #005c18;      /* very dim green      */
    --mbg:  #000000;      /* black background    */
    --mbg2: #050f05;      /* card background     */
    --mbg3: #0a150a;      /* input background    */
    --mbd:  rgba(0,255,65,0.18);  /* border      */
    --mbd2: rgba(0,255,65,0.35);  /* border hover*/
    --red:  #ff3333;
    --yel:  #ffcc00;
}

/* ── BASE ── */
* { box-sizing: border-box; }
html, body {
    background-color: var(--mbg) !important;
    color: var(--mg) !important;
    font-family: 'Share Tech Mono', monospace !important;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    z-index: 0;
}

/* ── MATRIX RAIN CANVAS ── */
#matrix-bg {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: -1;
    pointer-events: none;
    display: block;
}

/* scanlines removed */

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: var(--mgx); border-radius: 2px; }

.container { max-width: 1140px; }

/* ── NAVBAR ── */
.navbar, nav.navbar, .navbar.bg-dark, nav.navbar.bg-dark {
    z-index: 1030;
    background-color: rgba(0,0,0,0.95) !important;
    border-bottom: 1px solid var(--mbd2) !important;
    box-shadow: 0 2px 20px rgba(0,255,65,0.1) !important;
    backdrop-filter: blur(4px);
}
.navbar-brand {
    color: var(--mg) !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    text-shadow: 0 0 10px var(--mg) !important;
}
.navbar-brand:hover { text-shadow: 0 0 20px var(--mg), 0 0 40px var(--mg) !important; }
.navbar-brand img { filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(80deg); }

.nav-link, .navbar-nav .nav-link { color: var(--mg) !important; letter-spacing: 1px; transition: all .2s; }
.nav-link:hover { color: #fff !important; text-shadow: 0 0 8px var(--mg); }
.navbar-toggler { border-color: var(--mbd2) !important; }
.navbar-toggler-icon { filter: invert(1) sepia(1) saturate(5) hue-rotate(80deg); }

.btn-outline-light {
    border: 1px solid var(--mgd) !important;
    color: var(--mg) !important;
    background: transparent !important;
}
.btn-outline-light:hover {
    background: rgba(0,255,65,0.1) !important;
    box-shadow: 0 0 12px rgba(0,255,65,0.3) !important;
    color: #fff !important;
}

/* ── SIDE MENU ── */
.side-menu {
    position: fixed;
    top: 0; right: -250px;
    width: 250px; height: 100%;
    background-color: rgba(0,5,0,0.98) !important;
    border-left: 1px solid var(--mbd2) !important;
    box-shadow: -4px 0 30px rgba(0,255,65,0.15) !important;
    overflow-x: hidden;
    transition: 0.4s;
    padding-top: 60px;
    z-index: 1050;
}
.side-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--mbd) !important;
}
.side-menu h5 { color: var(--mg) !important; text-shadow: 0 0 8px var(--mg); letter-spacing: 2px; }
.side-menu .nav-link {
    color: var(--mg) !important;
    padding: 10px 20px;
    font-size: 14px;
    border-left: 2px solid transparent;
    transition: all .2s;
    letter-spacing: 1px;
}
.side-menu .nav-link:hover {
    background: rgba(0,255,65,0.05) !important;
    border-left: 2px solid var(--mg) !important;
    padding-left: 26px;
    text-shadow: 0 0 6px var(--mg);
}
.side-menu .nav-link.text-danger { color: var(--red) !important; }
.btn-close-white { filter: invert(1) sepia(1) saturate(5) hue-rotate(80deg) !important; }

/* ── CARDS ── */
.card {
    background-color: var(--mbg2) !important;
    border: 1px solid var(--mbd) !important;
    color: var(--mg) !important;
    box-shadow: 0 0 15px rgba(0,255,65,0.06) !important;
    transition: box-shadow .3s;
}
.card:hover { box-shadow: 0 0 25px rgba(0,255,65,0.12) !important; }

.card-header {
    background-color: rgba(0,255,65,0.04) !important;
    border-bottom: 1px solid var(--mbd) !important;
    color: var(--mg) !important;
    letter-spacing: 1.5px;
    font-weight: 600;
}
.card-body  { color: var(--mg) !important; }
.card-title { color: var(--mg) !important; text-shadow: 0 0 6px rgba(0,255,65,0.4); }
.card-text  { color: var(--mgd) !important; }

/* ── BUTTONS ── */
.btn {
    font-family: 'Share Tech Mono', monospace !important;
    letter-spacing: 1px !important;
    border-radius: 3px !important;
    transition: all .2s !important;
}

.btn-primary, .btn-default {
    background: transparent !important;
    border: 1px solid var(--mg) !important;
    color: var(--mg) !important;
    box-shadow: 0 0 8px rgba(0,255,65,0.15) !important;
}
.btn-primary:hover, .btn-default:hover {
    background: rgba(0,255,65,0.12) !important;
    box-shadow: 0 0 18px rgba(0,255,65,0.4) !important;
    color: #fff !important;
}

.btn-success {
    background: transparent !important;
    border: 1px solid var(--mg) !important;
    color: var(--mg) !important;
}
.btn-success:hover {
    background: rgba(0,255,65,0.12) !important;
    box-shadow: 0 0 15px rgba(0,255,65,0.35) !important;
    color: #fff !important;
}

.btn-danger {
    background: transparent !important;
    border: 1px solid var(--red) !important;
    color: var(--red) !important;
}
.btn-danger:hover {
    background: rgba(255,51,51,0.12) !important;
    box-shadow: 0 0 15px rgba(255,51,51,0.4) !important;
    color: #fff !important;
}

.btn-warning {
    background: transparent !important;
    border: 1px solid var(--yel) !important;
    color: var(--yel) !important;
}
.btn-warning:hover {
    background: rgba(255,204,0,0.1) !important;
    box-shadow: 0 0 12px rgba(255,204,0,0.35) !important;
    color: #000 !important;
}

.btn-secondary {
    background: transparent !important;
    border: 1px solid #333 !important;
    color: #666 !important;
}
.btn-secondary:hover {
    border-color: var(--mgd) !important;
    color: var(--mg) !important;
}

.btn-dark, .btn-outline-dark {
    background: transparent !important;
    border: 1px solid var(--mgd) !important;
    color: var(--mg) !important;
}
.btn-dark:hover, .btn-outline-dark:hover {
    background: rgba(0,255,65,0.1) !important;
    color: #fff !important;
}

.btn-info {
    background: transparent !important;
    border: 1px solid var(--mgd) !important;
    color: var(--mgd) !important;
}
.btn-info:hover {
    background: rgba(0,255,65,0.1) !important;
    color: #fff !important;
}

/* ── FORMS ── */
.form-control, .form-select {
    background-color: var(--mbg3) !important;
    border: 1px solid var(--mbd) !important;
    color: var(--mg) !important;
    font-family: 'Share Tech Mono', monospace !important;
    transition: border .2s, box-shadow .2s;
}
.form-control::placeholder { color: var(--mgx) !important; opacity: 1; }
.form-control:focus, .form-select:focus {
    background-color: var(--mbg3) !important;
    border-color: var(--mg) !important;
    box-shadow: 0 0 0 2px rgba(0,255,65,0.2) !important;
    color: var(--mg) !important;
}
.form-select option { background: var(--mbg2) !important; color: var(--mg) !important; }
.form-label { color: var(--mgd) !important; font-size: 0.85rem; letter-spacing: 1px; }
.form-check-label { color: var(--mgd) !important; }
.form-check-input {
    background-color: var(--mbg3) !important;
    border-color: var(--mbd) !important;
}
.form-check-input:checked {
    background-color: var(--mg) !important;
    border-color: var(--mg) !important;
}
.input-group-text {
    background: rgba(0,255,65,0.05) !important;
    border: 1px solid var(--mbd) !important;
    color: var(--mg) !important;
}

/* ── ALERTS ── */
.alert {
    border-radius: 3px !important;
    border-left: 3px solid !important;
    background: var(--mbg2) !important;
    font-family: 'Share Tech Mono', monospace !important;
}
.alert-success  { border-color: var(--mg) !important; color: var(--mg) !important; }
.alert-danger   { border-color: var(--red) !important; color: var(--red) !important; }
.alert-warning  { border-color: var(--yel) !important; color: var(--yel) !important; }
.alert-secondary{ border-color: #333 !important; color: #666 !important; }
.alert-info     { border-color: var(--mgd) !important; color: var(--mgd) !important; }

/* ── TABLES ── */
.table {
    color: var(--mg) !important;
    border-color: var(--mbd) !important;
}
.table thead th {
    background: rgba(0,255,65,0.05) !important;
    color: var(--mg) !important;
    border-color: var(--mbd) !important;
    border-bottom: 1px solid var(--mgd) !important;
    letter-spacing: 1px;
    font-size: 0.82rem;
}
.table tbody tr { border-color: var(--mbd) !important; transition: background .15s; }
.table tbody tr:hover {
    background: rgba(0,255,65,0.04) !important;
    box-shadow: inset 3px 0 0 var(--mg);
}
.table td, .table th { border-color: var(--mbd) !important; color: var(--mgd) !important; vertical-align: middle; }
.table-bordered { border-color: var(--mbd) !important; }
.bg-light  { background-color: var(--mbg2) !important; }
.bg-dark   { background-color: var(--mbg) !important; }
.bg-body   { background-color: var(--mbg) !important; }

/* ── BADGES ── */
.badge.bg-success   { background: rgba(0,255,65,0.12) !important; color: var(--mg) !important; border: 1px solid var(--mgd); }
.badge.bg-danger    { background: rgba(255,51,51,0.12) !important; color: var(--red) !important; border: 1px solid var(--red); }
.badge.bg-warning   { background: rgba(255,204,0,0.1) !important; color: var(--yel) !important; border: 1px solid var(--yel); }
.badge.bg-secondary { background: rgba(50,50,50,0.3) !important; color: #666 !important; border: 1px solid #333; }
.badge.bg-primary   { background: rgba(0,255,65,0.1) !important; color: var(--mg) !important; border: 1px solid var(--mbd); }
.badge.bg-dark      { background: rgba(0,255,65,0.06) !important; color: var(--mgd) !important; border: 1px solid var(--mbd); }
.badge.text-dark    { color: var(--mgd) !important; }

/* ── TEXT ── */
h1,h2,h3,h4,h5,h6 { color: var(--mg) !important; text-shadow: 0 0 8px rgba(0,255,65,0.3); }
.text-muted   { color: var(--mgx) !important; }
.text-white   { color: var(--mg) !important; }
.text-dark    { color: var(--mg) !important; }
.text-success { color: var(--mg) !important; }
.text-danger  { color: var(--red) !important; }
.text-warning { color: var(--yel) !important; }
a { color: var(--mg) !important; transition: all .2s; }
a:hover { color: #fff !important; text-shadow: 0 0 6px var(--mg); }

/* ── MODAL ── */
.modal-content {
    background: rgba(0,5,0,0.98) !important;
    border: 1px solid var(--mbd2) !important;
    color: var(--mg) !important;
    box-shadow: 0 0 40px rgba(0,255,65,0.2) !important;
}
.modal-header { border-bottom: 1px solid var(--mbd) !important; }
.modal-footer { border-top:    1px solid var(--mbd) !important; }
.modal-title  { color: var(--mg) !important; text-shadow: 0 0 8px var(--mg); }

/* ── DROPDOWN ── */
.dropdown-menu {
    background: rgba(0,5,0,0.98) !important;
    border: 1px solid var(--mbd) !important;
}
.dropdown-item { color: var(--mg) !important; font-size: 0.9rem; }
.dropdown-item:hover { background: rgba(0,255,65,0.07) !important; color: #fff !important; }
.dropdown-divider { border-color: var(--mbd) !important; }

/* ── FOOTER ── */
footer.fixed-bottom, footer.bg-body {
    z-index: 1020;
    background-color: rgba(0,0,0,0.95) !important;
    border-top: 1px solid var(--mbd) !important;
}
footer .text-muted, footer small { color: var(--mgx) !important; }

/* ── PAGINATION ── */
.page-item .page-link {
    background: var(--mbg2) !important;
    border-color: var(--mbd) !important;
    color: var(--mg) !important;
}
.page-item.active .page-link {
    background: rgba(0,255,65,0.15) !important;
    border-color: var(--mgd) !important;
    box-shadow: 0 0 10px rgba(0,255,65,0.3) !important;
    color: #fff !important;
}

/* ── LIST GROUP ── */
.list-group-item {
    background: var(--mbg2) !important;
    border-color: var(--mbd) !important;
    color: var(--mg) !important;
}
.list-group-item:hover { background: rgba(0,255,65,0.05) !important; }

/* ── SWITCH TOGGLE ── */
.slider { background-color: #111 !important; border: 1px solid var(--mbd) !important; }
.slider:before { background-color: var(--mgd) !important; }
input:checked + .slider { background-color: rgba(0,255,65,0.15) !important; box-shadow: 0 0 8px rgba(0,255,65,0.4) !important; }
input:checked + .slider:before { background-color: var(--mg) !important; }

/* ── SWAL ── */
.swal2-popup {
    background: rgba(0,5,0,0.98) !important;
    border: 1px solid var(--mgd) !important;
    color: var(--mg) !important;
    box-shadow: 0 0 40px rgba(0,255,65,0.25) !important;
    font-family: 'Share Tech Mono', monospace !important;
}
.swal2-title   { color: var(--mg) !important; }
.swal2-html-container { color: var(--mgd) !important; }
.swal2-confirm { background: rgba(0,255,65,0.15) !important; border: 1px solid var(--mg) !important; color: var(--mg) !important; }
.swal2-cancel  { background: transparent !important; border: 1px solid var(--red) !important; color: var(--red) !important; }

/* ── DATATABLES ── */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: var(--mbg3) !important;
    border: 1px solid var(--mbd) !important;
    color: var(--mg) !important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label { color: var(--mgx) !important; font-size: 0.82rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--mgd) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(0,255,65,0.08) !important;
    color: var(--mg) !important;
    border-color: var(--mbd) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: rgba(0,255,65,0.15) !important;
    color: var(--mg) !important;
    border: 1px solid var(--mgd) !important;
}

/* ── MISC ── */
.shadow-sm { box-shadow: 0 2px 12px rgba(0,0,0,0.8) !important; }
.border-top    { border-top-color:    var(--mbd) !important; }
.border-bottom { border-bottom-color: var(--mbd) !important; }
hr { border-color: var(--mbd) !important; opacity: 0.5; }

/* ── KEY BLUR ── */
.key-sensi { filter: blur(3px); transition: filter .3s; cursor: pointer; }
.key-sensi:hover { filter: blur(0); }