:root {
    --bg-body: #eceff4;
    --bg-sidebar: #2c3e50;
    --bg-header: white;
    --bg-card: white;
    --text-primary: #333;
    --text-secondary: #7f8c8d;
    --text-sidebar: white;
    --color-primary: #3498db;
    --color-success: #2ecc71;
    --border-color: rgba(0, 0, 0, 0.125);
    --color-danger: #e74c3c;
    --color-warning: #f1c40f;

    /* ONE height for the whole top row of the app. The sidebar's logo block and the main
       utility bar are two halves of the same bar, so they must be the same number -- they
       used to compute to 49px and 65px independently (the 65 came from .user-profile's
       32px avatar + padding, NOT from min-height), leaving a 16px step at the seam.
       The sidebar collapse button is centred against this too. */
    --shell-header-h: 56px;
    --shell-line: #34495e;      /* the seam under BOTH headers */
}

html[data-theme="dark"] {
    --bg-body: #1a252f;
    --bg-sidebar: #0e1621;
    --bg-header: #2c3e50;
    --bg-card: #2c3e50;
    --text-primary: #ecf0f1;
    --text-secondary: #bdc3c7;
    --text-sidebar: #bdc3c7;
    --color-primary: #3498db;
    --color-success: #27ae60;
    --border-color: rgba(255, 255, 255, 0.1);
    --color-danger: #ff6b6b;
    --color-warning: #feca57;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg-body);
    color: var(--text-primary);
}

/* Layout */
.erp-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* Sidebar */
/* The MENU scrolls, not the sidebar. .sidebar is position:relative, so it is the containing
   block for the absolutely-positioned .toggle-btn -- while it was also the scroll container,
   scrolling a long menu dragged the collapse button off the top of the screen with it
   (measured: top 10.5px -> -389.5px after a 400px scroll, i.e. unreachable). As a
   non-scrolling flex column the header and button stay pinned and only the menu moves. */
.sidebar {
    width: 212px;
    background: var(--bg-sidebar);
    color: var(--text-sidebar);
    transition: width 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.sidebar.collapsed {
    width: 56px;
}

.menu::-webkit-scrollbar {
    width: 6px;
}

.menu::-webkit-scrollbar-thumb {
    background: #34495e;
    border-radius: 3px;
}

/* Toggle Button -- vertically centred in the sidebar header, not floated near it. At
   top:15px with a 35px box it sat 8px below the header's centre line and its bottom edge
   landed on the header's bottom border. */
.toggle-btn {
    position: absolute;
    top: calc((var(--shell-header-h) - 35px) / 2);
    right: 12px;
    background: #34495e;
    border: none;
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* A <button> does NOT inherit the page font: with no font-size here it fell back to
       Chrome's UA `button { font: 400 13.3333px Arial }`, so the icon sat small inside a
       35px box and read as off-centre. line-height:1 stops the glyph's leading nudging it. */
    font-size: 15px;
    line-height: 1;
    transition: all 0.3s;
    z-index: 10;
}

.toggle-btn:hover {
    background: #1abc9c;
    transform: scale(1.1);
}

/* Collapsed rail is 56px wide, so right:12px leaves 9px on the other side. Centre it. */
.sidebar.collapsed .toggle-btn {
    right: calc((56px - 35px) / 2);
}

/* Logo Area -- a fixed-height flex row so its bottom border lines up EXACTLY with the
   main header's, instead of being whatever 13px of padding around a 17px h2 happens to
   add up to. */
.sidebar-header {
    height: var(--shell-header-h);
    flex: none;                 /* a flex child with a set height still shrinks without this */
    display: flex;
    align-items: center;
    padding: 0 44px 0 16px;
    border-bottom: 1px solid var(--shell-line);
    margin-bottom: 8px;
}

.sidebar-header h2 {
    font-size: 17px;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.3s;
}

.sidebar.collapsed .sidebar-header h2 {
    opacity: 0;
}

/* Menu -- the only scrolling part of the sidebar (see .sidebar above) */
.menu {
    padding: 4px 0;
    flex: 1 1 auto;
    min-height: 0;              /* without this a flex child refuses to scroll, it just grows */
    overflow-y: auto;
    overflow-x: hidden;
}

.menu-item {
    position: relative;
}

.item-label {
    display: flex;
    align-items: center;
    padding: 9px 16px;
    /* reserve the active indicator's width on EVERY item so active never shifts */
    border-left: 4px solid transparent;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    color: #ecf0f1;
    text-decoration: none;
}

.item-label:hover {
    background: #34495e;
}

.item-label.active {
    background: #1abc9c;
    border-left-color: #16a085;
}

.item-label > i:first-child {
    min-width: 20px;
    font-size: 14px;
    text-align: center;
}

.item-label span {
    margin-left: 10px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.3s;
}

.sidebar.collapsed .item-label span {
    opacity: 0;
    width: 0;
}

.item-label .arrow {
    margin-left: auto;
    min-width: 0;            /* flush-right chevron (don't inherit the icon's 20px box) */
    transition: transform 0.25s;
    font-size: 11px;
    opacity: .7;
}

.arrow.expanded {
    transform: rotate(90deg);
}

.sidebar.collapsed .arrow {
    display: none;
}

/* Submenu */
.submenu {
    background: #1a252f;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.submenu .item-label {
    padding-left: 40px;
    font-size: 13px;
}

.submenu .submenu .item-label {
    padding-left: 70px;
    font-size: 13px;
}

/* Main Content */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 0;
    transition: margin-left 0.3s ease;
    overflow: hidden;
}

/* Header -- slim utility bar (the page owns its title now).
   Height is the shared token, not min-height: the 32px avatar plus .user-profile's padding
   pushed this to 65px against the sidebar header's 49px, which is the step the user saw at
   the seam. Vertical padding goes to 0 because align-items already centres the row. */
.top-header {
    background: var(--bg-header);
    padding: 0 22px;
    height: var(--shell-header-h);
    /* .main-content is a flex column, so this defaults to flex-shrink:1 (verified) and any
       future sibling could squeeze the bar back out of line with .sidebar-header, which
       already carries flex:none. Keep `height` too -- flex-basis alone does not clamp
       min-height:auto, so a taller control in .header-right could still grow the bar. */
    flex: none;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* In dark mode #e5e7eb is a bright hairline sitting next to the sidebar's #34495e, so the
   one bar across the top of the app reads as two mismatched pieces. */
html[data-theme="dark"] .top-header {
    border-bottom-color: var(--shell-line);
}

.header-left h1 {
    font-size: 24px;
    color: var(--text-primary);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 18px;
}

.notification-icon {
    position: relative;
    cursor: pointer;
    font-size: 18px;
    color: var(--text-secondary);
}

.notification-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #e74c3c;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #3498db;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 13px;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    position: relative;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background-color 0.2s;
    color: var(--text-primary);
}

.user-profile:hover {
    background-color: var(--border-color);
}

.profile-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 200px;
    background: var(--bg-header);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 0.5rem 0;
    z-index: 1000;
    margin-top: 0.5rem;
    border: 1px solid var(--border-color);
    animation: fadeIn 0.2s ease-out;
}

.dropdown-item {
    display: flex !important;
    align-items: center !important;
    padding: 0.75rem 1rem !important;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    transition: background-color 0.2s !important;
}

.dropdown-item.text-danger {
    color: var(--color-danger) !important;
}

.dropdown-item:hover {
    background-color: var(--bg-body);
    color: var(--color-primary);
}

.dropdown-item i {
    width: 20px;
    margin-right: 10px;
    text-align: center;
}

.dropdown-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 0.5rem 0;
}

/* Utilities */
.text-danger {
    color: var(--color-danger) !important;
}

.text-success {
    color: var(--color-success) !important;
}

.text-warning {
    color: var(--color-warning) !important;
}

.text-primary {
    color: var(--color-primary) !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Content Area -- flat, starts just after the sidebar with a little gap */
.content-area {
    flex: 1;
    padding: 18px 22px;
    overflow-y: auto;
    background: var(--bg-body);
}

/* No card on the right: content sits flat on the canvas (components bring their own surfaces) */
.page-content {
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Shared page heading -- one title per page (the slim navbar no longer repeats it). */
.page-head { margin-bottom: .9rem; }
.page-head h2 { margin: 0; font-size: 1.4rem; color: var(--text-primary); }
.page-head p { margin: .25rem 0 0; color: #6b7280; font-size: .85rem; }

/* Per-page Back button + the per-record history FAB (both rendered by MainLayout).
   These carried their styling inline, naming --color-background-primary /
   --color-border-secondary / --color-text-secondary -- none of which is defined anywhere
   in static/css, so every page fell through to the hardcoded light literals and both
   controls rendered as white chips on a dark page. */
.page-back-btn,
.page-history-fab {
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
}
.page-back-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .7rem;
    padding: .42rem .8rem;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 500;
}
.page-back-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.page-history-fab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 900;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .18);
}

/* Short screens (the reported 1920x660 laptop): a 1.4rem title and a .7rem gap are
   generous on a tall monitor and an indulgence at 660px. Nothing is hidden -- leading and
   type size only. 820px matches inquiry.css; a media query cannot read a custom property,
   so the number has to be repeated. >=769px leaves the mobile shell alone. */
@media (min-width: 769px) and (max-height: 820px) {
    .page-back-btn { margin-bottom: .45rem; padding: .28rem .65rem; }
    .page-head { margin-bottom: .5rem; }
    .page-head h2 { font-size: 1.15rem; }
    .page-head p { margin-top: .15rem; font-size: .8rem; }
}

/* Animations */
.submenu-enter-active,
.submenu-leave-active {
    transition: all 0.3s ease;
}

.submenu-enter-from {
    max-height: 0;
    opacity: 0;
}

.submenu-enter-to {
    max-height: 500px;
    opacity: 1;
}

.submenu-leave-from {
    max-height: 500px;
    opacity: 1;
}

.submenu-leave-to {
    max-height: 0;
    opacity: 0;
}

/* Loading State */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-size: 20px;
    color: #7f8c8d;
}


/* Menu loading state */
.menu-loading {
    padding: 20px;
    text-align: center;
    color: #ecf0f1;
    font-size: 14px;
}

.menu-loading i {
    margin-right: 8px;
}

/* Loading Bar */
.loading-bar-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--loading-bar-height, 3px);
    z-index: 9999;
    pointer-events: none;
}

.loading-bar {
    height: 100%;
    background: var(--loading-bar-color, linear-gradient(90deg, #3498db, #2ecc71));
    width: 100%;
    animation: loading-animation 2s infinite;
    transform-origin: 0% 50%;
}

@keyframes loading-animation {
    0% {
        transform: translateX(0) scaleX(0);
    }

    40% {
        transform: translateX(0) scaleX(0.4);
    }

    100% {
        transform: translateX(100%) scaleX(0.5);
    }
}

/* Modal and Transitions */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}