@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap');
@import url(./variables.css);
@import url(./header.css);
@import url(./footer.css);
@import url(./sidebar.css);

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #fff !important;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-style: normal;
    font-optical-sizing: auto;
    font-style: normal;
}

/* ===== common page scaffold ===== */
.patient-page-head {
    padding: 12px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* NEW: JS adds this when sticky should be OFF */
.patient-page-head.head-static {
    position: static;
    background: transparent;
    box-shadow: none;
}

@media (max-width:991.98px) {
    .patient-page-head {
        position: static;
    }
}

.page-title {
    font-size: 1.80rem;
    font-weight: 700;
    color: var(--green-dark);
    margin-bottom: .15rem;
}

.page-subtitle {
    font-size: .85rem;
    font-weight: 500;
    color: #2b2b2b;
    margin: 0;
}

.page-subtitle:empty {
    display: none;
}

/* white panel — wrap tables / forms / card groups in this */
.page-card {
    background: #f4f4f4;
    border: 1px solid var(--green-border);
    border-radius: 1rem;
    padding: 1.25rem;
    height: 100%;
}

/* search box used in page-actions */
.page-search {
    position: relative;
}

.page-search .form-control {
    min-width: 340px;
    height: 48px;
    border: 1px solid var(--green-border);
    border-radius: .6rem;
    padding-right: 2.75rem;
    background: #fff;
}

.page-search i {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--green-dark);
}

@media (max-width:991.98px) {
    .page-search {
        width: 100%;
    }

    .page-search .form-control {
        min-width: 100%;
    }
}

.record_count_text {
    font-size: .8rem;
    font-weight: 600;
    color: #555;
}

/* ===== default_table_v2 — common table skin for all patient pages ===== */
.default_table_v2 {
    border-radius: 10px;
    overflow: auto;
    /* needed for the sticky header */
    max-height: 520px;
    /* inner scroll — remove if you want full-height tables */
}

/* header */
.default_table_v2 thead tr th {
    background: var(--green-default);
    color: #fff;
    border: 0;
    outline: none;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
    /* stays fixed while the body scrolls */
}

.default_table_v2 thead tr th:first-child {
    border-radius: 10px 0 0 0 !important;
}

.default_table_v2 thead tr th:last-child {
    border-radius: 0 10px 0 0;
}

/* body rows — zebra like your old design */
.default_table_v2 tbody tr td {
    border: 0;
    color: var(--green-dark);
    font-size: 14px;
    padding: 12px;
}

.default_table_v2 table tbody tr:nth-child(odd) {
    background: #f4f8f6;
}

.default_table_v2 table tbody tr:nth-child(even) {
    background: #fff !important;
}

/* custom checkboxes */
.default_table_v2 input[type="checkbox"] {
    width: 21px;
    height: 21px;
    border: 2px solid #cfd8d3;
    appearance: none;
    cursor: pointer;
    border-radius: 2.5px;
    transform: unset;
    background: #fff;
    vertical-align: middle;
}

.default_table_v2 thead input[type="checkbox"] {
    border-color: #fff;
    background: transparent;
}

.default_table_v2 input[type="checkbox"]:checked {
    background: var(--green-default) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e") center / 12px no-repeat;
    border-color: var(--green-default);
}


.default_table_v2 .small_btn_table {
    border: solid 1px var(--green-dark);
    border-radius: 4px;
    width: 36px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    transition: .25s ease-in-out;
}

.default_table_v2 .small_btn_table:hover {
    background: var(--green-default);
    border: solid 1px var(--green-default);
}


.default_table_v2 .small_btn_table:hover img,
.icon_small_button:hover img {
    filter: brightness(0) invert(1);
}

/* ============ SOLID BUTTON (was .blue_btn) ============ */
.blue_btn,
a.blue_btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 45px;
    min-width: 120px;
    padding: 8px 20px;
    border: 1px solid var(--green-default);
    background-color: var(--green-default);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    line-height: normal;
    text-transform: uppercase;
    transition: all .3s ease;
}

/* ripple effect */
.blue_btn::before,
a.blue_btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    transform: translate(-50%, -50%);
    transition: width .6s ease, height .6s ease;
}

.blue_btn:hover::before {
    width: 300px;
    height: 300px;
}

.blue_btn:hover,
a.blue_btn:hover {
    background: #1f7f74;
    border-color: #1f7f74;
    color: #fff;
    box-shadow: 0 5px 15px rgba(40, 153, 139, .3);
}

.blue_btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(40, 153, 139, .2);
}

/* ============ OUTLINED BUTTON (was .gray_btn) ============ */
.gray_btn,
a.gray_btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 45px;
    min-width: 120px;
    padding: 8px 20px;
    border: 1px solid var(--green-default);
    background-color: #fff;
    color: var(--green-default);
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    line-height: normal;
    text-transform: uppercase;
    transition: all .3s ease;
    text-decoration: none;
}

/* left-to-right sweep effect */
.gray_btn::before,
a.gray_btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(40, 153, 139, .06);
    transition: left .4s ease;
}

.gray_btn:hover::before {
    left: 0;
}

.gray_btn:hover,
.gray_btn:focus,
.gray_btn:active,
a.gray_btn:hover,
a.gray_btn:focus,
a.gray_btn:active {
    background-color: #fff;
    color: #1f7f74 !important;
    border-color: #1f7f74;
    box-shadow: 0 5px 15px rgba(40, 153, 139, .15);
}

.gray_btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(40, 153, 139, .1);
}