/**
 * TMS Theme - Primary: linear-gradient(135deg, #0f3145 0%, #1ca161 100%)
 * Dynamic, classic, sleek UI with animations. UI-only overrides.
 */
:root {
    --tms-primary: #0f3145;
    --tms-primary-light: #1ca161;
    --tms-gradient: linear-gradient(135deg, #0f3145 0%, #1ca161 100%);
    --tms-gradient-hover: linear-gradient(135deg, #143a52 0%, #22b86d 100%);
    --tms-shadow: 0 8px 32px rgba(15, 49, 69, 0.15);
    --tms-shadow-hover: 0 12px 40px rgba(28, 161, 97, 0.25);
    --tms-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --tms-radius: 12px;
    --tms-radius-lg: 16px;
    /* Table header: one row, gradient on thead only (th stay transparent) */
    --tms-table-header-text: #f4fbfb;
    --tms-table-header-divider: rgba(255, 255, 255, 0.14);
    --tms-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
    --tms-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ========== Global page animations ========== */
@keyframes tms-fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes tms-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes tms-slideInLeft {
    from { opacity: 0; transform: translateX(-16px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes tms-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes tms-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
@keyframes tms-pulse-soft {
    0%, 100% { opacity: 1; box-shadow: 0 4px 20px rgba(15, 49, 69, 0.2); }
    50% { opacity: 0.95; box-shadow: 0 6px 28px rgba(28, 161, 97, 0.25); }
}

/* Body & layout – rich teal / emerald backdrop */
body {
    background: linear-gradient(160deg, #0a1f2e 0%, #0f3145 32%, #164e3a 58%, #0f3145 78%, #0b2235 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh;
    animation: tms-fadeIn 0.55s var(--tms-ease-out);
}
.page-wrapper {
    background: transparent !important;
}
.page-container {
    background: transparent !important;
    animation: tms-fadeInUp 0.52s var(--tms-ease-out);
}
.main-content {
    background: transparent !important;
    animation: tms-fadeInUp 0.58s var(--tms-ease-out) 0.04s both;
    scroll-behavior: smooth;
}

/* ========== Header ========== */
.main-header {
    background: var(--tms-gradient) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 32px rgba(15, 49, 69, 0.22), 0 0 0 1px rgba(28, 161, 97, 0.15) inset !important;
    border-radius: var(--tms-radius) !important;
    transition: box-shadow 0.35s var(--tms-ease-out), transform 0.35s var(--tms-ease-out) !important;
    animation: tms-slideInLeft 0.45s var(--tms-ease-out);
}
.main-header:hover {
    box-shadow: 0 12px 40px rgba(28, 161, 97, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
}
.profile-avatar,
.dropdown-avatar {
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: var(--tms-transition) !important;
}
.profile-trigger:hover .profile-avatar {
    background: rgba(255, 255, 255, 0.35) !important;
    transform: scale(1.05);
}
.profile-name, .header-title { color: rgba(255, 255, 255, 0.95) !important; }
.profile-role, .breadcrumb-item { color: rgba(255, 255, 255, 0.8) !important; }
.dropdown-arrow, .notification-bell { color: rgba(255, 255, 255, 0.9) !important; }
.dropdown-item:hover { color: var(--tms-primary-light) !important; background: rgba(28, 161, 97, 0.08) !important; }

/* ========== Sidebar ========== */
.sidebar {
    background: linear-gradient(180deg, #0d2a3a 0%, #0f3145 50%, #0a2230 100%) !important;
    box-shadow: 4px 0 24px rgba(15, 49, 69, 0.25) !important;
    transition: var(--tms-transition) !important;
    animation: tms-slideInLeft 0.45s ease-out;
}
.sidebar-header {
    background: rgba(255, 255, 255, 0.04) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.sidebar-header h5 {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600;
}
.sidebar-header .logo {
    background: var(--tms-gradient) !important;
    box-shadow: 0 4px 12px rgba(28, 161, 97, 0.3);
    transition: var(--tms-transition);
}
.sidebar-header .logo:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(28, 161, 97, 0.4);
}
.nav-section-title {
    color: rgba(255, 255, 255, 0.5) !important;
    letter-spacing: 0.08em;
}
.nav-link {
    color: rgba(255, 255, 255, 0.75) !important;
    transition: var(--tms-transition) !important;
    border-radius: 8px !important;
}
.nav-link:hover {
    background: rgba(28, 161, 97, 0.15) !important;
    color: #fff !important;
    transform: translateX(4px);
}
.nav-link.active {
    background: var(--tms-gradient) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(28, 161, 97, 0.35) !important;
}
.nav-collapse .collapse .nav-link { color: rgba(255, 255, 255, 0.7) !important; }
.nav-collapse .collapse .nav-link.active::before { background: #1ca161 !important; }

/* ========== Dashboard & cards ========== */
.dashboard-container {
    animation: tms-fadeInUp 0.5s ease-out 0.1s both;
}
.header h1 {
    background: var(--tms-gradient) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
.stat-card {
    transition: var(--tms-transition) !important;
    animation: tms-fadeInUp 0.5s ease-out both;
}
.stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-card:nth-child(2) { animation-delay: 0.1s; }
.stat-card:nth-child(3) { animation-delay: 0.15s; }
.stat-card:nth-child(4) { animation-delay: 0.2s; }
.stat-card:nth-child(5) { animation-delay: 0.25s; }
.stat-card:nth-child(6) { animation-delay: 0.3s; }
.stat-card::before {
    background: var(--tms-gradient) !important;
    height: 4px;
}
.stat-card:hover {
    transform: translateY(-6px) scale(1.01) !important;
    box-shadow: var(--tms-shadow-hover) !important;
}
.stat-icon { transition: transform 0.35s var(--tms-ease-spring), box-shadow 0.35s ease; }
.stat-card:hover .stat-icon {
    transform: scale(1.06);
}
.stat-new { background: var(--tms-gradient) !important; }
.stat-assigned { background: linear-gradient(135deg, #0f3145 0%, #1e7a52 100%) !important; }
.stat-closed { background: linear-gradient(135deg, #1ca161 0%, #22b86d 100%) !important; }
.stat-guidance { background: linear-gradient(135deg, #165a3d 0%, #1ca161 100%) !important; }
.stat-investigation { background: linear-gradient(135deg, #0f3145 0%, #1ca161 100%) !important; }
.stat-total { background: var(--tms-gradient) !important; }

.chart-card, .table-container {
    transition: box-shadow 0.35s var(--tms-ease-out), transform 0.35s var(--tms-ease-out) !important;
    animation: tms-fadeInUp 0.52s var(--tms-ease-out) both;
}
.chart-card:hover, .table-container:hover {
    box-shadow: 0 14px 36px rgba(15, 49, 69, 0.14), 0 0 0 1px rgba(28, 161, 97, 0.12) !important;
    transform: translateY(-2px);
}
.table-container {
    border: 1px solid rgba(28, 161, 97, 0.12) !important;
    border-radius: var(--tms-radius) !important;
}
.chart-title i { color: var(--tms-primary-light) !important; }

/* ========== Tables ========== */
.modern-table thead {
    background: var(--tms-gradient) !important;
    animation: tms-fadeIn 0.45s var(--tms-ease-out);
}
.modern-table thead tr {
    background: transparent !important;
}
.modern-table thead th {
    background-color: transparent !important;
    color: var(--tms-table-header-text) !important;
    border-bottom: 1px solid var(--tms-table-header-divider) !important;
    box-shadow: none !important;
    font-weight: 600;
    transition: color 0.2s ease;
}
.modern-table tbody tr {
    transition: background-color 0.22s var(--tms-ease-out), box-shadow 0.22s var(--tms-ease-out) !important;
}
.modern-table tbody tr:hover {
    background: rgba(28, 161, 97, 0.09) !important;
    box-shadow: inset 3px 0 0 0 var(--tms-primary-light);
}
.enhanced-transaction-table thead {
    background: var(--tms-gradient) !important;
}
.enhanced-transaction-table thead tr {
    background: transparent !important;
}
.enhanced-transaction-table thead th {
    background-color: transparent !important;
    color: var(--tms-table-header-text) !important;
    border-bottom: 1px solid var(--tms-table-header-divider) !important;
}
.enhanced-transaction-table tbody tr {
    transition: background-color 0.22s var(--tms-ease-out), box-shadow 0.22s ease;
}
.enhanced-transaction-table tbody tr:hover {
    background: rgba(28, 161, 97, 0.07) !important;
    box-shadow: inset 3px 0 0 0 rgba(28, 161, 97, 0.55);
}
.code-badge {
    background: var(--tms-gradient) !important;
    box-shadow: 0 2px 8px rgba(15, 49, 69, 0.25) !important;
}

/* ========== Buttons ========== */
.export-btn, .btn-save, .download-btn {
    background: var(--tms-gradient) !important;
    border: none !important;
    transition: var(--tms-transition) !important;
    position: relative;
    overflow: hidden;
}
.export-btn:hover, .btn-save:hover, .download-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--tms-shadow-hover) !important;
    background: var(--tms-gradient-hover) !important;
}
.export-btn::after, .btn-save::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}
.export-btn:hover::after, .btn-save:hover::after { left: 100%; }

.btn-primary {
    background: var(--tms-gradient) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(15, 49, 69, 0.3) !important;
    transition: var(--tms-transition) !important;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--tms-shadow-hover) !important;
    background: var(--tms-gradient-hover) !important;
}

/* ========== Modals ========== */
.modal-content::before {
    background: var(--tms-gradient) !important;
    height: 4px;
}
.modal-title {
    background: var(--tms-gradient) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--tms-primary-light) !important;
    box-shadow: 0 0 0 3px rgba(28, 161, 97, 0.15) !important;
}
.form-label i { color: var(--tms-primary-light) !important; }
.modal-footer .btn-primary { background: var(--tms-gradient) !important; }

/* ========== Audit & STR pages ========== */
.audit-header, .str-header, .form-card, .audit-card {
    transition: var(--tms-transition) !important;
    animation: tms-fadeInUp 0.4s ease-out both;
}
.audit-header:hover, .form-card:hover {
    box-shadow: var(--tms-shadow) !important;
}
.card-header-custom, .form-card-header {
    background: linear-gradient(135deg, rgba(15, 49, 69, 0.04), rgba(28, 161, 97, 0.04)) !important;
}
.card-header-custom i, .form-card-header i {
    color: var(--tms-primary-light) !important;
}
.info-value a:hover { color: var(--tms-primary-light) !important; }
.attachments-list li a:hover { color: var(--tms-primary-light) !important; background: rgba(28, 161, 97, 0.08) !important; }

/* ========== Section headers & icons ========== */
.transaction-header, .section-header {
    background: linear-gradient(135deg, rgba(15, 49, 69, 0.05), rgba(28, 161, 97, 0.05)) !important;
}
.header-icon, .header-icon-large {
    background: var(--tms-gradient) !important;
    box-shadow: 0 4px 16px rgba(28, 161, 97, 0.3) !important;
    transition: var(--tms-transition);
}
.header-icon:hover, .header-icon-large:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 24px rgba(28, 161, 97, 0.4);
}
.section-title {
    background: var(--tms-gradient) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ========== Loading & misc ========== */
.loading-spinner, .modern-loading-spinner {
    border-top-color: var(--tms-primary-light) !important;
}
.btn-loader { border-top-color: var(--tms-primary-light) !important; }
.retry-btn { border-color: var(--tms-primary-light) !important; color: var(--tms-primary-light) !important; }
.retry-btn:hover { background: var(--tms-gradient) !important; color: #fff !important; }
.rule-link { color: var(--tms-primary-light) !important; }
.rule-link:hover { color: var(--tms-primary) !important; }

/* ========== Scrollbars ========== */
.sidebar::-webkit-scrollbar-thumb {
    background: rgba(28, 161, 97, 0.3);
    border-radius: 4px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(28, 161, 97, 0.5);
}
.modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb {
    background: rgba(28, 161, 97, 0.3);
}
.modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(28, 161, 97, 0.5);
}

/* ========== Mobile header ========== */
.header-mobile .header-mobile__bar {
    background: var(--tms-gradient) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: var(--tms-shadow);
}
.navbar-mobile .navbar-mobile__list a:hover,
.navbar-mobile .navbar-mobile__list .active a {
    color: var(--tms-primary-light) !important;
}

/* ========== User sidebar (menu_sidebar_user) ========== */
.menu-sidebar {
    background: linear-gradient(180deg, #0d2a3a 0%, #0f3145 100%) !important;
}
.menu-sidebar .logo h1 {
    color: rgba(255, 255, 255, 0.9) !important;
}
.navbar-sidebar .navbar__list a:hover,
.navbar-sidebar .navbar__list .active a {
    color: var(--tms-primary-light) !important;
}

/* ========== File upload area ========== */
.file-drop-area:hover, .file-drop-area.drag-over {
    border-color: var(--tms-primary-light) !important;
    background: rgba(28, 161, 97, 0.06) !important;
}
.progress-bar { background: var(--tms-gradient) !important; }

/* ========== Switch / toggle ========== */
input:checked + .slider { background: var(--tms-primary-light) !important; }

/* ========== DataTables (if used) ========== */
.dataTables_wrapper .btn-primary {
    background: var(--tms-gradient) !important;
    border-color: transparent !important;
}
table.dataTable thead {
    background: var(--tms-gradient) !important;
}
table.dataTable thead tr {
    background: transparent !important;
}
table.dataTable thead th,
table.dataTable thead td {
    background-color: transparent !important;
    color: var(--tms-table-header-text) !important;
    border-color: var(--tms-table-header-divider) !important;
    box-shadow: none !important;
}
table.dataTable thead th:active,
table.dataTable thead th:focus {
    outline: none;
}

/* ========== Horizontal tab bar layout (no sidebar) ========== */
.page-wrapper:has(.nav-tabs-bar) .page-container,
.page-wrapper:has(.nav-tabs-bar) .page-container2,
.page-wrapper:has(.nav-tabs-bar) .page-container3 {
    padding-left: 0 !important;
}
.page-wrapper:has(.nav-tabs-bar) .main-header {
    left: 0 !important;
}