/* -----------------------------
   Base & Bootstrap overrides
------------------------------ */

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}


body {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
}

body {
    margin-bottom: 60px;
}

/* Bootstrap focus ring */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    border-color: #ff7a1a !important;
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem #258cfb;
}

/* Floating label placeholder behavior */
.form-floating > .form-control::placeholder,
.form-floating > .form-control-plaintext::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control:focus::placeholder,
.form-floating > .form-control-plaintext:focus::placeholder {
    text-align: start;
}

/* -----------------------------
   FULL PAGE WALLPAPER
------------------------------ */

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}

body {
    min-height: 100vh;
    background: url('/img/wallpaper.jpg') no-repeat center center fixed;
    background-size: cover;
}

/* -----------------------------
   Glass content surface
------------------------------ */

.page-surface {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    padding: 20px;
}

/* -----------------------------
   Patient list zebra rows
------------------------------ */

.patient-table tbody tr:nth-child(even) {
    background-color: #f7f7f7;
}

.patient-table tbody tr:hover {
    background-color: #eef3f8;
}


    }
    /* ===============================
   Patient EDIT – soft grey inputs
   =============================== */

    .patient-edit input.form-control,
    .patient-edit select.form-select,
    .patient-edit textarea.form-control {
        background-color: #f3f4f6 !important;
        border-color: #d1d5db !important;
    }

        /* Prevent browser autofill from forcing white */
        .patient-edit input.form-control:-webkit-autofill,
        .patient-edit input.form-control:-webkit-autofill:hover,
        .patient-edit input.form-control:-webkit-autofill:focus {
            -webkit-box-shadow: 0 0 0px 1000px #f3f4f6 inset !important;
            box-shadow: 0 0 0px 1000px #f3f4f6 inset !important;
        }

        /* Focus state (still editable, just clearer) */
        .patient-edit input.form-control:focus,
        .patient-edit select.form-select:focus,
        .patient-edit textarea.form-control:focus {
            background-color: #ffffff !important;
            border-color: #86b7fe !important;
        }

.patient-details dd {
    background-color: #DBDBD9;
    border: 1px solid #e1e3e6;
    border-radius: 6px;
    padding: 6px 10px;
    min-height: 38px;
    display: flex;
    align-items: center;
}

/* EDIT: grey editable inputs on load */
.patient-edit input.form-control,
.patient-edit select.form-select,
.patient-edit textarea.form-control {
    background-color: #DBDBD9 !important;
    border-color: #d1d5db !important;
    border-width: 1.5px !important;
}

    /* Browser autofill can force white, so fix it */
    .patient-edit input.form-control:-webkit-autofill,
    .patient-edit input.form-control:-webkit-autofill:hover,
    .patient-edit input.form-control:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0px 1000px #DBDBD9 inset !important;
        box-shadow: 0 0 0px 1000px #D9D5D4 inset !important;
        border-width: 5px !important;
    }

/* ===============================
   VISIT – grey fields (both tabs)
   =============================== */

.visit-edit input.form-control,
.visit-edit select.form-select,
.visit-edit textarea.form-control {
    background-color: #DBDBD9 !important;
    border-color: #d1d5db !important;
    border-width: 1.5px !important;
}

    /* Fix browser autofill forcing white */
    .visit-edit input.form-control:-webkit-autofill,
    .visit-edit input.form-control:-webkit-autofill:hover,
    .visit-edit input.form-control:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0px 1000px #DBDBD9 inset !important;
        box-shadow: 0 0 0px 1000px #f3f4f6 inset !important;
    }

    /* Optional: keep same color on focus (medical UI style) */
    .visit-edit input.form-control:focus,
    .visit-edit select.form-select:focus,
    .visit-edit textarea.form-control:focus {
        ///background-color: #DBDBD9 !important;
        border-color: #86b7fe;
        box-shadow: 0 0 0 0.15rem rgba(13,110,253,.15);
        border-width: 1.5px !important;
    }

.product-edit input.form-control,
.product-edit select.form-select,
.product-edit textarea.form-control {
 
    border-color: #d1d5db !important;
    border-width: 1.5px !important;

}

.navbar-brand img {
    max-height: 40px;
}

/* Navbar welcome text */
.navbar-welcome {
    color: #ffffff;
    font-weight: 700; /* bold */
    font-size: 0.95rem;
}

a[title],
span[title] {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Visit history 3-dots button */
.visit-history-btn {
    border: none !important;
    background-color: #f8f9fa !important;
}

    .visit-history-btn:hover {
        background-color: #e9ecef !important;
    }

.section-top-bar {
    background-color: #000;
    color: #fff;
    padding: 8px 15px;
    font-weight: 600;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.card.section-card {
    border: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* ===== Optisoft forms: premium layout ===== */
.patient-edit .form-control,
.patient-edit .form-select,
.patient-edit textarea.form-control {
    width: 100%;
    max-width: 420px; /* ✅ limit long fields */
}

/* Make big fields wider (Address / Remark / Notes) */
.patient-edit .field-wide {
    max-width: 860px;
}

/* Keep fields aligned to left inside columns */
.patient-edit .col-md-4,
.patient-edit .col-md-8 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Optional: slightly softer grey like your screenshot */
.patient-edit .form-control,
.patient-edit .form-select,
.patient-edit textarea.form-control {
    background-color: #f8f9fa;
    border-color: #e9ecef;
    border: 1.5px solid #d1d5db !important;
}

/* Optisoft: grey filled inputs (Details) */
.patient-details .form-control,
.patient-details .form-select,
.patient-details textarea.form-control,
.patient-details .pd-link-input {
    background-color: #e0e0de !important; /* like your screenshot */
    border-color: #d6d6d4 !important;
    color: #212529 !important;
    border: 1.5px solid #d1d5db !important;
}

/* keep the link looking like an input */
.patient-details .pd-link-input {
    display: block;
    padding: .375rem .75rem;
    border: 1px solid #d6d6d4;
    border-radius: .375rem;
    text-decoration: none;
}

    /* optional hover */
    .patient-details .pd-link-input:hover {
        background-color: #d8d8d6 !important;
        text-decoration: none;
    }
/* ===== White Navbar Styling (Softer Grey Text) ===== */

.navbar {
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

    .navbar .nav-link {
        color: #6b7280 !important; /* 👈 lighter grey */
        font-weight: 500;
    }

        .navbar .nav-link:hover {
            color: #374151 !important; /* darker on hover */
        }

        .navbar .nav-link.active {
            color: #1f2937 !important; /* slightly darker for active */
            font-weight: 600;
        }

.navbar-brand {
    color: #374151 !important;
}

.navbar-welcome {
    color: #6b7280 !important;
}

<style >
.auth-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.22);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

    .brand img {
        height: 34px;
        width: auto;
        filter: drop-shadow(0 2px 8px rgba(0,0,0,0.25));
    }

    .brand span {
        font-weight: 700;
        letter-spacing: .3px;
        color: rgba(255,255,255,0.92);
        white-space: nowrap;
    }

/* ✅ Smaller DB button */
.btn-db {
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.2;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.55);
    color: rgba(255,255,255,0.95);
    background: rgba(255,255,255,0.10);
}

    .btn-db:hover {
        background: rgba(255,255,255,0.18);
        border-color: rgba(255,255,255,0.75);
        color: #fff;
    }

.db-surface {
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.25);
}


.welcome-user {
    font-size: 0.9rem;
    color: #222;
    background: rgba(0,0,0,0.04);
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 500;
    letter-spacing: .2px;
}


.btn-login {
    background: linear-gradient(135deg, #1fae66, #178a52);
    border: none;
    color: #fff;
    font-weight: 600;
    padding: 12px 0;
    border-radius: 10px;
    transition: all 0.25s ease;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

    .btn-login:hover {
        background: linear-gradient(135deg, #24c273, #1fae66);
        transform: translateY(-1px);
        box-shadow: 0 8px 22px rgba(0,0,0,0.35);
    }

    .btn-login:active {
        transform: translateY(0);
        box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    }


/* Gear button bottom-right */
.db-gear-btn {
    position: absolute;
    bottom: 18px;
    right: 22px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.35);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    transition: all 0.2s ease;
}

    .db-gear-btn:hover {
        background: rgba(255,255,255,0.25);
        transform: rotate(15deg);
    }

</style >