/*
 * ZINUL modern UI layer
 * Loaded after legacy and page-shell styles. Keep this file presentation-only:
 * no selectors here change application state or business behaviour.
 */

body.zinul-app {
    --zinul-canvas: #f5f7fb;
    --zinul-surface: #ffffff;
    --zinul-surface-subtle: #f8fafc;
    --zinul-surface-muted: #eef2f7;
    --zinul-border: #d8e0ea;
    --zinul-border-strong: #c4cfdd;
    --zinul-text: #172033;
    --zinul-text-strong: #0b1324;
    --zinul-muted: #667085;
    --zinul-primary: #0b63f6;
    --zinul-primary-hover: #0753d5;
    --zinul-primary-soft: #eaf2ff;
    --zinul-brand-yellow: #ffc400;
    --zinul-success: #15805d;
    --zinul-success-soft: #e8f7f1;
    --zinul-danger: #d92d45;
    --zinul-danger-soft: #fff0f2;
    --zinul-warning: #b86e00;
    --zinul-warning-soft: #fff7df;
    --zinul-info: #087aa5;
    --zinul-info-soft: #e8f7fc;
    --zinul-radius-sm: 6px;
    --zinul-radius: 8px;
    --zinul-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --zinul-shadow-sm: 0 4px 14px rgba(15, 23, 42, .065);
    --zinul-shadow-md: 0 14px 34px rgba(15, 23, 42, .12);
    --zinul-topbar-height: 64px;
    --zinul-sidebar-width: 270px;
    --zinul-sidebar-collapsed-width: 64px;
    min-height: 100vh;
    margin: 0;
    background: var(--zinul-canvas);
    color: var(--zinul-text);
    font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.zinul-app *,
body.zinul-app *::before,
body.zinul-app *::after {
    box-sizing: border-box;
}

body.zinul-app ::selection {
    background: #cfe1ff;
    color: var(--zinul-text-strong);
}

body.zinul-app a {
    text-underline-offset: 2px;
}

body.zinul-app a:focus-visible,
body.zinul-app button:focus-visible,
body.zinul-app [role="button"]:focus-visible,
body.zinul-app input:focus-visible,
body.zinul-app select:focus-visible,
body.zinul-app textarea:focus-visible {
    outline: 3px solid rgba(11, 99, 246, .2);
    outline-offset: 2px;
}

/* Application shell */
body.zinul-app .sb-topnav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1039;
    height: var(--zinul-topbar-height) !important;
    padding: 3px .75rem 0 0;
    border: 0 !important;
    border-top: 3px solid var(--zinul-brand-yellow) !important;
    border-bottom: 1px solid var(--zinul-border) !important;
    background: rgba(255, 255, 255, .97) !important;
    color: var(--zinul-text);
    box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
    backdrop-filter: blur(12px);
}

body.zinul-app .sb-topnav .navbar-brand {
    display: inline-flex;
    align-items: center;
    width: var(--zinul-sidebar-width);
    height: calc(var(--zinul-topbar-height) - 3px);
    margin: 0;
    padding: .35rem 1rem !important;
    background: var(--zinul-surface);
}

body.zinul-app .sb-topnav .navbar-brand img {
    display: block;
    width: auto;
    max-width: 142px;
    height: 46px;
    object-fit: contain;
}

body.zinul-app .btn-toggle-menu,
body.zinul-app.sb-sidenav-collapsed .btn-toggle-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-width: 92px;
    height: 40px;
    padding: 0 .8rem;
    border: 1px solid #b9d0f8;
    border-radius: var(--zinul-radius) !important;
    background: var(--zinul-primary-soft) !important;
    color: var(--zinul-primary) !important;
    box-shadow: none !important;
    font-size: .9rem;
    font-weight: 750;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

body.zinul-app .btn-toggle-menu:hover {
    transform: none !important;
    border-color: #8db2f4;
    background: #dce9ff !important;
    color: var(--zinul-primary-hover) !important;
}

body.zinul-app .zinul-global-search {
    width: min(470px, 42vw);
    min-width: 280px;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.zinul-app .zinul-global-search .input-group {
    min-height: 40px;
    border: 1px solid var(--zinul-border);
    border-radius: var(--zinul-radius);
    background: var(--zinul-surface-subtle);
    box-shadow: var(--zinul-shadow-xs);
    overflow: hidden;
}

body.zinul-app .zinul-global-search .form-control {
    min-height: 38px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent;
    font-size: .94rem;
}

body.zinul-app .zinul-global-search .form-control:focus {
    box-shadow: none !important;
}

body.zinul-app .zinul-global-search .btn {
    min-width: 44px;
    min-height: 38px;
    border: 0;
    border-left: 1px solid var(--zinul-border);
    border-radius: 0 !important;
    background: transparent;
    color: var(--zinul-primary);
    box-shadow: none;
}

body.zinul-app .zinul-search-results {
    margin-top: .35rem;
    border: 1px solid var(--zinul-border) !important;
    border-radius: var(--zinul-radius) !important;
    box-shadow: var(--zinul-shadow-md) !important;
}

body.zinul-app .zinul-search-item {
    min-height: 54px;
    border-bottom-color: var(--zinul-border) !important;
}

body.zinul-app .zinul-search-item:hover,
body.zinul-app .zinul-search-item:focus {
    background: var(--zinul-primary-soft) !important;
}

body.zinul-app .zinul-user-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 2px !important;
    border: 1px solid var(--zinul-border);
    border-radius: 50%;
    background: var(--zinul-surface-subtle);
    color: var(--zinul-primary) !important;
    box-shadow: var(--zinul-shadow-xs);
}

body.zinul-app .zinul-user-menu:hover {
    border-color: #9ab9ee;
    background: var(--zinul-primary-soft);
}

body.zinul-app .zinul-user-avatar {
    width: 36px !important;
    height: 36px !important;
    border: 0 !important;
}

body.zinul-app #layoutSidenav {
    min-height: 100vh;
}

body.zinul-app #layoutSidenav_nav,
body.zinul-app.sb-nav-fixed #layoutSidenav #layoutSidenav_nav {
    top: 0;
    width: var(--zinul-sidebar-width) !important;
    height: 100vh;
    border-right: 1px solid var(--zinul-border);
    background: var(--zinul-surface);
    box-shadow: 4px 0 18px rgba(15, 23, 42, .035);
}

body.zinul-app #layoutSidenav_nav .sb-sidenav,
body.zinul-app.sb-nav-fixed #layoutSidenav #layoutSidenav_nav .sb-sidenav {
    height: 100%;
    padding-top: var(--zinul-topbar-height);
    background: var(--zinul-surface) !important;
    color: var(--zinul-text);
}

body.zinul-app #layoutSidenav_nav .sb-sidenav-menu {
    scrollbar-width: thin;
    scrollbar-color: #b9c5d3 transparent;
}

body.zinul-app #layoutSidenav_nav .sb-sidenav-menu .nav {
    padding: .65rem .45rem .85rem;
}

body.zinul-app .sb-sidenav .sb-sidenav-menu-heading {
    margin: .3rem .5rem .4rem;
    padding: .45rem .45rem .25rem !important;
    color: #8591a3 !important;
    font-size: .68rem !important;
    font-weight: 800 !important;
    letter-spacing: .06em;
    line-height: 1.35;
}

body.zinul-app .sb-sidenav .nav-link {
    min-height: 40px;
    margin: .08rem 0;
    padding: .55rem .65rem !important;
    border: 1px solid transparent;
    border-radius: var(--zinul-radius-sm);
    color: #344054 !important;
    font-size: .9rem;
    font-weight: 650;
    line-height: 1.25;
    text-decoration: none;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}

body.zinul-app .sb-sidenav .nav-link:hover,
body.zinul-app .sb-sidenav .nav-link:focus-visible {
    border-color: #d9e6fb;
    background: var(--zinul-primary-soft);
    color: var(--zinul-primary-hover) !important;
}

body.zinul-app .sb-sidenav .nav-link.active,
body.zinul-app .sb-sidenav .nav-link[aria-expanded="true"] {
    border-color: #c8dcff;
    background: var(--zinul-primary-soft);
    color: var(--zinul-primary) !important;
    font-weight: 750;
}

body.zinul-app .sb-sidenav .nav-link .text-black,
body.zinul-app .sb-sidenav .nav-link .sb-nav-link-icon,
body.zinul-app .sb-sidenav .nav-link .sb-sidenav-collapse-arrow {
    color: inherit !important;
}

body.zinul-app .sb-sidenav .nav-link .sb-nav-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    min-width: 1.35rem;
    margin-right: .55rem;
    opacity: .9;
}

body.zinul-app .sb-sidenav .sb-sidenav-menu-nested {
    margin: .1rem 0 .3rem 1.45rem !important;
    padding-left: .45rem;
    border-left: 1px solid #dbe4ef;
}

body.zinul-app .sb-sidenav .sb-sidenav-menu-nested .nav-link {
    min-height: 34px;
    padding: .4rem .55rem !important;
    font-size: .84rem;
    font-weight: 600;
}

body.zinul-app .sidenav-control-link {
    padding: .25rem .1rem .55rem !important;
}

body.zinul-app .sidenav-control-link .button-3d {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100% !important;
    min-height: 44px !important;
    padding: .55rem .7rem !important;
    border: 1px solid var(--zinul-border) !important;
    border-radius: var(--zinul-radius) !important;
    background: var(--zinul-surface-subtle) !important;
    color: var(--zinul-text) !important;
    box-shadow: none !important;
    font-size: .9rem !important;
    font-weight: 750;
    text-decoration: none;
    transform: none !important;
}

body.zinul-app .sidenav-control-link .button-3d::after {
    display: none !important;
}

body.zinul-app .sidenav-control-link .button-3d:hover {
    border-color: #a9c6f6 !important;
    background: var(--zinul-primary-soft) !important;
    color: var(--zinul-primary) !important;
}

body.zinul-app .sidenav-control-link .button-3d img {
    width: 26px !important;
    height: 26px !important;
    margin-right: .55rem !important;
    object-fit: contain;
}

body.zinul-app .sb-sidenav .sb-sidenav-footer {
    padding: .65rem .75rem .8rem;
    border-top: 1px solid var(--zinul-border);
    background: var(--zinul-surface-subtle) !important;
    color: var(--zinul-text);
}

body.zinul-app .zinul-network-panel--sidebar {
    margin: .55rem 0 0 !important;
    padding: .5rem !important;
    border-color: var(--zinul-border) !important;
    background: var(--zinul-surface) !important;
    box-shadow: none !important;
    font-size: .74rem !important;
}

body.zinul-app #layoutSidenav_content,
body.zinul-app.sb-nav-fixed #layoutSidenav #layoutSidenav_content {
    top: var(--zinul-topbar-height) !important;
    min-height: calc(100vh - var(--zinul-topbar-height)) !important;
    margin-left: var(--zinul-sidebar-width) !important;
    padding-left: 0 !important;
    background: var(--zinul-canvas) !important;
}

/* Standalone pages do not reserve space for the application shell. */
body.zinul-app.zinul-blank-layout #layoutSidenav_content {
    position: static !important;
    top: 0 !important;
    width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

body.zinul-app.zinul-blank-layout .zinul-blank-main {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
}

body.zinul-app.zinul-blank-layout.zinul-fullscreen-page .zinul-blank-main {
    padding: 0;
}

body.zinul-app.sb-sidenav-collapsed #layoutSidenav_nav,
body.zinul-app.sb-sidenav-collapsed #layoutSidenav #layoutSidenav_nav {
    width: var(--zinul-sidebar-collapsed-width) !important;
}

body.zinul-app.sb-sidenav-collapsed #layoutSidenav_content,
body.zinul-app.sb-sidenav-collapsed #layoutSidenav #layoutSidenav_content {
    margin-left: var(--zinul-sidebar-collapsed-width) !important;
}

body.zinul-app.sb-sidenav-hidden #layoutSidenav_nav,
body.zinul-app.sb-sidenav-hidden #layoutSidenav #layoutSidenav_nav {
    transform: translateX(-100%) !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.zinul-app #layoutSidenav_content > main {
    background: var(--zinul-canvas) !important;
}

body.zinul-app #layoutSidenav_content > main > .container-fluid,
body.zinul-app #layoutSidenav_content > main > .container {
    width: 100%;
    max-width: 1540px;
    padding: 1rem clamp(.75rem, 1.7vw, 1.5rem) 1.5rem;
}

/* Current company and cashbox context */
body.zinul-app .zinul-context-bar {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-width: 0;
    margin: 0 0 1rem;
    padding: .15rem 0 .85rem;
    border-bottom: 1px solid var(--zinul-border);
}

body.zinul-app .zinul-context-logo {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    padding: 3px;
    border: 1px solid var(--zinul-border);
    border-radius: var(--zinul-radius);
    background: var(--zinul-surface);
    object-fit: contain;
    box-shadow: var(--zinul-shadow-xs);
}

body.zinul-app .zinul-context-copy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .6rem;
    min-width: 0;
}

body.zinul-app .zinul-context-company {
    flex-basis: 100%;
    min-width: 0;
    color: var(--zinul-text-strong);
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

body.zinul-app .zinul-context-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    color: var(--zinul-muted);
    font-size: .84rem;
    font-weight: 650;
    line-height: 1.25;
}

body.zinul-app .zinul-context-item i {
    color: var(--zinul-primary);
}

body.zinul-app.zinul-fullscreen-page .zinul-context-bar {
    margin: 0;
    padding: .45rem .6rem;
    background: var(--zinul-surface);
}

body.zinul-app.zinul-fullscreen-page .zinul-context-company {
    font-size: clamp(1rem, 1.4vw, 1.2rem);
}

/* Typography and page navigation */
body.zinul-app main h1:not(.zinul-context-company),
body.zinul-app main .h1 {
    color: var(--zinul-text-strong);
    font-size: clamp(1.45rem, 2vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
}

body.zinul-app main h2,
body.zinul-app main .h2 {
    color: var(--zinul-text-strong);
    font-size: clamp(1.2rem, 1.5vw, 1.55rem);
    font-weight: 800;
    line-height: 1.25;
}

body.zinul-app main h3,
body.zinul-app main .h3 {
    font-size: 1.12rem;
}

body.zinul-app main h4,
body.zinul-app main .h4,
body.zinul-app main h5,
body.zinul-app main .h5 {
    font-size: 1rem;
}

body.zinul-app .breadcrumb {
    gap: .15rem;
    margin-bottom: 1rem;
    padding: 0;
    background: transparent;
    color: var(--zinul-muted);
    font-size: .86rem;
}

body.zinul-app .breadcrumb a {
    color: var(--zinul-primary);
    font-weight: 650;
    text-decoration: none;
}

body.zinul-app .breadcrumb a:hover {
    text-decoration: underline;
}

body.zinul-app hr {
    border-color: var(--zinul-border);
    opacity: 1;
}

/* Surfaces */
body.zinul-app .card,
body.zinul-app .zinul-page-section,
body.zinul-app .zinul-panel {
    border: 1px solid var(--zinul-border);
    border-radius: var(--zinul-radius);
    background: var(--zinul-surface);
    box-shadow: var(--zinul-shadow-sm);
    overflow: hidden;
}

body.zinul-app .card-header {
    min-height: 46px;
    padding: .72rem .9rem;
    border-bottom: 1px solid var(--zinul-border);
    background: var(--zinul-surface-subtle) !important;
    color: var(--zinul-text-strong) !important;
    font-size: .94rem;
    font-weight: 800;
}

body.zinul-app .card-header .text-white,
body.zinul-app .card-header.text-white {
    color: inherit !important;
}

body.zinul-app .card-body {
    padding: 1rem;
}

body.zinul-app .card-footer {
    padding: .7rem .9rem;
    border-top: 1px solid var(--zinul-border);
    background: var(--zinul-surface-subtle);
}

body.zinul-app .accordion-item {
    border-color: var(--zinul-border);
    background: var(--zinul-surface);
}

body.zinul-app .accordion-button {
    min-height: 46px;
    color: var(--zinul-text-strong);
    font-weight: 750;
    box-shadow: none;
}

body.zinul-app .accordion-button:not(.collapsed) {
    background: var(--zinul-primary-soft);
    color: var(--zinul-primary-hover);
}

body.zinul-app .list-group-item {
    padding: .72rem .85rem;
    border-color: var(--zinul-border);
    background: var(--zinul-surface);
}

/* Buttons */
body.zinul-app .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 38px;
    padding: .43rem .76rem;
    border-radius: var(--zinul-radius-sm);
    font-size: .9rem;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: 0;
    box-shadow: none;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}

body.zinul-app .btn:hover {
    transform: none;
}

body.zinul-app .btn-primary {
    border-color: var(--zinul-primary);
    background: var(--zinul-primary);
    color: #fff;
}

body.zinul-app .btn-primary:hover,
body.zinul-app .btn-primary:focus,
body.zinul-app .btn-primary:active {
    border-color: var(--zinul-primary-hover) !important;
    background: var(--zinul-primary-hover) !important;
    color: #fff !important;
}

body.zinul-app .btn-success {
    border-color: var(--zinul-success);
    background: var(--zinul-success);
    color: #fff;
}

body.zinul-app .btn-danger {
    border-color: var(--zinul-danger);
    background: var(--zinul-danger);
    color: #fff;
}

body.zinul-app .btn-warning {
    border-color: var(--zinul-brand-yellow);
    background: var(--zinul-brand-yellow);
    color: #2b2400;
}

body.zinul-app .btn-info {
    border-color: var(--zinul-info);
    background: var(--zinul-info);
    color: #fff;
}

body.zinul-app .btn-light,
body.zinul-app .btn-secondary {
    border-color: var(--zinul-border-strong);
    background: var(--zinul-surface);
    color: #344054;
}

body.zinul-app .btn-outline-primary,
body.zinul-app .btn-outline-secondary,
body.zinul-app .btn-outline-success,
body.zinul-app .btn-outline-danger,
body.zinul-app .btn-outline-warning,
body.zinul-app .btn-outline-info {
    background: var(--zinul-surface);
}

body.zinul-app .btn-outline-primary:hover {
    background: var(--zinul-primary-soft);
    color: var(--zinul-primary-hover);
}

body.zinul-app .btn-outline-secondary:hover {
    border-color: #98a2b3;
    background: var(--zinul-surface-muted);
    color: var(--zinul-text);
}

body.zinul-app .btn-sm,
body.zinul-app .btn-group-sm > .btn {
    min-height: 32px;
    padding: .3rem .52rem;
    font-size: .8rem;
}

body.zinul-app .btn-lg,
body.zinul-app .btn-group-lg > .btn {
    min-height: 46px;
    padding: .62rem 1rem;
    font-size: 1rem;
}

body.zinul-app .btn:disabled,
body.zinul-app .btn.disabled {
    cursor: not-allowed;
    box-shadow: none;
    opacity: .52;
}

/* Forms */
body.zinul-app label,
body.zinul-app .form-label {
    margin-bottom: .35rem;
    color: #344054;
    font-size: .86rem;
    font-weight: 750;
}

body.zinul-app .form-control,
body.zinul-app .form-select,
body.zinul-app .datatable-input,
body.zinul-app textarea,
body.zinul-app select {
    min-height: 40px;
    border: 1px solid var(--zinul-border-strong);
    border-radius: var(--zinul-radius-sm);
    background-color: var(--zinul-surface);
    color: var(--zinul-text);
    font-size: .92rem;
    box-shadow: var(--zinul-shadow-xs);
}

body.zinul-app textarea.form-control,
body.zinul-app textarea {
    min-height: 88px;
}

body.zinul-app .form-control:hover:not(:disabled):not([readonly]),
body.zinul-app .form-select:hover:not(:disabled),
body.zinul-app textarea:hover:not(:disabled):not([readonly]),
body.zinul-app select:hover:not(:disabled) {
    border-color: #9eacc0;
}

body.zinul-app .form-control:focus,
body.zinul-app .form-select:focus,
body.zinul-app .datatable-input:focus,
body.zinul-app textarea:focus,
body.zinul-app select:focus {
    border-color: var(--zinul-primary);
    box-shadow: 0 0 0 3px rgba(11, 99, 246, .13);
}

body.zinul-app .form-control::placeholder,
body.zinul-app textarea::placeholder {
    color: #98a2b3;
    opacity: 1;
}

body.zinul-app .form-control:disabled,
body.zinul-app .form-control[readonly],
body.zinul-app .form-select:disabled,
body.zinul-app select:disabled,
body.zinul-app textarea:disabled,
body.zinul-app textarea[readonly] {
    border-color: #e1e7ef;
    background: #f1f4f8;
    color: #667085;
    box-shadow: none;
}

body.zinul-app .input-group-text {
    min-height: 40px;
    border-color: var(--zinul-border-strong);
    background: var(--zinul-surface-subtle);
    color: #344054;
    font-size: .86rem;
    font-weight: 750;
}

body.zinul-app .form-check-input {
    border-color: #aebaca;
    box-shadow: none;
}

body.zinul-app .form-check-input:checked {
    border-color: var(--zinul-primary);
    background-color: var(--zinul-primary);
}

body.zinul-app .form-switch .form-check-input {
    width: 2.4em;
    height: 1.25em;
}

body.zinul-app .form-text {
    color: var(--zinul-muted);
    font-size: .8rem;
}

/* Tabs, dropdowns and badges */
body.zinul-app .nav-tabs {
    gap: .15rem;
    padding: 0 .25rem;
    border-bottom: 1px solid var(--zinul-border);
}

body.zinul-app .nav-tabs .nav-link {
    margin-bottom: -1px;
    padding: .68rem .82rem;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--zinul-muted);
    font-size: .9rem;
    font-weight: 750;
}

body.zinul-app .nav-tabs .nav-link:hover {
    color: var(--zinul-primary);
}

body.zinul-app .nav-tabs .nav-link.active,
body.zinul-app .nav-tabs .nav-item.show .nav-link {
    border-bottom-color: var(--zinul-primary) !important;
    background: transparent !important;
    color: var(--zinul-text-strong);
}

body.zinul-app .nav-pills {
    gap: .25rem;
    padding: .25rem;
    border: 1px solid var(--zinul-border);
    border-radius: var(--zinul-radius);
    background: var(--zinul-surface-muted);
}

body.zinul-app .nav-pills .nav-link {
    border-radius: var(--zinul-radius-sm);
    color: #475467;
    font-weight: 700;
}

body.zinul-app .nav-pills .nav-link.active {
    background: var(--zinul-surface);
    color: var(--zinul-primary);
    box-shadow: var(--zinul-shadow-xs);
}

body.zinul-app .dropdown-menu {
    padding: .4rem;
    border: 1px solid var(--zinul-border);
    border-radius: var(--zinul-radius);
    background: var(--zinul-surface);
    box-shadow: var(--zinul-shadow-md);
}

body.zinul-app .dropdown-item {
    min-height: 36px;
    padding: .5rem .65rem;
    border-radius: var(--zinul-radius-sm);
    color: #344054;
    font-size: .88rem;
    font-weight: 650;
}

body.zinul-app .dropdown-item:hover,
body.zinul-app .dropdown-item:focus {
    background: var(--zinul-primary-soft);
    color: var(--zinul-primary-hover);
}

body.zinul-app .badge {
    padding: .36em .6em;
    border-radius: 999px;
    font-size: .72em;
    font-weight: 800;
    letter-spacing: 0;
}

/* Alerts */
body.zinul-app .alert {
    padding: .78rem .9rem;
    border-width: 1px;
    border-radius: var(--zinul-radius);
    box-shadow: none;
}

body.zinul-app .alert-primary,
body.zinul-app .alert-info {
    border-color: #b9d9f2;
    background: var(--zinul-info-soft);
    color: #14506a;
}

body.zinul-app .alert-success {
    border-color: #bde4d5;
    background: var(--zinul-success-soft);
    color: #145c45;
}

body.zinul-app .alert-warning {
    border-color: #eed48d;
    background: var(--zinul-warning-soft);
    color: #744a00;
}

body.zinul-app .alert-danger {
    border-color: #f0bac3;
    background: var(--zinul-danger-soft);
    color: #8f1e32;
}

/* Tables and DataTables */
body.zinul-app .table-responsive,
body.zinul-app .datatable-wrapper .datatable-container,
body.zinul-app .dataTables_wrapper.grid-shell {
    border: 1px solid var(--zinul-border);
    border-radius: var(--zinul-radius);
    background: var(--zinul-surface);
    box-shadow: none;
}

body.zinul-app .table,
body.zinul-app .table.dataTable,
body.zinul-app table.dataTable {
    color: #27364a;
}

body.zinul-app .table > :not(caption) > * > *,
body.zinul-app table.dataTable tbody th,
body.zinul-app table.dataTable tbody td {
    padding: .52rem .58rem !important;
    border-bottom-color: #e6ebf1 !important;
    font-size: .79rem !important;
    line-height: 1.3;
    vertical-align: middle !important;
}

body.zinul-app .compact-table > :not(caption) > * > *,
body.zinul-app .table-sm > :not(caption) > * > * {
    padding: .4rem .46rem !important;
    font-size: .75rem !important;
}

body.zinul-app .table thead th,
body.zinul-app table.dataTable thead th,
body.zinul-app table.dataTable thead td,
body.zinul-app thead.table-primary th,
body.zinul-app thead.table-secondary th,
body.zinul-app thead.table-success th,
body.zinul-app thead.table-light th {
    padding: .56rem .58rem !important;
    border-bottom: 1px solid var(--zinul-border-strong) !important;
    background: var(--zinul-surface-muted) !important;
    color: #344054 !important;
    font-size: .68rem !important;
    font-weight: 850 !important;
    letter-spacing: .035em;
    line-height: 1.2;
    text-transform: uppercase;
}

body.zinul-app .table-striped > tbody > tr:nth-of-type(odd) > *,
body.zinul-app table.dataTable.stripe tbody tr.odd,
body.zinul-app table.dataTable.display tbody tr.odd {
    background: #fbfcfe !important;
    box-shadow: none !important;
}

body.zinul-app .table-hover > tbody > tr:hover > *,
body.zinul-app table.dataTable.hover tbody tr:hover,
body.zinul-app table.dataTable.display tbody tr:hover {
    background: #f0f6ff !important;
    box-shadow: none !important;
}

body.zinul-app .dataTables_wrapper {
    color: var(--zinul-text);
}

body.zinul-app .dataTables_wrapper .dataTables_length,
body.zinul-app .dataTables_wrapper .dataTables_filter,
body.zinul-app .dataTables_wrapper .dataTables_info,
body.zinul-app .dataTables_wrapper .dataTables_paginate {
    color: var(--zinul-muted) !important;
    font-size: .8rem;
}

body.zinul-app .dataTables_wrapper .dataTables_length select,
body.zinul-app .dataTables_wrapper .dataTables_filter input {
    min-height: 34px;
    margin: .25rem;
    border: 1px solid var(--zinul-border-strong);
    border-radius: var(--zinul-radius-sm);
    background: var(--zinul-surface);
    color: var(--zinul-text);
    box-shadow: none;
}

body.zinul-app .dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 32px;
    min-height: 32px;
    margin: 0 2px;
    padding: .35rem .55rem !important;
    border: 1px solid transparent !important;
    border-radius: var(--zinul-radius-sm) !important;
    background: transparent !important;
    color: #475467 !important;
    box-shadow: none !important;
}

body.zinul-app .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.zinul-app .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    border-color: #c8dcff !important;
    background: var(--zinul-primary-soft) !important;
    color: var(--zinul-primary) !important;
}

body.zinul-app .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border-color: var(--zinul-border) !important;
    background: var(--zinul-surface-muted) !important;
    color: var(--zinul-text) !important;
}

body.zinul-app .dataTables_wrapper .dt-buttons .dt-button,
body.zinul-app .dataTables_wrapper .dt-buttons .btn,
body.zinul-app .dataTables_wrapper button.dt-button {
    min-height: 34px;
    padding: .38rem .58rem !important;
    border: 1px solid var(--zinul-border-strong) !important;
    border-radius: var(--zinul-radius-sm) !important;
    background: var(--zinul-surface) !important;
    color: #344054 !important;
    box-shadow: none !important;
    font-size: .78rem !important;
    font-weight: 750;
}

body.zinul-app .dataTables_wrapper .dt-buttons .dt-button:hover,
body.zinul-app .dataTables_wrapper .dt-buttons .btn:hover,
body.zinul-app .dataTables_wrapper button.dt-button:hover {
    border-color: #9ab9ee !important;
    background: var(--zinul-primary-soft) !important;
    color: var(--zinul-primary) !important;
}

body.zinul-app .table .btn,
body.zinul-app table.dataTable .btn {
    min-height: 30px;
    padding: .28rem .4rem !important;
    font-size: .72rem !important;
}

body.zinul-app .grid-action-group .grid-action-icon {
    width: 30px;
    min-width: 30px;
    height: 30px;
    border-radius: var(--zinul-radius-sm) !important;
}

/* Modals and confirmations */
body.zinul-app .modal-backdrop.show {
    opacity: .42;
}

body.zinul-app .modal-content {
    border: 1px solid var(--zinul-border);
    border-radius: var(--zinul-radius);
    background: var(--zinul-surface);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
    overflow: hidden;
}

body.zinul-app .modal-header {
    min-height: 54px;
    padding: .78rem 1rem;
    border-bottom: 1px solid var(--zinul-border);
    background: var(--zinul-surface-subtle) !important;
    color: var(--zinul-text-strong) !important;
}

body.zinul-app .modal-header.bg-primary,
body.zinul-app .modal-header.bg-success,
body.zinul-app .modal-header.bg-danger,
body.zinul-app .modal-header.bg-warning,
body.zinul-app .modal-header.bg-info {
    color: var(--zinul-text-strong) !important;
}

body.zinul-app .modal-title {
    color: inherit !important;
    font-size: 1rem;
    font-weight: 800;
}

body.zinul-app .modal-body {
    padding: 1rem;
}

body.zinul-app .modal-footer {
    padding: .72rem 1rem;
    border-top: 1px solid var(--zinul-border);
    background: var(--zinul-surface-subtle);
}

body.zinul-app .swal-overlay {
    background: rgba(15, 23, 42, .42);
}

body.zinul-app .swal-modal {
    border: 1px solid var(--zinul-border);
    border-radius: var(--zinul-radius);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
}

body.zinul-app .swal-title {
    color: var(--zinul-text-strong);
    font-size: 1.35rem;
    font-weight: 800;
}

body.zinul-app .swal-text {
    color: var(--zinul-muted);
    line-height: 1.5;
}

body.zinul-app .swal-button {
    min-height: 38px;
    border-radius: var(--zinul-radius-sm);
    font-weight: 750;
}

/* Footer */
body.zinul-app .zinul-page-footer {
    margin-top: 1rem !important;
    padding: 1rem clamp(.75rem, 1.7vw, 1.5rem) !important;
    border-top: 1px solid var(--zinul-border);
    background: var(--zinul-surface) !important;
    color: var(--zinul-muted) !important;
    font-size: .8rem;
}

body.zinul-app .zinul-page-footer > hr {
    display: none;
}

body.zinul-app .zinul-page-footer > .sb-sidenav-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem .55rem;
    margin: 0 0 .5rem !important;
    padding: 0;
    border: 0;
    background: transparent !important;
}

body.zinul-app .zinul-page-footer img {
    width: 92px;
    height: auto;
    margin-right: .35rem;
}

body.zinul-app .zinul-page-footer a {
    color: var(--zinul-primary);
    font-weight: 650;
    text-decoration: none;
}

body.zinul-app .zinul-page-footer a:hover {
    text-decoration: underline;
}

/* Responsive shell */
@media (max-width: 991.98px) {
    body.zinul-app {
        --zinul-topbar-height: 60px;
    }

    body.zinul-app .sb-topnav {
        padding-right: .5rem;
    }

    body.zinul-app .sb-topnav .navbar-brand {
        width: auto;
        min-width: 132px;
        padding-left: .7rem !important;
        padding-right: .7rem !important;
    }

    body.zinul-app .sb-topnav .navbar-brand img {
        max-width: 118px;
        height: 41px;
    }

    body.zinul-app .btn-toggle-menu,
    body.zinul-app.sb-sidenav-collapsed .btn-toggle-menu {
        min-width: 42px;
        width: 42px;
        padding: 0;
    }

    body.zinul-app .btn-toggle-menu .label {
        display: none;
    }

    body.zinul-app #layoutSidenav_nav,
    body.zinul-app.sb-nav-fixed #layoutSidenav #layoutSidenav_nav {
        top: var(--zinul-topbar-height) !important;
        width: min(var(--zinul-sidebar-width), 86vw) !important;
        height: calc(100dvh - var(--zinul-topbar-height)) !important;
        box-shadow: 12px 0 32px rgba(15, 23, 42, .18);
    }

    body.zinul-app #layoutSidenav_nav .sb-sidenav,
    body.zinul-app.sb-nav-fixed #layoutSidenav #layoutSidenav_nav .sb-sidenav {
        padding-top: 0;
    }

    body.zinul-app #layoutSidenav_content,
    body.zinul-app.sb-nav-fixed #layoutSidenav #layoutSidenav_content,
    body.zinul-app.sb-sidenav-collapsed #layoutSidenav_content,
    body.zinul-app.sb-sidenav-collapsed #layoutSidenav #layoutSidenav_content {
        top: var(--zinul-topbar-height) !important;
        min-height: calc(100dvh - var(--zinul-topbar-height)) !important;
        margin-left: 0 !important;
    }

    body.zinul-app:not(.sb-sidenav-hidden) #layoutSidenav_content::before {
        top: var(--zinul-topbar-height) !important;
        background: rgba(15, 23, 42, .42) !important;
        backdrop-filter: blur(1px);
    }

    body.zinul-app #layoutSidenav_content > main > .container-fluid,
    body.zinul-app #layoutSidenav_content > main > .container {
        padding: .8rem .75rem 1.15rem;
    }

    body.zinul-app .card-body {
        padding: .85rem;
    }

    body.zinul-app .btn {
        min-height: 40px;
    }
}

@media (max-width: 575.98px) {
    body.zinul-app .sb-topnav .navbar-brand {
        min-width: 104px;
        padding-left: .45rem !important;
        padding-right: .45rem !important;
    }

    body.zinul-app .sb-topnav .navbar-brand img {
        max-width: 96px;
        height: 37px;
    }

    body.zinul-app .btn-toggle-menu,
    body.zinul-app.sb-sidenav-collapsed .btn-toggle-menu {
        margin-left: .25rem !important;
    }

    body.zinul-app .navbar-nav {
        margin-right: 0 !important;
    }

    body.zinul-app .zinul-user-menu {
        width: 40px;
        height: 40px;
    }

    body.zinul-app .zinul-context-bar {
        align-items: flex-start;
        gap: .65rem;
        margin-bottom: .75rem;
        padding-bottom: .7rem;
    }

    body.zinul-app .zinul-context-logo {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    body.zinul-app .zinul-context-company {
        font-size: 1rem;
    }

    body.zinul-app .zinul-context-item {
        flex-basis: 100%;
        font-size: .78rem;
    }

    body.zinul-app .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }

    body.zinul-app .nav-tabs .nav-link {
        white-space: nowrap;
    }

    body.zinul-app .modal-dialog {
        margin: .5rem;
    }

    body.zinul-app .dataTables_wrapper .dataTables_length,
    body.zinul-app .dataTables_wrapper .dataTables_filter,
    body.zinul-app .dataTables_wrapper .dataTables_info,
    body.zinul-app .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        width: 100%;
        margin: .35rem 0;
        text-align: left !important;
    }

    body.zinul-app .dataTables_wrapper .dataTables_filter input {
        width: calc(100% - 1rem);
        margin-left: 0;
    }

    body.zinul-app .table-responsive > table:not(.table-stack),
    body.zinul-app .table-responsive > .table:not(.table-stack) {
        min-width: 640px !important;
    }

    body.zinul-app .zinul-page-footer > .sb-sidenav-footer {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.zinul-app *,
    body.zinul-app *::before,
    body.zinul-app *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media print {
    body.zinul-app {
        background: #fff !important;
    }

    body.zinul-app .sb-topnav,
    body.zinul-app #layoutSidenav_nav,
    body.zinul-app .zinul-page-footer {
        display: none !important;
    }

    body.zinul-app #layoutSidenav_content,
    body.zinul-app.sb-nav-fixed #layoutSidenav #layoutSidenav_content {
        top: 0 !important;
        min-height: 0 !important;
        margin-left: 0 !important;
    }

    body.zinul-app .card,
    body.zinul-app .table-responsive,
    body.zinul-app .dataTables_wrapper.grid-shell {
        box-shadow: none !important;
    }
}