/* ===============================
   ClinicPro Infinity - Fixed Color Theme & Global Styles
   =============================== */
:root {
    --brand-dark: #75892B; /* Dark Green */
    --brand-light: #DEF48E; /* Light Green Background */
    --brand-border: #000000;
}

/* 1. BASE LAYOUT & BACKGROUND */
html, body, .wrapper {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden !important;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background-color: #DEF48E !important;
}

.content-wrapper {
    background-color: #DEF48E !important;
    height: calc(100vh - 70px) !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    margin-top: 0 !important;
}

/* 2. HEADER & SIDEBAR */
.main-header, .main-sidebar, .brand-link {
    background-color: #75892B !important;
    color: #ffffff !important;
}

.main-header {
    border-bottom: none;
    height: 70px;
    display: flex;
    align-items: center;
    z-index: 1040;
}

.brand-link {
    height: 70px;
    line-height: 1.2;
    padding-left: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.sidebar {
    height: calc(100vh - 70px);
    overflow-y: auto;
}

.layout-fixed .wrapper .sidebar {
    height: calc(100vh - (3.5rem + 50px));
}

.nav-sidebar .nav-item > .nav-link {
    color: #ffffff !important;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    border-radius: 0;
}

.nav-sidebar .nav-item > .nav-link.active {
    background-color: rgba(255,255,255,0.3) !important;
    font-weight: bold;
}

.nav-sidebar .nav-item > .nav-link:hover {
    background-color: rgba(255,255,255,0.15) !important;
}

.nav-sidebar .nav-treeview {
    background-color: rgba(0,0,0,0.15);
    padding-left: 0;
}

.nav-sidebar .nav-treeview > .nav-item > .nav-link {
    font-size: 0.825rem;
    padding: 0.4rem 0.5rem 0.4rem 1rem;
    color: rgba(255,255,255,0.85) !important;
}

.nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
    color: #ffffff !important;
    background-color: rgba(255,255,255,0.2) !important;
    font-weight: 600;
}

.nav-sidebar .nav-treeview .nav-treeview {
    background-color: rgba(0,0,0,0.1);
}

.nav-sidebar .nav-treeview .nav-treeview > .nav-item > .nav-link {
    font-size: 0.8rem;
    padding-left: 1.5rem;
}

.nav-sidebar .nav-icon {
    font-size: 0.85rem;
    width: 1.6rem;
    text-align: center;
    margin-right: 0.4rem;
}

.nav-sidebar .nav-treeview .nav-icon {
    font-size: 0.6rem;
}

/* Sidebar Logo & Text Visibility */
body:not(.sidebar-collapse) .brand-mini-logo {
    display: none !important;
}

body.sidebar-collapse .brand-mini-logo {
    display: block !important;
}

body.sidebar-collapse .brand-text, body.sidebar-collapse .brand-subtitle {
    display: none !important;
}

body.sidebar-collapse .main-sidebar:hover .brand-mini-logo {
    display: none !important;
}

body.sidebar-collapse .main-sidebar:hover .brand-text, body.sidebar-collapse .main-sidebar:hover .brand-subtitle {
    display: block !important;
}

/* Header Search & Icons */
.header-search-box {
    background-color: #ffffff;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 5px 10px;
    transition: all 0.3s;
}

    .header-search-box:focus {
        border-color: #ffffff;
        box-shadow: 0 0 5px rgba(255,255,255,0.5);
    }

.input-group-append .btn-navbar {
    background-color: #ffffff !important;
    color: #75892B !important;
    border-radius: 0 4px 4px 0;
    height: 38px;
}

.header-icon-box {
    background-color: #ffffff;
    border-radius: 4px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #75892B;
    margin-left: 8px;
}

    .header-icon-box i {
        color: #75892B;
    }

.header-link {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}

/* 3. CLINIC BOOKING SPECIFIC UI */
.clinic-create-wrapper {
    background-color: #dced8b;
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    font-size: 11px;
    color: #000;
    max-width: 1000px;
    margin: 0 auto;
    padding: 10px 15px;
    border: 1px solid #b8cc78;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.clinic-container {
    background: #dceaa8;
    padding: 10px;
    border-radius: 4px;
    font-family: 'Segoe UI', Arial, sans-serif;
}

.clinic-container .k-content {
    background-color: transparent !important;
}

.top-bar-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid #b8cc78;
    padding-bottom: 8px;
}

.main-split-container {
    display: flex;
    gap: 20px;
}

.panel-left, .panel-right {
    flex: 1;
    min-width: 0;
}

.panel-right {
    border-left: 1px solid #b8cc78;
    padding-left: 15px;
}

/* Form Grids & Alignment */
.form-grid-left {
    display: grid;
    grid-template-columns: 90px 1fr;
    row-gap: 4px;
    align-items: center;
}

.form-grid-right {
    display: grid;
    grid-template-columns: 85px 1fr;
    row-gap: 4px;
    align-items: center;
}

    .form-grid-left > label, .form-grid-right > label {
        margin: 0;
        white-space: nowrap;
    }

.input-group-dense {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

/* Typography & Labels */
label {
    display: block;
    height: 16px;
    font-size: 11px;
    margin-bottom: 2px;
    font-weight: 600;
    color: #333;
}

.section-heading {
    font-weight: bold;
    color: #333;
    margin-bottom: 4px;
    font-size: 11px;
}

.txt-dark-green {
    color: #5a6e1d;
}

.fw-bold {
    font-weight: bold;
}

.fs-11 {
    font-size: 11px;
}

/* Inputs */
.form-input {
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    font-size: 11px;
    border: 1px solid #a9a9a9;
    border-radius: 0;
    padding: 1px 4px;
    height: 20px;
    outline: none;
    box-sizing: border-box;
}

textarea.form-input {
    height: auto;
    resize: none;
}

.form-input:focus {
    border-color: #75892B;
}

.readonly-input {
    background-color: #e9ecef;
    color: #555;
    pointer-events: none;
}

/* Width Utilities */
.w-30px {
    width: 30px;
}

.w-50px {
    width: 50px;
}

.w-75px {
    width: 75px;
}

.w-80px {
    width: 80px;
}

.w-100px {
    width: 100px;
}

.w-110px {
    width: 110px;
}

.w-150px {
    width: 150px;
}

.w-200px {
    width: 200px;
}

.w-250px {
    width: 250px;
}

.w-120px {
    width: 120px;
}

.w-100 {
    width: 100%;
}

/* Specialized Elements */
.picture-box {
    width: 60px;
    height: 60px;
    border: 1px solid #999;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    flex-shrink: 0;
    margin-left: 4px;
}

.custom-checkbox {
    margin: 0;
    width: 12px;
    height: 12px;
}

/* Dashboard Widgets */
.dashboard-box, .card, .info-box {
    background-color: #ffffff !important;
    border: 1px solid #000000;
    border-radius: 4px;
    box-shadow: none !important;
    color: #000000;
    margin-bottom: 15px;
}

/* 4. UTILITIES & NUMERIC INPUTS */
.input-numeric {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}

    .input-numeric::-webkit-outer-spin-button, .input-numeric::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.text-uppercase-input {
    text-transform: uppercase !important;
}

.content-header {
    padding: 3px .5rem;
}

p {
    margin-top: 0;
    margin-bottom: 0rem;
}

/* 5. MINI GRIDS (Billing Grid) */
.grid-layout {
    display: flex;
    gap: 4px;
    align-items: flex-start;
}

.mini-grid-container {
    flex: 1;
    border: 1px solid #999;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.grid-action-buttons button {
    display: block;
    width: 50px;
    height: 20px;
    margin-bottom: 4px;
    background: #fff;
    border: 1px solid #999;
    text-align: left;
    padding: 0 4px;
    cursor: pointer;
}

/* 6. BUTTONS & ACTION BARS */
.action-bar {
    padding: 8px 12px;
    border-radius: 4px;
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.bottom-action-bar {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
    padding-bottom: 5px;
}

.btn-main-save, .btn-main-clear {
    padding: 4px 25px;
    border: 1px solid #999;
    font-family: inherit;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 3px;
}

.btn-main-save {
    background: #e6f0c2;
    border-color: #75892B;
}

.btn-main-clear {
    background: #ffffff;
}

.btn-clinic {
    /*font-size: 13px !important;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 4px;
    transition: all 0.2s;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 5px;*/
    background-color: #75892B !important;
    border-color: #75892B !important;
    color: #ffffff !important;
    border-radius: 20px !important;
}

.btn-clinic-save {
    background-color: #28a745;
    color: white;
}

.btn-clinic-print {
    background-color: #17a2b8;
    color: white;
}

.btn-clinic-quit {
    background-color: #dc3545;
    color: white;
}

.btn-custom-green {
    background-color: #75892B !important;
    border-color: #75892B !important;
    color: #ffffff !important;
    border-radius: 20px !important;
}

/* 7. KENDO UI COMPATIBILITY */
.k-grid {
    font-size: 11px;
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    border: none;
}

.k-grid-header {
    /*background-color: #f8f9fa !important;*/
    background-color: #75892B !important;
    color: #212529 !important;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
}

    .k-grid-header th.k-header {
        padding: 4px;
        background: #75892B;
        font-weight: bold;
        color: #000;
    }
    .k-grid-header .k-link, .k-grid-header .k-header {
        color: white !important;
        font-weight: bold !important;
    }
.k-grid td {
    padding: 2px 4px;
}

.k-grid-content tr.k-alt {
    background-color: #fdfdfd;
}

.k-grid-content tr:hover {
    background-color: #f1f7ff !important;
}

.k-button {
    font-size: 0.875rem;
    padding: 4px 10px;
    margin: 2px;
    border-radius: 6px;
}

.k-grid .k-button i {
    margin: 0;
    font-size: 1rem;
    line-height: 1;
}

.k-grid .btn-brand-edit {
    background-color: var(--brand-dark) !important;
    border-color: var(--brand-dark) !important;
    color: #ffffff !important;
}

    .k-grid .btn-brand-edit:hover {
        background-color: #5d6d22 !important;
        color: #ffffff !important;
    }

.k-grid .btn-brand-delete {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

    .k-grid .btn-brand-delete:hover {
        background-color: #c82333 !important;
        color: #ffffff !important;
    }

.k-button-solid-secondary {
    background-color: #75892B;
    color: #ffffff !important;
    border-radius: 20px !important;
}

    .k-button-solid-secondary:hover {
        background-color: #5d6d22;
        color: #ffffff !important;
        border-radius: 20px !important;
    }

.k-button-solid-error {
    background-color: #dc3545;
    color: white;
    border-radius: 20px !important;
}

    .k-button-solid-error:hover {
        background-color: #c82333;
        border-radius: 20px !important;
    }

/* 8. FOOTER */
.main-footer {
    background-color: #75892B !important;
    color: #ffffff;
    border: none;
    text-align: center;
    padding: 10px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
}

/* 9. SPECIAL KENDO GRID SIDE BUTTONS */
.grid-action-buttons button {
    display: flex;
    align-items: center; /* Vertically centers the + and the text */
    justify-content: left; /* Keeps text aligned to the left */
    gap: 4px; /* Adds consistent space between symbol and text */
    width: 60px; /* Slightly wider to fit the flex gap */
    height: 24px;
    margin-bottom: 5px;
    background: #fff;
    border: 1px solid #999;
    padding: 0 6px;
    cursor: pointer;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 500;
}

.grid-action-buttons button:hover {
    background-color: #f0f0f0;
}
.k-button-solid-info {
    background-color: #17a2b8 !important; /* Bootstrap Info Blue */
    border-color: #17a2b8 !important;
    color: #ffffff !important;
}

    .k-button-solid-info:hover {
        background-color: #138496 !important;
        border-color: #117a8b !important;
    }

.pcareof {
    padding-bottom: 48px;
}

.bg-brand-primary {
    background-color: #75892B !important;
    color: #ffffff !important;
}


/* END OF ACTIVE STYLES */