/* =====================================================================
   Stater Admin Theme — dark + lime, modeled on app.stater.pro/auth
   Loaded after styles.css so it overrides the default light theme.
   Design tokens taken from the Stater web app:
     accent  #C7FF24   layout  #181818 / #1B1B1B
     panels  #262329   borders #312C35 / #3B363F
     text    #FFFFFF   muted   #A6A4B4
     font    Rubik
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800&display=swap");

:root {
    --st-main-bg: #1b1b1b;
    --st-layout-bg: #181818;
    --st-panel-bg: #262329;
    --st-panel-bg-lighter: #312c35;
    --st-element-bg: #312c35;
    --st-element-bg-lighter: #4d4653;
    --st-border: #312c35;
    --st-border-strong: #3b363f;
    --st-accent: #c7ff24;
    --st-accent-hover: #ccff33;
    --st-accent-dark: #99cc00;
    --st-text: #ffffff;
    --st-text-muted: #a6a4b4;
    --st-text-reverse: #262329;
    --st-error: #f34b47;
    --st-success: #07cf70;
    --st-radius: 12px;
}

/* ----------------------------- Base ----------------------------- */
body {
    font-family: "Rubik", sans-serif !important;
    background: var(--st-main-bg) !important;
    color: var(--st-text) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--st-text);
}

a {
    color: var(--st-accent);
}
a:hover {
    color: var(--st-accent-hover);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--st-layout-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--st-border-strong);
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--st-element-bg-lighter);
}

/* --------------------------- Header ----------------------------- */
.layout .header {
    background: var(--st-layout-bg) !important;
    border-bottom: 1px solid var(--st-border);
}
.layout .header .logo {
    background: var(--st-layout-bg) !important;
    border-bottom: 1px solid var(--st-border);
}
.layout .header .nav-wrap,
.layout .header .nav-wrap * {
    color: var(--st-text);
}
.layout .header .nav-wrap .nav-icon i,
.layout .header .nav-wrap svg {
    color: var(--st-text-muted);
}
.layout .header .dropdown-menu {
    background: var(--st-panel-bg);
    border: 1px solid var(--st-border);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
.layout .header .dropdown-menu .dropdown-item {
    color: var(--st-text-muted);
}
.layout .header .dropdown-menu .dropdown-item:hover {
    background: var(--st-element-bg);
    color: var(--st-accent);
}

/* -------------------------- Side nav ---------------------------- */
.layout .side-nav {
    background-color: var(--st-layout-bg) !important;
    border-right: 1px solid var(--st-border);
}
.layout .side-nav .side-nav-menu .side-nav-item > a,
.layout .side-nav .side-nav-menu .side-nav-item > .dropdown-link {
    color: var(--st-text-muted);
}
.layout .side-nav .side-nav-menu .side-nav-item > a i,
.layout .side-nav .side-nav-menu .side-nav-item > a svg {
    color: var(--st-text-muted);
}
.layout .side-nav .side-nav-menu .side-nav-item > a:hover,
.layout .side-nav .side-nav-menu .side-nav-item.active > a,
.layout .side-nav .side-nav-menu .side-nav-item > .dropdown-link:hover {
    color: var(--st-accent);
    background: rgba(199, 255, 36, 0.08);
}
.layout .side-nav .side-nav-menu .side-nav-item.active > a i,
.layout .side-nav .side-nav-menu .side-nav-item > a:hover i {
    color: var(--st-accent);
}
.layout .side-nav .dropdown-items {
    background: rgba(0, 0, 0, 0.25) !important;
}
.layout .side-nav .dropdown-items .dropdown-link {
    color: var(--st-text-muted);
}
.layout .side-nav .dropdown-items .dropdown-link:hover,
.layout .side-nav .dropdown-items li.active .dropdown-link {
    color: var(--st-accent);
}

/* --------------------- Page content area ------------------------ */
.layout .page-container {
    background: var(--st-main-bg);
}
.page-container .main-content .page-title .title {
    color: var(--st-text);
}
.page-container .main-content .page-title .title-content .title-btn {
    background: var(--st-accent);
    color: var(--st-text-reverse);
}
.page-container .main-content .page-title .title-content .title-btn:hover {
    background: var(--st-accent-hover);
    color: var(--st-text-reverse);
}
.breadcrumb,
.breadcrumb .breadcrumb-item,
.breadcrumb a {
    color: var(--st-text-muted);
}

/* ---------------------------- Cards ----------------------------- */
.site-card {
    background: var(--st-panel-bg) !important;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}
.site-card .site-card-header {
    border-bottom: 1px solid var(--st-border);
}
.site-card .site-card-header .title,
.site-card .site-card-header .title-small {
    color: var(--st-text);
}
.site-card .site-card-body {
    color: var(--st-text);
}

/* dashboard summary / stat boxes that relied on white bg */
.summery-card,
.info-card,
.stat-card,
.dashboard-card,
.widget,
.card {
    background: var(--st-panel-bg) !important;
    border-color: var(--st-border) !important;
    color: var(--st-text);
}

/* ---------------------------- Tables ---------------------------- */
.site-table,
table.dataTable {
    color: var(--st-text);
    background: transparent;
}
.site-table thead th,
table.dataTable thead th {
    background: var(--st-element-bg);
    color: var(--st-text);
    border-color: var(--st-border) !important;
}
.site-table tbody td,
table.dataTable tbody td {
    border-color: var(--st-border) !important;
    color: var(--st-text-muted);
}
.site-table tbody tr:hover,
table.dataTable tbody tr:hover {
    background: rgba(199, 255, 36, 0.05);
}
.site-table tbody td strong,
.site-table tbody td b,
.site-table tbody td .name {
    color: var(--st-text);
}

/* ----------------------- Forms / inputs ------------------------- */
.box-input,
.box-input-label,
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
    background: var(--st-element-bg) !important;
    border: 1px solid var(--st-border-strong) !important;
    color: var(--st-text) !important;
}
.box-input::placeholder,
.form-control::placeholder,
textarea::placeholder,
input::placeholder {
    color: var(--st-text-muted);
    opacity: 0.7;
}
.box-input:focus,
.form-control:focus,
textarea:focus,
select:focus,
input:focus {
    border-color: var(--st-accent) !important;
    box-shadow: 0 0 0 2px rgba(199, 255, 36, 0.15) !important;
}
label,
.box-label,
.box-input-label,
.form-label {
    color: var(--st-text);
}

/* nice-select dropdown */
.nice-select {
    background: var(--st-element-bg) !important;
    border-color: var(--st-border-strong) !important;
    color: var(--st-text) !important;
}
.nice-select .list {
    background: var(--st-panel-bg) !important;
    border: 1px solid var(--st-border);
}
.nice-select .option {
    color: var(--st-text-muted);
}
.nice-select .option:hover,
.nice-select .option.selected,
.nice-select .option.focus {
    background: var(--st-element-bg) !important;
    color: var(--st-accent);
}

/* select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: var(--st-element-bg) !important;
    border-color: var(--st-border-strong) !important;
    color: var(--st-text) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--st-text) !important;
}
.select2-dropdown {
    background: var(--st-panel-bg) !important;
    border-color: var(--st-border) !important;
}
.select2-container--default .select2-results__option {
    color: var(--st-text-muted);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--st-element-bg) !important;
    color: var(--st-accent);
}
.select2-search--dropdown .select2-search__field {
    background: var(--st-element-bg) !important;
    color: var(--st-text) !important;
    border-color: var(--st-border-strong) !important;
}

/* ---------------------------- Buttons --------------------------- */
.primary-btn,
.title-btn,
button[type="submit"].site-btn,
.site-btn.primary-btn {
    background: var(--st-accent) !important;
    color: var(--st-text-reverse) !important;
    border: none;
    font-weight: 600;
}
.primary-btn:hover,
.title-btn:hover,
.site-btn.primary-btn:hover {
    background: var(--st-accent-hover) !important;
    color: var(--st-text-reverse) !important;
}
.site-btn,
.site-btn-sm,
.site-btn-xs {
    background: var(--st-element-bg);
    color: var(--st-text);
    border: 1px solid var(--st-border-strong);
}
.site-btn:hover,
.site-btn-sm:hover,
.site-btn-xs:hover {
    background: var(--st-element-bg-lighter);
    color: var(--st-text);
}
.danger-btn {
    background: var(--st-error) !important;
    color: #fff !important;
}

/* generic bootstrap buttons */
.btn-primary {
    background: var(--st-accent) !important;
    border-color: var(--st-accent) !important;
    color: var(--st-text-reverse) !important;
}
.btn-primary:hover {
    background: var(--st-accent-hover) !important;
    border-color: var(--st-accent-hover) !important;
}

/* --------------------------- Badges ----------------------------- */
.badge {
    border-radius: 6px;
}
.badge.bg-primary,
.badge-primary {
    background: var(--st-accent) !important;
    color: var(--st-text-reverse) !important;
}
.badge.bg-success,
.badge-success {
    background: rgba(7, 207, 112, 0.18) !important;
    color: var(--st-success) !important;
}
.badge.bg-danger,
.badge-danger {
    background: rgba(243, 75, 71, 0.18) !important;
    color: var(--st-error) !important;
}

/* ------------------- Dropdowns / modals ------------------------- */
.dropdown-menu {
    background: var(--st-panel-bg);
    border: 1px solid var(--st-border);
}
.dropdown-menu .dropdown-item {
    color: var(--st-text-muted);
}
.dropdown-menu .dropdown-item:hover {
    background: var(--st-element-bg);
    color: var(--st-accent);
}
.modal-content,
.site-table-modal .modal-content {
    background: var(--st-panel-bg);
    border: 1px solid var(--st-border);
    color: var(--st-text);
}
.modal-header,
.modal-footer {
    border-color: var(--st-border);
}
.site-table-modal .modal-header .title {
    color: var(--st-text);
}

/* tabs */
.nav-tabs {
    border-bottom: 1px solid var(--st-border);
}
.nav-tabs .nav-link {
    color: var(--st-text-muted);
}
.nav-tabs .nav-link.active {
    color: var(--st-accent);
    background: transparent;
    border-color: transparent transparent var(--st-accent);
}

/* ------------------------- Pagination --------------------------- */
.pagination .page-link {
    background: var(--st-element-bg);
    border-color: var(--st-border);
    color: var(--st-text-muted);
}
.pagination .page-item.active .page-link {
    background: var(--st-accent);
    border-color: var(--st-accent);
    color: var(--st-text-reverse);
}

/* accent helpers */
.text-primary {
    color: var(--st-accent) !important;
}
.bg-primary {
    background: var(--st-accent) !important;
    color: var(--st-text-reverse) !important;
}

/* =====================================================================
   Auth pages (login / forget / reset) — app.stater.pro/auth look
   ===================================================================== */
.admin-auth {
    background: var(--st-main-bg) !important;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(199, 255, 36, 0.12), transparent 38%),
        radial-gradient(circle at 85% 85%, rgba(199, 255, 36, 0.06), transparent 42%);
}

.admin-auth .login {
    background: var(--st-panel-bg) !important;
    border: 1px solid var(--st-border);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.admin-auth .login .side-img {
    position: relative;
    background-color: var(--st-layout-bg) !important;
    border-radius: 18px 0 0 18px;
}
.admin-auth .login .side-img::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px 0 0 18px;
    background: linear-gradient(160deg, rgba(199, 255, 36, 0.35), rgba(24, 24, 24, 0.85));
}
.admin-auth .login .side-img .title {
    position: relative;
    z-index: 2;
    background: transparent !important;
}
.admin-auth .login .side-img .title h3 {
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.admin-auth .login .login-content {
    background: var(--st-panel-bg);
}
.admin-auth .login .login-content .auth-body .single-box .box-label {
    color: var(--st-text);
}
.admin-auth .login .login-content .auth-body .single-box .box-input {
    background: var(--st-element-bg) !important;
    border: 1px solid var(--st-border-strong) !important;
    color: var(--st-text) !important;
    border-radius: 10px;
    height: 48px;
}
.admin-auth .login .login-content .auth-body .single-box .box-input:focus {
    border-color: var(--st-accent) !important;
    box-shadow: 0 0 0 3px rgba(199, 255, 36, 0.18) !important;
}
.admin-auth .login .login-content .auth-body .single-box .site-btn {
    background: var(--st-accent) !important;
    color: var(--st-text-reverse) !important;
    border-radius: 10px;
    height: 48px;
    border: none;
    font-weight: 700;
    letter-spacing: 0.4px;
}
.admin-auth .login .login-content .auth-body .single-box .site-btn:hover {
    background: var(--st-accent-hover) !important;
}
.admin-auth .login .login-content .auth-body .single-box .link {
    color: var(--st-text-muted);
}
.admin-auth .login .login-content .auth-body .single-box .link:hover {
    color: var(--st-accent);
}