/*!
 * KigaERP custom layer — loaded after dashlite.css / theme.css.
 * dashlite.css ships without its structural sidebar/layout rules, so this
 * file supplies the fixed-sidebar shell, responsive behavior, and small
 * visual-consistency polish used across every module.
 */

/* ---------------------------------------------------------------
   App shell / layout
--------------------------------------------------------------- */
.nk-app-root {
    overflow: hidden;
}

.nk-main {
    position: relative;
}

.nk-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left .25s ease;
}

.nk-content {
    flex-grow: 1;
}

/* Sidebar shell */
.nk-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-right: 1px solid #e5e9f2;
    transform: translateX(-100%);
    transition: transform .25s ease, width .25s ease;
}

.nk-sidebar-element {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.nk-sidebar-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    height: auto;
    padding: 1.25rem 1.25rem;
    border-bottom: 1px solid #e5e9f2;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.nk-sidebar-brand {
    overflow: hidden;
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nk-sidebar-brand .logo-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    flex-grow: 1;
    min-height: 40px;
}

.nk-sidebar-brand .logo-img {
    max-height: 32px;
    width: auto;
    transition: transform .25s ease;
    object-fit: contain;
}

.nk-sidebar-brand .logo-text {
    font-size: 0.95rem !important;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 0;
    display: block;
    transition: color .25s ease;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nk-sidebar-brand .logo-link:hover .logo-text {
    color: #0d9488 !important;
}

.nk-sidebar-body {
    flex-grow: 1;
    min-height: 0;
}

.nk-sidebar-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.nk-sidebar-menu {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.25rem 0 2rem;
    scrollbar-width: thin;
}

/* Menu item base look now lives in the ".nk-sidebar .nk-menu-*" block
   below, scoped and consolidated — see that section for hover/active/icon
   styling. (Menu items used to be styled here too, at lower specificity,
   which meant this block quietly won on some properties and lost on
   others; it's been merged instead of layered.) */

.nk-sidebar-menu::-webkit-scrollbar {
    width: 5px;
}

.nk-sidebar-menu::-webkit-scrollbar-thumb {
    background: #dbdfea;
    border-radius: 6px;
}

.nk-sidebar-footer {
    flex-shrink: 0;
    border-top: 1px solid #e5e9f2;
    background: linear-gradient(135deg, #f8f9fb 0%, #ffffff 100%);
    padding: .75rem 1.25rem;
}

.nk-sidebar-footer-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nk-sidebar-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-decoration: none;
    cursor: pointer;
    border-radius: .5rem;
    padding: 0.5rem;
    margin: -0.5rem;
    transition: background-color .2s ease;
}

.nk-sidebar-profile:hover {
    background: rgba(13, 148, 136, .07);
}

.nk-sidebar-profile .d-flex {
    width: 100%;
    align-items: center;
    gap: 0.75rem;
}

.nk-sidebar-profile .user-avatar {
    min-width: 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: 600;
    font-size: 0.75rem;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(13, 148, 136, .35);
    transition: box-shadow .2s ease;
}

.nk-sidebar-profile:hover .user-avatar {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(13, 148, 136, .6);
}

.nk-sidebar-profile .user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nk-sidebar-profile .user-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nk-sidebar-profile .user-role {
    font-size: 0.75rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nk-sidebar-profile .profile-arrow {
    flex-shrink: 0;
    color: #b4bccb;
    font-size: .8rem;
    transition: transform .2s ease, color .2s ease;
}

.nk-sidebar-profile:hover .profile-arrow {
    color: #0D9488;
    transform: translateX(2px);
}

.nk-menu-trigger {
    display: flex;
    align-items: center;
    gap: .25rem;
}

/* Menu section headings */
.nk-menu-heading {
    list-style: none;
    padding: .9rem 1rem .3rem;
    margin: .2rem 0 0;
}

.nk-menu-heading:not(:first-child) {
    margin-top: .4rem;
    border-top: 1px solid #eef1f6;
    padding-top: .8rem;
}

.nk-menu-heading h6 {
    margin: 0;
    font-size: .66rem !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: #a3adc2;
    transition: color .2s ease;
}

/* Sidebar visible on large screens */
@media (min-width: 1200px) {
    .nk-sidebar {
        transform: none;
    }
    .nk-wrap {
        margin-left: 260px;
    }
    .nk-header-fixed {
        left: 260px;
    }
    /* .nk-wrap's margin-left above assumes a fixed sidebar is always
       present. Sidebar-less shells (App Selection / onboarding, and any
       other page using .nk-wrap-nosidebar) have no sidebar to make room
       for, so they were getting shoved 260px right for nothing — the
       cause of the off-center, clipped-looking App Selection page. */
    .nk-wrap-nosidebar {
        margin-left: 0 !important;
    }
}

/* Off-canvas sidebar below xl */
@media (max-width: 1199.98px) {
    .nk-wrap {
        margin-left: 0;
    }
    .nk-header-fixed {
        left: 0;
    }
    .nk-sidebar.is-shown {
        transform: translateX(0);
        box-shadow: 0 0 60px rgba(0, 0, 0, .2);
    }
}

/* Backdrop shown behind the off-canvas sidebar on mobile/tablet */
.nk-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1025;
    background: rgba(19, 24, 34, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.nk-sidebar-backdrop.is-shown {
    opacity: 1;
    pointer-events: auto;
}

body.nk-sidebar-open {
    overflow: hidden;
}

@media (min-width: 1200px) {
    body.nk-sidebar-open {
        overflow: auto;
    }
}

/* ---------------------------------------------------------------
   Compact (icon-only) sidebar — desktop toggle
--------------------------------------------------------------- */
@media (min-width: 1200px) {
    body.nk-sidebar-compact .nk-sidebar {
        width: 76px;
    }
    body.nk-sidebar-compact .nk-wrap {
        margin-left: 76px;
    }
    body.nk-sidebar-compact .nk-header-fixed {
        left: 76px;
    }
    body.nk-sidebar-compact .nk-sidebar-brand .logo-text,
    body.nk-sidebar-compact .nk-menu-text,
    body.nk-sidebar-compact .nk-menu-heading,
    body.nk-sidebar-compact .nk-sidebar-profile .user-name,
    body.nk-sidebar-compact .nk-sidebar-profile .user-role,
    body.nk-sidebar-compact .nk-menu-item .badge {
        display: none !important;
    }
    body.nk-sidebar-compact .nk-menu-link {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }
    body.nk-sidebar-compact .nk-menu-icon {
        margin-right: 0;
    }
    body.nk-sidebar-compact .nk-menu-link::before {
        display: none;
    }
    body.nk-sidebar-compact .nk-menu-sub {
        position: absolute !important;
        left: 76px;
        width: auto !important;
        min-width: 220px;
        margin-top: 0;
        padding: .5rem !important;
        background: #fff;
        border: 1px solid #e5e9f2;
        border-radius: .625rem;
        box-shadow: 0 10px 30px rgba(20, 30, 50, .14);
        display: none;
        animation: none;
    }
    body.nk-sidebar-compact .nk-menu-sub .nk-menu-link {
        border-radius: .375rem;
    }
    body.nk-sidebar-compact .nk-menu-item.has-sub {
        position: relative;
    }
    body.nk-sidebar-compact .nk-menu-item.has-sub:hover > .nk-menu-sub {
        display: block;
    }
}

/* ---------------------------------------------------------------
   Sidebar menu — dashlite.css ships menu rules meant for its
   horizontal "header-menu" variant (icons hidden >=992px, submenus
   as absolute flyouts, items as inline-block). Rebuilt here for a
   vertical, always-icon, stacking accordion sidebar.
--------------------------------------------------------------- */
.nk-sidebar .nk-menu {
    list-style: none;
    margin: 0;
    padding: 0 .75rem;
}

.nk-sidebar .nk-menu-item {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: .1rem;
}

.nk-sidebar .nk-menu-heading {
    display: block;
    width: 100%;
    height: auto;
}

/* Base link look — rounded "pill" row with room for a left accent bar
   (drawn via ::before rather than border-left, so it doesn't shift the
   row's padding/box like a real border would). */

/* -----------------------------------------------------------------
   Neutralizing DashLite's higher-specificity top-level menu-link rules.

   dashlite.css's `.nk-menu > li.nk-menu-item > .nk-menu-link` (inside its
   @media (min-width:992px) block) sets padding:1.25rem 0 and font-size:
   14px there, and its unguarded `.nk-menu > li > .nk-menu-link` forces
   text-transform:uppercase + letter-spacing everywhere. Both selectors
   use child-combinators (3 classes+1 type, 2 classes+1 type) that
   out-specificity this flat two-class selector — they're built for
   DashLite's horizontal header-menu variant, not this vertical sidebar,
   and don't belong here. Matched with !important rather than another
   specificity climb; a plain selector can't outrank a structural
   combinator without getting uglier than the problem it's solving.
----------------------------------------------------------------- */
.nk-sidebar .nk-menu-link {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: auto;
    border-radius: .5rem;
    color: #526484;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
    padding: .5rem .75rem !important;
    font-size: .8125rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.nk-sidebar .nk-menu-link::before {
    content: "";
    position: absolute;
    left: -.75rem;
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #0D9488;
    opacity: 0;
    transform: scaleY(.4);
    transition: opacity .15s ease, transform .15s ease;
}

.nk-sidebar .nk-menu-link:hover {
    background: #F0FDFA;
    color: #0D9488;
}

.nk-sidebar .nk-menu-item.active > .nk-menu-link,
.nk-sidebar .nk-menu-item.current-page > .nk-menu-link {
    background: rgba(13, 148, 136, .1);
    color: #0D9488;
    font-weight: 600 !important;
}

.nk-sidebar .nk-menu-item.active > .nk-menu-link::before,
.nk-sidebar .nk-menu-item.current-page > .nk-menu-link::before {
    opacity: 1;
    transform: scaleY(1);
}

/* -----------------------------------------------------------------
   Icon sizing: dashlite.css sets the actual glyph size on a *nested*
   element, not the wrapper — `.nk-menu-icon .icon { font-size: 24px; }`
   — so overriding font-size on .nk-menu-icon itself (the wrapper) never
   touched the rendered glyph; it stayed at DashLite's 24px default the
   whole time regardless. Sized here (.icon) to sit proportionate to the
   13px (.8125rem) menu text, and the wrapper is a fixed width rather than
   sized to content so every row's text starts at the same x position
   whether its icon is visually narrow (e.g. a single door/arrow glyph) or
   wide (e.g. a shield) — that's the "consistent padding" part; without a
   fixed box, icon width varies per-glyph and the text column jitters.
----------------------------------------------------------------- */
.nk-sidebar .nk-menu-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 20px;
    flex-shrink: 0;
    margin-right: .65rem;
    transition: transform .15s ease;
}
.nk-sidebar .nk-menu-icon .icon {
    font-size: .9375rem !important;
    line-height: 1 !important;
}

.nk-sidebar .nk-menu-link:hover .nk-menu-icon {
    transform: translateX(1px);
}

.nk-sidebar .nk-menu-text {
    flex-grow: 1;
    display: inline-block;
}

.nk-sidebar .nk-menu-item.has-sub {
    position: static;
    height: auto;
}

/*
 * dashlite.css has a `@media (min-width:992px) { .nk-menu .nk-menu-sub {
 * display:block !important; position:absolute; opacity:0; visibility:hidden; ... } }`
 * block meant for its horizontal header-menu variant. It matches our sidebar's
 * `.nk-menu` too and outranks a plain `.nk-menu-sub{}` override (same
 * specificity tier, but it's !important). Match its specificity+importance
 * here, scoped to the sidebar, and reset every property it sets.
 */
.nk-sidebar .nk-menu-sub {
    display: none !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
    padding: .1rem 0 .1rem 1.4rem !important;
}

.nk-sidebar .nk-menu-item.active > .nk-menu-sub,
.nk-sidebar .nk-menu-item.menu-open > .nk-menu-sub {
    display: block !important;
    animation: nkMenuSubIn .18s ease;
}

@keyframes nkMenuSubIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.nk-sidebar .nk-menu-sub .nk-menu-link {
    /* Same DashLite specificity problem as the top-level link above
       (`.nk-menu .nk-menu-sub .nk-menu-link`), just one tier lower. */
    padding: .4rem .75rem .4rem 2.6rem !important;
    font-size: .78rem !important;
    font-weight: 400 !important;
    color: #6b7a94;
}

.nk-sidebar .nk-menu-sub .nk-menu-item.active > .nk-menu-link,
.nk-sidebar .nk-menu-sub .nk-menu-item.current-page > .nk-menu-link {
    background: rgba(13, 148, 136, .08);
}

.nk-menu-item.has-sub > .nk-menu-link::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: .5;
    transform: rotate(45deg);
    transition: transform .2s ease;
}

.nk-menu-item.has-sub.menu-open > .nk-menu-link::after,
.nk-menu-item.has-sub.active > .nk-menu-link::after {
    transform: rotate(-135deg);
}

/* ---------------------------------------------------------------
   Modern Color Theme - Teal/Green Professional Palette
--------------------------------------------------------------- */
:root {
    --primary-color: #0D9488;
    --primary-dark: #047857;
    --secondary-color: #059669;
    --accent-success: #10B981;
    --accent-danger: #EF4444;
    --accent-warning: #F59E0B;
    --neutral-dark: #1F2937;
    --neutral-light: #F3F4F6;
}

/* Override primary color throughout the app */
.text-primary, .text-primary-alt {
    color: #0D9488 !important;
}

.bg-primary {
    background-color: #0D9488 !important;
}

.btn-primary {
    background-color: #0D9488 !important;
    border-color: #0D9488 !important;
}

.btn-primary:hover {
    background-color: #047857 !important;
    border-color: #047857 !important;
}

.btn-primary:focus,
.btn-primary.focus {
    background-color: #047857 !important;
    border-color: #047857 !important;
    box-shadow: 0 0 0 .25rem rgba(13, 148, 136, .25) !important;
}

.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled).active {
    background-color: #047857 !important;
    border-color: #047857 !important;
}

.btn-primary.disabled,
.btn-primary:disabled {
    background-color: #0D9488 !important;
    border-color: #0D9488 !important;
    opacity: .65;
}

/* Links and interactive elements */
a, .link {
    color: #0D9488;
}

a:hover, .link:hover {
    color: #047857;
}

/* Badge colors */
.badge-primary {
    background-color: #0D9488 !important;
}

.badge-success {
    background-color: #10B981 !important;
}

.badge-danger {
    background-color: #EF4444 !important;
}

.badge-warning {
    background-color: #F59E0B !important;
}

/* Alert colors */
.alert-success {
    background-color: rgba(16, 185, 129, .1) !important;
    border-color: #10B981 !important;
    color: #047857 !important;
}

.alert-danger {
    background-color: rgba(239, 68, 68, .1) !important;
    border-color: #EF4444 !important;
    color: #991B1B !important;
}

.alert-warning {
    background-color: rgba(245, 158, 11, .1) !important;
    border-color: #F59E0B !important;
    color: #92400E !important;
}

/* Button sizing for action buttons and filter buttons */
.nk-block-head-content .btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.nk-block-head-content .btn:not(.btn-icon) {
    white-space: nowrap;
}

/* Filter and Reset buttons in table forms */
.card-inner form .btn,
.card-inner button.btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Align form inputs and buttons in filter rows */
.card-inner form .form-control,
.card-inner form .form-select,
.card-inner form .input-group {
    min-height: 2.25rem;
}

.card-inner form .form-control-sm,
.card-inner form .form-select-sm {
    min-height: 2.25rem;
    padding: 0.5rem 0.75rem;
}

/* Role card button styling */
.card-inner .btn:not(.btn-sm):not(.btn-xs) {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Ensure outline buttons in cards match sizing */
.card-inner .btn-outline-primary,
.card-inner .btn-outline-danger,
.card-inner .btn-outline-secondary {
    min-height: 2.25rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
}

/* Role card specific improvements */
.card-bordered.h-100 {
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

.card-bordered.h-100:hover {
    border-color: #d0d8e0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.card-inner {
    padding: 1.5rem;
}

/* Form input focus state */
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus {
    border-color: #0D9488 !important;
    box-shadow: 0 0 0 .25rem rgba(13, 148, 136, .25) !important;
}

/* Selection color */
::selection {
    background: rgba(13, 148, 136, .2);
}

/* Hover effects for cards */
.card-bordered {
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
    border-color: #E5E7EB;
}

.card-bordered:hover {
    box-shadow: 0 4px 18px rgba(13, 148, 136, .1);
    border-color: #0D9488;
}

/* Status badge colors */
.badge-status {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .375rem .625rem;
    border-radius: .25rem;
    font-size: .875rem;
    font-weight: 500;
}

.badge-status.active {
    background: rgba(16, 185, 129, .15);
    color: #10B981;
}

.badge-status.inactive {
    background: rgba(107, 114, 128, .15);
    color: #6B7280;
}

.badge-status.pending {
    background: rgba(245, 158, 11, .15);
    color: #F59E0B;
}

/* Header styling */
.nk-header {
    background: #fff;
    border-bottom: 1px solid #E5E7EB;
}

/* ---------------------------------------------------------------
   Header
--------------------------------------------------------------- */
.nk-header-search {
    position: relative;
    align-items: center;
    max-width: 320px;
    flex-grow: 1;
}

.nk-header-search .icon {
    position: absolute;
    left: 12px;
    color: #8094ae;
    pointer-events: none;
}

.nk-header-search input {
    padding-left: 2.25rem;
}

/* ---------------------------------------------------------------
   General visual-consistency polish
--------------------------------------------------------------- */

/* dashlite.css defines .gap-1/.gap-2/.gap-3 twice: once as the real
   Bootstrap flex "gap" utility (!important), and again, later in the same
   file, as an unrelated fixed-height spacer utility (no !important, e.g.
   6-16px). Both declarations apply since they touch different CSS
   properties, so any flex row using these classes gets its height clamped
   and its wrapped content (badges, buttons, text) spills out and overlaps
   whatever comes after it. Neutralized globally here rather than per-page,
   since it affects any `.gap-*` flex container anywhere in the app. */
.gap-1, .gap-2, .gap-3, .gap-4, .gap-5 {
    height: auto !important;
}

.card-bordered {
    transition: box-shadow .15s ease, transform .15s ease;
}

.card-bordered:hover {
    box-shadow: 0 4px 18px rgba(31, 45, 61, .08);
}

.nk-block-head .page-title {
    margin-bottom: .25rem;
}

.toggle-expand-content {
    flex-wrap: wrap;
}

::selection {
    background: rgba(79, 110, 242, .2);
}

/* Auth Page Styling */
.nk-auth-container {
    min-height: 100vh;
    padding: 2rem 1rem;
}

.brand-logo {
    animation: fadeInDown 0.6s ease-out;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nk-block-head.text-center {
    text-align: center;
    margin-bottom: 1.5rem;
}

.nk-block-head-content p {
    margin-bottom: 0;
}

/* Auth form styling */
.nk-auth-body form {
    animation: fadeInUp 0.6s ease-out 0.2s both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-note-s2 {
    animation: fadeInUp 0.6s ease-out 0.4s both;
}

/* Alert styling for verification page */
.alert-icon {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.alert-icon em {
    flex-shrink: 0;
    margin-top: 0.25rem;
}

/* Card improvements */
.card {
    border: 1px solid #f0f0f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Logo improvements */
.logo-link {
    text-decoration: none;
    transition: transform 0.3s ease;
}

.logo-link:hover {
    transform: translateY(-2px);
}

.logo-img {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
    transition: filter 0.3s ease;
}

.logo-link:hover .logo-img {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.12));
}

/* Professional Header Styling */
.nk-header {
    background: #fff;
    border-bottom: 1px solid #e5e9f2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.nk-header.is-light {
    background: #fff;
}

.nk-header-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.75rem 0;
}

.nk-header-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nk-header-brand .logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.nk-header-brand img {
    max-height: 32px;
    width: auto;
    object-fit: contain;
}

.nk-header-search {
    flex-grow: 1;
    max-width: 450px;
    position: relative;
}

.nk-header-search em {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
    font-size: 0.95rem;
}

.nk-header-search input {
    padding-left: 2.75rem;
    padding-right: 1rem;
    height: 38px;
    background: #f3f4f6;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    font-size: 0.9rem;
    color: #6b7280;
    transition: all .25s ease;
    width: 100%;
}

.nk-header-search input::placeholder {
    color: #a3a3a3;
}

.nk-header-search input:focus {
    background: #fff;
    border-color: #0d9488;
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1);
    color: #1f2937;
}

.nk-header-tools {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nk-quick-nav {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.25rem;
}

.nk-quick-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    color: #6b7280;
    transition: all .2s ease;
    text-decoration: none;
    font-size: 1.1rem;
    position: relative;
    cursor: pointer;
}

.nk-quick-nav-icon:hover {
    background-color: #f3f4f6;
    color: #1f2937;
}

.nk-quick-nav-icon:active {
    background-color: #e5e7eb;
}

.icon-status {
    position: relative;
}

.icon-status-info {
    position: relative;
}

.icon-status-info::after {
    content: '';
    position: absolute;
    top: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    background: #ef4444;
    border-radius: 50%;
    border: 2px solid #fff;
}

/* ===== POS TERMINAL ===== */

.pos-body {
    margin: 0;
    background: #f1f5f9;
}

.pos-terminal {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #f1f5f9;
    color: #1e293b;
}

.pos-notifications {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 2000;
    width: min(380px, calc(100vw - 2rem));
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pos-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    background: #1e293b;
    color: #fff;
    border-bottom: 1px solid #334155;
    flex-shrink: 0;
}

.pos-header-left,
.pos-header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.pos-header-center {
    flex: 1;
    min-width: 0;
    max-width: 560px;
}

.pos-header-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: #e2e8f0;
    text-decoration: none;
    border: 1px solid #475569;
    background: #334155;
}

.pos-header-link:hover {
    color: #fff;
    background: #475569;
}

.pos-header-brand {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.pos-header-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.2;
}

.pos-header-meta {
    font-size: 0.75rem;
    color: #94a3b8;
}

.pos-barcode-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 2px solid #0f766e;
    border-radius: 8px;
    padding: 0 0.75rem;
}

.pos-barcode-wrap .icon {
    color: #0f766e;
    font-size: 1.1rem;
}

.pos-barcode-input {
    flex: 1;
    border: 0;
    outline: none;
    padding: 0.625rem 0;
    font-size: 0.95rem;
    background: transparent;
    color: #1e293b;
}

.pos-header-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid #475569;
    background: #334155;
    color: #e2e8f0;
    font-size: 0.875rem;
    cursor: pointer;
}

.pos-header-btn:hover {
    background: #475569;
    color: #fff;
}

.pos-cart-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #0f766e;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

.pos-workspace {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.pos-products-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 1rem;
}

.pos-toolbar {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.pos-toolbar .form-control {
    border-color: #cbd5e1;
}

.pos-toolbar-actions {
    flex-shrink: 0;
}

.pos-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.875rem;
    overflow-y: auto;
    padding-bottom: 1rem;
}

.pos-products-list {
    flex: 1;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.product-item {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.875rem;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.product-item:hover {
    border-color: #0f766e;
    box-shadow: 0 2px 8px rgba(15, 118, 110, 0.12);
}

.product-image {
    width: 100%;
    height: 96px;
    background: #f8fafc;
    border-radius: 6px;
    margin-bottom: 0.625rem;
    object-fit: cover;
}

.product-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    font-size: 2rem;
}

.product-name {
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
    min-height: 2.4em;
    line-height: 1.2;
}

.product-price {
    color: #0f766e;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.product-category {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.pos-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: #64748b;
}

.pos-empty-state .icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    display: block;
}

.pos-checkout-panel {
    width: 340px;
    flex-shrink: 0;
    background: #fff;
    border-left: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.pos-checkout-section {
    padding: 1rem;
    border-bottom: 1px solid #f1f5f9;
}

.pos-checkout-totals {
    background: #f8fafc;
}

.pos-section-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.pos-discount-input {
    width: 64px;
}

.pos-payment-methods {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pos-payment-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    margin: 0;
}

.pos-payment-option:has(input:checked) {
    border-color: #0f766e;
    background: #f0fdfa;
}

.pos-checkout-actions {
    padding: 1rem;
    margin-top: auto;
}

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.cart-summary-row.total {
    border-top: 1px solid #e2e8f0;
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #0f766e;
}

.pos-cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.pos-cart-overlay.show {
    opacity: 1;
    visibility: visible;
}

.pos-cart-drawer {
    position: fixed;
    top: 0;
    right: 340px;
    width: min(420px, calc(100vw - 340px));
    height: 100vh;
    background: #fff;
    border-left: 1px solid #e2e8f0;
    box-shadow: -4px 0 24px rgba(15, 23, 42, 0.12);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
}

.pos-cart-drawer.open {
    transform: translateX(0);
}

.pos-cart-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: #1e293b;
    color: #fff;
    flex-shrink: 0;
}

.pos-cart-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.cart-item-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.cart-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.cart-item-details {
    margin-bottom: 0.5rem;
}

.pos-customer-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.customer-list-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
}

.customer-list-item:hover {
    background: #f8fafc;
}

.pos-shortcuts-table td {
    padding: 0.75rem 1.25rem;
    vertical-align: middle;
}

.pos-shortcuts-table td:first-child {
    width: 72px;
}

.pos-shortcuts-table kbd {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 0.15rem 0.45rem;
    font-family: ui-monospace, monospace;
    font-size: 0.8rem;
    color: #334155;
}

@media (max-width: 991px) {
    .pos-header {
        flex-wrap: wrap;
    }

    .pos-header-center {
        order: 3;
        flex: 1 1 100%;
        max-width: none;
    }

    .pos-checkout-panel {
        width: 300px;
    }

    .pos-cart-drawer {
        right: 300px;
        width: min(380px, calc(100vw - 300px));
    }
}

@media (max-width: 767px) {
    .pos-workspace {
        flex-direction: column;
    }

    .pos-checkout-panel {
        width: 100%;
        max-height: 42vh;
        border-left: 0;
        border-top: 1px solid #e2e8f0;
    }

    .pos-cart-drawer {
        right: 0;
        width: 100%;
        max-width: 100%;
    }
}

/* ==========================================================================
   QuickBooks Online-style Accounting UI
   Opt-in utility classes only -- nothing here touches Bootstrap's global
   --bs-primary / .btn-primary / .badge, so the rest of the app (POS, Fleet,
   HR, etc.) is completely unaffected. Only Accounting views that explicitly
   reference these classes pick up the QBO look.
   ========================================================================== */
:root {
    --qbo-green: #2ca01c;
    --qbo-green-dark: #1a7314;
    --qbo-green-tint: #eaf7e6;
    --qbo-ink: #393a3d;
    --qbo-muted: #6b7280;
    --qbo-border: #e5e9f2;
    --qbo-row-hover: #f7faf7;
}

/* Small uppercase divider used inside a sidebar submenu to group related
   links (e.g. "Sales" / "Expenses" / "Payments" inside "Get Paid & Pay"),
   mirroring how QBO's own flyout nav clusters related links together. */
.nk-menu-sub-heading {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #8094ae;
    padding: .7rem 1.25rem .25rem;
}

/* Page header: big title + primary actions, QBO-style */
.qbo-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.1rem;
}
.qbo-page-header h3 { margin-bottom: .15rem; }

/* Persistent top tab strip (Quotations / Sales Orders / Invoices / Credit
   Notes, or Purchase Orders / Bills / Debit Notes / Expenses) -- QBO uses
   this exact pattern to move between related transaction lists. */
.qbo-tabs.nav-tabs { border-bottom: 1px solid var(--qbo-border); margin-bottom: 1.25rem; }
.qbo-tabs.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--qbo-muted);
    font-weight: 500;
    padding: .65rem .25rem;
    margin-right: 1.75rem;
    border-radius: 0;
    background: transparent;
}
.qbo-tabs.nav-tabs .nav-link.active,
.qbo-tabs.nav-tabs .nav-link:hover {
    color: var(--qbo-ink);
    border-bottom-color: var(--qbo-green);
    background: transparent;
}

/* List toolbar: search + filters left, primary "New" action right */
.qbo-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.qbo-toolbar .qbo-toolbar-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* Data table: soft header, hover row, actions that reveal on hover (QBO
   keeps row actions hidden until you mouse over a row) */
.qbo-table thead th {
    background: #f4f6f8;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #8094ae;
    font-weight: 700;
    border-bottom: 1px solid var(--qbo-border);
    white-space: nowrap;
}
.qbo-table tbody tr { transition: background-color .12s ease; }
.qbo-table tbody tr:hover { background: var(--qbo-row-hover); }
.qbo-table .qbo-row-actions { opacity: 0; transition: opacity .12s ease; white-space: nowrap; }
.qbo-table tbody tr:hover .qbo-row-actions,
.qbo-table .qbo-row-actions:focus-within { opacity: 1; }
.qbo-table tbody td { vertical-align: middle; }

/* Status pill -- rounded, dot + label, QBO's exact "chip" language for
   Paid / Overdue / Draft / Open / Pending, etc. Pair with a color, e.g.
   <span class="qbo-pill qbo-pill-success">...</span> */
.qbo-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .7rem;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.qbo-pill .qbo-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.qbo-pill-success { background: #e4f7e0; color: #1a7314; }
.qbo-pill-warning { background: #fff2d9; color: #a15c00; }
.qbo-pill-danger  { background: #fbe4e4; color: #b3261e; }
.qbo-pill-info    { background: #e3f1fd; color: #0b5fa5; }
.qbo-pill-neutral { background: #eceff3; color: #55606e; }

/* Primary "New Invoice"-style green action button, opt-in only */
.btn-qbo-primary {
    background: var(--qbo-green);
    border-color: var(--qbo-green);
    color: #fff;
}
.btn-qbo-primary:hover, .btn-qbo-primary:focus {
    background: var(--qbo-green-dark);
    border-color: var(--qbo-green-dark);
    color: #fff;
}

/* Summary KPI strip above a transaction list (Overdue / Not Due / Paid,
   etc.) -- flat cards separated by thin dividers, QBO-style, not the
   heavier bordered/shadowed card look used elsewhere in the app. */
.qbo-summary-strip {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--qbo-border);
    border-radius: .5rem;
    background: #fff;
    margin-bottom: 1.1rem;
    overflow: hidden;
}
.qbo-summary-strip .qbo-summary-item {
    flex: 1 1 160px;
    padding: .85rem 1.25rem;
    border-right: 1px solid var(--qbo-border);
}
.qbo-summary-strip .qbo-summary-item:last-child { border-right: none; }
.qbo-summary-strip .qbo-summary-label {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--qbo-muted);
    font-weight: 600;
    display: block;
    margin-bottom: .2rem;
}
.qbo-summary-strip .qbo-summary-value { font-size: 1.15rem; font-weight: 700; color: var(--qbo-ink); }