/* Modern layout + brand theme, derived from the Aastha Physio Clinic logo
   (navy wordmark + lime running figure). Loaded after style.css/vendor CSS
   so these rules win the cascade without editing vendor files. */

:root {
    --brand-navy: #0F3D75;
    --brand-navy-dark: #0A2E58;
    --brand-navy-rgb: 15, 61, 117;
    --brand-lime: #A4D65E;
    --brand-lime-dark: #8FC444;
    --brand-lime-rgb: 164, 214, 94;

    /* Re-point the theme's own variables at the brand palette so every
       component that already reads --bs-primary/--bs-secondary follows it. */
    --bs-primary: var(--brand-navy);
    --bs-primary-rgb: var(--brand-navy-rgb);
    --bs-secondary: var(--brand-lime);
    --bs-secondary-rgb: var(--brand-lime-rgb);
}

/* The admin theme (style.css) defaults to Roboto and the login page's own
   compiled CSS defaults to Nunito, so text renders inconsistently between
   the two layouts. Pin one font everywhere; Poppins is already loaded on
   both layouts via header-links.blade.php and layouts/app.blade.php. */
html,
body,
h1, h2, h3, h4, h5, h6,
.btn,
.form-control,
.form-select {
    font-family: 'Poppins', sans-serif !important;
}
form {
    width: 100%;
}
/* ===== Buttons ===== */
.btn {
    border-radius: 8px;
    font-weight: 500;
    transition: transform .15s ease, box-shadow .15s ease;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(15, 23, 42, .1);
}

.btn-primary {
    background-color: var(--brand-navy) !important;
    border-color: var(--brand-navy) !important;
    color: #fff !important;
}

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

.btn-outline-primary {
    color: var(--brand-navy) !important;
    border-color: var(--brand-navy) !important;
}

.btn-outline-primary:hover {
    background-color: var(--brand-navy) !important;
    border-color: var(--brand-navy) !important;
    color: #fff !important;
}

.btn-secondary,
.btn-accent {
    background-color: var(--brand-lime) !important;
    border-color: var(--brand-lime) !important;
    color: var(--brand-navy-dark) !important;
}

.btn-secondary:hover,
.btn-accent:hover {
    background-color: var(--brand-lime-dark) !important;
    border-color: var(--brand-lime-dark) !important;
    color: var(--brand-navy-dark) !important;
}

.btn-outline-secondary {
    color: var(--brand-navy) !important;
    border-color: #c7ccd6 !important;
}

.btn-outline-secondary:hover {
    background-color: var(--brand-navy) !important;
    border-color: var(--brand-navy) !important;
    color: #fff !important;
}

/* ===== Text / background / border utility overrides ===== */
.text-primary {
    color: var(--brand-navy) !important;
}

.bg-primary {
    background-color: var(--brand-navy) !important;
}

.border-primary {
    border-color: var(--brand-navy) !important;
}

/* ===== Cards ===== */
.card {
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, .06);
    border: 1px solid rgba(15, 23, 42, .04);
}

.card-header {
    border-radius: 14px 14px 0 0 !important;
}

.card-header:last-child {
    border-radius: 14px;
}

/* ===== Inputs ===== */
.form-control,
.form-select,
select.form-control {
    border-radius: 8px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-navy);
    box-shadow: 0 0 0 .2rem rgba(var(--brand-navy-rgb), .15);
}

/* ===== Bootstrap-select (searchable dropdowns) =====
   Its toggle button ships with class "btn-default", which doesn't exist in
   this Bootstrap 5 theme, so it was rendering with no styling at all. Give
   it the same look as a normal .form-control. */
.bootstrap-select > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle.btn-default {
    background-color: #fff !important;
    border: 1px solid #ced4da !important;
    border-radius: 8px !important;
    padding: .375rem .75rem !important;
    color: #212529 !important;
    font-weight: 400;
    box-shadow: none !important;
}

.bootstrap-select > .dropdown-toggle:hover,
.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select.show > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle:active {
    background-color: #fff !important;
    border-color: var(--brand-navy) !important;
    color: #212529 !important;
    box-shadow: 0 0 0 .2rem rgba(var(--brand-navy-rgb), .15) !important;
}

.bootstrap-select .dropdown-menu {
    border-radius: 8px;
    border: 1px solid #e5e9f0;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
    padding: .5rem 0;
}

.bootstrap-select .bs-searchbox {
    padding: .5rem .75rem .75rem;
}

.bootstrap-select .bs-searchbox .form-control {
    border-radius: 8px;
}

.bootstrap-select .dropdown-menu li a {
    padding: .5rem .75rem;
}

.bootstrap-select .dropdown-menu li.selected a,
.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li a:active {
    background-color: rgba(var(--brand-navy-rgb), .08);
    color: var(--brand-navy);
}

/* ===== Custom patient search (type-ahead) results list ===== */
.patient-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 260px;
    overflow-y: auto;
    border-radius: 8px;
    border: 1px solid #e5e9f0;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
    background-color: #fff;
    margin-top: 2px;
}

.patient-search-results .list-group-item {
    border: none;
    border-bottom: 1px solid #f1f3f6;
    font-size: .9rem;
}

.patient-search-results .list-group-item:last-child {
    border-bottom: none;
}

.patient-search-results .list-group-item-action:hover {
    background-color: rgba(var(--brand-navy-rgb), .08);
    color: var(--brand-navy);
    cursor: pointer;
}

.bootstrap-select .dropdown-menu li.active a,
.bootstrap-select .dropdown-menu li.active a:hover {
    background-color: var(--brand-navy) !important;
    color: #fff !important;
}

/* ===== Tables ===== */
.table thead th,.table tfoot th {
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .04em;
    color: #64748b;
    border-bottom-width: 1px;
    white-space: nowrap;font-weight: 400;
}

.table tbody tr:hover {
    background-color: rgba(var(--brand-navy-rgb), .05);
}

.table td,
.table th {
    vertical-align: middle;
}

/* Different views historically mixed in table-striped/table-bordered on top
   of the base .table class, so tables looked inconsistent across pages.
   Neutralize those modifiers here so every table has the same flat, modern
   look regardless of which classes a given view happens to add. */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: transparent;
}

.table-bordered,
.table-bordered th,
.table-bordered td {
    border: none;
}

.table-bordered thead th,
.table-bordered thead td {
    border-bottom: 1px solid #eef1f6;
}

.dataTables_empty,
.table td.text-center.text-muted {
    padding: 2rem 1rem !important;
    color: #94a3b8;
    font-style: italic;
}

/* ===== DataTables (Bootstrap 5 integration) ===== */
.dataTables_wrapper {
    padding-top: .5rem;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border-radius: 8px;
    border: 1px solid #dee2e6;
    padding: .375rem .75rem;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    outline: none;
    border-color: var(--brand-navy);
    box-shadow: 0 0 0 .2rem rgba(var(--brand-navy-rgb), .15);
}

.dataTables_wrapper .dataTables_info {
    color: #64748b;
    font-size: .85rem;
}

.dataTables_wrapper .dataTables_paginate .pagination,
.pagination {
    margin-top: .5rem;
    flex-wrap: wrap;
    row-gap: .5rem;
}

/* Applies to both DataTables-generated pagination and Laravel's native
   Bootstrap paginator (Paginator::useBootstrap() in AppServiceProvider),
   e.g. the Today's Patient page, so both look the same. */
.page-link {
    border-radius: 8px !important;
    margin: 0 3px;
    border: 1px solid #e5e9f0;
    color: var(--brand-navy);
    padding: .375rem .75rem !important;
    font-size: .85rem !important;
    line-height: 1.4 !important;
    min-width: 2.25rem;
    text-align: center;
}

.page-item.active .page-link {
    background-color: var(--brand-navy) !important;
    border-color: var(--brand-navy) !important;
    color: #fff !important;
}

.page-item.disabled .page-link {
    color: #b3bac6;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    padding-top: 1rem;
    margin-top: 0rem;
    border-top: 0px solid #eef1f6;
}

.page-link:hover {
    background-color: rgba(var(--brand-navy-rgb), .1);
    border-color: var(--brand-navy);
    color: var(--brand-navy);
}

table.dataTable thead th,
table.dataTable thead td {
    border-bottom: 2px solid #eef1f6;
}

/* ===== Sidebar: navy shell with lime active/hover state ===== */
.nav-header {
    background-color: var(--brand-navy);
}

.deznav {
    background-color: var(--brand-navy);
}

.deznav .metismenu > li > a {
    border-radius: 8px;
    margin: 2px 10px;
    color: rgba(255, 255, 255, .85);
}

.deznav .metismenu > li > a i {
    color: rgba(255, 255, 255, .85);
}

.deznav .metismenu > li > a:hover,
.deznav .metismenu > li > a:focus {
    background-color: rgba(var(--brand-lime-rgb), .15);
    color: #fff;
}

.deznav .metismenu > li.mm-active > a {
    background-color: var(--brand-lime) !important;
    color: var(--brand-navy-dark) !important;
}

.deznav .metismenu > li.mm-active > a i {
    color: var(--brand-navy-dark) !important;
}

/* Nested submenu items (e.g. Machines > Machine Master / Level 1 / Level 2).
   The vendor theme has no styling at all for these, so they were rendering
   with default dark text on the navy sidebar background and were effectively
   invisible. */
.deznav .metismenu ul.mm-collapse {
    background-color: rgba(0, 0, 0, .12);
    border-radius: 8px;
    margin: 0 10px 4px;
    padding: 4px 0;
}

.deznav .metismenu ul.mm-collapse li a {
    display: block;
    padding: .5rem 1rem .5rem 2.5rem;
    color: rgba(255, 255, 255, .75);
    border-radius: 6px;
    margin: 2px 6px;
    font-size: .875rem;
}

.deznav .metismenu ul.mm-collapse li a:hover,
.deznav .metismenu ul.mm-collapse li a:focus {
    background-color: rgba(var(--brand-lime-rgb), .18);
    color: #fff;
}

.deznav .metismenu ul.mm-collapse li a.mm-active,
.deznav .metismenu ul.mm-collapse li.mm-active > a {
    background-color: var(--brand-lime) !important;
    color: var(--brand-navy-dark) !important;
    font-weight: 500;
}

/* ===== Top header bar ===== */
.header {
    background-color: #fff;
    border-bottom: 3px solid var(--brand-lime);
}

.header-profile .nav-link i.user-icon {
    color: var(--brand-navy);
}

/* ===== Login / auth card ===== */
.authincation-content {
    background: var(--brand-navy) !important;
}

.auth-form .btn-accent {
    font-weight: 700;
    padding: .6rem 1rem;
}

.login-logo-badge {
    background-color: #fff;
    border-radius: 16px;
    padding: 10px 18px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

.login-logo-badge img {
    max-height: 46px;
    width: auto;
    display: block;
}

.login-subtext {
    color: rgba(255, 255, 255, .75);
    font-size: .875rem;
}

.login-input-group .input-group-text {
    background-color: #fff;
    border-color: #fff;
    color: var(--brand-navy);
}

.login-input-group .form-control {
    border-color: #fff;
}

.login-input-group .form-control:focus {
    box-shadow: none;
}

.login-input-group .password-toggle {
    cursor: pointer;
}

.login-forgot-link {
    color: var(--brand-lime);
    font-size: .875rem;
    font-weight: 500;
}

.login-forgot-link:hover {
    color: #fff;
    text-decoration: underline;
}

.auth-form .form-check-input:checked {
    background-color: var(--brand-lime);
    border-color: var(--brand-lime);
}

.auth-form .form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(var(--brand-lime-rgb), .35);
}

.auth-form .invalid-feedback {
    color: #ffd9d9;
}

/* ===== Misc spacing polish ===== */
.media.align-items-center {
    gap: .5rem;
}

/* ===== Dashboard: soft canvas + stat tiles ===== */
body {
    background-color: #F4F6FA;
}

.content-body {
    padding: 30px;
}

@media only screen and (max-width: 575px) {
    .content-body {
        padding: 15px;
    }
}

.dash-toolbar {
    box-shadow: none;
    border: 1px solid rgba(15, 23, 42, .06);
}

.stat-tile .card-body {
    padding: 1.5rem;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.stat-icon--navy {
    background: rgba(var(--brand-navy-rgb), .1);
    color: var(--brand-navy);
}

.stat-icon--lime {
    background: rgba(var(--brand-lime-rgb), .22);
    color: #5c8a2a;
}

.stat-icon--sky {
    background: rgba(56, 152, 255, .12);
    color: #2f7fd1;
}

.stat-icon--amber {
    background: rgba(245, 158, 11, .14);
    color: #b8730a;
}

.stat-icon--rose {
    background: rgba(225, 29, 72, .12);
    color: #c11d4a;
}

.stat-icon--teal {
    background: rgba(13, 148, 136, .14);
    color: #0d8c80;
}

.stat-value {
    font-size: 1.7rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.stat-label {
    color: #64748b;
    font-size: .85rem;
    margin-top: .15rem;
}

.stat-tile--highlight {
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-dark) 100%);
    color: #fff;
}

.stat-highlight-title {
    font-weight: 700;
    font-size: 1.05rem;
}

.stat-highlight-text {
    color: rgba(255, 255, 255, .75);
    font-size: .85rem;
}

/* ===== Patient profile header (patient/show.blade.php) ===== */
.patient-profile-card .card-body {
    padding: 1.75rem;
}

.patient-profile-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.patient-avatar {
    position: relative;
    flex-shrink: 0;
}

.patient-avatar img {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid rgba(var(--brand-navy-rgb), .12);
}

.patient-gender-badge {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--brand-navy);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    text-transform: capitalize;
    padding: .15rem .6rem;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .15);
}

.patient-profile-info {
    flex: 1 1 auto;
    min-width: 180px;
}

.patient-name {
    font-weight: 700;
    color: #1e293b;
    margin-bottom: .35rem;
}

.patient-meta {
    color: #64748b;
    font-size: .9rem;
}

.patient-balance-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-dark) 100%);
    color: #fff;
    padding: .6rem 1.1rem;
    border-radius: 12px;
    line-height: 1.2;
}

.patient-balance-chip .label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .8;
}

.patient-balance-chip .value {
    font-size: 1.15rem;
    font-weight: 700;
}

.patient-stat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1.25rem;
}

.stat-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(var(--brand-navy-rgb), .06);
    color: var(--brand-navy);
    font-size: .85rem;
    font-weight: 600;
    padding: .45rem .9rem;
    border-radius: 999px;
}

.stat-pill i {
    font-size: .8rem;
}

.patient-action-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    border-top: 1px solid rgba(15, 23, 42, .06);
    padding-top: 1rem;
}

@media (max-width: 575px) {
    .patient-profile-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .patient-balance-chip {
        align-items: flex-start;
        width: 100%;
    }
}

/* ===== Profile tabs (patient/show.blade.php "custom-tab-1") ===== */
.custom-tab-1 .nav-tabs {
    border-bottom: none;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.custom-tab-1 .nav-tabs .nav-link {
    border: none;
    border-radius: 999px;
    padding: .5rem 1.1rem;
    font-weight: 600;
    font-size: .9rem;
    color: #64748b;
    background: rgba(15, 23, 42, .04);
    transition: background-color .15s ease, color .15s ease;
}

.custom-tab-1 .nav-tabs .nav-link:hover {
    background: rgba(var(--brand-navy-rgb), .1);
    color: var(--brand-navy);
}

.custom-tab-1 .nav-tabs .nav-link.active {
    background: var(--brand-navy);
    color: #fff;
}

/* ===== Mobile card layout for data tables (physio doctor / sub-admin views) =====
   Below md breakpoint, turn a table's rows into stacked cards instead of
   forcing horizontal scroll — each <td> needs a data-label attribute (added
   inline in Blade, or via DataTables' createdRow for AJAX-rendered tables). */
@media (max-width: 767px) {
    table.table-mobile-cards thead {
        display: none;
    }

    table.table-mobile-cards,
    table.table-mobile-cards tbody,
    table.table-mobile-cards tr,
    table.table-mobile-cards td {
        display: block;
        width: 100%;
    }

    table.table-mobile-cards tr {
        margin-bottom: 1rem;
        border: 1px solid rgba(15, 23, 42, .08);
        border-radius: 12px;
        padding: .5rem .9rem;
        box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
    }

    table.table-mobile-cards td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .75rem;
        text-align: right;
        padding: .5rem 0;
        border-bottom: 1px dashed rgba(15, 23, 42, .08);
    }

    table.table-mobile-cards td:last-child {
        border-bottom: none;
    }

    table.table-mobile-cards td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: .8rem;
        color: var(--brand-navy);
        text-align: left;
        flex-shrink: 0;
    }

    table.table-mobile-cards td[data-label=""]::before,
    table.table-mobile-cards td:not([data-label])::before {
        content: none;
    }
}