:root {
    --vn-primary: #087f8c;
    --vn-primary-dark: #056774;
    --vn-primary-soft: #e8f5f5;
    --vn-ink: #172b3a;
    --vn-muted: #718096;
    --vn-bg: #f4f7f8;
    --vn-line: #e5ecef;
    --vn-card-radius: 12px;
    --vn-shadow: 0 5px 20px rgba(31, 55, 66, .07);
}

body { color: var(--vn-ink); background: var(--vn-bg); }
.app-header__logo .logo-src {
    width: 168px;
    height: 52px;
    background-image: none !important;
}
.app-main, .app-main__outer, .app-main__inner { background-color: var(--vn-bg); }
.app-main__inner { padding: 28px 30px 34px; }
.app-header.bg-info { background: linear-gradient(90deg, #076f7d, #0a8994) !important; }
.app-header { box-shadow: 0 2px 13px rgba(31, 55, 66, .1) !important; }
.dropdown-menu-lg { width: 350px; min-width: 350px; overflow: hidden; border: 0; border-radius: 14px; box-shadow: 0 20px 48px rgba(31,55,66,.2); }
.dropdown-menu-lg .dropdown-menu-header { margin: 0; }
.dropdown-menu-lg .dropdown-menu-header-inner.bg-info { min-height: 0; padding: 20px; background: linear-gradient(135deg, #076f7d, #19a092) !important; }
.dropdown-menu-lg .dropdown-menu-header-inner .menu-header-image { display: none; }
.dropdown-menu-lg .menu-header-content { position: relative; padding: 0; }
.dropdown-menu-lg .menu-header-content .widget-content-wrapper { align-items: center; }
.dropdown-menu-lg .menu-header-content img.rounded-circle { width: 46px; height: 46px; border: 2px solid rgba(255,255,255,.55); object-fit: cover; }
.dropdown-menu-lg .menu-header-content .widget-heading { color: #fff; font-size: .95rem; font-weight: 700; }
.dropdown-menu-lg .menu-header-content .widget-subheading { max-width: 150px; overflow: hidden; color: rgba(255,255,255,.75); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-menu-lg .menu-header-content .btn-focus { padding: 7px 11px; border: 1px solid rgba(255,255,255,.3) !important; border-radius: 8px; background: rgba(255,255,255,.14) !important; box-shadow: none; color: #fff; font-size: .75rem; }
.dropdown-menu-lg .menu-header-content .btn-focus:hover { border-color: #fff !important; background: #fff !important; color: var(--vn-primary); }
.dropdown-menu-lg > ul.nav.flex-column { display: none; }
.grid-menu-2col .row > .col-sm-6:first-child { flex: 0 0 100%; max-width: 100%; }
.grid-menu-2col .row > .col-sm-6:not(:first-child) { display: none; }
.grid-menu-2col { padding: 8px; border: 0; background: #fff; }
.grid-menu-2col .btn { width: 100%; display: flex; align-items: center; justify-content: flex-start; padding: 11px 13px !important; border: 0; border-radius: 9px; color: #40545e; background: #fff; font-size: .88rem; font-weight: 600; }
.grid-menu-2col .btn .btn-icon-wrapper { margin: 0 11px 0 0 !important; color: var(--vn-primary) !important; background: none !important; font-size: 1.15rem; }
.grid-menu-2col .btn:hover { background: var(--vn-primary-soft); }
.app-sidebar { border-right: 1px solid var(--vn-line); box-shadow: 4px 0 18px rgba(31, 55, 66, .04) !important; }
.app-sidebar__heading { color: #90a0a7; letter-spacing: .08em; }
.vertical-nav-menu li a { margin: 2px 10px; border-radius: 8px; color: #536771; }
.vertical-nav-menu li a:hover { color: var(--vn-primary); background: var(--vn-primary-soft); }
.vertical-nav-menu li a.mm-active { color: var(--vn-primary); background: var(--vn-primary-soft); font-weight: 600; }
.vertical-nav-menu i.metismenu-icon {
    color: #168791 !important;
    opacity: 1 !important;
    font-size: 1.15rem;
    font-weight: 600;
    text-shadow: 0 1px 1px rgba(8,127,140,.08);
}
.vertical-nav-menu li a:hover i.metismenu-icon,
.vertical-nav-menu li a.mm-active i.metismenu-icon {
    color: #056774 !important;
    opacity: 1 !important;
    transform: scale(1.06);
}
.vertical-nav-menu i.metismenu-state-icon { color: #6f8790 !important; opacity: .9 !important; }
.user-panel img { max-width: 155px; max-height: 75px; object-fit: contain; }

.vn-page-heading, .dashboard-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}
.vn-page-heading h1, .dashboard-heading h2 { margin: 0 0 5px; color: var(--vn-ink); font-size: 1.7rem; line-height: 1.25; font-weight: 700; letter-spacing: -.025em; }
.vn-page-heading p, .dashboard-heading p { margin: 0; color: var(--vn-muted); }
.vn-heading-icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 48px; border-radius: 12px; color: var(--vn-primary); background: var(--vn-primary-soft); font-size: 1.25rem; }
.vn-heading-copy { display: flex; align-items: center; gap: 14px; }

.card, .dashboard-panel, .dashboard-kpi { border: 1px solid rgba(229,236,239,.9) !important; border-radius: var(--vn-card-radius) !important; box-shadow: var(--vn-shadow) !important; }
.card-header { min-height: 58px; padding: 14px 20px; border-bottom: 1px solid var(--vn-line); background: #fff; color: var(--vn-ink); font-weight: 700; }
.card-body { padding: 20px; }
.card-footer { border-top: 1px solid var(--vn-line); background: #fff; }

.btn { border-radius: 8px; font-weight: 600; }
.btn-success, .btn-primary { border-color: var(--vn-primary) !important; background: var(--vn-primary) !important; }
.btn-success:hover, .btn-primary:hover { border-color: var(--vn-primary-dark) !important; background: var(--vn-primary-dark) !important; }
.vn-primary-action { padding: 10px 16px; box-shadow: 0 7px 16px rgba(8,127,140,.18); }

.vn-data-card .card-header { display: flex; align-items: center; justify-content: space-between; }
.vn-data-card .card-body { padding: 0; }
.vn-table { margin: 0 !important; border: 0 !important; }
.vn-table thead th { padding: 14px 16px !important; border-width: 0 0 1px !important; border-color: var(--vn-line) !important; background: #f8fafb; color: #647983; font-size: .76rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; }
.vn-table tbody td { padding: 14px 16px !important; vertical-align: middle !important; border-width: 0 0 1px !important; border-color: #edf1f3 !important; color: #40545e; }
.vn-table.table-striped tbody tr:nth-of-type(odd) { background: #fff; }
.vn-table tbody tr:hover { background: #f3fafa !important; }
.vn-table tbody tr:last-child td { border-bottom: 0 !important; }
.vn-patient-link { width: 36px !important; height: 36px; display: inline-flex !important; align-items: center; justify-content: center; float: none !important; border-radius: 9px !important; }
.vn-table .tools { display: flex; align-items: center; gap: 6px; min-width: 120px; }
.vn-table .tools .btn { width: 34px !important; height: 34px; display: inline-flex !important; align-items: center; justify-content: center; float: none !important; margin: 0 !important; padding: 0; border: 0; border-radius: 8px !important; }
.dataTables_wrapper { padding: 18px 20px 8px; }
.dataTables_wrapper .row:last-child { padding-top: 12px; }
.dataTables_filter input, .dataTables_length select { height: 38px; border: 1px solid #dce5e9; border-radius: 8px; background: #fff; outline: none; }
.dataTables_filter input { min-width: 220px; padding: 7px 11px; }
.dataTables_filter input:focus { border-color: var(--vn-primary); box-shadow: 0 0 0 3px rgba(8,127,140,.1); }
.page-item.active .page-link { border-color: var(--vn-primary); background: var(--vn-primary); }
.page-link { color: var(--vn-primary); }

.modal-content { overflow: hidden; border: 0; border-radius: 14px; box-shadow: 0 25px 65px rgba(20,43,54,.24); }
/* Centered dialogs span the viewport; keep the shadow on the content only. */
#quick-patient-modal .modal-dialog { box-shadow: none; }
.modal-header { padding: 18px 22px; border: 0 !important; border-bottom: 1px solid var(--vn-line) !important; background: #fff !important; color: var(--vn-ink) !important; }
.modal-header .modal-title { font-size: 1.1rem; font-weight: 700; }
.modal-header .close { color: #607780; opacity: .7; text-shadow: none; }
.modal-body { padding: 22px; }
.modal-body::after { content: ''; display: table; clear: both; }
.modal-footer { padding: 15px 22px; border-top: 1px solid var(--vn-line); background: #f8fafb; }
.modal .form-control { min-height: 43px; border: 1px solid #dce5e9; border-radius: 8px; background: #fbfdfd; }
.modal textarea.form-control { min-height: 90px; }
.modal .form-control:focus { border-color: var(--vn-primary); background: #fff; box-shadow: 0 0 0 3px rgba(8,127,140,.1); }
.modal label { margin-bottom: 7px; color: #40545e; font-size: .86rem; font-weight: 600; }
.vn-confirm-modal { background: rgba(18, 38, 46, .18); backdrop-filter: blur(2px); }
.vn-confirm-modal .modal-dialog { max-width: 460px; box-shadow: none !important; }
.vn-confirm-modal .modal-content { isolation: isolate; opacity: 1 !important; background: #fff !important; box-shadow: 0 24px 65px rgba(13,35,44,.28) !important; }
.vn-confirm-modal .modal-header { align-items: center; padding: 19px 21px; }
.vn-confirm-heading { display: flex; align-items: center; gap: 13px; }
.vn-confirm-icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 42px; border-radius: 11px; color: #d14343; background: #fff0f0; font-size: 1rem; }
.vn-confirm-heading .modal-title { margin: 0 0 2px; color: var(--vn-ink); font-size: 1.05rem; }
.vn-confirm-heading small { color: var(--vn-muted); }
.vn-confirm-modal .modal-body { padding: 23px 22px; color: #40545e; line-height: 1.55; }
.vn-confirm-note { color: var(--vn-muted); font-size: .86rem; }
.vn-confirm-modal .modal-footer { justify-content: flex-end; gap: 7px; }
.vn-confirm-modal .modal-footer .btn { min-width: 104px; margin: 0; padding: 9px 14px; }
.vn-confirm-modal .btn-danger { border-color: #d14343; background: #d14343; }
.vn-confirm-modal .btn-danger:hover { border-color: #b83232; background: #b83232; }
/* Brzi pregled pacijenta */
#patient_profile { background: rgba(16, 36, 44, .18); backdrop-filter: blur(5px); }
#patient_profile .vn-patient-profile-dialog { width: calc(100% - 32px); max-width: 860px; }
#patient_profile .modal-content { overflow: hidden; border: 1px solid rgba(255,255,255,.7); border-radius: 22px; background: #f4f7f8; box-shadow: 0 32px 100px rgba(14,37,47,.26); }
#patient_profile .vn-patient-summary { position: relative; align-items: center; gap: 20px; padding: 30px 32px; color: #203943 !important; background: linear-gradient(115deg, #fff 35%, #edf8f5) !important; border-bottom: 1px solid #e1eeea !important; }
#patient_profile .vn-patient-summary-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 70px; height: 70px; border: 5px solid #fff; border-radius: 22px; background: #dcefeb; color: #167c72; font-size: 1.5rem; font-weight: 700; box-shadow: 0 5px 18px rgba(30,102,89,.1); }
#patient_profile .vn-patient-summary-copy { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#patient_profile .vn-patient-summary-copy p { margin: 0 0 7px; color: #719089; font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
#patient_profile .modal-title { margin: 0 0 10px; color: #203943; font-size: 1.65rem; line-height: 1.2; font-weight: 700; letter-spacing: -.035em; }
#patient_profile .vn-patient-summary-copy > span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid #dce9e5; border-radius: 6px; color: #607a75; background: rgba(255,255,255,.8); font-size: .74rem; }
#patient_profile .vn-patient-summary-copy > span strong { color: #2d5f55; }
#patient_profile .close { display: flex; align-items: center; justify-content: center; align-self: flex-start; flex: 0 0 32px; height: 32px; margin: -7px -8px 0 0; padding: 0; border: 1px solid #dce8e4; border-radius: 50%; color: #6b827c; background: rgba(255,255,255,.85); opacity: 1; font-size: 1.3rem; text-shadow: none; transition: background .15s; }
#patient_profile .close:hover { background: #e5f0ed; color: #254f45; }
#patient_profile .modal-body { padding: 22px 26px; }
#patient_profile .vn-patient-details-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#patient_profile .vn-patient-detail-section { min-width: 0; padding: 20px; border: 1px solid #e3e9ec; border-radius: 14px; background: #fff; box-shadow: 0 2px 4px rgba(25,49,59,.025); }
#patient_profile .vn-patient-detail-section h3 { display: flex; align-items: center; margin: 0 0 15px; color: #2d4651; font-size: .88rem; font-weight: 700; }
#patient_profile .vn-patient-detail-section h3 > i { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; color: #338a81; background: #edf7f5; font-size: .8rem; }
#patient_profile .vn-patient-details { margin: 0; }
#patient_profile .vn-patient-details > div { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid #f0f3f4; }
#patient_profile .vn-patient-details dt { margin: 0; color: #7a8b94; font-size: .77rem; line-height: 1.6; font-weight: 400; }
#patient_profile .vn-patient-details dd { margin: 0; color: #2b424d; font-size: .85rem; font-weight: 500; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
#patient_profile .vn-patient-details dd.is-empty { color: #a0acb2; font-weight: 400; font-style: italic; }
#patient_profile .vn-patient-notes { margin-top: 16px; }
#patient_profile .vn-patient-notes .vn-patient-details > div { grid-template-columns: 150px minmax(0, 1fr); padding: 13px 0; }
#patient_profile .vn-patient-notes .vn-patient-allergies { padding: 12px 14px; margin-bottom: 6px; border: 1px solid #f2e7cb; border-radius: 9px; background: #fffbf2; }
#patient_profile .vn-patient-allergies dt { color: #9b7c3a; font-weight: 600; }
#patient_profile .vn-patient-allergies.is-empty { border-color: #e9eef0; background: #f8fafb; }
#patient_profile .vn-patient-allergies.is-empty dt { color: #7a8b94; }
#patient_profile .modal-footer { gap: 10px; padding: 17px 26px; border-top: 1px solid #e3e9ec; background: #fff; }
#patient_profile .modal-footer .btn { margin: 0; padding: 10px 17px; border-radius: 9px; font-size: .82rem; font-weight: 600; }
#patient_profile .vn-patient-open-chart { background: #087f8c; border-color: #087f8c; box-shadow: 0 4px 10px rgba(8,127,140,.15); }
#patient_profile .vn-patient-open-chart:hover { background: #066974; border-color: #066974; }
@media (max-width: 575px) {
    #patient_profile .vn-patient-profile-dialog { margin: 16px auto; }
    #patient_profile .vn-patient-summary { gap: 12px; padding: 24px 18px; }
    #patient_profile .vn-patient-summary-icon { flex-basis: 52px; height: 52px; border-radius: 16px; font-size: 1.1rem; }
    #patient_profile .modal-title { font-size: 1.25rem; }
    #patient_profile .modal-body { padding: 14px; }
    #patient_profile .vn-patient-details-columns { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    #patient_profile .vn-patient-detail-section { padding: 16px; }
    #patient_profile .vn-patient-notes { margin-top: 12px; }
    #patient_profile .vn-patient-notes .vn-patient-details > div { grid-template-columns: minmax(0, 1fr); gap: 5px; }
    #patient_profile .modal-footer { padding: 14px 18px; }
}

/* Karton pacijenta */
.vn-patient-status { display: inline-flex; align-items: center; padding: 6px 10px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.vn-patient-create-actions { display: flex; align-items: center; gap: 9px; }
.vn-patient-upgrade-alert { display: flex; align-items: flex-start; }
.vn-patient-upgrade-alert div { display: flex; flex-direction: column; }
.vn-patient-upgrade-alert span { margin-top: 2px; }
.patient-profile-main, .patient-findings { padding-right: 0; padding-left: 0; }
.patient-profile-main > .card, .patient-findings > .card { overflow: hidden; }
.patient-profile-main > .card > .card-body { padding: 0; }
.patient-profile-main .tabs-animated { display: flex; gap: 5px; margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--vn-line); background: #fff; }
.patient-profile-main .tabs-animated .nav-link { padding: 10px 15px; border-radius: 8px; color: #607680 !important; background: transparent; font-size: .88rem; font-weight: 600; }
.patient-profile-main .tabs-animated .nav-link::before { display: none !important; content: none !important; box-shadow: none !important; }
.patient-profile-main .tabs-animated .nav-link span { color: inherit !important; }
.patient-profile-main .tabs-animated .nav-link:hover { color: var(--vn-primary) !important; background: #f1f8f8; }
.patient-profile-main .tabs-animated .nav-link.active { color: #fff !important; background: var(--vn-primary); box-shadow: 0 5px 12px rgba(8,127,140,.18); }
.patient-profile-main .tab-content { padding: 22px; }
.patient-profile-main .tab-pane::after { content: ''; display: table; clear: both; }
.patient-profile-main .form-control { border: 1px solid #dce5e9; border-radius: 8px; background: #fbfdfd; }
.patient-profile-main .form-control:focus { border-color: var(--vn-primary); background: #fff; box-shadow: 0 0 0 3px rgba(8,127,140,.1); }
.patient-profile-main label { color: #40545e; font-size: .85rem; font-weight: 600; }
.patient-profile-main #tab-animated-1.active { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(420px, 1.2fr); gap: 20px; }
.patient-profile-main #tab-animated-1 > .tabs-animation { min-width: 0; }
.patient-profile-main #tab-animated-1 .card { height: 100%; margin-bottom: 0 !important; box-shadow: none !important; }
.patient-profile-main table img { max-width: 160px; height: auto; border-radius: 8px; }
.patient-findings { margin-top: 2px; }
.patient-findings .card-header { display: flex; align-items: center; justify-content: space-between; }
.patient-findings .card-body { overflow-x: auto; }

.vn-finding-modal { max-width: 820px; }
.vn-finding-modal .modal-header { align-items: center; }
.vn-finding-modal .modal-header .modal-title { color: var(--vn-ink); }
.vn-finding-modal .modal-header .modal-title i { color: var(--vn-primary); }
.vn-finding-modal .modal-header small { display: block; margin-top: 4px; color: var(--vn-muted); }
.vn-finding-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px 18px; }
.vn-finding-grid .control-group { min-width: 0; }
.vn-finding-grid .vn-finding-hidden { display: none; }
.vn-finding-date { grid-column: span 4; }
.vn-finding-tooth { grid-column: span 8; }
.vn-finding-text { grid-column: span 6; }
.vn-finding-grid p { margin-bottom: 12px; }
.vn-finding-grid textarea { min-height: 92px; resize: vertical; }
.vn-finding-grid .vn-finding-tooth textarea { min-height: 43px; }
.vn-finding-modal .modal-footer { display: flex; justify-content: flex-end; text-align: right !important; }

/* Profil zaposlenog */
.user-profile-main { padding-right: 0; padding-left: 0; }
.user-profile-main > .card { overflow: hidden; }
.user-profile-main .card-header { font-size: 1rem; }
.user-profile-main .card-body { padding: 22px 20px 0; }
.user-profile-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.user-profile-form > .control-group { min-width: 0; }
.user-profile-form > .user-profile-note { grid-column: 1 / -1; }
.user-profile-form > .user-profile-hidden { display: none; }
.user-profile-form label { margin-bottom: 7px; color: #40545e; font-size: .85rem; font-weight: 600; }
.user-profile-form .form-control { min-height: 43px; border: 1px solid #dce5e9; border-radius: 8px; background: #fbfdfd; }
.user-profile-form textarea.form-control { min-height: 100px; resize: vertical; }
.user-profile-form .form-control:focus { border-color: var(--vn-primary); background: #fff; box-shadow: 0 0 0 3px rgba(8,127,140,.1); }
.user-profile-form .form-control:disabled { color: #718096; background: #f1f4f5; }
.user-profile-form .form-actions { grid-column: 1 / -1; margin: 8px -20px 0; padding: 15px 20px; border-top: 1px solid var(--vn-line); background: #f8fafb; text-align: right !important; }
.user-profile-form .form-actions p { margin: 0; padding: 0; }
.user-profile-form .form-actions .btn { margin-left: 6px; }
.vn-color-help { display: block; margin: -3px 0 7px; color: var(--vn-muted); font-size: .75rem; }
.vn-color-picker { display: flex; width: 100%; }
.vn-color-picker .form-control { flex: 1 1 auto; border-radius: 8px 0 0 8px; }
.vn-color-picker .input-group-addon { width: 48px; display: flex; align-items: center; justify-content: center; flex: 0 0 48px; border: 1px solid #dce5e9; border-left: 0; border-radius: 0 8px 8px 0; background: #f7fafb; cursor: pointer; }
.vn-color-picker .input-group-addon i { width: 25px; height: 25px; display: block; border: 2px solid #fff; border-radius: 7px; box-shadow: 0 0 0 1px rgba(23,43,58,.16); }
.vn-native-color-picker .input-group-addon { position: relative; overflow: hidden; margin: 0; }
.vn-native-color-picker input[type='color'] { width: 30px; height: 30px; padding: 0; border: 0; outline: 0; background: transparent; cursor: pointer; }
.vn-native-color-picker input[type='color']::-webkit-color-swatch-wrapper { padding: 2px; }
.vn-native-color-picker input[type='color']::-webkit-color-swatch { border: 2px solid #fff; border-radius: 7px; box-shadow: 0 0 0 1px rgba(23,43,58,.16); }
.vn-native-color-picker input[type='color']::-moz-color-swatch { border: 2px solid #fff; border-radius: 7px; box-shadow: 0 0 0 1px rgba(23,43,58,.16); }
.colorpicker { z-index: 1100 !important; padding: 8px; border: 0; border-radius: 10px; box-shadow: 0 14px 35px rgba(31,55,66,.2); }

/* Detalji termina u kalendaru */
.vn-calendar-event-modal .modal-header { align-items: center; padding: 18px 21px; border-bottom: 0 !important; background: linear-gradient(135deg, #087f8c, #23a698) !important; color: #fff !important; }
.vn-calendar-event-modal .modal-header::before { content: '\f073'; margin-right: 11px; color: rgba(255,255,255,.9); font-family: 'Font Awesome 5 Free'; font-size: 1.05rem; font-weight: 900; }
.vn-calendar-event-modal .modal-title { flex: 1; margin: 0; color: #fff !important; font-size: 1.08rem; font-weight: 700; text-align: left; }
.vn-calendar-event-modal .modal-header .close { margin: -10px -8px -10px 10px; color: #fff; opacity: .85; text-shadow: none; }
.vn-calendar-event-modal .modal-header .close:hover { color: #fff; opacity: 1; }
.vn-calendar-event-modal .modal-dialog { max-width: 620px; }
.app-main__inner #calendar { padding-right: 15px; padding-left: 15px; }

/* Administracija ordinacije */
.vn-clinic-administration { max-width: 1220px; width: 100%; margin: 0 auto; }
.vn-administration-notice { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 22px; padding: 15px 18px; border: 0; border-radius: 12px; background: #eaf7f8; color: #245d63; }
.vn-administration-notice > i { margin-top: 3px; color: #087f8c; font-size: 1.1rem; }
.vn-administration-notice strong, .vn-administration-notice span { display: block; }
.vn-administration-notice span { margin-top: 2px; font-size: .86rem; }
.vn-administration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.vn-administration-module { position: relative; overflow: hidden; margin: 0; border: 0; border-radius: 15px; box-shadow: 0 9px 28px rgba(29, 55, 68, .09); }
.vn-administration-module::before { position: absolute; top: 0; right: 0; left: 0; height: 4px; content: ''; background: #087f8c; }
.vn-administration-module .card-body { position: relative; min-height: 235px; padding: 25px; }
.vn-administration-module .badge { position: absolute; top: 25px; right: 25px; padding: 7px 10px; color: #66757c; font-weight: 600; }
.vn-administration-module__icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 20px; border-radius: 13px; background: #e7f5f5; color: #087f8c; font-size: 1.25rem; }
.vn-administration-module h3 { margin-bottom: 8px; color: #20343d; font-size: 1.08rem; font-weight: 700; }
.vn-administration-module p { min-height: 43px; margin-bottom: 20px; color: #718087; font-size: .88rem; line-height: 1.55; }
.vn-administration-module .btn { color: #607078; font-weight: 600; opacity: .7; }
.vn-administration-module--sms::before { background: #2a9d8f; }
.vn-administration-module--template::before { background: #457b9d; }
.vn-administration-module--rules::before { background: #6c63a8; }
@media (max-width: 767px) { .vn-administration-grid { grid-template-columns: 1fr; } .vn-administration-module .card-body { min-height: 0; } }

/* Podešavanja notifikacija pacijenta */
.vn-notification-channels { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 17px 19px; border: 1px solid #dcebed; border-radius: 12px; background: #f7fbfb; }
.vn-notification-channels > div:first-child { display: flex; align-items: center; gap: 12px; }
.vn-notification-channels strong, .vn-notification-channels small { display: block; }
.vn-notification-channels small { color: var(--vn-muted); font-size: .78rem; }
.vn-notification-channels__icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 11px; background: #dff2f2; color: #087f8c; }
.vn-notification-channel-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.vn-channel-badge { padding: 7px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; }
.vn-channel-badge i { margin-right: 6px; }
.vn-channel-badge.is-active { background: #dff5ec; color: #157253; }
.vn-channel-badge.is-inactive { background: #edf1f3; color: #7b888e; }
.vn-notification-warning { margin-bottom: 18px; border: 0; border-radius: 10px; }
.vn-notification-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vn-notification-rule { padding: 20px; border: 1px solid #e0e9ec; border-radius: 13px; background: #fff; box-shadow: 0 7px 20px rgba(31, 55, 66, .05); }
.vn-notification-rule--wide { grid-column: 1 / -1; }
.vn-notification-rule__heading { display: flex; align-items: flex-start; gap: 12px; }
.vn-notification-rule__heading > div { flex: 1; min-width: 0; }
.vn-notification-rule__heading h4 { margin: 2px 0 4px; color: #253c46; font-size: .98rem; font-weight: 700; }
.vn-notification-rule__heading p { margin: 0; color: var(--vn-muted); font-size: .79rem; line-height: 1.45; }
.vn-notification-rule__icon { display: flex; align-items: center; justify-content: center; width: 39px; height: 39px; flex: 0 0 39px; border-radius: 10px; background: #e7f4f5; color: #087f8c; }
.vn-rule-switch { position: relative; width: 43px; height: 24px; flex: 0 0 43px; margin: 7px 0 0; }
.vn-rule-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.vn-rule-switch span { position: absolute; inset: 0; border-radius: 999px; background: #cbd5d9; cursor: pointer; transition: .2s; }
.vn-rule-switch span::after { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(20, 40, 50, .2); content: ''; transition: .2s; }
.vn-rule-switch input:checked + span { background: #18a27f; }
.vn-rule-switch input:checked + span::after { transform: translateX(19px); }
.vn-rule-switch input:disabled + span { cursor: not-allowed; opacity: .55; }
.vn-notification-rule__summary { display: flex; align-items: baseline; gap: 8px; margin-top: 19px; padding-top: 15px; border-top: 1px solid #edf1f3; }
.vn-notification-rule__summary span { color: var(--vn-muted); font-size: .78rem; }
.vn-notification-rule__summary strong { color: #253c46; }
.vn-notification-rule__summary small { margin-left: auto; color: #b16a1d; font-size: .72rem; }
.vn-notification-fields { margin-top: 18px; padding-top: 15px; border-top: 1px solid #edf1f3; }
.vn-notification-fields .form-group { margin-bottom: 0; }
.vn-notification-fields label { color: #50636b; font-size: .75rem; font-weight: 700; }
.vn-notification-fields--control { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.vn-notification-fields--control .vn-grid-full { grid-column: 1 / -1; }
.vn-control-result { display: flex; flex-direction: column; justify-content: flex-end; padding: 10px 13px; border-radius: 9px; background: #eef8f8; }
.vn-control-result strong { color: #087f8c; font-size: 1rem; }
.vn-notification-actions { display: flex; justify-content: flex-end; margin-top: 18px; }
@media (max-width: 991px) { .vn-notification-fields--control { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .vn-notification-channels { align-items: flex-start; flex-direction: column; } .vn-notification-channel-badges { justify-content: flex-start; } .vn-notification-settings, .vn-notification-fields--control { grid-template-columns: 1fr; } .vn-notification-rule--wide, .vn-notification-fields--control .vn-grid-full { grid-column: auto; } .vn-notification-rule__summary { align-items: flex-start; flex-direction: column; } .vn-notification-rule__summary small { margin-left: 0; } }

/* Administracija pravila i šablona notifikacija */
.vn-notification-admin-page { max-width: 1120px; width: 100%; margin: 0 auto; }
.vn-notification-admin-page form, .vn-notification-admin-page .card, .vn-notification-admin-page .card-body { min-width: 0; max-width: 100%; }
.vn-notification-admin-page .card { overflow: hidden; }
.vn-notification-admin-page .form-control { display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid #dce5e9; border-radius: 8px; background: #fbfdfd; }
.vn-notification-admin-page input.form-control, .vn-notification-admin-page select.form-control { min-height: 43px; }
.vn-notification-admin-page textarea.form-control { min-height: 118px; padding: 11px 13px; resize: vertical; }
.vn-notification-admin-page .form-control:focus { border-color: var(--vn-primary); background: #fff; box-shadow: 0 0 0 3px rgba(8,127,140,.1); }
.vn-settings-tabs { display: flex; gap: 8px; margin-bottom: 20px; padding: 5px; border-radius: 11px; background: #e9eff1; }
.vn-settings-tabs a { padding: 10px 15px; border-radius: 8px; color: #617179; font-size: .83rem; font-weight: 700; }
.vn-settings-tabs a:hover { text-decoration: none; }
.vn-settings-tabs a.active { background: #fff; color: #087f8c; box-shadow: 0 3px 10px rgba(30, 52, 63, .08); }
.vn-settings-tabs i { margin-right: 7px; }
.vn-settings-card { margin-bottom: 18px; }
.vn-settings-card > .card-body, .vn-template-card > .card-body { padding: 20px; }
.vn-settings-card .vn-form-grid, .vn-template-grid { width: 100%; min-width: 0; }
.vn-settings-card .form-group, .vn-template-grid > div, .vn-template-grid .form-group { min-width: 0; max-width: 100%; }
.vn-setting-switches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vn-setting-switches label { display: flex; align-items: flex-start; gap: 11px; margin: 0; padding: 16px; border: 1px solid #e0eaed; border-radius: 10px; cursor: pointer; }
.vn-setting-switches input { width: 17px; height: 17px; margin-top: 2px; accent-color: #138d7b; }
.vn-setting-switches strong, .vn-setting-switches small { display: block; }
.vn-setting-switches strong { margin-bottom: 3px; color: #2a414b; font-size: .86rem; }
.vn-setting-switches small { color: var(--vn-muted); font-size: .73rem; line-height: 1.4; }
.vn-template-help { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; padding: 15px 17px; border-radius: 11px; background: #eaf7f8; color: #285d63; }
.vn-template-help > i { margin-top: 3px; color: #087f8c; }
.vn-template-help strong, .vn-template-help span { display: block; }
.vn-template-help > div { min-width: 0; }
.vn-template-help span { margin-top: 3px; max-width: 100%; font-family: monospace; font-size: .78rem; overflow-wrap: anywhere; word-break: break-word; }
.vn-template-card { margin-bottom: 17px; }
.vn-template-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.vn-template-grid > div + div { padding-left: 22px; border-left: 1px solid #e4ecef; }
.vn-template-grid h5 { margin-bottom: 14px; color: #304851; font-size: .87rem; font-weight: 700; }
.vn-template-grid h5 i { width: 22px; color: #087f8c; }
.vn-template-grid textarea { line-height: 1.5; resize: vertical; }
.vn-template-grid .form-group:last-child { margin-bottom: 0; }
.vn-template-grid .js-character-count { display: block; margin-top: 5px; color: var(--vn-muted); text-align: right; }
.vn-email-status { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; padding: 15px 17px; border-radius: 11px; }
.vn-email-status > span { display: flex; align-items: center; justify-content: center; width: 39px; height: 39px; flex: 0 0 39px; border-radius: 10px; }
.vn-email-status strong, .vn-email-status small { display: block; }
.vn-email-status small { margin-top: 2px; font-size: .77rem; }
.vn-email-status.is-verified { color: #176b50; background: #e3f6ee; }
.vn-email-status.is-verified > span { background: #c9eddf; }
.vn-email-status.is-pending { color: #8a611e; background: #fff5df; }
.vn-email-status.is-pending > span { background: #f9e8bd; }
.vn-email-test-row { display: flex; align-items: flex-end; gap: 14px; }
.vn-email-test-row .form-group { flex: 1; min-width: 0; margin: 0; }
.vn-email-test-row .btn { min-height: 43px; flex: 0 0 auto; }
.vn-notification-admin-page .input-group { min-width: 0; }
.vn-notification-admin-page .input-group > .form-control { min-width: 0; }
@media (max-width: 575px) { .vn-email-test-row { align-items: stretch; flex-direction: column; } }
@media (max-width: 767px) { .vn-notification-admin-page { width: 100%; overflow-x: hidden; } .vn-setting-switches, .vn-template-grid { grid-template-columns: minmax(0, 1fr); } .vn-template-grid > div + div { padding-top: 18px; padding-left: 0; border-top: 1px solid #e4ecef; border-left: 0; } .vn-settings-tabs { flex-direction: column; } .vn-settings-card > .card-body, .vn-template-card > .card-body { padding: 16px; } }
.vn-calendar-event-modal .modal-body { padding: 22px; background: #f7fafb; }
.vn-event-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vn-event-detail { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 16px; border: 1px solid #e0eaed; border-radius: 11px; background: #fff; }
.vn-event-detail-wide, .vn-event-note { grid-column: 1 / -1; }
.vn-event-detail-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 38px; border-radius: 10px; color: var(--vn-primary); background: var(--vn-primary-soft); font-size: .95rem; }
.vn-event-detail > div { min-width: 0; }
.vn-event-detail-label { display: block; margin: 0 0 4px; color: #71858e; font-size: .73rem; font-weight: 700; letter-spacing: .045em; line-height: 1.2; text-transform: uppercase; }
.vn-event-detail strong, .vn-event-note-text { display: block; overflow-wrap: anywhere; color: var(--vn-ink); font-size: .96rem; font-weight: 700; line-height: 1.45; }
.vn-event-note { background: #fdfefe; }
.vn-event-note-text { color: #4d626b; font-weight: 400; white-space: pre-wrap; }
.vn-event-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.vn-event-actions .btn { margin: 0 !important; border: 0; border-radius: 8px; }
.vn-event-actions .btn a { display: block; color: #fff !important; text-decoration: none; }

/* Administratorsko otvaranje novog klijenta */
.vn-onboarding-page { max-width: 1180px; width: 100%; margin: 0 auto; }
.vn-onboarding-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 18px; }
.vn-onboarding-card { overflow: hidden; margin: 0; border: 0; border-radius: 12px; box-shadow: 0 5px 20px rgba(31,55,66,.08); }
.vn-onboarding-card:first-of-type { grid-row: span 2; }
.vn-onboarding-card .card-header { height: auto; min-height: 68px; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--vn-line); background: #fff; }
.vn-onboarding-card .card-header strong, .vn-onboarding-card .card-header small { display: block; }
.vn-onboarding-card .card-header strong { color: var(--vn-ink); font-size: 1rem; }
.vn-onboarding-card .card-header small { margin-top: 3px; color: var(--vn-muted); font-size: .78rem; }
.vn-step-number { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #087f8c, #23a698); font-weight: 800; }
.vn-onboarding-card .card-body { padding: 19px; }
.vn-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.vn-form-grid .form-group { min-width: 0; margin-bottom: 14px; }
.vn-form-grid .vn-grid-full { grid-column: 1 / -1; }
.vn-form-grid label { margin-bottom: 6px; color: #40545e; font-size: .82rem; font-weight: 700; }
.vn-form-grid .form-control { min-height: 43px; border: 1px solid #dce5e9; border-radius: 8px; background: #fbfdfd; }
.vn-form-grid .form-control:focus { border-color: var(--vn-primary); background: #fff; box-shadow: 0 0 0 3px rgba(8,127,140,.1); }
.vn-onboarding-submit { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 19px; border: 1px solid #dce9e7; border-radius: 12px; color: #507078; background: #f1faf8; }
.vn-onboarding-submit .btn { min-width: 190px; border: 0; border-radius: 9px; background: var(--vn-primary); }
.vn-profile-menu { overflow: hidden; padding: 0; border: 0; border-radius: 12px; box-shadow: 0 18px 45px rgba(20,43,54,.22); }
.vn-profile-summary { display: flex; align-items: center; gap: 12px; padding: 18px; color: #fff; background: linear-gradient(135deg, #087f8c, #23a698); }
.vn-profile-summary strong, .vn-profile-summary small { display: block; }
.vn-profile-summary small { margin-top: 2px; opacity: .8; }
.vn-profile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; background: #fff; }
.vn-profile-actions a { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; border: 1px solid var(--vn-line); border-radius: 8px; color: var(--vn-primary); font-weight: 700; }
.vn-profile-actions a:hover { background: var(--vn-primary-soft); text-decoration: none; }
.vn-profile-actions .vn-logout { color: #c63e3e; }

/* Centralna administracija klijenata */
.vn-admin-clients-page { max-width: 1400px; width: 100%; margin: 0 auto; }
.vn-admin-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.vn-admin-kpi { display: flex; align-items: center; gap: 13px; min-width: 0; padding: 17px; border: 1px solid #e5edef; border-radius: 11px; background: #fff; box-shadow: 0 4px 16px rgba(31,55,66,.055); }
.vn-admin-kpi > span { width: 43px; height: 43px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 43px; border-radius: 11px; color: var(--vn-primary); background: var(--vn-primary-soft); font-size: 1.08rem; }
.vn-admin-kpi strong, .vn-admin-kpi small { display: block; }
.vn-admin-kpi strong { color: var(--vn-ink); font-size: 1.35rem; line-height: 1.1; }
.vn-admin-kpi small { margin-top: 3px; color: var(--vn-muted); }
.vn-admin-kpi-warning > span { color: #c57b13; background: #fff5df; }
.vn-admin-table-card { overflow: hidden; }
.vn-admin-clients-table th { white-space: nowrap; }
.vn-admin-clients-table td { vertical-align: middle; }
.vn-admin-clients-table td strong, .vn-admin-clients-table td small { display: block; }
.vn-admin-clients-table td small { max-width: 190px; margin-top: 3px; overflow: hidden; color: var(--vn-muted); text-overflow: ellipsis; white-space: nowrap; }
.vn-client-inactive { opacity: .65; background: #f8fafb; }
.vn-package-badge, .vn-status-badge { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 20px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.vn-package-badge { color: #1769a8; background: #e9f4fc; }
.vn-status-badge.is-active { color: #16734d; background: #e5f7ee; }
.vn-status-badge.is-inactive { color: #68777e; background: #edf1f2; }
.vn-admin-actions { display: flex; align-items: center; gap: 6px; }
.vn-admin-actions .btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; margin: 0; padding: 0; border: 0; border-radius: 8px; }
.vn-admin-detail-modal .modal-header, .vn-admin-edit-modal .modal-header { align-items: center; }
.vn-admin-detail-modal .modal-header small, .vn-admin-edit-modal .modal-header small { display: block; margin-top: 3px; color: var(--vn-muted); }
.vn-admin-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vn-admin-detail-grid section { min-width: 0; padding: 16px; border: 1px solid var(--vn-line); border-radius: 10px; background: #fbfdfd; }
.vn-admin-detail-grid h5 { margin: 0 0 12px; color: var(--vn-ink); font-size: .92rem; font-weight: 700; }
.vn-admin-detail-grid h5 i { margin-right: 6px; color: var(--vn-primary); }
.vn-related-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--vn-line); }
.vn-related-item > div { min-width: 0; }
.vn-related-item .btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; padding: 0; border-radius: 8px; color: var(--vn-primary); }
.vn-related-item:last-child { padding-bottom: 0; border-bottom: 0; }
.vn-related-item:first-of-type { padding-top: 0; }
.vn-related-item strong, .vn-related-item small { display: block; overflow-wrap: anywhere; }
.vn-related-item small { margin-top: 3px; color: var(--vn-muted); }
.vn-limit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.vn-limit-grid div { padding: 13px; border-radius: 9px; text-align: center; background: var(--vn-primary-soft); }
.vn-limit-grid strong, .vn-limit-grid small { display: block; }
.vn-limit-grid strong { color: var(--vn-primary); font-size: 1.15rem; }
.vn-limit-grid small { margin-top: 2px; color: var(--vn-muted); }
.vn-admin-edit-modal .modal-body { background: #f8fafb; }
.vn-clinic-logo-field { display: flex; align-items: center; gap: 16px; padding: 12px; border: 1px solid var(--vn-line); border-radius: 9px; background: #fff; }
.vn-clinic-logo-field img { width: 110px; height: 64px; object-fit: contain; border-radius: 6px; background: #f6f8f9; }
.vn-clinic-logo-field > div { min-width: 0; flex: 1; }
.vn-admin-edit-modal .vn-form-grid { padding: 2px; }
.vn-services-page { max-width: 1400px; width: 100%; margin: 0 auto; }
.vn-services-layout { display: grid; grid-template-columns: minmax(250px, .32fr) minmax(580px, 1fr); align-items: start; gap: 18px; }
.vn-category-card, .vn-services-card { overflow: hidden; }
.vn-category-card .card-header, .vn-services-card .card-header { display: flex; align-items: center; justify-content: space-between; }
.vn-category-card .card-body { padding: 14px; }
.vn-category-list { display: flex; flex-direction: column; gap: 8px; }
.vn-category-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border: 1px solid var(--vn-line); border-radius: 9px; background: #fbfdfd; }
.vn-category-item > span { min-width: 0; overflow-wrap: anywhere; color: var(--vn-ink); font-weight: 700; }
.vn-category-item > div { display: flex; gap: 5px; }
.vn-category-item .btn { width: 31px; height: 31px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 7px; }
.vn-services-card td strong, .vn-services-card td small { display: block; }
.vn-services-card td small { margin-top: 3px; color: var(--vn-muted); }
.vn-empty-state { padding: 24px 10px; color: var(--vn-muted); text-align: center; }
.vn-empty-state i { margin-bottom: 8px; color: var(--vn-primary); font-size: 1.5rem; }
.vn-empty-state p { margin: 0; }
.vn-services-body .modal { background: rgba(18, 38, 46, .18); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.vn-services-body .modal-dialog, .vn-services-body .modal-dialog::before { border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; }
.vn-services-body .modal-content { isolation: isolate; opacity: 1 !important; border: 0 !important; outline: 0 !important; background: #fff !important; box-shadow: none !important; }
.vn-services-body .modal-content > form { width: 100%; margin: 0; border: 0; outline: 0; background: #fff; }
.vn-admin-page .modal-backdrop { display: none !important; }
.vn-admin-page .modal.show { opacity: 1 !important; background: #263b42 !important; backdrop-filter: none !important; }
.vn-admin-page .modal.fade, .vn-admin-page .modal.fade .modal-dialog { transition: none !important; }
.vn-admin-detail-modal .modal-content, .vn-admin-edit-modal .modal-content, .vn-confirm-modal .modal-content { opacity: 1 !important; background: #fff !important; }
.vn-admin-detail-modal .modal-body { background: #fff !important; }

/* Zakazivanje i izmena termina */
.appointment-workspace { align-items: flex-start; margin-right: -10px; margin-left: -10px; }
.appointment-form-column, .appointment-availability { padding-right: 10px; padding-left: 10px; }
.appointment-form-card { overflow: hidden; }
.appointment-form-card .card-header { height: auto; min-height: 66px; }
.appointment-form-card .card-header span { display: block; color: var(--vn-ink); font-size: 1rem; }
.appointment-form-card .card-header span i { color: var(--vn-primary); }
.appointment-form-card .card-header small { display: block; margin-top: 4px; color: var(--vn-muted); font-size: .78rem; font-weight: 400; }
.appointment-form-card .card-body { padding: 22px 14px 0; }
.appointment-form-card form::after { content: ''; display: table; clear: both; }
.appointment-form-card label { margin-bottom: 7px; color: #40545e; font-size: .85rem; font-weight: 600; }
.appointment-form-card .form-control,
.appointment-form-card .multiselect-dropdown { min-height: 43px; border: 1px solid #dce5e9; border-radius: 8px; background: #fbfdfd; }
.appointment-form-card .form-control:focus { border-color: var(--vn-primary); background: #fff; box-shadow: 0 0 0 3px rgba(8,127,140,.1); }
.appointment-form-card .input-group-addon { display: flex; align-items: center; border: 1px solid #dce5e9; border-right: 0; border-radius: 8px 0 0 8px; color: var(--vn-primary); background: #f2f8f8; }
.appointment-form-card textarea.form-control { min-height: 100px; resize: vertical; }
.appointment-hidden { display: none; }
.appointment-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 5px; padding: 15px 20px !important; border-top: 1px solid var(--vn-line); background: #f8fafb; }
.appointment-form-actions .btn { min-width: 125px; margin: 0; padding: 9px 15px; }
.appointment-availability { position: sticky; top: 82px; transition: opacity .2s; }
.appointment-availability.is-loading { opacity: .5; pointer-events: none; }
.appointment-availability > .card { overflow: hidden; }
.appointment-availability .card-header { height: auto; min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.appointment-availability .card-header h4 { margin: 0; color: var(--vn-primary); font-size: .95rem; }
.appointment-availability .card-body { max-height: 570px; overflow-y: auto; }
.appointment-availability table { margin: 0; border: 0; }
.appointment-availability table thead th { padding: 11px 12px; border: 0; border-bottom: 1px solid var(--vn-line); background: #f8fafb; color: #647983; font-size: .72rem; text-transform: uppercase; }
.appointment-availability table tbody td { padding: 12px; vertical-align: middle; border-color: #edf1f3; }
.appointment-availability table tbody td:first-child { width: 100px; color: var(--vn-primary); font-weight: 700; }
.appointment-availability-empty .card-body { min-height: 310px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.appointment-availability-icon { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; border-radius: 15px; color: var(--vn-primary); background: var(--vn-primary-soft); font-size: 1.45rem; }
.appointment-availability-empty h5 { margin-bottom: 7px; color: var(--vn-ink); font-weight: 700; }
.appointment-availability-empty p { max-width: 270px; margin: 0; color: var(--vn-muted); line-height: 1.55; }

.vn-price-list-page .vn-data-card { overflow: hidden; }
.vn-price-list-toolbar { padding: 18px 20px; border-bottom: 1px solid var(--vn-line); background: #fff; }
.vn-price-list-page .table-responsive { width: 100%; margin: 0; }
.vn-price-list-page .dataTables_info { padding-top: 18px; color: var(--vn-muted); }
.vn-price-list-page .dataTables_paginate { padding-top: 12px; }
.vn-price-list-page th { cursor: pointer; }

@media (max-width: 767px) {
    .vn-patient-create-actions { width: 100%; align-items: stretch; flex-direction: column; }
    .vn-patient-create-actions .btn { justify-content: center; }
    .app-main__inner { padding: 20px 15px 28px; }
    .vn-page-heading, .dashboard-heading { align-items: flex-start; flex-direction: column; }
    .vn-page-heading h1, .dashboard-heading h2 { font-size: 1.45rem; }
    .vn-primary-action { width: 100%; }
    .vn-data-card .card-header { align-items: stretch; flex-direction: column; gap: 10px; }
    .dataTables_filter input { min-width: 0; width: 100%; }
    .modal-dialog { margin: 12px; }
    .vn-event-details { grid-template-columns: 1fr; }
    .vn-event-detail-wide, .vn-event-note { grid-column: auto; }
    .vn-event-actions { align-items: stretch; flex-direction: column; }
    .vn-event-actions .btn { width: 100%; }
    .vn-onboarding-form { grid-template-columns: 1fr; }
    .vn-onboarding-card:first-of-type { grid-row: auto; }
    .vn-form-grid { grid-template-columns: 1fr; }
    .vn-form-grid .vn-grid-full { grid-column: auto; }
    .vn-onboarding-submit { align-items: stretch; flex-direction: column; }
    .vn-onboarding-submit .btn { width: 100%; }
    .vn-admin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vn-admin-detail-grid, .vn-limit-grid { grid-template-columns: 1fr; }
    .vn-services-layout { grid-template-columns: 1fr; }
    .dropdown-menu-lg { width: calc(100vw - 24px); min-width: 0; max-width: 350px; }
    #patient_profile .vn-patient-profile-dialog { width: auto; margin: 12px; }
    #patient_profile .list-group { grid-template-columns: 1fr; }
    #patient_profile .dropdown-menu-header-inner { padding: 22px 16px; }
    .patient-profile-main .tabs-animated { overflow-x: auto; flex-wrap: nowrap; }
    .patient-profile-main .tabs-animated .nav-link { white-space: nowrap; }
    .patient-profile-main .tab-content { padding: 15px; }
    .patient-profile-main #tab-animated-1.active { grid-template-columns: 1fr; }
    .patient-findings .card-header { align-items: stretch; flex-direction: column; gap: 10px; }
    .vn-finding-grid { grid-template-columns: 1fr; gap: 0; }
    .vn-finding-date, .vn-finding-tooth, .vn-finding-text { grid-column: 1; }
}

@media (min-width: 768px) and (max-width: 991px) {
}

@media (max-width: 767px) {
    .user-profile-main .card-body { padding: 17px 15px 0; }
    .user-profile-form { grid-template-columns: minmax(0, 1fr); }
    .user-profile-form .form-actions { margin-right: -15px; margin-left: -15px; text-align: left !important; }
    .user-profile-form .form-actions .btn { width: 100%; margin: 5px 0 0; }
    .appointment-workspace { margin-right: -5px; margin-left: -5px; }
    .appointment-form-column, .appointment-availability { padding-right: 5px; padding-left: 5px; }
    .appointment-form-card .card-body { padding: 17px 8px 0; }
    .appointment-form-actions { align-items: stretch; flex-direction: column-reverse; }
    .appointment-form-actions .btn { width: 100%; }
}

@media (max-width: 991px) {
    .appointment-availability { position: static; }
    .appointment-availability .card-body { max-height: none; }
}