/* ===================================================================
   THEME OVERRIDE: Emerald & Gold
   Recolor + modernize the legacy Bootswatch (orange) / navy inline
   theme to a clean, education/pesantren-toned Emerald & Gold palette.
   Loaded after app.css / bootstrap2.min.css / custom.css so plain
   rules win by source order; !important is used only where a rule
   must also beat the inline <style> block in the layout head (which
   loads after this file) or an inline style="" attribute in markup.
   =================================================================== */

:root {
    --brand-primary: #059669;
    --brand-primary-dark: #047857;
    --brand-primary-darker: #065f46;
    --brand-primary-light: #d1fae5;
    --brand-accent: #d97706;
    --brand-accent-dark: #b45309;
    --brand-accent-light: #fef3c7;
    --info: #0e7490;
    --info-dark: #155e75;
    --info-light: #cffafe;
    --danger: #dc2626;
    --danger-dark: #b91c1c;
    --danger-light: #fee2e2;
    --neutral: #64748b;
    --neutral-dark: #475569;
    --neutral-light: #f1f5f9;
    --surface: #f8fafc;
    --surface-border: #e2e8f0;
    --text-body: #1e293b;
    --text-muted: #64748b;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 2px 6px rgba(15, 23, 42, 0.08);
    --shadow-hover: 0 4px 10px rgba(15, 23, 42, 0.12);
}

/* ---------- Base / typography ---------- */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-body);
    background: var(--surface) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-body);
    font-weight: 600;
}

small,
.small,
.text-muted {
    color: var(--text-muted) !important;
}

a {
    color: var(--brand-primary);
}
a:hover,
a:focus {
    color: var(--brand-primary-dark);
}

/* ---------- Buttons ---------- */

.btn {
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s ease, transform 0.05s ease;
}
.btn:hover {
    box-shadow: var(--shadow-hover);
}
.btn:active,
.btn.active {
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.18);
    transform: translateY(1px);
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
    box-shadow: none;
    transform: none;
    opacity: 0.55;
}

.btn-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary-dark) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--brand-primary-dark) !important;
    border-color: var(--brand-primary-darker) !important;
}
.btn-primary:active,
.btn-primary.active {
    background-color: var(--brand-primary-darker) !important;
    border-color: var(--brand-primary-darker) !important;
}

.btn-success {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary-dark) !important;
}
.btn-success:hover,
.btn-success:focus {
    background-color: var(--brand-primary-dark) !important;
    border-color: var(--brand-primary-darker) !important;
}
.btn-success:active,
.btn-success.active {
    background-color: var(--brand-primary-darker) !important;
}

.btn-warning {
    background-color: var(--brand-accent) !important;
    border-color: var(--brand-accent-dark) !important;
    color: #fff !important;
}
.btn-warning:hover,
.btn-warning:focus {
    background-color: var(--brand-accent-dark) !important;
}
.btn-warning:active,
.btn-warning.active {
    background-color: #92400e !important;
}

.btn-default {
    background-color: #fff !important;
    border-color: var(--surface-border) !important;
    color: var(--text-body) !important;
}
.btn-default:hover,
.btn-default:focus {
    background-color: var(--neutral-light) !important;
    border-color: #cbd5e1 !important;
}
.btn-default:active,
.btn-default.active {
    background-color: #e2e8f0 !important;
}

.btn-info {
    background-color: var(--info) !important;
    border-color: var(--info-dark) !important;
    color: #fff !important;
}
.btn-info:hover,
.btn-info:focus {
    background-color: var(--info-dark) !important;
}
.btn-info:active,
.btn-info.active {
    background-color: #164e63 !important;
}

.btn-danger {
    background-color: var(--danger) !important;
    border-color: var(--danger-dark) !important;
    color: #fff !important;
}
.btn-danger:hover,
.btn-danger:focus {
    background-color: var(--danger-dark) !important;
}
.btn-danger:active,
.btn-danger.active {
    background-color: #991b1b !important;
}

/* ---------- Labels / badges ---------- */

.label-primary {
    background-color: var(--brand-primary) !important;
}
.label-success {
    background-color: var(--brand-primary) !important;
}
.label-warning {
    background-color: var(--brand-accent) !important;
}
.label-info {
    background-color: var(--info) !important;
}
.label-danger {
    background-color: var(--danger) !important;
}
.badge {
    background-color: var(--brand-primary);
}

/* labels are sometimes wrapped in <a> as clickable filter/status chips */
a:hover > .label-primary,
a:hover > .label-success {
    background-color: var(--brand-primary-darker) !important;
}
a:hover > .label-warning {
    background-color: var(--brand-accent-dark) !important;
}
a:hover > .label-info {
    background-color: var(--info-dark) !important;
}
a:hover > .label-danger {
    background-color: var(--danger-dark) !important;
}

/* ---------- Panels / cards ---------- */

.panel {
    border-radius: 8px;
    border-color: var(--surface-border);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.panel-primary {
    border-color: var(--brand-primary) !important;
}
.panel-primary > .panel-heading {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary-dark) !important;
    color: #fff !important;
}
.panel-primary > .panel-heading a {
    color: #fff;
}
.panel-primary > .panel-heading a:hover {
    color: var(--brand-primary-light);
}

.panel-success {
    border-color: var(--brand-primary) !important;
}
.panel-success > .panel-heading {
    background-color: var(--brand-primary-light) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-primary-darker) !important;
}
.panel-success > .panel-heading a {
    color: var(--brand-primary-darker);
}
.panel-success > .panel-heading a:hover {
    color: var(--brand-primary-dark);
}

.panel-warning {
    border-color: var(--brand-accent) !important;
}
.panel-warning > .panel-heading {
    background-color: var(--brand-accent-light) !important;
    border-color: var(--brand-accent) !important;
    color: var(--brand-accent-dark) !important;
}
.panel-warning > .panel-heading a {
    color: var(--brand-accent-dark);
}
.panel-warning > .panel-heading a:hover {
    color: #78350f;
}

.panel-info {
    border-color: var(--info) !important;
}
.panel-info > .panel-heading {
    background-color: var(--info-light) !important;
    border-color: var(--info) !important;
    color: var(--info-dark) !important;
}
.panel-info > .panel-heading a {
    color: var(--info-dark);
}
.panel-info > .panel-heading a:hover {
    color: #164e63;
}

.panel-danger {
    border-color: var(--danger) !important;
}
.panel-danger > .panel-heading {
    background-color: var(--danger-light) !important;
    border-color: var(--danger) !important;
    color: var(--danger-dark) !important;
}
.panel-danger > .panel-heading a {
    color: var(--danger-dark);
}
.panel-danger > .panel-heading a:hover {
    color: #7f1d1d;
}

.panel-blue {
    border: 5px solid var(--brand-primary) !important;
}

.panel-default > .panel-heading {
    background-color: var(--surface);
    border-color: var(--surface-border);
}

/* ---------- Navbar ---------- */

.navbar-default {
    background-color: var(--brand-primary-darker) !important;
    border-color: var(--brand-primary-darker) !important;
}
.navbar-default .navbar-nav > li > a {
    color: #f0fdf4;
    border-bottom: 3px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #fff;
    background-color: var(--brand-primary-dark);
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #fff;
    background-color: var(--brand-primary-dark);
    border-bottom-color: var(--brand-accent);
}
.navbar {
    /* border-bottom: 5px solid var(--brand-accent) !important; */
    min-height: 70px;
}
.navbar-brand {
    height: auto;
    padding-top: 22px;
    padding-bottom: 22px;
    font-size: 18px;
    font-weight: 600;
}
.navbar-nav > li > a {
    padding-top: 24px;
    padding-bottom: 24px;
}
.navbar-toggle {
    margin-top: 18px;
    margin-bottom: 18px;
}

/* ---------- Forms / input-group / bootstrap-select ---------- */

.form-control {
    border-radius: 6px;
    border-color: var(--surface-border);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05), 0 0 0 3px var(--brand-primary-light) !important;
}
.form-control:disabled,
.form-control[readonly] {
    background-color: var(--neutral-light);
}

.checkbox input[type="checkbox"]:checked ~ label::before,
.radio input[type="radio"]:checked ~ label::before {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.input-group-addon {
    border-radius: 6px;
    background-color: var(--neutral-light);
    border-color: var(--surface-border);
    color: var(--text-muted);
}

/* bootstrap-select plugin renders a .btn.dropdown-toggle standing in for <select> */
.bootstrap-select > .btn {
    border-radius: 6px;
    border-color: var(--surface-border);
    background-color: #fff;
    box-shadow: var(--shadow-sm);
}
.bootstrap-select > .btn:hover,
.bootstrap-select > .btn:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-light);
}
.bootstrap-select .dropdown-menu > li > a:hover,
.bootstrap-select .dropdown-menu > li.active > a {
    background-color: var(--brand-primary-light) !important;
    color: var(--brand-primary-darker) !important;
}

/* ---------- Dropdown / button-group ---------- */

.dropdown-menu {
    border-radius: 8px;
    border-color: var(--surface-border);
    box-shadow: var(--shadow-md);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: var(--brand-primary-light);
    color: var(--brand-primary-darker);
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}

.btn-group.open .dropdown-toggle {
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.18) !important;
}
.btn-group .btn + .btn {
    border-left-color: rgba(255, 255, 255, 0.25);
}

/* ---------- Tables ---------- */

.table > tbody > tr > td,
.table > tfoot > tr > td {
    vertical-align: middle;
}

.table > thead > tr > th {
    background-color: var(--neutral-light);
    color: var(--text-muted);
    text-align: center;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-bottom-width: 2px;
    border-color: #e2e8f0;
    padding-top: 12px;
    padding-bottom: 12px;
}
.table > thead > tr > th:first-child {
    border-top-left-radius: 8px;
}
.table > thead > tr > th:last-child {
    border-top-right-radius: 8px;
}

.table > tbody > tr > td {
    color: var(--text-body);
    border-color: var(--surface-border);
    padding-top: 12px;
    padding-bottom: 12px;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--surface);
}

.table-hover > tbody > tr:hover {
    background-color: var(--brand-primary-light);
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
    border-color: var(--surface-border);
}

.table-responsive {
    border-radius: 8px;
    border-color: var(--surface-border);
}

/* ---------- Modal ---------- */

.modal-content {
    border-radius: 10px;
    border: none;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}
.modal-header {
    border-bottom-color: var(--surface-border);
}
.modal-footer {
    border-top-color: var(--surface-border);
}

/* ---------- List-group / well / thumbnail ---------- */

.list-group-item {
    border-color: var(--surface-border);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.list-group-item:hover {
    background-color: var(--surface);
    box-shadow: var(--shadow-sm);
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary-dark) !important;
    color: #fff !important;
}

.well {
    border-radius: 8px;
    background-color: var(--surface);
    border-color: var(--surface-border);
    box-shadow: none;
}

.thumbnail {
    border-radius: 8px;
    border-color: var(--surface-border);
    transition: box-shadow 0.15s ease;
}
.thumbnail:hover {
    box-shadow: var(--shadow-hover);
}

/* ---------- Pagination / progress / alerts ---------- */

.pagination {
    gap: 4px;
}
.pagination > li {
    margin: 0 2px;
}
.pagination > li > a,
.pagination > li > span {
    color: var(--brand-primary);
    border-radius: 6px !important;
    border-color: var(--surface-border);
    margin-left: 0;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.pagination > li > a:hover,
.pagination > li > a:focus {
    background-color: var(--brand-primary-light);
    border-color: var(--brand-primary-light);
    color: var(--brand-primary-darker);
    box-shadow: var(--shadow-sm);
}
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary-dark) !important;
    box-shadow: var(--shadow-sm);
}
.pagination > .disabled > a,
.pagination > .disabled > span {
    border-color: var(--surface-border);
}

.progress-bar {
    background-color: var(--brand-primary);
}
.progress-bar-warning {
    background-color: var(--brand-accent);
}
.progress-bar-info {
    background-color: var(--info);
}
.progress-bar-danger {
    background-color: var(--danger);
}

.alert {
    border-radius: 8px;
}
.alert-success {
    background-color: var(--brand-primary-light);
    border-color: var(--brand-primary);
    color: var(--brand-primary-darker);
}
.alert-success .close {
    color: var(--brand-primary-darker);
    opacity: 0.6;
}
.alert-success .close:hover {
    opacity: 1;
}

.alert-warning {
    background-color: var(--brand-accent-light);
    border-color: var(--brand-accent);
    color: var(--brand-accent-dark);
}
.alert-warning .close {
    color: var(--brand-accent-dark);
    opacity: 0.6;
}
.alert-warning .close:hover {
    opacity: 1;
}

.alert-info {
    background-color: var(--info-light);
    border-color: var(--info);
    color: var(--info-dark);
}
.alert-info .close {
    color: var(--info-dark);
    opacity: 0.6;
}
.alert-info .close:hover {
    opacity: 1;
}

.alert-danger {
    background-color: var(--danger-light);
    border-color: var(--danger);
    color: var(--danger-dark);
}
.alert-danger .close {
    color: var(--danger-dark);
    opacity: 0.6;
}
.alert-danger .close:hover {
    opacity: 1;
}