:root {
    --identity-navy: #2c3e50;
    --identity-navy-dark: #1f2d3a;
    --identity-blue: #4a96e8;
    --identity-blue-hover: #3485dc;
    --identity-page: #f4f6f8;
    --identity-sidebar: #ecf0f1;
    --identity-surface: #ffffff;
    --identity-soft: #f8f9fa;
    --identity-border: #dee2e6;
    --identity-text: #495057;
    --identity-muted: #6c757d;
}

html, body {
    background: var(--identity-page) !important;
    color: var(--identity-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif !important;
}

#content {
    background: var(--identity-page);
    padding: 24px 28px !important;
}

#top {
    height: auto !important;
    min-height: 68px;
    padding: 0 !important;
    background: var(--identity-navy) !important;
    box-shadow: 0 2px 8px rgba(31, 45, 58, 0.2) !important;
}

#top > * { background: transparent !important; }
#top a:link, #top a:visited { background: transparent !important; }

.topbar-wrapper {
    background: var(--identity-navy) !important;
    border: 0 !important;
    padding: 0 20px !important;
    box-shadow: 0 2px 8px rgba(31, 45, 58, 0.2);
}

.topbar-container {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(230px, auto) 1fr auto;
    grid-template-areas: "brand menu user";
    max-width: none !important;
    min-height: 68px !important;
    gap: 20px;
}

.topbar-logo { grid-area: brand; gap: 12px; min-width: 0; }
.topbar-menu-container { grid-area: menu; min-width: 0; }
.topbar-user { grid-area: user; }

.brand-name {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-mark {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--identity-blue);
    background: #fff;
    border-radius: 6px;
    font-size: 1.25rem;
}

.logo-image {
    width: 46px !important;
    height: 46px !important;
    object-fit: contain;
    background: #fff !important;
    border-radius: 6px !important;
    padding: 3px !important;
}

.topbar-menu,
.topbar-menu.ui-menubar,
.centered-menu.ui-menubar {
    background: transparent !important;
    border: 0 !important;
}

.topbar-menu > .ui-menu-list {
    justify-content: center;
    gap: 4px;
}

.topbar-menu .ui-menuitem-link {
    color: #fff !important;
    border-radius: 4px !important;
    padding: 0.75rem 0.9rem !important;
}

.topbar-menu .ui-menuitem-link:hover,
.topbar-menu .ui-menuitem.ui-menuitem-active > .ui-menuitem-link {
    /*background: rgba(255, 255, 255, 0.14) !important;*/
}

.topbar-menu .ui-menu-child {
    background: #fff !important;
    border: 1px solid var(--identity-border) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 20px rgba(31, 45, 58, 0.16) !important;
    padding: 6px !important;
}

.topbar-menu .ui-menu-child .ui-menuitem-link,
.topbar-menu .ui-menu-child .ui-menuitem-text,
.topbar-menu .ui-menu-child .ui-icon {
    color: var(--identity-text) !important;
}

.topbar-menu .ui-menu-child .ui-menuitem-link:hover {
    color: #fff !important;
    background: var(--identity-blue) !important;
}

.topbar-menu .ui-menu-child .ui-menuitem-link:hover .ui-menuitem-text,
.topbar-menu .ui-menu-child .ui-menuitem-link:hover .ui-icon {
    /*color: #fff !important;*/
}

.topbar-user {
    background: transparent !important;
    border-radius: 0 !important;
    color: #fff;
    padding: 0 !important;
    gap: 12px !important;
}

.tenant-name { color: #fff !important; }
.welcome-text { color: rgba(255,255,255,.78); }
.action-link {
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 4px !important;
    padding: 7px 10px !important;
}
.action-link:hover { background: rgba(255,255,255,.14) !important; }

.card,
.ui-card,
.ui-panel,
.ui-toolbar,
.ui-datatable,
.ui-dialog {
    border-color: var(--identity-border) !important;
}

#content > .card,
.crud-demo,
.crud-demo > .card {
    background: var(--identity-surface) !important;
    border: 1px solid var(--identity-border);
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(31, 45, 58, .07) !important;
}

.ui-toolbar {
    background: var(--identity-soft) !important;
    border: 1px solid var(--identity-border) !important;
    border-radius: 6px !important;
    padding: 14px 16px !important;
}

body .ui-button:not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-info) {
    background: var(--identity-blue) !important;
    border-color: var(--identity-blue) !important;
    color: #fff !important;
}

body .ui-button:not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-info):enabled:hover {
    background: var(--identity-blue-hover) !important;
    border-color: var(--identity-blue-hover) !important;
}

body .ui-button {
    border-radius: 4px !important;
    box-shadow: none !important;
    font-weight: 600;
}

body button.ui-button:not(.ui-button-icon-only) {
    min-height: 40px !important;
    padding: 0 !important;
}

body button.ui-button:not(.ui-button-icon-only) .ui-button-text {
    line-height: 20px !important;
    white-space: nowrap !important;
}

body button.ui-button.ui-button-text-only .ui-button-text {
    padding: 9px 16px !important;
}

body button.ui-button.ui-button-text-icon-left .ui-button-text {
    padding: 0 !important;
}

body[dir="rtl"] button.ui-button.ui-button-text-icon-left .ui-button-text,
body.app-rtl button.ui-button.ui-button-text-icon-left .ui-button-text {
    padding: 0 !important;
}

body button.ui-button.ui-button-text-icon-left {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 9px 16px !important;
}

body button.ui-button.ui-button-text-icon-left > .ui-icon,
body button.ui-button.ui-button-text-icon-left > .ui-button-icon-left {
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

body button.ui-button.ui-button-text-icon-right .ui-button-text {
    padding: 9px 36px 9px 16px !important;
}

body .ui-datatable .ui-datatable-data > tr > td > button.ui-button-icon-only {
    margin-inline: 2px !important;
}

body .ui-button.ui-button-success { background: #28a745 !important; border-color: #28a745 !important; }
body .ui-button.ui-button-danger { background: #dc3545 !important; border-color: #dc3545 !important; }
body .ui-button.ui-button-warning { background: #ffc107 !important; border-color: #ffc107 !important; color: #212529 !important; }
body .ui-button.ui-button-secondary { background: #6c757d !important; border-color: #6c757d !important; }

.ui-panel .ui-panel-titlebar,
.ui-dialog .ui-dialog-titlebar,
.styled-dialog .ui-dialog-titlebar {
    background: var(--identity-soft) !important;
    color: var(--identity-text) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--identity-border) !important;
    border-radius: 6px 6px 0 0 !important;
    padding: 14px 16px !important;
}

.ui-dialog .ui-dialog-titlebar-icon,
.styled-dialog .ui-dialog-titlebar-icon { color: var(--identity-text) !important; }

body .ui-inputfield,
body .ui-selectonemenu,
body .ui-inputtextarea,
body .ui-inputnumber-input {
    background: #fff !important;
    color: var(--identity-text) !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
}

body .ui-inputfield:focus,
body .ui-selectonemenu.ui-state-focus,
body .ui-inputtextarea:focus {
    border-color: var(--identity-blue) !important;
    box-shadow: 0 0 0 3px rgba(74, 150, 232, .18) !important;
}

.ui-datatable thead th {
    background: var(--identity-soft) !important;
    color: var(--identity-text) !important;
    border-color: var(--identity-border) !important;
    font-weight: 700 !important;
    padding: 13px 10px !important;
}

.ui-datatable .ui-datatable-data > tr > td {
    border-color: #e9ecef !important;
    padding: 11px 10px !important;
}

.ui-datatable .ui-datatable-data > tr:hover { background: #f3f8fe !important; }
.ui-datatable .ui-datatable-data tr.ui-state-highlight { background: #e7f2fd !important; color: var(--identity-text) !important; }

.ui-paginator {
    background: #fff !important;
    border-color: var(--identity-border) !important;
}
.ui-paginator .ui-paginator-page.ui-state-active { background: var(--identity-blue) !important; color: #fff !important; }

.filter-grid { background: var(--identity-soft); border-radius: 6px; }
.filter-item i { color: var(--identity-blue) !important; }

#copyRight {
    background: var(--identity-navy) !important;
    color: rgba(255,255,255,.78) !important;
    border: 0 !important;
}

.login-page {
    min-height: 100vh;
    margin: 0;
    background: #101827 !important;
}

.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 28px 16px;
    box-sizing: border-box;
}

.login-card {
    position: relative;
    width: min(420px, 100%);
    background: #fff;
    border-radius: 14px;
    padding: 38px 40px 32px;
    box-shadow: 0 20px 50px rgba(0,0,0,.28);
    text-align: center;
    box-sizing: border-box;
}

.login-language { position: absolute; inset-block-start: 18px; inset-inline-end: 22px; }
.login-language-link { color: var(--identity-blue); font-weight: 700; text-decoration: none; }
.login-brand-mark {
    width: 82px;
    height: 82px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--identity-blue);
    background: #f2f8fe;
    font-size: 2.2rem;
}
.login-card h1 { color: #111827; font-size: 1.65rem; margin: 0 0 6px; }
.login-subtitle { color: var(--identity-muted); margin: 0 0 26px; }
.login-form { text-align: start; }
.login-field { margin-bottom: 15px; }
.login-field label { display: block; color: #1f2937; font-weight: 700; margin-bottom: 6px; }
.login-field .ui-inputfield,
.login-field .ui-selectonemenu { width: 100% !important; box-sizing: border-box; padding: 12px 14px !important; background: #f1f5fb !important; }
.login-submit { width: 100% !important; margin-top: 4px !important; padding: 12px !important; }
.login-forgot { text-align: end; margin: 12px 0; }
.login-forgot a { color: var(--identity-blue); }
.login-error { color: #dc3545; font-size: .9rem; }
.login-register { width: 100% !important; margin-top: 8px !important; background: #fff !important; color: var(--identity-blue) !important; border: 1px solid var(--identity-blue) !important; }
.test-users-panel { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--identity-border); text-align: start; color: var(--identity-muted); }
.test-users-panel summary { cursor: pointer; color: var(--identity-text); font-weight: 700; }
.test-users-panel .user-item { display: inline-block; background: #eef2f7; border-radius: 4px; padding: 3px 7px; margin: 5px 3px 0; font: .78rem monospace; }
.test-users-panel .password-note { margin-top: 8px; font-size: .85rem; }

@media (max-width: 1050px) {
    .topbar-container {
        grid-template-columns: 1fr auto;
        grid-template-areas: "brand user" "menu menu";
        padding: 8px 0;
    }
}

@media (max-width: 768px) {
    #content { padding: 14px 10px !important; }
    .topbar-wrapper { padding: 0 8px !important; }
    .topbar-container {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .topbar-logo { order: 1; flex: 1 1 100%; justify-content: center; }
    .brand-name { max-width: 180px; font-size: .95rem; }
    .topbar-user { order: 2; flex: 1 1 100% !important; width: 100%; justify-content: space-between; white-space: normal !important; }
    .topbar-menu-container { order: 3; flex: 1 1 100%; width: 100%; }
    body .menu-toggle.ui-button { background: transparent !important; border: 0 !important; color: #fff !important; padding: 4px 8px !important; }
    .topbar-menu > .ui-menu-list {
        background: #fff !important;
        border-color: var(--identity-border) !important;
    }
    .topbar-menu > .ui-menu-list .ui-menuitem-link,
    .topbar-menu > .ui-menu-list .ui-menuitem-text { color: var(--identity-text) !important; }
    .login-card { padding: 34px 22px 26px; }
}

/* Clinic-style side navigation */
#top {
    position: sticky;
    inset-block-start: 0;
    z-index: 1000;
}

.topbar-container {
    position: relative;
    direction: rtl;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    max-width: none !important;
    min-height: 72px !important;
    gap: 14px !important;
}

.topbar-brand-group {
    order: 0;
    display: flex;
    direction: rtl;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.topbar-logo {
    gap: 10px;
    margin-inline-end: 0;
}

.topbar-user {
    order: 3;
    position: absolute;
    left: 0;
    right: auto;
    margin: 0;
    gap: 14px !important;
    direction: ltr;
}

.topbar-user .user-actions { display: contents; }
.topbar-user .session-action { order: 0; }
.topbar-user .user-info { order: 1; }
.topbar-user .language-action { order: 2; }
.topbar-user .clinic-clock { order: 3; }

.topbar-role {
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
    font-weight: 700;
}

.clinic-clock {
    color: rgba(255,255,255,.72);
    font-family: Georgia, "Times New Roman", serif;
    font-size: .92rem;
    white-space: nowrap;
}

.brand-name {
    max-width: 420px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.32rem;
}

.sidebar-toggle {
    order: 0;
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: transparent;
    border: 0;
    border-radius: 4px;
    font-size: 1.25rem;
    cursor: pointer;
}

.sidebar-overlay { display: none; }

.topbar-menu-container {
    position: fixed !important;
    inset-block-start: 72px;
    inset-block-end: 0;
    left: 0;
    right: auto;
    z-index: 990;
    display: block !important;
    width: 250px;
    padding: 12px 10px;
    overflow-x: visible;
    overflow-y: auto;
    background: var(--identity-sidebar) !important;
    border-right: 1px solid var(--identity-border);
    box-shadow: 2px 0 10px rgba(31,45,58,.06);
    transition: left .2s ease, right .2s ease;
}

.app-rtl .topbar-menu-container {
    left: auto;
    right: 0;
    border-right: 0;
    border-left: 1px solid var(--identity-border);
    box-shadow: -2px 0 10px rgba(31,45,58,.06);
}

.topbar-menu-container .menu-form,
.topbar-menu-container .menu-wrapper,
.topbar-menu-container .topbar-menu { width: 100% !important; }

.topbar-menu,
.topbar-menu.ui-menubar,
.centered-menu.ui-menubar {
    background: transparent !important;
    border: 0 !important;
}

.topbar-menu > .ui-menu-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    width: 100% !important;
}

.topbar-menu > .ui-menu-list > .ui-menuitem {
    display: block !important;
    width: 100% !important;
    border: 1px solid var(--identity-border);
    border-radius: 4px;
    background: var(--identity-soft);
}

.topbar-menu > .ui-menu-list > .ui-menuitem > .ui-menuitem-link {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100% !important;
    min-height: 48px;
    padding: 12px 14px !important;
    color: var(--identity-text) !important;
    font-weight: 700;
}

.topbar-menu > .ui-menu-list > .ui-menuitem > .ui-menuitem-link .ui-menuitem-text,
.topbar-menu > .ui-menu-list > .ui-menuitem > .ui-menuitem-link .ui-icon {
    color: var(--identity-text) !important;
}

.topbar-menu > .ui-menu-list > .ui-menuitem > .ui-menuitem-link:hover,
.topbar-menu > .ui-menu-list > .ui-menuitem.ui-menuitem-active > .ui-menuitem-link {
    color: #fff !important;
    background: var(--identity-blue) !important;
}

.topbar-menu > .ui-menu-list > .ui-menuitem > .ui-menuitem-link:hover .ui-menuitem-text,
.topbar-menu > .ui-menu-list > .ui-menuitem > .ui-menuitem-link:hover .ui-icon,
.topbar-menu > .ui-menu-list > .ui-menuitem.ui-menuitem-active > .ui-menuitem-link .ui-menuitem-text,
.topbar-menu > .ui-menu-list > .ui-menuitem.ui-menuitem-active > .ui-menuitem-link .ui-icon {
    /*color: #fff !important;*/
}

.topbar-menu .ui-menu-child {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 5px !important;
    border: 0 !important;
    border-top: 1px solid var(--identity-border) !important;
    border-radius: 0 0 4px 4px !important;
    box-shadow: none !important;
    background: #fff !important;
}

.topbar-menu .ui-menu-child .ui-menuitem-link {
    min-height: 40px;
    border-radius: 4px !important;
    padding: 9px 12px !important;
}

#content,
#copyRight {
    margin-left: 250px;
    margin-right: 0;
    transition: margin-left .2s ease, margin-right .2s ease;
}

.app-rtl #content,
.app-rtl #copyRight {
    margin-left: 0;
    margin-right: 250px;
}

body.sidebar-collapsed .topbar-menu-container {
    left: -270px;
}

body.app-rtl.sidebar-collapsed .topbar-menu-container {
    left: auto;
    right: -270px;
}

body.sidebar-collapsed #content,
body.sidebar-collapsed #copyRight {
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 900px) {
    .topbar-container {
        flex-wrap: wrap !important;
        padding: 8px 0;
    }

    .topbar-logo {
        flex: 1 1 calc(100% - 56px);
        justify-content: flex-start;
    }

    .topbar-brand-group {
        flex: 1 1 100%;
        width: 100%;
    }

    .brand-name {
        max-width: min(58vw, 260px);
        font-size: 1rem;
    }

    .sidebar-toggle {
        order: 0;
        display: inline-flex;
        flex: 0 0 auto;
    }

    .topbar-user {
        order: 2;
        position: static;
        flex: 1 1 100% !important;
        width: 100%;
        margin: 0;
        min-height: 38px;
        justify-content: flex-start;
        direction: inherit;
    }

    .topbar-user .user-info,
    .topbar-user .clinic-clock { display: none; }

    .topbar-menu-container {
        inset-block-start: 0;
        inset-inline-start: auto;
        left: -270px;
        right: auto;
        z-index: 1120;
        width: 260px;
        padding-top: 18px;
        transition: left .25s ease, right .25s ease;
        box-shadow: 4px 0 22px rgba(15,23,42,.24);
    }

    .app-rtl .topbar-menu-container {
        left: auto;
        right: -270px;
        box-shadow: -4px 0 22px rgba(15,23,42,.24);
    }

    .topbar-menu-container.mobile-open { left: 0; }
    .app-rtl .topbar-menu-container.mobile-open { left: auto; right: 0; }
    .topbar-menu-container .topbar-menu > .ui-menu-list { display: flex !important; }

    .sidebar-overlay {
        position: fixed;
        inset-block: 0;
        left: 260px;
        right: 0;
        z-index: 1110;
        width: auto;
        height: 100%;
        padding: 0;
        border: 0;
        background: rgba(15,23,42,.48);
        cursor: pointer;
    }

    .app-rtl .sidebar-overlay {
        left: 0;
        right: 260px;
    }

    .topbar-menu-container.mobile-open ~ .sidebar-overlay { display: block; }

    #content,
    #copyRight {
        margin-left: 0;
        margin-right: 0;
    }
}