/* =====================================================================
   ETP Jember — Soft Pink Theme (AdminLTE 3 / Bootstrap override)
   Loaded after adminlte.min.css so these rules win the cascade.
   ===================================================================== */

:root {
    --etp-primary:        #e75a9b;
    --etp-primary-dark:   #cf3f83;
    --etp-primary-light:  #fde7f1;
    --etp-primary-soft:   #fdf2f7;
    --etp-text:           #5b3346;
    --etp-border:         #f6cfe2;
}

/* ----------------------------- Base ------------------------------- */
body,
.content-wrapper,
.app-body,
.wrapper {
    background-color: var(--etp-primary-soft) !important;
}

body {
    font-family: 'Source Sans Pro', 'Segoe UI', system-ui, sans-serif;
    color: var(--etp-text);
}

/* --------------------------- Sidebar ------------------------------ */
.main-sidebar,
.sidebar-dark-primary {
    background: linear-gradient(180deg, #ffffff 0%, var(--etp-primary-light) 100%) !important;
    box-shadow: 0 0 22px rgba(207, 63, 131, .10);
}

.brand-link {
    background: #ffffff !important;
    border-bottom: 1px solid var(--etp-border) !important;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding-top: .9rem;
    padding-bottom: .9rem;
}
.brand-link .brand-image {
    float: none;
    margin: 0;
    max-height: 40px;
    box-shadow: none;
    opacity: 1;
}
.brand-link .brand-text {
    color: var(--etp-primary-dark) !important;
    font-weight: 800;
    letter-spacing: .3px;
}

/* user panel */
.user-panel {
    border-bottom: 1px solid var(--etp-border) !important;
}
.user-panel .info a,
.user-panel .info strong {
    color: var(--etp-text) !important;
}

/* menu items */
.sidebar-dark-primary .nav-sidebar .nav-link {
    color: var(--etp-text);
    border-radius: 10px;
    margin: 2px 8px;
    transition: all .15s ease;
}
.sidebar-dark-primary .nav-sidebar .nav-link p {
    font-weight: 600;
}
.sidebar-dark-primary .nav-sidebar .nav-link .nav-icon {
    color: var(--etp-primary);
}
.sidebar-dark-primary .nav-sidebar .nav-link:hover {
    background: var(--etp-primary-light) !important;
    color: var(--etp-primary-dark) !important;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark-primary .nav-sidebar .nav-treeview > .nav-item > .nav-link.active,
.nav-sidebar .nav-link.active {
    background: var(--etp-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(231, 90, 155, .35);
}
.nav-sidebar .nav-link.active .nav-icon {
    color: #fff !important;
}
.nav-sidebar .nav-treeview {
    background: transparent;
}

/* --------------------------- Top navbar --------------------------- */
.main-header.navbar {
    background: #ffffff !important;
    border-bottom: 2px solid var(--etp-primary-light) !important;
    box-shadow: 0 2px 10px rgba(207, 63, 131, .06);
}
.main-header .nav-link {
    color: var(--etp-primary-dark) !important;
}

/* ---------------------------- Buttons ----------------------------- */
.btn-primary {
    background-color: var(--etp-primary);
    border-color: var(--etp-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--etp-primary-dark) !important;
    border-color: var(--etp-primary-dark) !important;
    box-shadow: none;
}
.btn-outline-primary {
    color: var(--etp-primary);
    border-color: var(--etp-primary);
}
.btn-outline-primary:hover {
    background: var(--etp-primary);
    border-color: var(--etp-primary);
    color: #fff;
}

/* --------------------- Generic primary surfaces ------------------- */
.bg-primary { background-color: var(--etp-primary) !important; }
.text-primary { color: var(--etp-primary) !important; }
a { color: var(--etp-primary-dark); }
a:hover { color: var(--etp-primary); }
.page-item.active .page-link {
    background-color: var(--etp-primary);
    border-color: var(--etp-primary);
}
.page-link { color: var(--etp-primary-dark); }

/* ----------------------------- Cards ------------------------------ */
.card {
    border: none;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(207, 63, 131, .07);
}
.card-header {
    background: #ffffff;
    border-bottom: 1px solid var(--etp-primary-light);
    border-radius: 14px 14px 0 0 !important;
}
.card-title { color: var(--etp-primary-dark); font-weight: 700; }
.card-primary.card-outline { border-top: 3px solid var(--etp-primary) !important; }
.card-primary:not(.card-outline) > .card-header {
    background: var(--etp-primary);
    color: #fff;
}
.card-primary:not(.card-outline) > .card-header .card-title { color: #fff; }

/* ----------------------------- Tables ----------------------------- */
.table thead.table-dark th,
.table .thead-dark th,
.table-dark,
.table-dark th,
.table-dark td {
    background-color: var(--etp-primary) !important;
    border-color: var(--etp-primary-dark) !important;
    color: #fff !important;
}
.table-hover tbody tr:hover {
    background-color: var(--etp-primary-light);
}

/* ----------------------------- Forms ------------------------------ */
.form-control:focus,
.form-select:focus,
.custom-select:focus {
    border-color: var(--etp-primary);
    box-shadow: 0 0 0 .2rem rgba(231, 90, 155, .20);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default .select2-selection--single:focus {
    border-color: var(--etp-primary);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--etp-primary);
}

/* --------------------- Dashboard small boxes ---------------------- */
.small-box { border-radius: 14px; overflow: hidden; }
.small-box > .icon { opacity: .25; }

/* --------------------------- Breadcrumb --------------------------- */
.breadcrumb { background: transparent; }
.breadcrumb-item a { color: var(--etp-primary-dark); }
.breadcrumb-item.active { color: var(--etp-text); }

/* ----------------------------- Footer ----------------------------- */
.main-footer {
    border-top: 2px solid var(--etp-primary-light);
    color: var(--etp-text);
    background: #ffffff;
}
.main-footer a, .main-footer strong a { color: var(--etp-primary-dark); }

/* ----------------------------- Login ------------------------------ */
.login-page, .register-page {
    background: linear-gradient(135deg, var(--etp-primary-light) 0%, #ffffff 55%, var(--etp-primary-soft) 100%) !important;
}
.login-box { width: 400px; max-width: 94%; }
.login-box .card {
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(207, 63, 131, .20);
}
.login-box .card-header { border-radius: 18px 18px 0 0 !important; }
.login-box .card-primary.card-outline { border-top: 4px solid var(--etp-primary); }
.login-box .card-header a,
.login-logo a { color: var(--etp-primary-dark) !important; }
.login-box .input-group-text {
    background: var(--etp-primary-light);
    border-color: var(--etp-primary-light);
    color: var(--etp-primary-dark);
}
.icheck-primary > input:first-child:checked + label::before {
    background-color: var(--etp-primary);
    border-color: var(--etp-primary);
}

/* --------------------------- Scrollbar ---------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--etp-primary-light); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--etp-primary); }

/* ----------------------- Mobile responsive ------------------------ */
@media (max-width: 991.98px) {
    .content-header h1, .content-header h4 { font-size: 1.2rem; }
}
@media (max-width: 768px) {
    .brand-link .brand-text { font-size: 1rem; }
    .brand-link .brand-image { max-height: 34px; }
    .card-body { padding: .85rem; }
    .small-box h3 { font-size: 1.6rem; }
    .table-responsive { border-radius: 10px; }
    .content-header { padding: .6rem .5rem; }
    .login-box .card-body { padding: 1.1rem; }
}
@media (max-width: 576px) {
    .small-box .icon { display: none; }
    .content-wrapper, .app-body { font-size: .95rem; }
    h1.m-0, .content-header h1 { font-size: 1.1rem; }
    .btn { padding: .35rem .6rem; }
}
