/* ==========================================================================
   SSPALM Admin Dashboard — Modern design layer
   Loaded after portal-bootstrap-dashboard.css / demo.css. Overrides visual
   styling only — does not change any markup structure or JS behaviour.
   ========================================================================== */

:root {
    --sspalm-primary: #0b3d5c;
    --sspalm-primary-dark: #082a40;
    --sspalm-primary-light: #135a83;
    --sspalm-accent: #c8963e;
    --sspalm-ink: #1c2833;
    --sspalm-muted: #64748b;
    --sspalm-surface: #f5f7fa;
    --sspalm-border: #e6eaee;
    --sspalm-danger: #d64545;
    --sspalm-success: #1a8f5a;
    --sspalm-radius: 12px;
    --sspalm-shadow: 0 6px 20px -8px rgba(11, 61, 92, 0.18);
}

body {
    background: var(--sspalm-surface) !important;
    color: var(--sspalm-ink);
}

/* ---------- Sidebar ---------- */
.sidebar {
    background: linear-gradient(180deg, var(--sspalm-primary-dark), var(--sspalm-primary)) !important;
    box-shadow: var(--sspalm-shadow);
}
.sidebar .sidebar-wrapper {
    background: transparent !important;
}
.sidebar .logo {
    padding: 1.5rem 1rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    margin-bottom: .5rem;
}
.sidebar p[align="center"] {
    color: rgba(255, 255, 255, .75);
    font-size: .85rem;
    margin-bottom: 1rem;
}
.sidebar .nav .nav-item .nav-link {
    border-radius: 8px;
    margin: 2px 12px;
    color: rgba(255, 255, 255, .82);
    transition: background .2s ease, color .2s ease;
}
.sidebar .nav .nav-item .nav-link:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}
.sidebar .nav .nav-item.active .nav-link {
    background: var(--sspalm-accent) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px -4px rgba(200, 150, 62, .6);
}
.sidebar .nav .nav-item .nav-link i {
    color: inherit;
}

/* ---------- Top navbar ---------- */
.navbar {
    background: #fff !important;
    box-shadow: 0 2px 10px -4px rgba(11, 61, 92, .12);
    border-radius: 0 0 var(--sspalm-radius) var(--sspalm-radius);
}

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--sspalm-border);
    border-radius: var(--sspalm-radius);
    box-shadow: var(--sspalm-shadow);
}
.card .card-header {
    background: #fff;
    border-bottom: 1px solid var(--sspalm-border);
    border-radius: var(--sspalm-radius) var(--sspalm-radius) 0 0;
    padding: 1.25rem 1.5rem;
}
.card .card-header h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--sspalm-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.card .card-body {
    padding: 1.5rem;
}

/* ---------- Section labels (replace inline red h3 labels) ---------- */
.sspalm-field-label {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--sspalm-primary);
    margin-bottom: .4rem;
    display: block;
}
.sspalm-field-label.lang-ar {
    color: var(--sspalm-accent);
}

/* ---------- Forms ---------- */
.form-group {
    margin-bottom: 1.1rem;
}
.form-control,
textarea.form-control {
    border: 1px solid var(--sspalm-border);
    border-radius: 8px;
    padding: .55rem .8rem;
}
.form-control:focus {
    border-color: var(--sspalm-primary-light);
    box-shadow: 0 0 0 .2rem rgba(11, 61, 92, .12);
}
input[type="file"].form-control {
    padding: .4rem .6rem;
}

.sspalm-form-card {
    background: var(--sspalm-surface);
    border: 1px solid var(--sspalm-border);
    border-radius: var(--sspalm-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.sspalm-form-card h4 {
    font-weight: 700;
    color: var(--sspalm-primary);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.btn-primary {
    background: var(--sspalm-primary) !important;
    border-color: var(--sspalm-primary) !important;
    border-radius: 8px;
    font-weight: 600;
    padding: .6rem 1.6rem;
}
.btn-primary:hover {
    background: var(--sspalm-primary-light) !important;
    border-color: var(--sspalm-primary-light) !important;
}
.btn-default {
    background: var(--sspalm-primary) !important;
    border-color: var(--sspalm-primary) !important;
    color: #fff !important;
    border-radius: 8px;
    font-weight: 600;
    padding: .6rem 1.8rem;
}
.btn-default:hover {
    background: var(--sspalm-primary-light) !important;
    color: #fff !important;
}
.btn-danger {
    border-radius: 8px;
    font-weight: 600;
}
.sspalm-create-btn {
    background: var(--sspalm-accent) !important;
    border-color: var(--sspalm-accent) !important;
    color: #fff !important;
    border-radius: 8px;
    font-weight: 600;
    padding: .55rem 1.4rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.sspalm-create-btn:hover {
    filter: brightness(0.92);
    color: #fff !important;
}

/* ---------- Alerts ---------- */
.alert {
    border-radius: 10px;
    border: none;
}
.alert-success {
    background: #e6f4ec;
    color: var(--sspalm-success);
}
.alert-danger {
    background: #fbe9e9;
    color: var(--sspalm-danger);
}

/* ---------- Tables ---------- */
.table-bordered {
    border: 1px solid var(--sspalm-border);
    border-radius: var(--sspalm-radius);
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}
.table-bordered thead tr,
.table-bordered tr:first-child {
    background: var(--sspalm-primary) !important;
}
.table-bordered th {
    color: #fff !important;
    font-weight: 600;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .3px;
    border: none !important;
    padding: .9rem .75rem;
}
.table-bordered td {
    vertical-align: middle;
    padding: .75rem;
    border-color: var(--sspalm-border) !important;
    font-size: .9rem;
}
.table-bordered tbody tr:hover {
    background: var(--sspalm-surface);
}
.table-bordered img {
    border-radius: 8px;
    object-fit: cover;
    max-width: 90px;
    max-height: 90px;
}
.sspalm-empty-row td {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--sspalm-muted);
}

/* ---------- Pagination ---------- */
.pagination .page-link {
    color: var(--sspalm-primary);
    border-radius: 6px;
    margin: 0 2px;
    border: 1px solid var(--sspalm-border);
}
.pagination .page-item.active .page-link {
    background: var(--sspalm-primary);
    border-color: var(--sspalm-primary);
}

/* ---------- Misc cleanup ---------- */
.pull-left, .pull-right {
    /* legacy empty wrapper divs from the base template — neutralised */
    min-height: 0;
}