/* ==========================================================================
   Tax Law Firm — Modern Flat/Minimal Theme
   Pure visual re-skin over AdminLTE3/Bootstrap4. No markup structure,
   IDs, classes-used-by-JS, or logic are changed — only appearance.
   ========================================================================== */

:root {
    --brand-green: #006A4E;
    --brand-green-dark: #004d38;
    --brand-green-light: #e6f4f0;
    --brand-red: #F42A41;
    --brand-red-dark: #c81f34;
    --brand-red-light: #fdecee;

    --bg-page: #f4f6f8;
    --bg-card: #ffffff;

    --text-primary: #1a1f27;
    --text-muted: #6b7280;
    --border-color: #e7eaee;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;

    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 6px 18px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);

    --font-sans: 'Inter', 'Source Sans Pro', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ---------- Global ---------- */
html, body {
    background-color: var(--bg-page);
    font-family: var(--font-sans);
    color: var(--text-primary);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: 700;
    color: var(--text-primary);
}

a {
    color: var(--brand-green);
}
a:hover {
    color: var(--brand-green-dark);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cfd6dd;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #b7bfc8;
}

/* ---------- Top navbar ---------- */
.main-header.navbar {
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.main-header .nav-link {
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm);
    transition: background-color .15s ease;
}
.main-header .nav-link:hover {
    background-color: var(--brand-green-light);
}

.nav-toggle-btn {
    font-size: 1.1rem;
}

/* ---------- Sidebar ---------- */
.main-sidebar {
    background: var(--bg-card) !important;
    border-right: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.main-sidebar .user-panel {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.5rem !important;
}

.main-sidebar .user-panel .image img,
.main-sidebar .user-panel .img-circle {
    box-shadow: var(--shadow-sm);
}

.nav-sidebar > .nav-item > .nav-link {
    border-radius: var(--radius-sm);
    margin: 2px 10px;
    color: var(--text-primary);
    transition: all .15s ease;
}

.nav-sidebar > .nav-item > .nav-link:hover {
    background-color: var(--brand-green-light);
    color: var(--brand-green-dark);
}

.nav-sidebar > .nav-item > .nav-link.active,
.nav-sidebar > .nav-item.menu-open > .nav-link.active {
    background: var(--brand-green) !important;
    color: #fff !important;
    box-shadow: var(--shadow-sm);
}

.nav-sidebar > .nav-item > .nav-link.active .nav-icon,
.nav-sidebar > .nav-item > .nav-link.active p {
    color: #fff !important;
}

.nav-sidebar .nav-treeview > .nav-item > .nav-link {
    border-radius: var(--radius-sm);
    margin: 1px 10px 1px 22px;
}

.nav-sidebar .nav-treeview > .nav-item > .nav-link:hover {
    background-color: var(--brand-green-light);
}

.nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
    background: var(--brand-red) !important;
    color: #fff !important;
}

.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: var(--brand-green);
}

/* ---------- Content wrapper ---------- */
.content-wrapper {
    background: var(--bg-page);
}

/* ---------- Cards / Boxes ---------- */
.card, .custom-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm);
}

.card-header, .custom-card-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    border-top-left-radius: var(--radius-md) !important;
    border-top-right-radius: var(--radius-md) !important;
}

.card-title {
    font-weight: 700;
}

.info-box {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.info-box .info-box-icon {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.small-box {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    letter-spacing: .01em;
}

.btn-primary {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--brand-green-dark);
    border-color: var(--brand-green-dark);
}

.btn-success {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
}
.btn-success:hover {
    background-color: var(--brand-green-dark);
    border-color: var(--brand-green-dark);
}

.btn-danger {
    background-color: var(--brand-red);
    border-color: var(--brand-red);
}
.btn-danger:hover {
    background-color: var(--brand-red-dark);
    border-color: var(--brand-red-dark);
}

.btn-info {
    background-color: #0f7ea8;
    border-color: #0f7ea8;
    color: #fff;
}

.btn-outline-warning {
    color: var(--brand-red);
    border-color: var(--brand-red);
}
.btn-outline-warning:hover {
    background-color: var(--brand-red);
    border-color: var(--brand-red);
}

.btn-add-product {
    border-radius: var(--radius-sm) !important;
}

/* ---------- Forms ---------- */
.form-control, .form-control-underline, .custom-select {
    border-radius: var(--radius-sm);
    border-color: var(--border-color);
}

.form-control:focus, .form-control-underline:focus {
    border-color: var(--brand-green);
    box-shadow: 0 0 0 0.15rem var(--brand-green-light);
}

.form-control-underline {
    border: 1px solid var(--border-color) !important;
    background: var(--bg-card);
}

/* Year-select on Dashboard */
.year-select {
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border-color) !important;
}

/* ---------- Tables / DataTables ---------- */
table.dataTable thead th, #Products thead th {
    background-color: var(--brand-green) !important;
    color: #fff !important;
    border: none !important;
}

.table {
    border-color: var(--border-color);
}

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

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
    color: #fff !important;
}

/* ---------- Badges / Alerts ---------- */
.badge {
    border-radius: 6px;
    font-weight: 600;
}

.alert {
    border-radius: var(--radius-sm);
    border: none;
    box-shadow: var(--shadow-sm);
}

/* ---------- Login page ---------- */
body.login-page {
    background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-dark) 55%, #032e22 100%);
    min-height: 100vh;
}

.login-page .login-box {
    width: 380px;
}

.login-page .login-logo img.circle {
    box-shadow: var(--shadow-lg);
    border: 4px solid rgba(255, 255, 255, 0.85);
}

.login-page .card {
    border: none;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.login-page .login-card-body {
    padding: 2rem 1.75rem;
}

.login-page .login-box-msg {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
}

.login-page .input-group .form-control {
    border-right: none;
}

.login-page .input-group-text {
    background: var(--bg-card);
    border-color: var(--border-color);
}

.login-page .btn-primary {
    padding: 0.6rem 1rem;
    font-size: 1rem;
    border-radius: var(--radius-sm);
}