/* Kiambu ERP look — solid green, white panels, flat, modern */

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Material Icons'), local('MaterialIcons-Regular'),
         url('../fonts/material-design-icons/MaterialIcons-Regular.woff2') format('woff2'),
         url('../fonts/material-design-icons/MaterialIcons-Regular.woff') format('woff'),
         url('../fonts/material-design-icons/MaterialIcons-Regular.ttf') format('truetype');
}

.material-icons {
    font-family: 'Material Icons' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'liga';
}

:root {
    --brand-primary: #2E7D32;
    --brand-secondary: #43A047;
    --brand-success: #2E7D32;
    --brand-navbar: #FFFFFF;
    --brand-sidebar: #FFFFFF;
    --brand-button: #2E7D32;
    --brand-link: #2E7D32;
    --brand-footer-bg: #2E7D32;
    --brand-footer-text: #ffffff;
    --brand-page-bg: #F5F7F8;
    --brand-card-bg: #FFFFFF;
    --brand-text: #212121;
    --brand-muted: #616161;
    --brand-radius: 12px;
    --brand-accent-soft: #E8F5E9;
}

/* Page loader */
#kiambu-page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.92);
    transition: opacity .3s ease, visibility .3s ease;
}
#kiambu-page-loader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.kiambu-spinner {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid #E8F5E9;
    border-top-color: var(--brand-primary);
    animation: kiambu-spin .7s linear infinite;
}
@keyframes kiambu-spin { to { transform: rotate(360deg); } }

/* Smooth transitions (subtle) */
body.kiambu-transitions a,
body.kiambu-transitions .btn,
body.kiambu-transitions .card,
body.kiambu-transitions .sidenav li > a {
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Kill gradients — solid only */
.brand-solid,
.brand-gradient,
.gradient-45deg-green-light-green,
.gradient-45deg-light-green-teal,
.gradient-45deg-green-teal,
.gradient-45deg-indigo-purple,
.gradient-45deg-purple-deep-orange,
.content-wrapper-before,
.content-wrapper-before.brand-solid,
.content-wrapper-before.brand-gradient {
    background-image: none !important;
    background-color: var(--brand-page-bg) !important;
    box-shadow: none !important;
}

/* Soft page canvas */
body,
#main,
#main > .row {
    background-color: var(--brand-page-bg) !important;
}

#main .container {
    max-width: 1400px;
}

/* Header band becomes soft white strip (not loud color block) */
#main > .row > .content-wrapper-before {
    background: var(--brand-page-bg) !important;
    background-image: none !important;
    min-height: 8px !important;
}

#breadcrumbs-wrapper,
.breadcrumbs-title,
.breadcrumbs-title span,
#breadcrumbs-wrapper h5 {
    color: var(--brand-text) !important;
}

body.vertical-modern-menu #main > .row > .col.s12 > .container > .section > .row:first-child h4,
body.vertical-modern-menu #main > .row > .col.s12 > .container > .section > .row:first-child .card-title,
body.vertical-modern-menu #main > .row > .col.s12 > .container > .section > .row:first-child p {
    color: var(--brand-text) !important;
}

body.vertical-modern-menu #main > .row > .col.s12 > .container > .section > .row:first-child p.grey-text {
    color: var(--brand-muted) !important;
}

/* Navbar — white ERP header */
header .navbar-main,
.navbar-color,
.page-header,
#header .navbar-main,
nav.navbar-color,
nav.navbar-main.brand-solid,
nav.navbar-main.brand-gradient,
nav.navbar-main.navbar-light,
nav.navbar-main.navbar-dark {
    background: var(--brand-navbar) !important;
    background-image: none !important;
    box-shadow: 0 1px 0 rgba(16, 24, 40, 0.06) !important;
    color: var(--brand-text) !important;
}

nav .material-icons,
nav a,
.navbar-list a,
.header-search-input {
    color: var(--brand-text) !important;
}

.header-search-wrapper {
    background: transparent !important;
}
.header-search-input {
    background: #F5F7F8 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    border: 1px solid #E5E7EB !important;
    color: var(--brand-text) !important;
}

/* Buttons — solid green, rounded */
.btn,
.btn-large,
.btn-small,
.btn.indigo,
.btn.xindigo,
a.btn,
a.btn-large,
a.btn-small,
.indigo,
.gradient-45deg-indigo-purple,
.gradient-45deg-purple-deep-orange {
    background: var(--brand-button) !important;
    background-image: none !important;
    color: #fff !important;
    border-radius: var(--brand-radius) !important;
    box-shadow: none !important;
    text-transform: none !important;
    font-weight: 600 !important;
    letter-spacing: .2px;
}

.btn:hover,
a.btn:hover {
    background: var(--brand-secondary) !important;
    color: #fff !important;
    filter: none;
}

.btn.red,
.btn.accent,
a.btn.red {
    background: #C62828 !important;
    color: #fff !important;
}

.btn-flat {
    background: transparent !important;
    color: var(--brand-link) !important;
    box-shadow: none !important;
}

/* Cards — white, soft shadow, rounded */
.card {
    background: var(--brand-card-bg) !important;
    border-radius: var(--brand-radius) !important;
    box-shadow: 0 4px 16px rgba(16, 24, 40, 0.05) !important;
    border: 1px solid rgba(16, 24, 40, 0.04) !important;
}

.card .card-title {
    color: var(--brand-text) !important;
    font-weight: 700 !important;
}

.card .card-content {
    color: var(--brand-text);
}

/* Dashboard widgets → white metric cards with green accent */
.card .card-content.cyan,
.card .card-content.green,
.card .card-content.green.lighten-1,
.card .card-content.teal,
.card .card-content.orange.lighten-1,
.card .card-content.brand-widget,
.card .card-content.brand-widget-alt,
.card .card-action.green,
.card .card-action.cyan,
.card .card-action.brand-widget,
.cyan,
.green,
.green.lighten-1,
.teal,
.orange.lighten-1,
.brand-widget,
.brand-widget-alt {
    background: var(--brand-card-bg) !important;
    background-image: none !important;
    color: var(--brand-text) !important;
    border-left: 4px solid var(--brand-primary) !important;
    border-radius: var(--brand-radius) !important;
}

.card .card-content.cyan *,
.card .card-content.green *,
.card .card-content.teal *,
.card .card-content.orange.lighten-1 *,
.card .card-content.brand-widget *,
.card .card-content.brand-widget-alt *,
.card-stats-title,
.card-stats-number,
.card-stats-number.white-text {
    color: var(--brand-text) !important;
}

.card-stats-number,
.card-stats-number.white-text {
    color: var(--brand-primary) !important;
    font-weight: 700 !important;
}

.card-stats-title {
    color: var(--brand-muted) !important;
    font-weight: 500 !important;
}

.card-stats-title .material-icons {
    color: var(--brand-primary) !important;
    vertical-align: middle;
    margin-right: 4px;
}

/* Sidebar — white, clean */
.sidenav-main,
.sidenav-main .sidenav,
.sidenav-main.nav-expanded,
.sidenav-main.nav-collapsible,
ul#slide-out.sidenav {
    background: var(--brand-sidebar) !important;
}

.sidenav-main .brand-sidebar,
.brand-sidebar {
    background: #fff !important;
    border-bottom: 1px solid #EEF0F2 !important;
}

.sidenav li > a,
.sidenav li a.collapsible-header,
.sidenav .menu-title {
    color: var(--brand-text) !important;
}

.sidenav li > a > i.material-icons,
.sidenav li a.collapsible-header > i.material-icons {
    color: var(--brand-primary) !important;
}

.sidenav li.active > a,
.sidenav li > a.active,
.sidenav li.active > a.collapsible-header,
.sidenav-active-rounded .sidenav li > a.active,
.sidenav-active-square .sidenav li > a.active {
    background: var(--brand-accent-soft) !important;
    background-image: none !important;
    box-shadow: none !important;
    border-left: 3px solid var(--brand-primary) !important;
    color: var(--brand-primary) !important;
    font-weight: 600 !important;
    border-radius: 0 10px 10px 0;
}

.sidenav li.active > a > i.material-icons,
.sidenav li > a.active > i.material-icons {
    color: var(--brand-primary) !important;
}

.sidenav li > a:hover,
.sidenav li > a.collapsible-header:hover {
    background: #F5F7F8 !important;
}

.sidenav li.open {
    background: transparent !important;
}

.sidenav .collapsible-body,
.sidenav .collapsible-body > ul {
    background: #FAFBFC !important;
}

.sidenav .collapsible-body li > a,
.sidenav .collapsible-body li > a span {
    color: var(--brand-muted) !important;
    background: transparent !important;
}

/* Keep compact theme row height; truncate long labels instead of overlapping the next item */
.sidenav .collapsible-body li > a {
    overflow: hidden !important;
}

.sidenav .collapsible-body li > a > span {
    display: inline-block !important;
    max-width: calc(100% - 28px);
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    vertical-align: middle;
}

.sidenav .collapsible-body li.active > a,
.sidenav .collapsible-body li > a.active,
.sidenav .collapsible-body li.active > a span {
    color: var(--brand-primary) !important;
    background: var(--brand-accent-soft) !important;
    font-weight: 600;
}

.sidenav-main,
.sidenav-main.nav-expanded,
.sidenav-main.nav-collapsible {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    border-right: 1px solid #EEF0F2;
}

.sidenav-main .sidenav.sidenav-collapsible,
ul#slide-out.sidenav {
    height: calc(100vh - 64px) !important;
    max-height: calc(100vh - 64px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.nav-collapsed .brand-sidebar .brand-logo img.sidebar-logo-full { display: none !important; }
.nav-collapsed .brand-sidebar .brand-logo img.sidebar-logo-icon {
    display: inline-block !important;
    width: 36px !important;
    height: 36px !important;
    object-fit: contain !important;
}
.nav-expanded .brand-sidebar .brand-logo img.sidebar-logo-icon { display: none !important; }
.nav-collapsed .brand-sidebar .brand-logo {
    padding: 14px 12px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Links */
a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-flat):not(.collapsible-header):not(.sidenav-trigger),
a.blue-text:not(.btn),
.primary-text {
    color: var(--brand-link);
}

/* Footer solid green */
.page-footer,
footer.page-footer,
.footer-copyright,
.page-footer.brand-solid,
.page-footer.brand-gradient {
    background: var(--brand-footer-bg) !important;
    background-image: none !important;
    color: var(--brand-footer-text) !important;
    box-shadow: none !important;
}
.footer-copyright a,
.footer-copyright span { color: var(--brand-footer-text) !important; }

.tabs .indicator { background-color: var(--brand-primary) !important; }
.tabs .tab a,
.tabs .tab a.active,
.tabs .tab a:hover { color: var(--brand-primary) !important; }

.status-chip.status-active { background: var(--brand-success) !important; color: #fff !important; }
.status-chip.status-inactive { background: #9e9e9e !important; color: #fff !important; }

.stat-card {
    background: var(--brand-card-bg) !important;
    border-radius: var(--brand-radius) !important;
    border: 1px solid #EEF0F2;
    box-shadow: 0 4px 14px rgba(16,24,40,.04);
    border-top: 3px solid var(--brand-primary);
}
.stat-card h5 { color: var(--brand-primary) !important; font-weight: 700; }
.stat-card p { color: var(--brand-muted) !important; }

.brand-color-field { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.brand-color-field input[type="color"] { width:48px; height:36px; border:none; padding:0; background:transparent; cursor:pointer; }
.brand-preview-swatch { width:100%; height:40px; border-radius: var(--brand-radius); margin-top:8px; }

/* Dark mode overrides */
html[data-theme="dark"] body,
html[data-theme="dark"] #main,
html[data-theme="dark"] #main > .row {
    background: #0B1120 !important;
    color: #F8FAFC !important;
}
html[data-theme="dark"] {
    --brand-page-bg: #0B1120;
    --brand-card-bg: #1A2234;
    --brand-text: #F8FAFC;
    --brand-muted: #94A3B8;
    --brand-navbar: #101828;
    --brand-sidebar: #0B1120;
    --brand-accent-soft: rgba(67, 160, 71, 0.16);
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .sidenav-main,
html[data-theme="dark"] .brand-sidebar,
html[data-theme="dark"] ul#slide-out.sidenav,
html[data-theme="dark"] .sidenav .collapsible-body {
    background: var(--brand-card-bg) !important;
    border-color: rgba(255,255,255,.06) !important;
}
html[data-theme="dark"] nav.navbar-main,
html[data-theme="dark"] header .navbar-main {
    background: #101828 !important;
}
html[data-theme="dark"] nav .material-icons,
html[data-theme="dark"] nav a,
html[data-theme="dark"] .sidenav li > a,
html[data-theme="dark"] .menu-title,
html[data-theme="dark"] .card .card-title {
    color: #F8FAFC !important;
}
html[data-theme="dark"] #kiambu-page-loader {
    background: rgba(11,17,32,.92);
}
html[data-theme="dark"] .header-search-input {
    background: #1A2234 !important;
    border-color: rgba(255,255,255,.08) !important;
    color: #F8FAFC !important;
}

/* Theme toggle button */
#theme-mode-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    color: var(--brand-text);
}
#theme-mode-toggle:hover {
    background: #F5F7F8;
}
html[data-theme="dark"] #theme-mode-toggle:hover {
    background: rgba(255,255,255,.06);
}