/* Calm Sage theme layer for HMS (light mode). Loaded after style.css/plugins.css/custom.css.
   Remove the <link> to calm-sage.css in resources/views/layouts/app.blade.php to switch it off. */

:root {
    --sage-primary: #3f7d5b;
    --sage-primary-dark: #2f6346;
    --sage-tint: #e3eee6;
    --sage-page: #f4f6f1;
    --sage-surface: #ffffff;
    --sage-sidebar: #fbfcf9;
    --sage-border: #e2e7dd;
    --sage-text: #1f2a22;
    --sage-muted: #5f6b5a;
}

body { background-color: var(--sage-page); color: var(--sage-text); }
.text-muted { color: var(--sage-muted) !important; }

/* ---------- Sidebar ---------- */
.aside-menu-container { background-color: var(--sage-sidebar) !important; border-right: 1px solid var(--sage-border); box-shadow: none !important; }
.aside-menu-container__aside-logo img { border-radius: 12px; }
.aside-menu-container__aside-logo .navbar-brand-name { font-weight: 700; letter-spacing: .5px; color: var(--sage-text) !important; }
.aside-menu-container__aside-search .form-control { border-radius: 10px; border-color: var(--sage-border); background: var(--sage-surface); }
.aside-menu-container__aside-menu .nav-item .nav-link {
    border-left: 0 !important;
    border-radius: 10px;
    margin: 2px 12px;
    padding: 10px 14px !important;
    color: #4a5548;
    font-weight: 500;
}
.aside-menu-container__aside-menu .nav-item .nav-link i,
.aside-menu-container__aside-menu .nav-item .nav-link .aside-menu-icon { color: #7a8676; transition: color .2s ease; }
.aside-menu-container__aside-menu .nav-item .nav-link:hover { background: #eef3ee !important; color: var(--sage-primary-dark) !important; }
.aside-menu-container__aside-menu .nav-item.active > .nav-link {
    background: var(--sage-tint) !important;
    color: var(--sage-primary-dark) !important;
    font-weight: 600;
}
.aside-menu-container__aside-menu .nav-item.active > .nav-link i,
.aside-menu-container__aside-menu .nav-item .nav-link:hover i { color: var(--sage-primary) !important; }
.aside-menu-container__aside-menu .nav-item ul.aside-submenu .nav-item .nav-link { padding-left: 36px !important; }

/* ---------- Top header ---------- */
.header { background-color: var(--sage-sidebar) !important; box-shadow: none !important; border-bottom: 1px solid var(--sage-border); }

/* ---------- Page header (dashboard) ---------- */
.sage-page-head { padding: 8px 0 12px; }
.sage-page-head h1 { color: var(--sage-text); }

/* ---------- Cards & stat widgets ---------- */
.card {
    border: 1px solid var(--sage-border) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    background-color: var(--sage-surface);
}
.card .card-header { background: transparent; border-bottom: 0; }
.card .card-header h3, .card .card-header .card-title { font-size: 1.1rem; font-weight: 600; color: var(--sage-text); }
.widget .bg-white {
    border: 1px solid var(--sage-border);
    border-radius: 14px !important;
    box-shadow: none !important;
    transition: transform .15s ease, border-color .15s ease;
}
.widget a:hover .bg-white { border-color: #bcd5c6; transform: translateY(-2px); }
.widget .widget-icon { border-radius: 12px !important; }
.widget h2.text-primary { color: var(--sage-text) !important; }
.widget h3 { color: var(--sage-muted) !important; font-weight: 500 !important; }

/* ---------- Buttons ---------- */
.btn { border-radius: 10px; font-weight: 600; }
.btn-primary, .btn-outline-primary { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.btn-outline-primary { border-width: 1.5px; }

/* ---------- Tables ---------- */
.table > thead th {
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: .5px;
    font-weight: 600;
    color: var(--sage-muted) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: #f7f9f5; }

/* ---------- Forms ---------- */
.form-control, .form-select { border-radius: 10px; }
.form-control:focus, .form-select:focus { border-color: #9fc1ad; box-shadow: 0 0 0 .2rem rgba(63, 125, 91, .15); }

/* ---------- Clinic name next to the logo ---------- */
.aside-menu-container__aside-logo .sidebar-logo { display: flex; align-items: center; gap: 4px; min-width: 0; }
.aside-menu-container__aside-logo .navbar-brand-name {
    white-space: normal; font-size: 15px; line-height: 1.25; max-width: 140px; display: inline-block;
}
.aside-menu-container__aside-logo img { object-fit: contain; background: #fff; }