/* =========================================================================
   SaungCode — Modern Light UI Redesign Overlay
   Loaded AFTER admin/css/app.css to override template defaults.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    --sc-primary:        #16a34a;
    --sc-primary-600:    #15803d;
    --sc-primary-700:    #166534;
    --sc-primary-50:     #f0fdf4;
    --sc-primary-100:    #dcfce7;
    --sc-accent:         #0ea5e9;
    --sc-accent-50:      #f0f9ff;

    --sc-bg:             #f7f8fa;
    --sc-surface:        #ffffff;
    --sc-surface-alt:    #fbfbfd;
    --sc-border:         #e6e8ec;
    --sc-border-strong:  #d4d7de;
    --sc-text:           #0f172a;
    --sc-text-muted:     #64748b;
    --sc-text-soft:      #94a3b8;

    --sc-success: #16a34a;
    --sc-warn:    #f59e0b;
    --sc-danger:  #ef4444;
    --sc-info:    #0ea5e9;

    --sc-radius-sm: 8px;
    --sc-radius:    12px;
    --sc-radius-lg: 16px;
    --sc-shadow-xs: 0 1px 2px rgba(15,23,42,.04);
    --sc-shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --sc-shadow-md: 0 4px 14px -2px rgba(15,23,42,.08), 0 2px 6px -2px rgba(15,23,42,.05);
    --sc-shadow-lg: 0 12px 32px -8px rgba(15,23,42,.12), 0 4px 12px -4px rgba(15,23,42,.06);
    --sc-trans:     all .18s cubic-bezier(.4,0,.2,1);
}

/* Force light theme regardless of body class */
html, body, body.app, body.dark-theme, body.dark-mode {
    background: var(--sc-bg) !important;
    color: var(--sc-text) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body.dark-theme *, body.dark-mode * { color-scheme: light; }
.dark-theme .card, .dark-mode .card { background: var(--sc-surface) !important; color: var(--sc-text) !important; }

* { font-family: inherit; }
code, pre, kbd, .font-monospace { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important; }

/* Typography */
h1,h2,h3,h4,h5,h6, .h1,.h2,.h3,.h4,.h5,.h6 {
    color: var(--sc-text) !important;
    font-weight: 700 !important;
    letter-spacing: -0.011em;
}
h1, .h1 { font-size: 1.875rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.125rem; }
.text-muted { color: var(--sc-text-muted) !important; }

a { color: var(--sc-primary); transition: var(--sc-trans); text-decoration: none; }
a:hover { color: var(--sc-primary-700); text-decoration: none; }
.text-info { color: var(--sc-primary) !important; }
.text-info:hover { color: var(--sc-primary-700) !important; }

/* Page wrapper */
.page, .page-main { background: transparent !important; }
.app-content, .main-content { background: var(--sc-bg) !important; }
.side-app { padding: 1.5rem 1.75rem !important; }

/* Top nav (header) */
.app-header.header {
    background: rgba(255,255,255,.85) !important;
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--sc-border) !important;
    box-shadow: var(--sc-shadow-xs) !important;
    height: 64px !important;
}
.app-header .header-brand-img { max-height: 34px; }
.app-header .nav-link.icon {
    width: 40px; height: 40px;
    border-radius: var(--sc-radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--sc-text-muted) !important;
    transition: var(--sc-trans);
}
.app-header .nav-link.icon:hover {
    background: var(--sc-primary-50) !important;
    color: var(--sc-primary) !important;
}
.app-header .header-icon { font-size: 1.05rem; }
.app-header .avatar.avatar-md {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 2px solid var(--sc-primary-100);
    box-shadow: 0 0 0 2px var(--sc-surface);
}

/* Sidebar */
.app-sidebar {
    background: var(--sc-surface) !important;
    border-right: 1px solid var(--sc-border) !important;
    box-shadow: var(--sc-shadow-xs);
    width: 250px !important;
    padding-bottom: 2rem;
}
.app-sidebar__logo {
    padding: 1.1rem 1.25rem !important;
    border-bottom: 1px solid var(--sc-border);
    background: var(--sc-surface) !important;
}
.app-sidebar__logo .header-brand-img { max-height: 36px; }
.side-menu { padding: 1rem .75rem !important; }
.side-menu .slide { margin: 2px 0; }
.side-menu__item {
    display: flex !important; align-items: center;
    gap: .65rem;
    padding: .55rem .75rem !important;
    border-radius: var(--sc-radius-sm) !important;
    color: var(--sc-text) !important;
    font-weight: 500 !important;
    font-size: .875rem !important;
    transition: var(--sc-trans);
    position: relative;
}
.side-menu__item:hover {
    background: var(--sc-primary-50) !important;
    color: var(--sc-primary-700) !important;
    transform: translateX(2px);
}
.side-menu__item.active,
.side-menu .slide.is-expanded > .side-menu__item,
.side-menu__item:focus {
    background: linear-gradient(90deg, var(--sc-primary-50), transparent) !important;
    color: var(--sc-primary-700) !important;
    box-shadow: inset 3px 0 0 var(--sc-primary) !important;
}
.side-menu__icon {
    width: 28px; height: 28px;
    display: inline-flex !important; align-items: center; justify-content: center;
    border-radius: 7px;
    background: var(--sc-primary-50);
    color: var(--sc-primary) !important;
    font-size: .78rem !important;
}
.side-menu__item .side-menu__icon[style*="color"] { background: rgba(0,0,0,.03); }
.side-menu__label { font-size: .875rem !important; line-height: 1.4; flex: 1 1 auto; }
.side-item.side-item-category {
    padding: .85rem 1rem .35rem !important;
    font-size: .68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--sc-text-soft) !important;
    margin: 0 !important;
}
.app-sidebar hr {
    border: 0 !important;
    border-top: 1px solid var(--sc-border) !important;
    margin: .75rem 1rem !important;
    width: auto !important;
}
.slide-menu {
    padding: .25rem 0 .25rem 2.5rem !important;
    background: transparent !important;
}
.slide-item {
    padding: .4rem .75rem !important;
    color: var(--sc-text-muted) !important;
    font-size: .82rem !important;
    border-radius: 6px;
    transition: var(--sc-trans);
    display: block;
}
.slide-item:hover { background: var(--sc-primary-50); color: var(--sc-primary-700) !important; }

.app-content.main-content { margin-left: 250px !important; }
@media (max-width: 991px) {
    .app-content.main-content { margin-left: 0 !important; }
    .app-sidebar { transform: translateX(-100%); transition: transform .25s; }
    body.sidenav-toggled-open .app-sidebar { transform: translateX(0); box-shadow: var(--sc-shadow-lg); }
}

/* Page header */
.page-header {
    padding: 1.5rem 0 1.25rem !important;
    margin: 0 0 1.25rem !important;
    border-bottom: 1px solid var(--sc-border);
    background: transparent !important;
}
.page-header .page-title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin-bottom: .25rem !important;
    color: var(--sc-text) !important;
}
.page-header .breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: .8rem !important;
}
.breadcrumb-item a { color: var(--sc-text-muted); }
.breadcrumb-item.active a { color: var(--sc-primary); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--sc-text-soft) !important; }

/* Cards */
.card {
    background: var(--sc-surface) !important;
    border: 1px solid var(--sc-border) !important;
    border-radius: var(--sc-radius) !important;
    box-shadow: var(--sc-shadow-xs) !important;
    overflow: hidden;
    transition: var(--sc-trans);
}
.card:hover { box-shadow: var(--sc-shadow-sm) !important; }
.card-header {
    background: var(--sc-surface) !important;
    border-bottom: 1px solid var(--sc-border) !important;
    padding: 1rem 1.25rem !important;
    font-weight: 600;
}
.card-title { color: var(--sc-text) !important; font-weight: 600 !important; }
.card-body { padding: 1.25rem !important; }
.card-footer {
    background: var(--sc-surface-alt) !important;
    border-top: 1px solid var(--sc-border) !important;
}
.card.overflow-hidden.border-0 {
    border: 1px solid var(--sc-border) !important;
    background: linear-gradient(135deg, var(--sc-surface) 0%, var(--sc-surface-alt) 100%) !important;
}

/* Buttons */
.btn {
    border-radius: var(--sc-radius-sm) !important;
    font-weight: 600 !important;
    padding: .55rem 1.1rem !important;
    font-size: .875rem !important;
    border: 1px solid transparent !important;
    transition: var(--sc-trans) !important;
    box-shadow: var(--sc-shadow-xs);
    line-height: 1.4 !important;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--sc-shadow-sm); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: .35rem .8rem !important; font-size: .78rem !important; border-radius: 6px !important; }
.btn-lg { padding: .75rem 1.5rem !important; font-size: 1rem !important; }
.btn-primary, .btn-success {
    background: var(--sc-primary) !important;
    border-color: var(--sc-primary) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-success:hover {
    background: var(--sc-primary-600) !important;
    border-color: var(--sc-primary-600) !important;
}
.btn-info { background: var(--sc-info) !important; border-color: var(--sc-info) !important; color: #fff !important; }
.btn-warning { background: var(--sc-warn) !important; border-color: var(--sc-warn) !important; color: #fff !important; }
.btn-danger { background: var(--sc-danger) !important; border-color: var(--sc-danger) !important; color: #fff !important; }
.btn-secondary, .btn-cancel {
    background: var(--sc-surface) !important;
    color: var(--sc-text) !important;
    border-color: var(--sc-border-strong) !important;
}
.btn-secondary:hover, .btn-cancel:hover {
    background: var(--sc-surface-alt) !important;
    border-color: var(--sc-text-muted) !important;
}
.btn-outline-primary {
    background: transparent !important;
    color: var(--sc-primary) !important;
    border-color: var(--sc-primary) !important;
}
.btn-outline-primary:hover { background: var(--sc-primary) !important; color: #fff !important; }

/* Forms */
.form-control, .form-select, .input-group-text, select.form-control {
    background: var(--sc-surface) !important;
    border: 1px solid var(--sc-border-strong) !important;
    border-radius: var(--sc-radius-sm) !important;
    padding: .6rem .85rem !important;
    font-size: .9rem !important;
    color: var(--sc-text) !important;
    box-shadow: var(--sc-shadow-xs);
    transition: var(--sc-trans);
    min-height: 42px;
}
.form-control::placeholder { color: var(--sc-text-soft); }
.form-control:focus, .form-select:focus {
    border-color: var(--sc-primary) !important;
    box-shadow: 0 0 0 3px rgba(22,163,74,.15) !important;
    outline: none !important;
}
.form-control.is-invalid { border-color: var(--sc-danger) !important; }
.invalid-feedback { color: var(--sc-danger); font-size: .78rem; margin-top: .35rem; display: block; }
label, .form-label {
    font-size: .8rem !important;
    font-weight: 600 !important;
    color: var(--sc-text) !important;
    margin-bottom: .4rem !important;
}
.input-box { margin-bottom: 1.1rem; }
textarea.form-control { min-height: 100px; resize: vertical; }

/* Custom switch */
.custom-switch-indicator {
    background: var(--sc-border-strong) !important;
    border: none !important;
    width: 38px !important; height: 22px !important;
    border-radius: 999px !important;
}
.custom-switch-indicator::before {
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    width: 16px !important; height: 16px !important;
    border-radius: 50% !important;
}
.custom-switch-input:checked ~ .custom-switch-indicator {
    background: var(--sc-primary) !important;
}
.custom-switch-description { font-size: .82rem; color: var(--sc-text-muted) !important; margin-left: .5rem; }

/* select2 */
.select2-container--default .select2-selection--single {
    border: 1px solid var(--sc-border-strong) !important;
    border-radius: var(--sc-radius-sm) !important;
    height: 42px !important;
    padding: 6px 12px !important;
    background: var(--sc-surface) !important;
}
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--sc-primary) !important;
    box-shadow: 0 0 0 3px rgba(22,163,74,.15);
}

/* Tables */
.table {
    background: var(--sc-surface) !important;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0 !important;
}
.table thead th {
    background: var(--sc-surface-alt) !important;
    color: var(--sc-text-muted) !important;
    font-weight: 600 !important;
    font-size: .72rem !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .85rem 1rem !important;
    border-bottom: 1px solid var(--sc-border) !important;
    border-top: 1px solid var(--sc-border) !important;
    white-space: nowrap;
}
.table tbody td {
    padding: .85rem 1rem !important;
    color: var(--sc-text) !important;
    border-top: 1px solid var(--sc-border) !important;
    font-size: .875rem !important;
    vertical-align: middle;
}
.table tbody tr { transition: background .12s ease; }
.table tbody tr:hover td { background: var(--sc-primary-50) !important; }
.table-striped tbody tr:nth-child(odd) td { background: var(--sc-surface-alt) !important; }
.table-striped tbody tr:nth-child(odd):hover td { background: var(--sc-primary-50) !important; }

/* DataTables */
.dataTables_wrapper {
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    padding: 1rem;
    box-shadow: var(--sc-shadow-xs);
}
.dataTables_filter input, .dataTables_length select {
    border: 1px solid var(--sc-border-strong) !important;
    border-radius: 6px !important;
    padding: .35rem .65rem !important;
    background: var(--sc-surface) !important;
}
.dataTables_paginate .paginate_button {
    border-radius: 6px !important;
    padding: .35rem .7rem !important;
    margin: 0 1px !important;
    border: 1px solid transparent !important;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
    background: var(--sc-primary) !important;
    color: #fff !important;
    border: 1px solid var(--sc-primary) !important;
}
.dataTables_paginate .paginate_button:hover {
    background: var(--sc-primary-50) !important;
    color: var(--sc-primary-700) !important;
    border: 1px solid var(--sc-primary-100) !important;
}

/* Badges */
.badge {
    font-weight: 600 !important;
    font-size: .68rem !important;
    padding: .35em .7em !important;
    border-radius: 6px !important;
    letter-spacing: .02em;
}
.badge-primary, .badge-success, .bg-primary { background: var(--sc-primary-100) !important; color: var(--sc-primary-700) !important; }
.badge-info { background: var(--sc-accent-50) !important; color: var(--sc-info) !important; }
.badge-warning { background: #fef3c7 !important; color: #b45309 !important; }
.badge-danger { background: #fee2e2 !important; color: #b91c1c !important; }
.badge-secondary { background: #f1f5f9 !important; color: var(--sc-text-muted) !important; }

/* Alerts */
.alert {
    border-radius: var(--sc-radius) !important;
    border: 1px solid transparent !important;
    padding: .9rem 1.1rem !important;
    font-size: .88rem;
    box-shadow: var(--sc-shadow-xs);
}
.alert-success { background: #f0fdf4 !important; color: #166534 !important; border-color: #bbf7d0 !important; }
.alert-danger  { background: #fef2f2 !important; color: #991b1b !important; border-color: #fecaca !important; }
.alert-warning { background: #fffbeb !important; color: #92400e !important; border-color: #fde68a !important; }
.alert-info    { background: #eff6ff !important; color: #1e40af !important; border-color: #bfdbfe !important; }

/* Modals */
.modal-content {
    border: 1px solid var(--sc-border) !important;
    border-radius: var(--sc-radius-lg) !important;
    box-shadow: var(--sc-shadow-lg) !important;
}
.modal-header { border-bottom: 1px solid var(--sc-border) !important; padding: 1.1rem 1.25rem !important; }
.modal-footer { border-top: 1px solid var(--sc-border) !important; padding: 1rem 1.25rem !important; }
.modal-backdrop.show { opacity: .55; background: #0f172a; }

/* Dropdown */
.dropdown-menu {
    border: 1px solid var(--sc-border) !important;
    border-radius: var(--sc-radius) !important;
    box-shadow: var(--sc-shadow-md) !important;
    padding: .35rem !important;
    min-width: 220px;
}
.dropdown-item {
    padding: .55rem .75rem !important;
    border-radius: var(--sc-radius-sm) !important;
    font-size: .85rem !important;
    color: var(--sc-text) !important;
    transition: var(--sc-trans);
    display: flex; align-items: center; gap: .6rem;
}
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--sc-primary-50) !important;
    color: var(--sc-primary-700) !important;
}
.profile-icon {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--sc-text-muted);
}
.dropdown-item:hover .profile-icon { color: var(--sc-primary); }
.dropdown-divider { border-top: 1px solid var(--sc-border) !important; margin: .35rem 0 !important; }

/* Login / Register */
#login-background, .background-special {
    background: linear-gradient(135deg, #16a34a 0%, #0ea5e9 100%) !important;
    position: relative;
    overflow: hidden;
}
#login-background::before {
    content: "";
    position: absolute; inset: 0;
    background:
      radial-gradient(circle at 25% 25%, rgba(255,255,255,.18), transparent 40%),
      radial-gradient(circle at 75% 75%, rgba(255,255,255,.12), transparent 35%);
    pointer-events: none;
}
.login-bg { background: transparent !important; }
.h-100vh { min-height: 100vh; }
#login-responsive {
    background: var(--sc-bg);
    display: flex; align-items: center;
}
#login-responsive .card-body {
    background: var(--sc-surface);
    margin: 1.5rem auto;
    max-width: 440px;
    width: 100%;
    border-radius: var(--sc-radius-lg);
    box-shadow: var(--sc-shadow-md);
    padding: 2.5rem 2.25rem !important;
}
#login-responsive h3 {
    font-size: 1.5rem !important;
    margin-bottom: 1.75rem !important;
}

/* Footer */
.footer {
    background: transparent !important;
    border-top: 1px solid var(--sc-border) !important;
    padding: 1.25rem 0 !important;
    margin-top: 2rem;
    color: var(--sc-text-muted);
    font-size: .78rem;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sc-border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--sc-text-soft); background-clip: padding-box; border: 2px solid transparent; }

/* Toastr */
#toast-container > div {
    border-radius: var(--sc-radius) !important;
    box-shadow: var(--sc-shadow-lg) !important;
    opacity: 1 !important;
    padding: 1rem 1rem 1rem 3rem !important;
}
.toast-success { background-color: var(--sc-success) !important; }
.toast-error   { background-color: var(--sc-danger) !important; }
.toast-info    { background-color: var(--sc-info) !important; }
.toast-warning { background-color: var(--sc-warn) !important; }

/* Turbo progress bar */
.turbo-progress-bar {
    background: linear-gradient(90deg, var(--sc-primary), var(--sc-accent)) !important;
    height: 3px !important;
    box-shadow: 0 0 8px rgba(22,163,74,.35);
}

/* WhatsApp floating button */
.whatsapp-button {
    border-radius: 999px !important;
    box-shadow: var(--sc-shadow-lg) !important;
    padding: 11px 18px !important;
    font-weight: 600;
    font-size: .82rem;
    transition: var(--sc-trans);
}
.whatsapp-button:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -10px rgba(37,211,102,.5) !important; }

/* Back-to-top */
#back-to-top {
    background: var(--sc-primary) !important;
    color: #fff !important;
    border-radius: 50% !important;
    width: 42px; height: 42px;
    display: flex !important; align-items: center; justify-content: center;
    box-shadow: var(--sc-shadow-md);
    border: none !important;
}

/* Misc */
hr { border-color: var(--sc-border) !important; opacity: 1 !important; }
.profile-dropdown .user { color: var(--sc-text) !important; }
.mt-5-7 { margin-top: 0 !important; }
*:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(22,163,74,.25) !important; }

@media print {
    .app-sidebar, .app-header, .footer, .whatsapp-button, #back-to-top { display: none !important; }
    .app-content.main-content { margin-left: 0 !important; }
}