/* ============================================================
   Meherbaan Admin Portal — Global Theme (Teal / Green)
   Loaded on every page via config/adminlte.php (plugin: MeherbaanTheme)
   Non-destructive polish layer on top of AdminLTE 3 / Bootstrap 4.
   ============================================================ */

:root {
    --mb-primary: #38040e;        /* maroon: Dark sienna */
    --mb-primary-dark: #350a06;   /* Dark maroon */
    --mb-primary-darker: #170000; /* Darker Maroon */
    --mb-primary-light: #cb7169;  /* Light-maroon */
    --mb-accent: #16a34a;         /* green-600 */
    --mb-accent-light: #22c55e;
    --mb-ink: #991B1B;            /* red-800*/
    --mb-muted: #6b7280;
    --mb-bg: #F3F4F6;             /*gray-100*/
    --mb-card-radius: 14px;
    --mb-shadow: 0 1px 3px rgba(16,24,40,.06), 0 6px 18px rgba(16,24,40,.06);
    --mb-shadow-sm: 0 1px 2px rgba(16,24,40,.06);
}

/* ---------- Base ---------- */
body, .content-wrapper {
    background-color: var(--mb-bg) !important;
    color: var(--mb-ink);
}
a { color: var(--mb-primary-dark); }
a:hover { color: var(--mb-primary-darker); }

.content-header h1 {
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--mb-ink);
}

/* ---------- Sidebar ---------- */
.main-sidebar.sidebar-dark-primary,
.main-sidebar {
    /*background: linear-gradient(180deg, #0b3d39 0%, #0f4f49 100%) !important;*/
    background: var(--mb-primary-dark) !important;
    box-shadow: 2px 0 16px rgba(0,0,0,.08);
}
.brand-link {
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    background: rgba(0,0,0,.12) !important;
    font-weight: 700;
    letter-spacing: .02em;
}
.brand-link .brand-text { color: #ffffff !important; }
.sidebar .nav-sidebar .nav-link {
    color: #cfe9e5;
    border-radius: 10px;
    margin: 2px 8px;
    transition: background .15s ease, color .15s ease;
}
.sidebar .nav-sidebar .nav-link:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}
.sidebar .nav-sidebar .nav-link.active {
    background: linear-gradient(90deg, var(--mb-primary) 0%, var(--mb-primary-light) 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(13,148,136,.35);
}
.nav-sidebar .nav-header {
    color: #8fc8c1 !important;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .08em;
}

/* ---------- Top navbar ---------- */
.main-header.navbar {
    background: #ffffff !important;
    border-bottom: 1px solid #e7edec !important;
    box-shadow: var(--mb-shadow-sm);
}
.main-header .nav-link { color: var(--mb-ink) !important; }

/* ---------- Cards ---------- */
.card {
    border: none;
    border-radius: var(--mb-card-radius);
    box-shadow: var(--mb-shadow);
    margin-bottom: 1.25rem;
}
.card-header {
    background: #fff;
    border-bottom: 1px solid #eef2f1;
    border-radius: var(--mb-card-radius) var(--mb-card-radius) 0 0 !important;
    font-weight: 600;
}
.card-header .card-title { font-weight: 600; color: var(--mb-ink); }
.card.card-primary:not(.card-outline) > .card-header { background: var(--mb-primary); }
.card-primary.card-outline { border-top: 3px solid var(--mb-primary); }

/* ---------- Small boxes / KPI ---------- */
.small-box {
    border-radius: var(--mb-card-radius);
    box-shadow: var(--mb-shadow);
    overflow: hidden;
}
.small-box > .inner h3 { font-weight: 700; font-size: 2.1rem; }
.small-box .icon > i { opacity: .28; }
.small-box.bg-info     { background: linear-gradient(135deg,#0d9488,#14b8a6)!important; }
.small-box.bg-success  { background: linear-gradient(135deg,#16a34a,#22c55e)!important; }
.small-box.bg-warning  { background: linear-gradient(135deg,#d97706,#f59e0b)!important; color:#fff!important; }
.small-box.bg-warning .inner { color:#fff; }
.small-box.bg-primary  { background: linear-gradient(135deg,#0f766e,#0d9488)!important; }
.small-box.bg-danger   { background: linear-gradient(135deg,#be123c,#e11d48)!important; }
.small-box.bg-secondary{ background: linear-gradient(135deg,#475569,#64748b)!important; }

/* ---------- Buttons ---------- */
.btn { border-radius: 9px; font-weight: 500; }
.btn-primary {
    background: var(--mb-primary); border-color: var(--mb-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--mb-primary-dark); border-color: var(--mb-primary-dark);
    box-shadow: 0 4px 12px rgba(13,148,136,.3);
}
.btn-success { background: var(--mb-accent); border-color: var(--mb-accent); }
.btn-success:hover { background:#15803d; border-color:#15803d; }
.btn-outline-primary { color: var(--mb-primary-dark); border-color: var(--mb-primary); }
.btn-outline-primary:hover { background: var(--mb-primary); border-color: var(--mb-primary); }

/* ---------- Badges ---------- */
.badge { border-radius: 7px; font-weight: 600; padding: .4em .6em; }
.badge.bg-success, .badge-success { background: var(--mb-accent)!important; }
.badge.bg-primary, .badge-primary { background: var(--mb-primary)!important; }

/* ---------- Tables ---------- */
.table thead th {
    background: #f0f7f6;
    color: var(--mb-primary-darker);
    border-bottom: 2px solid #d8e8e6 !important;
    text-transform: uppercase;
    font-size: .76rem;
    letter-spacing: .04em;
}
.table-striped tbody tr:nth-of-type(odd) { background-color: #fafcfc; }
.table-hover tbody tr:hover { background-color: #f0f9f8; }
.table td, .table th { vertical-align: middle; }

/* ---------- Forms ---------- */
.form-control { border-radius: 9px; border-color: #e2e8e6; }
.form-control:focus {
    border-color: var(--mb-primary-light);
    box-shadow: 0 0 0 .2rem rgba(13,148,136,.15);
}
.custom-select:focus { border-color: var(--mb-primary-light); box-shadow: 0 0 0 .2rem rgba(13,148,136,.15); }

/* ---------- Pagination ---------- */
.page-item.active .page-link { background: var(--mb-primary); border-color: var(--mb-primary); }
.page-link { color: var(--mb-primary-dark); }

/* ---------- Misc ---------- */
.text-primary { color: var(--mb-primary-dark)!important; }
.bg-primary { background-color: var(--mb-primary)!important; }
.alert-success { background:#e7f7ef; border-color:#bce8d2; color:#176c43; }
.progress { border-radius: 20px; background:#e9efee; height: 12px; }
.progress-bar { background: linear-gradient(90deg,var(--mb-primary),var(--mb-primary-light)); }

/* ---------- Login / auth ---------- */
.login-page, .register-page {
    background: linear-gradient(135deg,#0b3d39,#0d9488) !important;
}
.login-card-body, .register-card-body { border-radius: 14px; }
.login-logo a, .register-logo a { color:#fff; font-weight:700; }

/* ---------- Dashboard chart helpers ---------- */
.mb-chart-box { position: relative; width: 100%; }
.mb-chart-box.h-180 { height: 180px; }
.mb-chart-box.h-240 { height: 240px; }
.mb-chart-box.h-300 { height: 300px; }
.mb-stat-label { font-size:.78rem; color: var(--mb-muted); text-transform:uppercase; letter-spacing:.04em; }
.mb-campaign-row { margin-bottom: .9rem; }
.mb-campaign-row .d-flex { font-size:.86rem; }

/* ============================================================
   POLISH LAYER v2 — prettier tables, buttons & badges (global)
   Appended last so it wins over earlier rules.
   ============================================================ */

/* ---------- Tables: card-wrapped, airy, modern ---------- */
.table {
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border-radius: var(--mb-card-radius);
    overflow: hidden;
}
/* A table sitting directly in a card body shouldn't double-round/scroll awkwardly */
.card-body > .table-responsive { border-radius: 12px; }

.table thead th {
    background: linear-gradient(180deg,#f7fbfa,#eef6f4) !important;
    color: #5b1720 !important;
    border-top: none !important;
    border-bottom: 1px solid #e3edeb !important;
    padding: .85rem 1rem;
    white-space: nowrap;
}
/* Sticky header only inside scrollable wrappers (won't overlap page content) */
.table-responsive { max-height: none; }
.table-responsive.sticky-head { max-height: 70vh; overflow: auto; }
.table-responsive.sticky-head .table thead th { position: sticky; top: 0; z-index: 2; }
.table tbody td {
    padding: .8rem 1rem;
    border-top: 1px solid #f1f5f4 !important;
    color: #374151;
}
.table tbody tr { transition: background .12s ease, box-shadow .12s ease; }
.table-hover tbody tr:hover {
    background-color: #f3faf9 !important;
    box-shadow: inset 3px 0 0 var(--mb-primary-light);
}
.table-striped tbody tr:nth-of-type(odd) { background-color: #fcfdfd; }
.table tbody tr:last-child td { border-bottom: none; }
/* First/last cell breathing room */
.table thead th:first-child, .table tbody td:first-child { padding-left: 1.25rem; }
.table thead th:last-child,  .table tbody td:last-child  { padding-right: 1.25rem; }

/* Compact tables (table-sm) keep the polish but tighter */
.table-sm thead th, .table-sm tbody td { padding: .55rem .7rem; }

/* Make DataTables toolbars match the theme */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #e2e8e6; border-radius: 8px; padding: .35rem .6rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--mb-primary) !important; border-color: var(--mb-primary) !important;
    color: #fff !important; border-radius: 8px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
}

/* ---------- Buttons: refined, with lift + focus ring ---------- */
.btn {
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: .01em;
    padding: .45rem .9rem;
    transition: transform .08s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus, .btn.focus { box-shadow: 0 0 0 .2rem rgba(203,113,105,.35); }

.btn-sm { border-radius: 8px; padding: .28rem .6rem; font-size: .8rem; }
.btn-lg { border-radius: 12px; }

.btn-primary:hover, .btn-primary:focus {
    box-shadow: 0 6px 16px rgba(56,4,14,.28);
}
.btn-success:hover { box-shadow: 0 6px 16px rgba(22,163,74,.28); }
.btn-danger  { background:#e11d48; border-color:#e11d48; }
.btn-danger:hover  { background:#be123c; border-color:#be123c; box-shadow:0 6px 16px rgba(225,29,72,.28); }
.btn-warning { background:#f59e0b; border-color:#f59e0b; color:#fff; }
.btn-warning:hover { background:#d97706; border-color:#d97706; color:#fff; box-shadow:0 6px 16px rgba(245,158,11,.28); }
.btn-info    { background:#0ea5b7; border-color:#0ea5b7; color:#fff; }
.btn-info:hover    { background:#0e8a99; border-color:#0e8a99; color:#fff; }
.btn-secondary { background:#64748b; border-color:#64748b; }
.btn-outline-danger  { color:#e11d48; border-color:#e11d48; }
.btn-outline-danger:hover  { background:#e11d48; color:#fff; }
.btn-outline-success { color:#16a34a; border-color:#16a34a; }
.btn-outline-success:hover { background:#16a34a; color:#fff; }

/* Action-column buttons: even spacing + no wrap crush */
td .btn + .btn, td .btn + a.btn, .btn-group-actions .btn { margin-left: .35rem; }
td.col-actions .btn, td.text-nowrap .btn { margin: 2px; }

/* ---------- Badges: pill status chips ---------- */
.badge {
    border-radius: 999px;
    padding: .38em .7em;
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .02em;
}
.badge.bg-danger,  .badge-danger  { background:#e11d48 !important; }
.badge.bg-warning, .badge-warning { background:#f59e0b !important; color:#fff !important; }
.badge.bg-info,    .badge-info    { background:#0ea5b7 !important; color:#fff !important; }
.badge.bg-secondary, .badge-secondary { background:#94a3b8 !important; }
/* soft/tinted variant if a view uses .badge-soft-* */
.badge-soft-success { background:#dcfce7; color:#166534; }
.badge-soft-danger  { background:#fee2e2; color:#991b1b; }
.badge-soft-warning { background:#fef3c7; color:#92400e; }

/* ---------- Toggle status chip (used on user tables) ---------- */
.toggle-status { cursor:pointer; box-shadow: var(--mb-shadow-sm); }

/* ---------- Card header title row spacing ---------- */
.card-header { padding: .9rem 1.25rem; }
.card-body { padding: 1.15rem 1.25rem; }

/* ---------- Alerts: softer, rounded ---------- */
.alert { border-radius: 12px; border: none; box-shadow: var(--mb-shadow-sm); }
.alert-danger  { background:#fdecef; color:#9f1239; }
.alert-warning { background:#fff7ed; color:#9a3412; }
.alert-info    { background:#ecfeff; color:#155e75; }

/* ============================================================
   Charts: never let a Chart.js canvas blow up (aspect-ratio bug).
   This caps EVERY chart across the portal, so an unconstrained
   canvas can't render as giant lines/"arrows".
   ============================================================ */
canvas { max-height: 300px !important; max-width: 100% !important; }
.card-body > canvas { display: block; }

/* Guard: Laravel's default (Tailwind) pagination renders large unconstrained SVG
   prev/next arrows in a Bootstrap app. Cap any stray pagination SVG so it can't
   blow up even if a page bypasses the Bootstrap paginator. */
.pagination svg,
nav[role="navigation"] svg,
ul[role="navigation"] svg { width: 1.15rem !important; height: 1.15rem !important; vertical-align: middle; display: inline-block; }

/* ============================================================
   Small-screen / smaller-laptop responsiveness
   ============================================================ */
/* Stop the whole page from developing a horizontal scrollbar. */
.wrapper, .content-wrapper { overflow-x: hidden; }

/* Wide tables: let them scroll sideways INSIDE their card instead of
   overflowing the layout, on anything below a large screen. */
@media (max-width: 1199.98px) {
    .card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .card-body > .table,
    .card-body > .dataTables_wrapper .table { min-width: 620px; }
}

/* Tighter spacing + smaller KPI numbers on small laptops / tablets. */
@media (max-width: 991.98px) {
    .content-wrapper .content { padding: .5rem; }
    .card-body  { padding: .9rem; }
    .small-box h3 { font-size: 1.7rem; }
    .small-box .icon i { font-size: 48px; top: 8px; }
    h1.m-0 { font-size: 1.5rem; }
}

/* Phones: stack the top header row and shrink further. */
@media (max-width: 575.98px) {
    .content-header .d-flex { flex-wrap: wrap; gap: .4rem; }
    .content-header .ml-auto { margin-left: 0 !important; }
    .small-box h3 { font-size: 1.4rem; }
    .small-box .icon { display: none; }   /* corner icon just clutters a narrow box */
    .table.table-sm td, .table.table-sm th { padding: .3rem .4rem; font-size: .82rem; }
    .btn { white-space: nowrap; }
}