/* Global Styles */
/* Inter font is now loaded locally via /vendor/fonts/inter.css */

:root {
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --bg-color: #f3f4f6;
    --card-bg: #ffffff;
    --text-color: #1f2937;
    --text-muted: #6b7280;
    --error-color: #ef4444;
    --border-color: #e5e7eb;
    --header-height: 64px;
    --sidebar-width: 300px;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

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

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.5;
    min-height: 100vh;
}

/* Utilities */
/* Increase specificity to override component displays, but allow inline styles (JS) to win */
body .hidden {
    display: none;
}

/* Help Button Style */
/* Ensure circular shape overrides .btn-secondary padding/radius */
.btn-secondary.help-btn {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    min-width: 32px;
    background-color: #6b7280 !important;
    color: white !important;
    border: none !important;
}

/* Layout */
.edit-actions-section {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    text-align: right;
    /* Align delete button to right? or left? default is left */
}

.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Header */
.app-header {
    height: var(--header-height);
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    box-shadow: var(--shadow-sm);
    z-index: 10;
}

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

.hamburger-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.25rem;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hamburger-btn:hover {
    background-color: var(--bg-color);
}

.hamburger-icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.app-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #145ABE;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.user-name {
    font-weight: 600;
}

.user-group {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.user-role {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.header-right .btn-secondary {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

/* Breadcrumbs */
.breadcrumb {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-left: 1.5rem;
    margin-bottom: 0;
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb-item:hover {
    color: var(--primary-color);
}

.breadcrumb-item.active {
    color: var(--text-color);
    font-weight: 500;
}

.breadcrumb-separator {
    margin: 0 0.5rem;
    color: var(--text-muted);
    user-select: none;
}

.breadcrumb-colon {
    margin: 0 0.25rem;
    color: var(--text-muted);
}

/* Back to Top Nav Item */
.nav-item.back-to-top {
    margin-top: auto;
    /* Pushes it to the bottom of the sidebar */
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
    margin-bottom: 0;
    border-radius: 0;
}

/* Main Layout (Sidebar + Content) */
.main-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Sidebar */
.app-sidebar {
    width: var(--sidebar-width);
    background-color: var(--card-bg);
    border-right: 1px solid var(--border-color);
    transition: width 0.3s ease, transform 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.app-sidebar.collapsed {
    width: 0;
    overflow: hidden;
    border-right: none;
}

.sidebar-nav {
    padding: 0.5rem;
}

.nav-group-restricted {
    /* Apply background to the entire group */
    background-color: rgba(37, 99, 235, 0.08);
    border-radius: 0.5rem;
    padding: 0.25rem;
    margin-bottom: 0.25rem;
}

/* Remove individual backgrounds, keep spacing */
/* Remove individual backgrounds, keep spacing */
.nav-group-restricted .nav-group-header {
    padding: 0.35rem 0.75rem;
    margin: 0.1rem 0;
    border-radius: 0.375rem;
}

.nav-group-restricted .nav-item {
    margin: 0.1rem 0;
    border-radius: 0.375rem;
}

/* Ensure header layout with lock icon */
.nav-group-restricted .nav-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

.nav-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.75rem;
    margin: 0.1rem 0;
    border-radius: 0.375rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
}

.nav-group-header:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.nav-group-header-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.nav-chevron-icon {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.3s ease;
}

.nav-group.collapsed .nav-chevron-icon {
    transform: rotate(-90deg);
}

.nav-group-items {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 500px;
    opacity: 1;
}

.nav-group.collapsed .nav-group-items {
    max-height: 0;
    opacity: 0;
}

.nav-lock-icon {
    flex-shrink: 0;
    color: var(--primary-color);
}

.nav-group-header:first-child {
    margin-top: 0;
}

.nav-group-divider {
    border-bottom: 1px solid var(--border-color);
    margin: 0.5rem 0;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    color: var(--text-color);
    text-decoration: none;
    border-radius: 0.5rem;
    margin-bottom: 0.1rem;
    font-weight: 500;
    transition: background-color 0.2s;
}

.nav-icon {
    flex-shrink: 0;
}

.nav-home {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-radius: 0;
}

.nav-sub-item {
    padding-left: 2rem;
    font-size: 0.875rem;
    font-weight: 400;
}

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

.nav-item.active {
    background-color: #ffffff;
    color: var(--primary-color);
    border-left: 3px solid var(--primary-color);
    font-weight: 600;
}

/* Main Content */
.app-content {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
    background-color: var(--bg-color);
}

/* Menu page styles */
.nav-help-link {
    justify-content: flex-start;
    padding: 0.75rem 1rem;
}

.menu-welcome-content {
    margin-top: 2rem;
    line-height: 2;
}

.menu-welcome-title {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.menu-note {
    margin-top: 3rem;
    color: #666;
    font-size: 0.9rem;
}

/* Login Specific Styles (Keep these for login page) */
body.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

body.login-page.app-material {
    background-color: rgb(177, 213, 247);
}

body.login-page.app-process {
    background-color: rgb(199, 249, 157);
}

.login-container {
    background-color: var(--card-bg);
    padding: 2.5rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: 400px;
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.login-header p {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.form-group {
    margin-bottom: 0.5rem;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.btn-primary {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

/* Override width for header buttons */
.header-actions .btn-primary,
.header-actions .btn-secondary {
    width: auto;
    flex-shrink: 0;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
}

/* ============================================
   Product QR Sheet Styles
   ============================================ */

.product-qr-sheet-page {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Feature content (control panel area) - limit height */
.product-qr-sheet-page .feature-content {
    margin-bottom: 0.5rem;
    flex: 0 0 auto;
    /* Don't grow, don't shrink, auto height */
    max-height: 120px;
    overflow: hidden;
}

/* Control Panel */
.product-qr-sheet-page .control-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 0.5rem;
}

.product-qr-sheet-page .control-panel .form-group {
    margin-bottom: 0;
}

.product-qr-sheet-page .control-panel label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-color);
}

.product-qr-sheet-page .control-panel .form-control,
.product-qr-sheet-page .control-panel select#productSelect {
    width: 400px !important;
    min-width: 400px !important;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    background-color: var(--card-bg);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.product-qr-sheet-page .control-panel .form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Button Group */
.product-qr-sheet-page .button-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.product-qr-sheet-page .button-group .btn-primary,
.product-qr-sheet-page .button-group .btn-secondary:not(.help-btn) {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.product-qr-sheet-page .button-group .btn-primary:disabled,
.product-qr-sheet-page .button-group .btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-icon-margin-right {
    margin-right: 0.25rem;
    flex-shrink: 0;
}

/* Preview Area */
.product-qr-sheet-page .preview-area {
    flex: 1;
    overflow: auto;
    background-color: #e5e7eb;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

.product-qr-sheet-page #printContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.product-qr-sheet-page .empty-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-muted);
    font-style: italic;
    background-color: var(--card-bg);
    border-radius: 0.5rem;
    padding: 2rem;
    width: 100%;
    max-width: 297mm;
}

/* A4 Landscape Sheet Preview - Product QR Sheet */
.sheet-page {
    width: 297mm;
    height: 210mm;
    background-color: white;
    box-shadow: var(--shadow-md);
    padding: 8mm 10mm;
    box-sizing: border-box;
    position: relative;
    page-break-after: always;
    font-family: 'Inter', sans-serif;
}

/* Sheet Header */
.sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4mm;
    padding-bottom: 2mm;
    border-bottom: 1px solid #ccc;
}

.sheet-title {
    font-size: 14pt;
    font-weight: 700;
    color: #333;
}

.sheet-meta {
    font-size: 9pt;
    color: #666;
}

.page-number {
    font-size: 9pt;
    color: #666;
}

/* Product Info Section - white background, minimal padding, compact height */
.product-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4mm;
    padding: 1mm 3mm;
    /* Minimal vertical padding */
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 1mm;
}

.product-info-left {
    flex: 0 0 40%;
    max-width: 40%;
}

/* Further reduced to 40% to move spec more left */
.product-info-main {
    margin-bottom: 1mm;
}

.product-code-line {
    display: flex;
    align-items: baseline;
    gap: 2mm;
    flex-wrap: wrap;
}

.product-info-label {
    font-size: 8pt;
    color: #333;
    margin-right: 1mm;
}

.product-code-small {
    font-size: 10pt;
    color: #333;
}

.product-name-large {
    font-size: 14pt;
    font-weight: 700;
    color: #333;
    margin-top: 1mm;
}

.product-info-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
}

.product-info-qr {
    text-align: center;
}

.product-qr-container {
    width: 20mm;
    height: 20mm;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-qr-container canvas,
.product-qr-container img {
    max-width: 100%;
    max-height: 100%;
}

/* Process List */
.process-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Main Process Header (Level 1) - light gray or underline only */
.main-process-header {
    background-color: #f5f5f5;
    color: #333;
    padding: 2mm 3mm;
    font-size: 11pt;
    font-weight: 700;
    border-bottom: 1px solid #333;
    display: flex;
    align-items: center;
    min-height: 14mm;
    page-break-inside: avoid;
}

.main-process-header .process-name {
    flex: 1;
}

.main-process-header .qr-area {
    width: 12mm;
    height: 12mm;
    margin-left: 2mm;
    flex-shrink: 0;
}

.main-process-header .qr-area canvas,
.main-process-header .qr-area img {
    max-width: 100%;
    max-height: 100%;
}

.main-process-header .process-code {
    font-size: 8pt;
    color: #666;
    margin-left: 2mm;
    white-space: nowrap;
}

/* Process Row - bottom border only, flex layout with indentation */
.process-row {
    display: flex;
    align-items: center;
    padding: 2mm 0;
    border-bottom: 1px solid #ccc;
    background-color: white;
    min-height: 14mm;
    page-break-inside: avoid;
}

/* Indentation using padding-left - shifts all content (name + QR) together */
/* Process levels start from 1, so use indent-1 for level 1, indent-2 for level 2, etc. */
.process-row.indent-1 {
    padding-left: 5mm;
}

/* Level 1 */
.process-row.indent-2 {
    padding-left: 40mm;
}

/* Level 2 */
.process-row.indent-3 {
    padding-left: 75mm;
}

/* Level 3 */
.process-row.indent-4 {
    padding-left: 110mm;
}

/* Level 4 */

/* Process name - fixed width so QR position is always at same distance from left edge */
.process-name {
    font-size: 10pt;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
    width: 50mm;
    /* Fixed width - QR will start at 50mm from left edge of process name */
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* QR area - positioned right after fixed-width process name */
.qr-area {
    width: 12mm;
    height: 12mm;
    flex-shrink: 0;
    margin-left: 3mm;
}

.qr-area canvas,
.qr-area img {
    max-width: 100%;
    max-height: 100%;
}

/* Process code - right next to QR */
.process-code {
    font-size: 8pt;
    color: #666;
    margin-left: 2mm;
    white-space: nowrap;
}

/* Spacer to push remaining content to the right if needed */
.process-spacer {
    flex: 1;
}

.process-right-info {
    display: flex;
    align-items: center;
    gap: 2mm;
}

.process-description {
    font-size: 8pt;
    color: #666;
}

/* Page break avoidance */
.process-row,
.main-process-header {
    break-inside: avoid;
    page-break-inside: avoid;
}

/* Legacy class */
.qr-sheet-page {
    width: 297mm;
    height: 210mm;
    background-color: white;
    box-shadow: var(--shadow-md);
    padding: 10mm;
    box-sizing: border-box;
    position: relative;
}

/* Print Styles for Product QR Sheet */
@media print {

    /* Hide all non-print elements */
    .product-qr-sheet-page .no-print,
    .product-qr-sheet-page .feature-header,
    .product-qr-sheet-page .feature-content,
    .no-print {
        display: none !important;
    }

    /* Make preview area transparent and full size */
    .product-qr-sheet-page .preview-area {
        background-color: transparent !important;
        padding: 0 !important;
        overflow: visible !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }

    /* Show sheet-page elements */
    .sheet-page {
        display: block !important;
        visibility: visible !important;
        box-shadow: none !important;
        page-break-after: always;
        margin: 0 !important;
        width: 297mm !important;
        height: 210mm !important;
        background-color: white !important;
    }

    .sheet-page * {
        visibility: visible !important;
    }

    .qr-sheet-page {
        display: block !important;
        visibility: visible !important;
        box-shadow: none;
        page-break-after: always;
        margin: 0;
    }

    #printContainer {
        display: block !important;
        visibility: visible !important;
    }

    @page {
        size: A4 landscape;
        margin: 0;
    }
}

/* ============================================
   Order Status List Styles
   ============================================ */

/* Order Status Container - SPA height */
.order-status-container {
    height: calc(100vh - var(--header-height) - 4rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Order Status Header */
.order-status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    margin-bottom: 1rem;
}

.order-status-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.header-left-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Order Register Button - fixed width */
.order-register-btn {
    width: auto !important;
    padding: 0.5rem 1rem;
}

/* Order Table Container with height - fills remaining space */
.order-table-container {
    flex: 1;
    min-height: 300px;
    max-height: 100%;
    overflow: hidden;
}

#orderTable {
    height: 100%;
}

/* Order Content Area */
.order-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Order Modal Styles */
.order-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.order-modal-overlay.hidden {
    display: none;
}

/* Modal Container - 90% width and height */
.order-modal-container {
    background-color: var(--card-bg);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-md);
    width: 90vw;
    height: 90vh;
    max-width: 1600px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.order-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-color);
}

.order-modal-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.order-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-muted);
    line-height: 1;
}

.order-modal-close:hover {
    color: var(--text-color);
}

.order-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.order-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-color);
}

/* Footer buttons - fixed width */
.order-modal-footer .btn-primary,
.order-modal-footer .btn-secondary {
    width: auto;
    padding: 0.5rem 1.5rem;
}

/* Modal Two Pane Layout */
.modal-two-pane {
    display: flex;
    gap: 1.5rem;
}

.modal-left-pane,
.modal-right-pane {
    display: flex;
    flex-direction: column;
}

/* Left pane - 1/4 width */
.modal-left-pane {
    flex: 0 0 25%;
    max-width: 25%;
    border-right: 1px solid var(--border-color);
    padding-right: 1.5rem;
}

/* Right pane - 3/4 width */
.modal-right-pane {
    flex: 1;
}

.pane-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.pane-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.pane-search {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    font-size: 0.875rem;
    width: 200px;
}

/* Existing Materials Container - styled like card */
.existing-materials-container {
    flex: 1;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background-color: var(--card-bg);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.existing-materials-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.existing-materials-table th,
.existing-materials-table td {
    padding: 0.625rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.existing-materials-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    position: sticky;
    top: 0;
    color: var(--text-color);
    border-bottom: 2px solid var(--border-color);
}

.existing-materials-table tbody tr {
    cursor: pointer;
    transition: background-color 0.15s;
}

.existing-materials-table tbody tr:hover {
    background-color: #e3f2fd;
}

.existing-materials-table tbody tr.selected {
    background-color: #bbdefb;
}

/* Material code in existing materials table - blue color */
.existing-materials-table td:first-child {
    color: #2563eb;
    font-weight: 500;
}

/* Pane search input styling */
.pane-search {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    width: 100%;
    max-width: 250px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.pane-search:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.pane-footer {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Registration List Container - styled */
.registration-list-container {
    flex: 1;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background-color: var(--card-bg);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.registration-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.registration-table th,
.registration-table td {
    padding: 0.5rem 0.625rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.registration-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    position: sticky;
    top: 0;
    color: var(--text-color);
    border-bottom: 2px solid var(--border-color);
}

.registration-table .required {
    color: var(--error-color);
}

/* Registration Table Input Styling */
.registration-table input[type="text"],
.registration-table select {
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    background-color: var(--card-bg);
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Required input styling - light red background */
/* Target material code column (2nd column) */
.registration-table input.required-input,
.registration-table td:nth-child(2) input[type="text"] {
    background-color: #fef2f2 !important;
    border-color: #fecaca !important;
}

.registration-table input.required-input:focus,
.registration-table td:nth-child(2) input[type="text"]:focus {
    border-color: #f87171 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1) !important;
}

.registration-table input[type="text"]:focus,
.registration-table select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.registration-table input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    cursor: pointer;
}

/* Modal Right Pane Form Group Styling */
.modal-right-pane .form-group {
    margin-bottom: 1rem;
}

.modal-right-pane .form-group label {
    font-weight: 600;
    margin-bottom: 0.375rem;
    display: block;
}

.modal-right-pane .form-control {
    width: 100%;
    max-width: none;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.modal-right-pane .form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Form control margin bottom */
.form-control-mb {
    margin-bottom: 0.75rem;
}

/* Layout Toggle - Styled Toggle Switch */
.layout-toggle {
    display: flex;
    align-items: center;
}

.layout-toggle .toggle-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}

.layout-toggle .toggle-label input[type="checkbox"] {
    display: none;
}

.layout-toggle .toggle-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background-color: #ccc;
    border-radius: 24px;
    transition: background-color 0.3s;
}

.layout-toggle .toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.layout-toggle input:checked+.toggle-slider {
    background-color: var(--primary-color);
}

.layout-toggle input:checked+.toggle-slider::before {
    transform: translateX(20px);
}

.layout-toggle .toggle-text {
    font-size: 0.875rem;
    color: var(--text-color);
}

/* Order Search Input */
.order-search-input {
    width: 200px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

.order-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* ============================================
   Tenant Icon Management Styles
   ============================================ */

/* Icon Grid Layout */
.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Icon Card */
.icon-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1.25rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.icon-card:hover {
    box-shadow: var(--shadow-md);
}

.icon-card.is-selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

/* Icon preview image */
.icon-card .icon-preview {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 0.75rem;
}

/* Icon card info section */
.icon-card-info {
    text-align: center;
    width: 100%;
}

/* Icon card title (tenant name) - BOLD */
.icon-card-title {
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 0.25rem;
    font-size: 0.9375rem;
}

/* Default badge - green background, white text, on new line, fit content */
.default-badge {
    display: inline-block;
    margin-top: 0.25rem;
    background-color: #10b981;
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Force the default badge to display on its own line while keeping fit-content width */
.icon-card-title {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.icon-card-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.icon-card-meta .tenant-code {
    color: var(--text-muted);
}

/* Icon card actions - 2 rows (column layout), centered */
.icon-card-actions {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    width: 100%;
    max-width: 100px;
    margin: 0 auto;
    /* Center horizontally */
    align-items: center;
}

/* Small buttons for icon cards */
.icon-card-actions .btn-primary.btn-sm,
.icon-card-actions .btn-danger.btn-sm {
    width: 100%;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 0.25rem;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 0.25rem;
}

/* Upload Panel - Modal Style */
.upload-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.upload-panel.hidden {
    display: none;
}

.upload-panel .panel-inner {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-md);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.upload-panel .panel-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.upload-panel .panel-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.upload-panel .panel-content {
    padding: 1.5rem;
}

.upload-panel .form-actions .btn-primary,
.upload-panel .form-actions .btn-secondary {
    width: auto;
    padding: 0.5rem 1.25rem;
}

/* Drop Zone */
.drop-zone {
    border: 2px dashed var(--border-color);
    border-radius: 0.5rem;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background-color: var(--bg-color);
    position: relative;
}

.drop-zone:hover,
.drop-zone.drag-over {
    border-color: var(--primary-color);
    background-color: rgba(37, 99, 235, 0.05);
}

.drop-zone input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.drop-zone-content {
    pointer-events: none;
}

.drop-zone-icon {
    margin-bottom: 0.75rem;
}

.drop-zone-text {
    color: var(--text-color);
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.drop-zone-hint {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.selected-file-name {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background-color: #e3f2fd;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    color: var(--primary-color);
}

/* Icon Preview Container */
.icon-preview-container {
    width: 120px;
    height: 120px;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-color);
    overflow: hidden;
}

.icon-preview-container img,
.icon-preview-container svg {
    max-width: 96px;
    max-height: 96px;
}

.icon-preview-container .no-preview {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.form-static-value {
    font-weight: 600;
    color: var(--text-color);
}

.btn-secondary {
    padding: 0.5rem 1rem;
    background-color: #fff;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-secondary:hover {
    background-color: var(--bg-color);
}

.error-message {
    background-color: #fef2f2;
    color: var(--error-color);
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    border: 1px solid #fecaca;
    white-space: pre-line;
}


.login-footer {
    position: absolute;
    bottom: 1rem;
    width: 100%;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Licenses page styles */
.licenses-page {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    margin: 16px;
    line-height: 1.6;
}

.licenses-page a {
    word-break: break-all;
}

.licenses-footer {
    margin-top: 24px;
}

/* Login page language switcher */
.lang-switch {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 100;
}

.lang-select {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    padding: 6px 32px 6px 12px;
    border-radius: 6px;
    font-size: 0.875rem;
    cursor: pointer;
    color: #4b5563;
    transition: all 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234b5563'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
}

.lang-select:hover {
    background-color: #e5e7eb;
}

.lang-select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

/* Login logo elements */
.login-logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.login-logo-image {
    width: 48px;
    height: 48px;
}

.login-app-name {
    font-size: 2rem;
    font-weight: 800;
    color: #145ABE;
    letter-spacing: -0.05em;
}

/* User Management Styles */

.user-management-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 2rem;
}

.user-management-header {
    display: flex;
    justify-content: space-between;
    /* Title on left, actions on right */
    align-items: center;
    margin-bottom: 1.5rem;
}

.user-management-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
    white-space: nowrap;
    /* Prevent title wrapping */
    flex-shrink: 1;
    /* Allow title to shrink if needed */
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-actions {
    display: flex;
    gap: 0.5rem;
    /* Reduce gap */
    align-items: center;
}

.search-input {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    width: 200px;
    /* Use fixed width instead of min-width to force size */
    max-width: 100%;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.user-content {
    display: flex;
    gap: 1.5rem;
    flex: 1;
    overflow: hidden;
}

.user-table-container {
    flex: 1;
    background-color: var(--card-bg);
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* Tabulator Customization */
.tabulator {
    font-size: 0.875rem;
    border: none;
}

.tabulator-header {
    background-color: var(--bg-color);
    border-bottom: 2px solid var(--border-color);
}

.tabulator-col-title {
    font-weight: 600;
    color: var(--text-color);
}

.tabulator-row {
    cursor: pointer;
}

.tabulator-row:hover {
    background-color: var(--bg-color);
}

.tabulator-row.tabulator-selected {
    background-color: #eff6ff;
}

/* Status Badges */
.status-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-active {
    background-color: #d1fae5;
    color: #065f46;
}

.status-inactive {
    background-color: #fee2e2;
    color: #991b1b;
}

/* User Detail Panel */
.user-detail-panel {
    width: 400px;
    max-height: calc(100vh - 200px);
    background-color: var(--card-bg);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.panel-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-color);
}

.btn-icon {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    line-height: 1;
}

.btn-icon:hover {
    color: var(--text-color);
}

.panel-content {
    flex: 1;
    min-height: 0;
    padding: 1.5rem;
    overflow-y: auto;
}

.form-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.form-hint.error {
    color: #dc3545;
}

.form-input.error {
    border-color: #dc3545;
}

.form-input.error:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.form-actions .btn-primary,
.form-actions .btn-secondary {
    flex: 1;
}

.btn-danger {
    padding: 0.5rem 1rem;
    background-color: var(--error-color);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-danger:hover {
    background-color: #dc2626;
}

.panel-message {
    padding: 1rem 1.5rem;
    margin: 1rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

.success-message {
    background-color: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.error-message {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* User Menu Dropdown */
.user-menu-dropdown {
    position: relative;
    display: inline-block;
}

.user-menu-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    cursor: pointer;
}

.user-menu-content {
    position: absolute;
    right: 0;
    top: 100%;
    background-color: var(--card-bg);
    min-width: 160px;
    box-shadow: var(--shadow-md);
    border-radius: 0.5rem;
    padding: 0.5rem 0;
    z-index: 100;
}

.user-menu-content a {
    color: var(--text-color);
    padding: 0.75rem 1rem;
    text-decoration: none;
    display: block;
    font-size: 0.875rem;
}

.user-menu-content a:hover {
    background-color: var(--bg-color);
}

/* Loading Page Specific Styles */
body.loading-page {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.tabulator {
    background-color: #888;
    border: 1px solid #999;
    font-size: 14px;
    overflow: hidden;
    position: relative;
    text-align: left;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0)
}

.tabulator[tabulator-layout=fitDataFill] .tabulator-tableholder .tabulator-table {
    min-width: 100%
}

.tabulator[tabulator-layout=fitDataTable] {
    display: inline-block
}

.tabulator.tabulator-block-select {
    user-select: none
}

.tabulator .tabulator-header {
    background-color: #e6e6e6;
    border-bottom: 1px solid #999;
    box-sizing: border-box;
    color: #555;
    font-weight: 700;
    overflow: hidden;
    position: relative;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    white-space: nowrap;
    width: 100%
}

.tabulator .tabulator-header.tabulator-header-hidden {
    display: none
}

.tabulator .tabulator-header .tabulator-header-contents {
    overflow: hidden;
    position: relative
}

.tabulator .tabulator-header .tabulator-header-contents .tabulator-headers {
    display: inline-block
}

.tabulator .tabulator-header .tabulator-col {
    background: #e6e6e6;
    border-right: 1px solid #aaa;
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    position: relative;
    text-align: left;
    vertical-align: bottom
}

.tabulator .tabulator-header .tabulator-col.tabulator-moving {
    background: #cdcdcd;
    border: 1px solid #999;
    pointer-events: none;
    position: absolute
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
    box-sizing: border-box;
    padding: 4px;
    position: relative
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-header-popup-button {
    padding: 0 8px
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-header-popup-button:hover {
    cursor: pointer;
    opacity: .6
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title-holder {
    position: relative
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
    width: 100%
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title.tabulator-col-title-wrap {
    text-overflow: clip;
    white-space: normal
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-title-editor {
    background: #fff;
    border: 1px solid #999;
    box-sizing: border-box;
    padding: 1px;
    width: 100%
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-header-popup-button+.tabulator-title-editor {
    width: calc(100% - 22px)
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter {
    align-items: center;
    bottom: 0;
    display: flex;
    position: absolute;
    right: 4px;
    top: 0
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
    border-bottom: 6px solid #bbb;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    height: 0;
    width: 0
}

.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols {
    border-top: 1px solid #aaa;
    display: flex;
    margin-right: -1px;
    overflow: hidden;
    position: relative
}

.tabulator .tabulator-header .tabulator-col .tabulator-header-filter {
    box-sizing: border-box;
    margin-top: 2px;
    position: relative;
    text-align: center;
    width: 100%
}

.tabulator .tabulator-header .tabulator-col .tabulator-header-filter textarea {
    height: auto !important
}

.tabulator .tabulator-header .tabulator-col .tabulator-header-filter svg {
    margin-top: 3px
}

.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input::-ms-clear {
    height: 0;
    width: 0
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {
    padding-right: 25px
}

@media (hover:hover) and (pointer:fine) {
    .tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {
        background-color: #cdcdcd;
        cursor: pointer
    }
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter {
    color: #bbb
}

@media (hover:hover) and (pointer:fine) {
    .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover {
        border-bottom: 6px solid #555;
        cursor: pointer
    }
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
    border-bottom: 6px solid #bbb;
    border-top: none
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter {
    color: #666
}

@media (hover:hover) and (pointer:fine) {
    .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover {
        border-bottom: 6px solid #555;
        cursor: pointer
    }
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
    border-bottom: 6px solid #666;
    border-top: none
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter {
    color: #666
}

@media (hover:hover) and (pointer:fine) {
    .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover {
        border-top: 6px solid #555;
        cursor: pointer
    }
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
    border-bottom: none;
    border-top: 6px solid #666;
    color: #666
}

.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical .tabulator-col-content .tabulator-col-title {
    align-items: center;
    display: flex;
    justify-content: center;
    text-orientation: mixed;
    writing-mode: vertical-rl
}

.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-col-vertical-flip .tabulator-col-title {
    transform: rotate(180deg)
}

.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-sortable .tabulator-col-title {
    padding-right: 0;
    padding-top: 20px
}

.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-sortable.tabulator-col-vertical-flip .tabulator-col-title {
    padding-bottom: 20px;
    padding-right: 0
}

.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-sortable .tabulator-col-sorter {
    bottom: auto;
    justify-content: center;
    left: 0;
    right: 0;
    top: 4px
}

.tabulator .tabulator-header .tabulator-frozen {
    left: 0;
    position: sticky;
    z-index: 11
}

.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left {
    border-right: 2px solid #aaa
}

.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right {
    border-left: 2px solid #aaa
}

.tabulator .tabulator-header .tabulator-calcs-holder {
    background: #f3f3f3 !important;
    border-bottom: 1px solid #aaa;
    border-top: 1px solid #aaa;
    box-sizing: border-box
}

.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row {
    background: #f3f3f3 !important
}

.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle,
.tabulator .tabulator-header .tabulator-frozen-rows-holder:empty {
    display: none
}

.tabulator .tabulator-tableholder {
    -webkit-overflow-scrolling: touch;
    overflow: auto;
    position: relative;
    white-space: nowrap;
    width: 100%
}

.tabulator .tabulator-tableholder:focus {
    outline: none
}

.tabulator .tabulator-tableholder .tabulator-placeholder {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    width: 100%
}

.tabulator .tabulator-tableholder .tabulator-placeholder[tabulator-render-mode=virtual] {
    min-height: 100%;
    min-width: 100%
}

.tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents {
    color: #ccc;
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    padding: 10px;
    text-align: center;
    white-space: normal
}

.tabulator .tabulator-tableholder .tabulator-table {
    background-color: #fff;
    color: #333;
    display: inline-block;
    overflow: visible;
    position: relative;
    white-space: nowrap
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs {
    background: #e2e2e2 !important;
    font-weight: 700
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-top {
    border-bottom: 2px solid #aaa
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-bottom {
    border-top: 2px solid #aaa
}

.tabulator .tabulator-footer {
    background-color: #e6e6e6;
    border-top: 1px solid #999;
    color: #555;
    font-weight: 700;
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    white-space: nowrap
}

.tabulator .tabulator-footer .tabulator-footer-contents {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 5px 10px
}

.tabulator .tabulator-footer .tabulator-footer-contents:empty {
    display: none
}

.tabulator .tabulator-footer .tabulator-calcs-holder {
    background: #f3f3f3 !important;
    border-bottom: 1px solid #aaa;
    border-top: 1px solid #aaa;
    box-sizing: border-box;
    overflow: hidden;
    text-align: left;
    width: 100%
}

.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row {
    background: #f3f3f3 !important;
    display: inline-block
}

.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {
    display: none
}

.tabulator .tabulator-footer .tabulator-calcs-holder:only-child {
    border-bottom: none;
    margin-bottom: -5px
}

.tabulator .tabulator-footer>*+.tabulator-page-counter {
    margin-left: 10px
}

.tabulator .tabulator-footer .tabulator-page-counter {
    font-weight: 400
}

.tabulator .tabulator-footer .tabulator-paginator {
    color: #555;
    flex: 1;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-align: right
}

.tabulator .tabulator-footer .tabulator-page-size {
    border: 1px solid #aaa;
    border-radius: 3px;
    display: inline-block;
    margin: 0 5px;
    padding: 2px 5px
}

.tabulator .tabulator-footer .tabulator-pages {
    margin: 0 7px
}

.tabulator .tabulator-footer .tabulator-page {
    background: hsla(0, 0%, 100%, .2);
    border: 1px solid #aaa;
    border-radius: 3px;
    display: inline-block;
    margin: 0 2px;
    padding: 2px 5px
}

.tabulator .tabulator-footer .tabulator-page.active {
    color: #d00
}

.tabulator .tabulator-footer .tabulator-page:disabled {
    opacity: .5
}

@media (hover:hover) and (pointer:fine) {
    .tabulator .tabulator-footer .tabulator-page:not(disabled):hover {
        background: rgba(0, 0, 0, .2);
        color: #fff;
        cursor: pointer
    }
}

.tabulator .tabulator-col-resize-handle {
    display: inline-block;
    margin-left: -3px;
    margin-right: -3px;
    position: relative;
    vertical-align: middle;
    width: 6px;
    z-index: 10
}

@media (hover:hover) and (pointer:fine) {
    .tabulator .tabulator-col-resize-handle:hover {
        cursor: ew-resize
    }
}

.tabulator .tabulator-col-resize-handle:last-of-type {
    margin-right: 0;
    width: 3px
}

.tabulator .tabulator-alert {
    align-items: center;
    background: rgba(0, 0, 0, .4);
    display: flex;
    height: 100%;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 100
}

.tabulator .tabulator-alert .tabulator-alert-msg {
    background: #fff;
    border-radius: 10px;
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    margin: 0 auto;
    padding: 10px 20px
}

.tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-msg {
    border: 4px solid #333;
    color: #000
}

.tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-error {
    border: 4px solid #d00;
    color: #590000
}

.tabulator-row {
    background-color: #fff;
    box-sizing: border-box;
    min-height: 22px;
    position: relative
}

.tabulator-row.tabulator-row-even {
    background-color: #efefef
}

@media (hover:hover) and (pointer:fine) {
    .tabulator-row.tabulator-selectable:hover {
        background-color: #bbb;
        cursor: pointer
    }
}

.tabulator-row.tabulator-selected {
    background-color: #9abcea
}

@media (hover:hover) and (pointer:fine) {
    .tabulator-row.tabulator-selected:hover {
        background-color: #769bcc;
        cursor: pointer
    }
}

.tabulator-row.tabulator-row-moving {
    background: #fff;
    border: 1px solid #000
}

.tabulator-row.tabulator-moving {
    border-bottom: 1px solid #aaa;
    border-top: 1px solid #aaa;
    pointer-events: none;
    position: absolute;
    z-index: 15
}

.tabulator-row .tabulator-row-resize-handle {
    bottom: 0;
    height: 5px;
    left: 0;
    position: absolute;
    right: 0
}

.tabulator-row .tabulator-row-resize-handle.prev {
    bottom: auto;
    top: 0
}

@media (hover:hover) and (pointer:fine) {
    .tabulator-row .tabulator-row-resize-handle:hover {
        cursor: ns-resize
    }
}

.tabulator-row .tabulator-responsive-collapse {
    border-bottom: 1px solid #aaa;
    border-top: 1px solid #aaa;
    box-sizing: border-box;
    padding: 5px
}

.tabulator-row .tabulator-responsive-collapse:empty {
    display: none
}

.tabulator-row .tabulator-responsive-collapse table {
    font-size: 14px
}

.tabulator-row .tabulator-responsive-collapse table tr td {
    position: relative
}

.tabulator-row .tabulator-responsive-collapse table tr td:first-of-type {
    padding-right: 10px
}

.tabulator-row .tabulator-cell {
    border-right: 1px solid #aaa;
    box-sizing: border-box;
    display: inline-block;
    overflow: hidden;
    padding: 4px;
    position: relative;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap
}

.tabulator-row .tabulator-cell.tabulator-frozen {
    background-color: inherit;
    display: inline-block;
    left: 0;
    position: sticky;
    z-index: 11
}

.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left {
    border-right: 2px solid #aaa
}

.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right {
    border-left: 2px solid #aaa
}

.tabulator-row .tabulator-cell.tabulator-editing {
    border: 1px solid #1d68cd;
    outline: none;
    padding: 0
}

.tabulator-row .tabulator-cell.tabulator-editing input,
.tabulator-row .tabulator-cell.tabulator-editing select {
    background: transparent;
    border: 1px;
    outline: none
}

.tabulator-row .tabulator-cell.tabulator-validation-fail {
    border: 1px solid #d00
}

.tabulator-row .tabulator-cell.tabulator-validation-fail input,
.tabulator-row .tabulator-cell.tabulator-validation-fail select {
    background: transparent;
    border: 1px;
    color: #d00
}

.tabulator-row .tabulator-cell.tabulator-row-handle {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none
}

.tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box {
    width: 80%
}

.tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box .tabulator-row-handle-bar {
    background: #666;
    height: 3px;
    margin-top: 2px;
    width: 100%
}

.tabulator-row .tabulator-cell .tabulator-data-tree-branch-empty {
    display: inline-block;
    width: 7px
}

.tabulator-row .tabulator-cell .tabulator-data-tree-branch {
    border-bottom: 2px solid #aaa;
    border-bottom-left-radius: 1px;
    border-left: 2px solid #aaa;
    display: inline-block;
    height: 9px;
    margin-right: 5px;
    margin-top: -9px;
    vertical-align: middle;
    width: 7px
}

.tabulator-row .tabulator-cell .tabulator-data-tree-control {
    align-items: center;
    background: rgba(0, 0, 0, .1);
    border: 1px solid #333;
    border-radius: 2px;
    display: inline-flex;
    height: 11px;
    justify-content: center;
    margin-right: 5px;
    overflow: hidden;
    vertical-align: middle;
    width: 11px
}

@media (hover:hover) and (pointer:fine) {
    .tabulator-row .tabulator-cell .tabulator-data-tree-control:hover {
        background: rgba(0, 0, 0, .2);
        cursor: pointer
    }
}

.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse {
    background: transparent;
    display: inline-block;
    height: 7px;
    position: relative;
    width: 1px
}

.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after {
    background: #333;
    content: "";
    height: 1px;
    left: -3px;
    position: absolute;
    top: 3px;
    width: 7px
}

.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand {
    background: #333;
    display: inline-block;
    height: 7px;
    position: relative;
    width: 1px
}

.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand:after {
    background: #333;
    content: "";
    height: 1px;
    left: -3px;
    position: absolute;
    top: 3px;
    width: 7px
}

.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle {
    align-items: center;
    background: #666;
    border-radius: 20px;
    color: #fff;
    display: inline-flex;
    font-size: 1.1em;
    font-weight: 700;
    height: 15px;
    justify-content: center;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    width: 15px
}

@media (hover:hover) and (pointer:fine) {
    .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle:hover {
        cursor: pointer;
        opacity: .7
    }
}

.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle.open .tabulator-responsive-collapse-toggle-close {
    display: initial
}

.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle.open .tabulator-responsive-collapse-toggle-open {
    display: none
}

.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle svg {
    stroke: #fff
}

.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle .tabulator-responsive-collapse-toggle-close {
    display: none
}

.tabulator-row .tabulator-cell .tabulator-traffic-light {
    border-radius: 14px;
    display: inline-block;
    height: 14px;
    width: 14px
}

.tabulator-row.tabulator-group {
    background: #ccc;
    border-bottom: 1px solid #999;
    border-right: 1px solid #aaa;
    border-top: 1px solid #999;
    box-sizing: border-box;
    font-weight: 700;
    min-width: 100%;
    padding: 5px 5px 5px 10px
}

@media (hover:hover) and (pointer:fine) {
    .tabulator-row.tabulator-group:hover {
        background-color: rgba(0, 0, 0, .1);
        cursor: pointer
    }
}

.tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow {
    border-bottom: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #666;
    margin-right: 10px
}

.tabulator-row.tabulator-group.tabulator-group-level-1 {
    padding-left: 30px
}

.tabulator-row.tabulator-group.tabulator-group-level-2 {
    padding-left: 50px
}

.tabulator-row.tabulator-group.tabulator-group-level-3 {
    padding-left: 70px
}

.tabulator-row.tabulator-group.tabulator-group-level-4 {
    padding-left: 90px
}

.tabulator-row.tabulator-group.tabulator-group-level-5 {
    padding-left: 110px
}

.tabulator-row.tabulator-group .tabulator-group-toggle {
    display: inline-block
}

.tabulator-row.tabulator-group .tabulator-arrow {
    border-bottom: 6px solid transparent;
    border-left: 6px solid #666;
    border-right: 0;
    border-top: 6px solid transparent;
    display: inline-block;
    height: 0;
    margin-right: 16px;
    vertical-align: middle;
    width: 0
}

.tabulator-row.tabulator-group span {
    color: #d00;
    margin-left: 10px
}

.tabulator-popup-container {
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border: 1px solid #aaa;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);
    box-sizing: border-box;
    display: inline-block;
    font-size: 14px;
    overflow-y: auto;
    position: absolute;
    z-index: 10000
}

.tabulator-popup {
    border-radius: 3px;
    padding: 5px
}

.tabulator-tooltip {
    border-radius: 2px;
    box-shadow: none;
    font-size: 12px;
    max-width: Min(500px, 100%);
    padding: 3px 5px;
    pointer-events: none
}

.tabulator-menu .tabulator-menu-item {
    box-sizing: border-box;
    padding: 5px 10px;
    position: relative;
    user-select: none
}

.tabulator-menu .tabulator-menu-item.tabulator-menu-item-disabled {
    opacity: .5
}

@media (hover:hover) and (pointer:fine) {
    .tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover {
        background: #efefef;
        cursor: pointer
    }
}

.tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu {
    padding-right: 25px
}

.tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu:after {
    border-color: #aaa;
    border-style: solid;
    border-width: 1px 1px 0 0;
    content: "";
    display: inline-block;
    height: 7px;
    position: absolute;
    right: 10px;
    top: calc(5px + .4em);
    transform: rotate(45deg);
    vertical-align: top;
    width: 7px
}

.tabulator-menu .tabulator-menu-separator {
    border-top: 1px solid #aaa
}

.tabulator-edit-list {
    -webkit-overflow-scrolling: touch;
    font-size: 14px;
    max-height: 200px;
    overflow-y: auto
}

.tabulator-edit-list .tabulator-edit-list-item {
    color: #333;
    outline: none;
    padding: 4px
}

.tabulator-edit-list .tabulator-edit-list-item.active {
    background: #1d68cd;
    color: #fff
}

.tabulator-edit-list .tabulator-edit-list-item.active.focused {
    outline: 1px solid hsla(0, 0%, 100%, .5)
}

.tabulator-edit-list .tabulator-edit-list-item.focused {
    outline: 1px solid #1d68cd
}

@media (hover:hover) and (pointer:fine) {
    .tabulator-edit-list .tabulator-edit-list-item:hover {
        background: #1d68cd;
        color: #fff;
        cursor: pointer
    }
}

.tabulator-edit-list .tabulator-edit-list-placeholder {
    color: #333;
    padding: 4px;
    text-align: center
}

.tabulator-edit-list .tabulator-edit-list-group {
    border-bottom: 1px solid #aaa;
    color: #333;
    font-weight: 700;
    padding: 6px 4px 4px
}

.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-2,
.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-2 {
    padding-left: 12px
}

.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-3,
.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-3 {
    padding-left: 20px
}

.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-4,
.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-4 {
    padding-left: 28px
}

.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-5,
.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-5 {
    padding-left: 36px
}

.tabulator.tabulator-ltr {
    direction: ltr
}

.tabulator.tabulator-rtl {
    direction: rtl;
    text-align: initial
}

.tabulator.tabulator-rtl .tabulator-header .tabulator-col {
    border-left: 1px solid #aaa;
    border-right: initial;
    text-align: initial
}

.tabulator.tabulator-rtl .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols {
    margin-left: -1px;
    margin-right: 0
}

.tabulator.tabulator-rtl .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {
    padding-left: 25px;
    padding-right: 0
}

.tabulator.tabulator-rtl .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter {
    left: 8px;
    right: auto
}

.tabulator.tabulator-rtl .tabulator-row .tabulator-cell {
    border-left: 1px solid #aaa;
    border-right: initial
}

.tabulator.tabulator-rtl .tabulator-row .tabulator-cell .tabulator-data-tree-branch {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 1px;
    border-left: initial;
    border-right: 2px solid #aaa;
    margin-left: 5px;
    margin-right: 0
}

.tabulator.tabulator-rtl .tabulator-row .tabulator-cell .tabulator-data-tree-control {
    margin-left: 5px;
    margin-right: 0
}

.tabulator.tabulator-rtl .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left {
    border-left: 2px solid #aaa
}

.tabulator.tabulator-rtl .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right {
    border-right: 2px solid #aaa
}

.tabulator.tabulator-rtl .tabulator-row .tabulator-col-resize-handle:last-of-type {
    margin-left: 0;
    margin-right: -3px;
    width: 3px
}

.tabulator.tabulator-rtl .tabulator-footer .tabulator-calcs-holder {
    text-align: initial
}

.tabulator-print-fullscreen {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10000
}

body.tabulator-print-fullscreen-hide>:not(.tabulator-print-fullscreen) {
    display: none !important
}

.tabulator-print-table {
    border-collapse: collapse
}

.tabulator-print-table .tabulator-data-tree-branch {
    border-bottom: 2px solid #aaa;
    border-bottom-left-radius: 1px;
    border-left: 2px solid #aaa;
    display: inline-block;
    height: 9px;
    margin-right: 5px;
    margin-top: -9px;
    vertical-align: middle;
    width: 7px
}

.tabulator-print-table .tabulator-print-table-group {
    background: #ccc;
    border-bottom: 1px solid #999;
    border-right: 1px solid #aaa;
    border-top: 1px solid #999;
    box-sizing: border-box;
    font-weight: 700;
    min-width: 100%;
    padding: 5px 5px 5px 10px
}

@media (hover:hover) and (pointer:fine) {
    .tabulator-print-table .tabulator-print-table-group:hover {
        background-color: rgba(0, 0, 0, .1);
        cursor: pointer
    }
}

.tabulator-print-table .tabulator-print-table-group.tabulator-group-visible .tabulator-arrow {
    border-bottom: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #666;
    margin-right: 10px
}

.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-1 td {
    padding-left: 30px !important
}

.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-2 td {
    padding-left: 50px !important
}

.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-3 td {
    padding-left: 70px !important
}

.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-4 td {
    padding-left: 90px !important
}

.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-5 td {
    padding-left: 110px !important
}

.tabulator-print-table .tabulator-print-table-group .tabulator-group-toggle {
    display: inline-block
}

.tabulator-print-table .tabulator-print-table-group .tabulator-arrow {
    border-bottom: 6px solid transparent;
    border-left: 6px solid #666;
    border-right: 0;
    border-top: 6px solid transparent;
    display: inline-block;
    height: 0;
    margin-right: 16px;
    vertical-align: middle;
    width: 0
}

.tabulator-print-table .tabulator-print-table-group span {
    color: #d00;
    margin-left: 10px
}

.tabulator-print-table .tabulator-data-tree-control {
    align-items: center;
    background: rgba(0, 0, 0, .1);
    border: 1px solid #333;
    border-radius: 2px;
    display: inline-flex;
    height: 11px;
    justify-content: center;
    margin-right: 5px;
    overflow: hidden;
    vertical-align: middle;
    width: 11px
}

@media (hover:hover) and (pointer:fine) {
    .tabulator-print-table .tabulator-data-tree-control:hover {
        background: rgba(0, 0, 0, .2);
        cursor: pointer
    }
}

.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-collapse {
    background: transparent;
    display: inline-block;
    height: 7px;
    position: relative;
    width: 1px
}

.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after {
    background: #333;
    content: "";
    height: 1px;
    left: -3px;
    position: absolute;
    top: 3px;
    width: 7px
}

.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-expand {
    background: #333;
    display: inline-block;
    height: 7px;
    position: relative;
    width: 1px
}

.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-expand:after {
    background: #333;
    content: "";
    height: 1px;
    left: -3px;
    position: absolute;
    top: 3px;
    width: 7px
}

/*# sourceMappingURL=tabulator.min.css.map */
/* Patch for missing styles recovered from HTML context */
.logo-sm {
    height: 32px;
    width: auto;
    object-fit: contain;
}

.nav-sub-item-restricted {
    color: var(--text-color);
}

.menu-header {
    background-color: var(--card-bg);
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 2rem;
}

.menu-header h1 {
    margin-bottom: 1rem;
    font-size: 2rem;
    color: var(--text-color);
}

.menu-welcome-content {
    font-size: 1.1rem;
    line-height: 1.6;
}

.menu-note {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Recovered Components for Groups Management */

/* Button Utilities */
.btn-flex {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-flex-mr {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 0.5rem;
}

/* Spacing Utilities */
.mt-1 {
    margin-top: 0.5rem;
}

.mt-1-5 {
    margin-top: 0.75rem;
}

/* Dropdowns (Generic) */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    min-width: 160px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    z-index: 100;
    background-color: var(--card-bg);
    border-radius: 0.25rem;
    border: 1px solid var(--border-color);
}

.dropdown:hover .dropdown-content {
    /* JS likely handles this, but adding basic hover support just in case */
    /* display: block; */
}

/* Specific fix for downloadDropdown */
#downloadDropdown.hidden {
    display: none;
}

#downloadDropdown:not(.hidden) {
    display: block;
}

.dropdown-menu a {
    color: var(--text-color);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-menu a:hover {
    background-color: var(--bg-color);
}

.dropdown-item-divider {
    border-top: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Modal System */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    align-items: center;
    justify-content: center;
}

/* When active, flex to center */
.modal.active,
.modal:not(.hidden) {
    display: flex;
}

.modal-content {
    background-color: var(--card-bg);
    margin: auto;
    padding: 0;
    border: 1px solid var(--border-color);
    width: 80%;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    animation: modalSlideIn 0.3s;
    max-width: 600px;
}

.modal-content-md {
    max-width: 600px;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }

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

.modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-body {
    padding: 1.5rem;
}

/* File Import UI */
.file-drop-zone {
    border: 2px dashed var(--border-color);
    border-radius: 0.5rem;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.3s;
    background-color: var(--bg-color);
}

.file-drop-zone:hover {
    border-color: var(--primary-color);
}

.file-input-hidden {
    display: none;
}

.emoji-icon-lg {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.selected-file-info {
    margin-top: 1rem;
    padding: 0.5rem;
    background-color: #f3f4f6;
    border-radius: 0.25rem;
    /* visibility controlled via .hidden class in JS */
}

/* Import Steps */
.import-step {}

.import-summary p {
    margin: 0.5rem 0;
}

.result-icon-lg {
    font-size: 4rem;
    color: #10b981;
    /* green */
    text-align: center;
    margin-bottom: 1rem;
}

.import-result {
    text-align: center;
}

/* Override previous buggy rule for downloadDropdown */
/* It acts as a reset: hide by default matches standard UI behavior */
#downloadDropdown {
    display: none !important;
}

/* groups.js toggles .show class */
#downloadDropdown.show {
    display: block !important;
}

/* Product Process Flow download dropdown */
#downloadFlowDropdown {
    display: none !important;
}

#downloadFlowDropdown.show {
    display: block !important;
}

/* Fix button wrapping */
.header-actions button,
.header-actions .dropdown,
.btn-primary,
.btn-secondary {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Confirm Modal (dynamically created by confirm-modal.js) */
.confirm-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.confirm-modal-overlay.visible {
    display: flex;
}

.confirm-modal-content {
    background-color: var(--card-bg);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
    min-width: 300px;
    max-width: 500px;
    margin: 0 1rem;
    animation: modalSlideIn 0.3s ease-out;
}

.confirm-modal-content h3 {
    margin: 0 0 1rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-color);
}

.confirm-modal-content p {
    margin: 0 0 1.5rem 0;
    color: var(--text-color);
    line-height: 1.5;
}

.confirm-modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.confirm-modal-actions .btn {
    flex: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    border: none;
}

.confirm-modal-actions .btn-secondary {
    background-color: #fff;
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.confirm-modal-actions .btn-secondary:hover {
    background-color: var(--bg-color);
}

.confirm-modal-actions .btn-danger {
    background-color: var(--error-color);
    color: white;
}

.confirm-modal-actions .btn-danger:hover {
    background-color: #dc2626;
}

/* User QR Creation Page Styles */
.user-qr-page {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.feature-header {
    padding: 1rem 2rem;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--card-bg);
}

.feature-header h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
}

.feature-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.feature-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Split Container Layout */
.split-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Upper Pane - Selection */
.upper-pane {
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    min-height: 200px;
    flex: 1 1 50%;
    transition: flex 0.3s ease;
}

/* Override min-height when collapsed (accordion behavior) */
.upper-pane.collapsed {
    min-height: auto;
    /* Allow collapse below 200px */
}

/* Accordion collapsed states */
.upper-pane.collapsed {
    flex: 0 0 auto;
    max-height: 60px;
    /* Just header height */
    margin-bottom: 0;
    /* No gap when collapsed */
}

/* When lower pane is maximized, remove gap completely */
.upper-pane.collapsed.no-gap {
    margin-bottom: 0 !important;
    /* Force no gap when lower pane is maximized */
}

.upper-pane.collapsed .selection-content {
    display: none;
}

.lower-pane.expanded {
    flex: 1;
    margin-top: 0;
    /* Remove gap when expanded */
}

.upper-pane-header {
    background-color: #5ba3e0;
    color: white;
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

.upper-pane-header .header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.selection-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.selection-list-container {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.selection-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.selection-table th {
    background-color: var(--bg-color);
    padding: 0.5rem;
    text-align: left;
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    color: var(--text-color);
}

.selection-table td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.selection-table tr:hover {
    background-color: var(--bg-color);
}

.col-checkbox {
    width: 40px;
    text-align: center;
}

.selection-footer {
    padding: 0.75rem 1.5rem;
    background-color: var(--bg-color);
    border-top: 1px solid var(--border-color);
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Resize Bar */
.resize-bar {
    height: 4px;
    background-color: var(--border-color);
    cursor: ns-resize;
    position: relative;
    flex: 0 0 auto;
}

.resize-bar:hover {
    background-color: var(--primary-color);
}

.resize-bar::before {
    content: '';
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: 0;
    right: 0;
}

/* Prevent text selection during resize */
body.body-resizing {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: ns-resize !important;
}

body.body-resizing * {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    cursor: ns-resize !important;
}

body.body-resizing iframe {
    pointer-events: none !important;
}

/* Lower Pane - Settings and Preview */
.lower-pane {
    flex: 1 1 50%;
    background-color: var(--card-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: flex 0.3s ease;
}

/* Lower pane expanded state */
.lower-pane.expanded {
    flex: 1;
    margin-top: 2rem;
    /* 2-row gap when maximized */
}

.lower-pane-header {
    background-color: #5ba3e0;
    color: white;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    gap: 0.5rem;
    flex-wrap: nowrap;
    overflow: visible;
    position: relative;
    z-index: 20;
}

.settings-preview-container {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* Settings Panel */
.settings-panel {
    width: 380px;
    flex: 0 0 auto;
    background-color: var(--card-bg);
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
    padding: 1rem;
}

.panel-section h3 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
}

.form-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: var(--text-color);
}

.form-control {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    font-size: 0.875rem;
    width: 33.33%;
    /* 1/3 width */
    max-width: 120px;
}

.input-group {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.input-group span {
    padding: 0 0.25rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.input-group-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0.25rem;
}

.input-group-4 .form-control {
    width: 100%;
    /* Override the 33.33% for margin inputs */
    max-width: none;
}

.preset-section .preset-controls {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.preset-select-style {
    flex: 1;
    min-width: 250px;
    /* Increased width for better preset name visibility */
}

/* Paper size select box - double width */
#paperSize {
    width: 180px !important;
    min-width: 180px !important;
    max-width: none !important;
}

.btn-nowrap {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
}

/* Preview Panel */
.preview-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #f8f9fa;
}

.preview-header {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--card-bg);
}

.preview-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
}

.preview-options {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.checkbox-label-style {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--text-color);
    cursor: pointer;
}

.checkbox-inline {
    margin: 0;
}

.preview-container {
    flex: 1;
    overflow: auto;
    padding: 1rem;
    background-color: #f8f9fa;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.empty-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-muted);
    font-style: italic;
}

/* Accordion Toggle Buttons */
.accordion-toggle-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: bold;
    transition: background-color 0.2s;
}

.accordion-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* Print styles */
.print-area {
    display: none;
}

@media print {

    /* Hide everything except print area */
    body * {
        visibility: hidden;
    }

    .print-area,
    .print-area * {
        visibility: visible;
    }

    .print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        display: block !important;
    }

    /* Hide specific elements that should not print */
    .no-print,
    .feature-header,
    .upper-pane,
    .lower-pane-header,
    .settings-panel,
    .preview-header,
    .resize-bar {
        display: none !important;
        visibility: hidden !important;
    }

    body {
        margin: 0;
        padding: 0;
        background: white;
    }

    /* Ensure preview sheets print at actual size */
    .preview-sheet {
        transform: none !important;
        margin: 0 !important;
        page-break-after: always;
    }
}

/* Button styles for QR creation */
.search-input-width {
    width: 200px;
}

.btn-compact {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

.print-btn-style {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.print-btn-style svg {
    flex-shrink: 0;
}

/* Preview Paper and Label Layout */
.preview-sheet {
    background-color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    position: relative;
    border: 1px solid #ddd;
}

.preview-sheet.a4-portrait {
    width: 210mm;
    height: 297mm;
}

.preview-sheet.a4-landscape {
    width: 297mm;
    height: 210mm;
}

.preview-sheet-header {
    position: absolute;
    top: 5mm;
    left: 5mm;
    right: 5mm;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: #666;
}

.preview-sheet-footer {
    position: absolute;
    bottom: 5mm;
    left: 5mm;
    right: 5mm;
    text-align: center;
    font-size: 0.75rem;
    color: #666;
}

.preview-labels-container {
    position: absolute;
    top: 15mm;
    left: 15mm;
    right: 15mm;
    bottom: 15mm;
    display: grid;
    gap: 2mm;
}

.preview-labels-container.grid-2x6 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(6, 1fr);
}

.preview-labels-container.grid-3x8 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(8, 1fr);
}

.preview-label {
    border: 1px solid #ccc;
    display: flex;
    background-color: white;
    position: relative;
    overflow: hidden;
    min-height: 42mm;
}

.preview-label.show-borders {
    border: 1px solid #333;
}

.preview-label .qr-section {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2mm;
    border-right: 1px solid #eee;
}

.preview-label .qr-code {
    width: 100%;
    height: 100%;
    max-width: 32mm;
    max-height: 32mm;
    background-color: #333;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3e%3crect x='10' y='10' width='10' height='10' fill='white'/%3e%3crect x='30' y='10' width='10' height='10' fill='white'/%3e%3crect x='50' y='10' width='10' height='10' fill='white'/%3e%3crect x='70' y='10' width='10' height='10' fill='white'/%3e%3crect x='10' y='30' width='10' height='10' fill='white'/%3e%3crect x='50' y='30' width='10' height='10' fill='white'/%3e%3crect x='90' y='30' width='10' height='10' fill='white'/%3e%3crect x='10' y='50' width='10' height='10' fill='white'/%3e%3crect x='30' y='50' width='10' height='10' fill='white'/%3e%3crect x='70' y='50' width='10' height='10' fill='white'/%3e%3crect x='90' y='50' width='10' height='10' fill='white'/%3e%3crect x='10' y='70' width='10' height='10' fill='white'/%3e%3crect x='50' y='70' width='10' height='10' fill='white'/%3e%3crect x='70' y='70' width='10' height='10' fill='white'/%3e%3crect x='90' y='70' width='10' height='10' fill='white'/%3e%3crect x='30' y='90' width='10' height='10' fill='white'/%3e%3crect x='70' y='90' width='10' height='10' fill='white'/%3e%3c/svg%3e");
    background-size: cover;
    border: 1px solid #ccc;
}

.preview-label .text-section {
    flex: 1;
    padding: 3mm;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: 'Inter', sans-serif;
}

.preview-label .user-id {
    font-size: 0.9rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 1mm;
    line-height: 1.2;
}

.preview-label .user-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1mm;
    line-height: 1.2;
}

.preview-label .user-group {
    font-size: 0.7rem;
    color: #666;
    line-height: 1.2;
}

/* Hide preview elements when options are unchecked */
.preview-container.hide-borders .preview-label {
    border: none;
}

.preview-container.hide-metadata .text-section {
    display: none;
}

.preview-container.hide-metadata .qr-section {
    width: 100%;
    border-right: none;
}

.preview-container.hide-page-numbers .preview-sheet-header,
.preview-container.hide-page-numbers .preview-sheet-footer {
    display: none;
}

/* Responsive preview scaling for smaller screens */
@media (max-width: 1400px) {
    .preview-sheet {
        transform: scale(0.8);
        transform-origin: top left;
        margin-bottom: 1rem;
    }
}

@media (max-width: 1200px) {
    .preview-sheet {
        transform: scale(0.6);
    }
}

@media (max-width: 1000px) {
    .preview-sheet {
        transform: scale(0.5);
    }
}

/* Label Elements for Dynamic Preview */
.label-item {
    position: absolute;
    background-color: white;
    border: 1px solid white;
    /* White border by default to maintain layout */
    overflow: hidden;
}

.label-item.show-border {
    border: 1px solid #ccc;
    /* Gray border when show-border is enabled */
}

.label-content {
    height: 100%;
    display: flex;
    position: relative;
    padding: 2mm;
}

.label-qr {
    position: absolute;
    right: 2mm;
    top: 50%;
    transform: translateY(-50%);
    width: 30mm;
    height: 30mm;
    display: flex;
    align-items: center;
    justify-content: center;
}

.label-qr canvas,
.label-qr img {
    max-width: 100%;
    max-height: 100%;
}

.label-text-section {
    flex: 1;
    margin-right: 35mm;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1mm;
}

.label-group {
    font-size: 0.7rem;
    color: #666;
    line-height: 1.2;
    margin-bottom: 1mm;
}

.label-name {
    font-size: var(--name-font-size, 1rem);
    font-weight: 600;
    color: #333;
    line-height: 1.2;
    margin-bottom: 1mm;
}

.label-code {
    font-size: 0.8rem;
    color: #333;
    line-height: 1.2;
}

/* Preview container classes for hiding elements */
.preview-container.hide-borders .label-item,
.preview-container.hide-borders .preview-label {
    border: none !important;
}

.preview-container.hide-metadata .label-text-section {
    display: none;
}

.preview-container.hide-metadata .label-qr {
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Sheet meta header and footer */
.sheet-meta-header {
    position: absolute;
    top: var(--header-top, 5mm);
    left: 5mm;
    right: 5mm;
    font-size: 0.75rem;
    color: #666;
    text-align: center;
}

.page-footer {
    position: absolute;
    bottom: var(--footer-bottom, 5mm);
    left: 5mm;
    right: 5mm;
    font-size: 0.75rem;
    color: #666;
    text-align: center;
}

/* Dynamic label positioning using CSS variables */
.label-item-dynamic {
    width: var(--label-width);
    height: var(--label-height);
    left: var(--label-left);
    top: var(--label-top);
}

/* Handy Terminals Management Styles */
.form-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.btn-small-clear {
    padding: 0.15rem 0.35rem;
    font-size: 0.65rem;
    border-radius: 0.2rem;
    background-color: #f8f9fa;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
    line-height: 1;
    min-height: auto;
}

.btn-small-clear:hover {
    background-color: var(--bg-color);
}

/* Button Setting Colors */
.func-key-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.func-key-red {
    color: #dc3545;
    font-weight: bold;
}

.func-key-blue {
    color: #0d6efd;
    font-weight: bold;
}

.func-key-green {
    color: #198754;
    font-weight: bold;
}

.func-key-green2 {
    color: #198754;
    font-weight: bold;
}

.func-key-yellow {
    color: #ffc107;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

/* Checkbox spacing for handy terminals */
.checkbox-label-spaced {
    margin-bottom: 0.75rem;
}

.checkbox-label-indented {
    margin-left: 2rem;
    margin-bottom: 0.5rem;
}

.checkbox-option-small {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Delete section positioning to match other management pages */
.delete-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    text-align: right;
}

.form-hint-small {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.mb-0 {
    margin-bottom: 0;
}

/* Process Product Master (PPM) Styles */
.ppm-container {
    display: flex;
    height: 100%;
    gap: 1px;
    background-color: var(--border-color);
}

.ppm-column {
    background-color: var(--card-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ppm-column-flex-1 {
    flex: 1;
    min-width: 200px;
}

.ppm-column-flex-2 {
    flex: 2;
    min-width: 300px;
}

.ppm-column-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: var(--text-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ppm-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
    padding-bottom: 5rem;
    /* Extra space to prevent last item being hidden by lower pane header */
}

.search-box {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-color);
}

.search-box .search-input {
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
}

.ppm-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.25rem;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    background-color: var(--card-bg);
    cursor: pointer;
    transition: background-color 0.2s;
    border-left: 4px solid transparent;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.ppm-item:hover {
    background-color: var(--bg-color);
}

.ppm-item.selected {
    background-color: #e3f2fd;
    border-color: var(--primary-color);
}

/* Product List Items - Simple single line */
.ppm-item.product-item .ppm-item-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.ppm-item.product-item .product-name {
    font-weight: 600 !important;
    color: var(--text-color) !important;
    font-size: 0.875rem !important;
    white-space: nowrap;
}

.ppm-item.product-item .product-code {
    font-size: 0.75rem !important;
    color: var(--text-muted) !important;
    white-space: nowrap;
}

/* Hide any extra elements in product items */
.ppm-item.product-item .ppm-item-content>*:not(.product-name):not(.product-code) {
    display: none !important;
}

/* Hide tenant name specifically in product items */
.ppm-item.product-item .ppm-item-tenant {
    display: none !important;
}

/* Hide tenant name in all ppm items if not needed */
.ppm-item .ppm-item-tenant {
    display: none !important;
}

/* Process Items with thick left border colors and indentation */
.ppm-item.process-item {
    border-left: 6px solid;
    /* Thick border for process items */
}

/* Process type colors */
.ppm-item.process-item.process-type-1 {
    border-left-color: #2563eb;
    /* Blue for first level */
}

.ppm-item.process-item.process-type-2 {
    border-left-color: #374151;
    /* Dark gray for second level */
    margin-left: 1rem;
}

.ppm-item.process-item.process-type-3 {
    border-left-color: #6b7280;
    /* Medium gray for third level */
    margin-left: 2rem;
}

.ppm-item.process-item.process-type-4 {
    border-left-color: #9ca3af;
    /* Light gray for fourth level */
    margin-left: 3rem;
}

.ppm-item.process-item .ppm-item-content {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.ppm-item.process-item .process-name {
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.875rem;
}

.ppm-item.process-item .process-code {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Flow Items - thick left border, different styling for edit mode vs view mode */
.ppm-item.flow-item {
    border-left: 6px solid;
    /* Thick border for flow items */
}

/* Edit mode OFF - all gray */
.ppm-item.flow-item.edit-mode-off {
    border-left-color: #6c757d;
    /* Gray for all when edit mode is off */
}

/* Edit mode ON - same colors as process types with indentation */
.ppm-item.flow-item.edit-mode-on.process-type-1 {
    border-left-color: #2563eb;
    /* Blue for first level */
}

.ppm-item.flow-item.edit-mode-on.process-type-2 {
    border-left-color: #374151;
    /* Dark gray for second level */
    margin-left: 1rem;
}

.ppm-item.flow-item.edit-mode-on.process-type-3 {
    border-left-color: #6b7280;
    /* Medium gray for third level */
    margin-left: 2rem;
}

.ppm-item.flow-item.edit-mode-on.process-type-4 {
    border-left-color: #9ca3af;
    /* Light gray for fourth level */
    margin-left: 3rem;
}

.ppm-item.flow-item .ppm-item-content {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.ppm-item.flow-item .process-name {
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.875rem;
}

.ppm-item.flow-item .process-code {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Default for all ppm-item-content: single line display */
.ppm-item-content {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.ppm-item-content .process-name,
.ppm-item-content .product-name,
.ppm-item-content .ppm-item-name {
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.875rem;
    white-space: nowrap;
}

.ppm-item-content .process-code,
.ppm-item-content .product-code,
.ppm-item-content .ppm-item-code {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.ppm-item-actions {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.ppm-btn-icon {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.ppm-btn-icon:hover {
    background-color: var(--bg-color);
}

.btn-move-sm {
    color: var(--primary-color);
}

.btn-remove-process {
    color: var(--error-color);
}

.selected-product-name {
    font-weight: normal;
    color: var(--primary-color);
    font-size: 0.875rem;
}

.edit-mode-label {
    font-size: 0.875rem;
    color: var(--text-color);
}

.empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-muted);
    font-style: italic;
}

/* Toggle switch for edit mode */
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
}

input:checked+.slider {
    background-color: var(--primary-color);
}

input:checked+.slider:before {
    transform: translateX(20px);
}

.slider.round {
    border-radius: 24px;
}

.slider.round:before {
    border-radius: 50%;
}

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

.flex-between-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.final-gate-badge {
    background-color: var(--primary-color);
    color: white;
    font-size: 0.625rem;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-weight: bold;
}

/* ============================================
   Process Product Master Additional Styles
   ============================================ */

/* Pane Toggle Button (▼/▲) */
.pane-toggle-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: bold;
    transition: background-color 0.2s;
    min-width: 28px;
    text-align: center;
}

.pane-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.pane-toggle-btn.with-margin {
    margin-left: 0.5rem;
}

/* Lower Pane Actions Container */
.lower-pane-actions {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    flex-shrink: 1;
    min-width: 0;
}

.lower-pane-actions .btn-primary,
.lower-pane-actions .btn-secondary {
    width: auto;
    flex-shrink: 0;
}

.btn-header-compact {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.btn-add-compact {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    white-space: nowrap;
}

/* Compact Search Input */
.search-input-compact {
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    width: 160px;
    min-width: 100px;
    flex-shrink: 1;
}

.search-input-compact:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* Lower Pane Content Layout */
.lower-pane-content {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.process-table-container {
    flex: 1;
    overflow: hidden;
    padding: 1rem;
}

/* Pane State Classes */
.upper-pane.maximized {
    flex: 1;
}

.upper-pane.minimized-for-lower {
    flex: 0 0 auto;
    max-height: 48px;
    overflow: hidden;
}

.upper-pane.minimized-for-lower .ppm-container {
    display: none;
}

.lower-pane.maximized {
    flex: 1;
}

.lower-pane.maximized-full {
    flex: 1;
}

.lower-pane.collapsed {
    flex: 0 0 auto;
    max-height: 48px;
    overflow: hidden;
}

.lower-pane.collapsed .lower-pane-content {
    display: none;
}

.upper-pane.normal-state,
.lower-pane.normal-state {
    flex: 1 1 50%;
}

/* Resize Bar Hidden */
.resize-bar-hidden {
    display: none !important;
}

/* Flow Level Styles (for defined flow items) */
.ppm-item.flow-item.flow-level-1 {
    border-left-color: #2563eb;
    /* Blue for first level */
}

.ppm-item.flow-item.flow-level-2 {
    border-left-color: #374151;
    /* Dark gray for second level */
    margin-left: 1rem;
}

.ppm-item.flow-item.flow-level-3 {
    border-left-color: #6b7280;
    /* Medium gray for third level */
    margin-left: 2rem;
}

.ppm-item.flow-item.flow-level-4 {
    border-left-color: #9ca3af;
    /* Light gray for fourth level */
    margin-left: 3rem;
}

.ppm-item.flow-item.flow-level-deep {
    border-left-color: #d1d5db;
    /* Very light gray for deeper levels */
    margin-left: var(--flow-indent, 4rem);
}

/* Old Hierarchy Classes (for available processes) */
.ppm-item.main-process {
    border-left: 6px solid #2563eb;
    /* Blue for main/level 1 */
}

.ppm-item.sub-process {
    border-left: 6px solid #374151;
    /* Dark gray for sub/level 2 */
    margin-left: 1rem;
}

.ppm-item.sub-sub-process {
    border-left: 6px solid #6b7280;
    /* Medium gray for level 3 */
    margin-left: 2rem;
}

.ppm-item.detail-process {
    border-left: 6px solid #9ca3af;
    /* Light gray for detail/level 4 */
    margin-left: 3rem;
}

/* Drag and Drop Styles */
.ppm-item.dragging {
    opacity: 0.5;
    border: 2px dashed var(--primary-color);
}

.ppm-item.draggable {
    cursor: grab;
}

.ppm-item.draggable:active {
    cursor: grabbing;
}

.ppm-item.drag-over-item {
    border-top: 3px solid var(--primary-color);
    margin-top: -1px;
}

.ppm-list.drop-zone-active {
    background-color: rgba(37, 99, 235, 0.05);
    border: 2px dashed var(--primary-color);
    border-radius: 0.25rem;
}

.file-drop-zone.drag-over {
    border-color: var(--primary-color);
    background-color: rgba(37, 99, 235, 0.05);
}

/* Final Gate Active Styling */
.ppm-item.flow-item.final-gate-active {
    background-color: #fef3c7;
    border-color: #f59e0b;
}

.ppm-item.flow-item.final-gate-active .final-gate-badge {
    background-color: #f59e0b;
    display: inline-block;
}

.ppm-item.flow-item:not(.final-gate-active) .final-gate-badge {
    display: none;
}

/* Add Button State Classes */
.ppm-add-btn-active {
    color: var(--primary-color);
    cursor: pointer;
}

.ppm-add-btn-active:hover {
    background-color: var(--primary-color);
    color: white;
}

.ppm-add-btn-disabled {
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.5;
}

/* Import Warning Styles */
.import-warning {
    background-color: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.import-warning-title {
    display: block;
    margin-bottom: 0.5rem;
    color: #92400e;
}

.import-warning-text {
    color: #92400e;
    font-size: 0.875rem;
    margin: 0;
}

.import-warning-emphasis {
    font-weight: bold;
    color: #b45309;
}

/* Import Error Styles */
.import-errors {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 1rem;
}

.import-error-item {
    padding: 0.5rem;
    margin-bottom: 0.25rem;
    background-color: #fef2f2;
    border-left: 3px solid var(--error-color);
    font-size: 0.875rem;
}

.error-item {
    padding: 0.25rem 0;
    font-size: 0.875rem;
}

.error-row {
    color: var(--error-color);
    font-weight: 600;
}

.error-msg {
    color: var(--text-color);
}

/* Status badges for process types */
.status-level-2 {
    background-color: #e5e7eb;
    color: #374151;
}

.status-level-3 {
    background-color: #f3f4f6;
    color: #6b7280;
}

.status-level-4 {
    background-color: #f9fafb;
    color: #9ca3af;
}

.status-level-n {
    background-color: #fafafa;
    color: #a1a1aa;
}

/* Preview item styles for import */
.preview-item {
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    background-color: var(--bg-color);
    border-radius: 0.25rem;
    font-size: 0.875rem;
}

.status-overwrite {
    color: #f59e0b;
    font-size: 0.75rem;
}

.status-new {
    color: #10b981;
    font-size: 0.75rem;
}

/* Result icon styles */
.result-icon-success {
    color: #10b981;
}

.result-icon-error {
    color: var(--error-color);
}

/* Message area margin */
.message-area-margin {
    margin: 0 1rem 1rem 1rem;
}

/* Dropdown wrapper for better positioning */
.dropdown-wrapper {
    position: relative;
}

/* Hint text small */
.hint-text-sm {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Button link style */
.btn-link {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.875rem;
}

.btn-link:hover {
    text-decoration: underline;
}

/* Button with icon */
.btn-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Form actions justify center */
.form-actions.justify-center {
    justify-content: center;
}

/* ============================================
   Handy Batch Register Styles
   ============================================ */

/* Feature Page Layout */
.feature-page {
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.feature-page .feature-header {
    margin-bottom: 1rem;
}

.feature-page .feature-header h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
}

.feature-page .feature-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.feature-page .feature-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Category Tabs (Level 1) */
.category-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.category-tab {
    padding: 0.75rem 1.5rem;
    border: none;
    background-color: transparent;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 0.5rem 0.5rem 0 0;
    transition: all 0.2s;
}

.category-tab:hover {
    background-color: var(--bg-color);
    color: var(--text-color);
}

.category-tab.active {
    background-color: var(--primary-color);
    color: white;
}

/* Function Tabs (Level 2) */
.function-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
    background-color: var(--bg-color);
    border-radius: 0.5rem;
    padding: 0.25rem;
}

.function-tab {
    padding: 0.5rem 1rem;
    border: none;
    background-color: transparent;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 0.375rem;
    transition: all 0.2s;
}

.function-tab:hover {
    background-color: var(--card-bg);
    color: var(--text-color);
}

.function-tab.active {
    background-color: var(--card-bg);
    color: var(--primary-color);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

/* Batch Toolbar */
.batch-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    gap: 1rem;
}

.toolbar-left,
.toolbar-right {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Override btn-primary width for toolbar buttons */
.batch-toolbar .btn-primary,
.batch-toolbar .btn-secondary:not(.help-btn) {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.batch-toolbar .btn-primary svg,
.batch-toolbar .btn-secondary svg {
    flex-shrink: 0;
}

/* Status Bar */
.status-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--bg-color);
    border-radius: 0.25rem;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.unsaved-indicator {
    color: #f59e0b;
    font-weight: 500;
}

.status-hint {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Batch Table Container */
#batchTable {
    flex: 1;
    overflow: hidden;
    min-height: 300px;
}

/* Import Modal Content */
.import-modal-content {
    max-width: 500px;
    width: 90%;
}

.import-modal-content .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.import-modal-content .modal-body {
    padding: 1.5rem;
}

.import-options {
    margin-top: 1rem;
}

/* Result Modal Content */
.result-modal-content {
    text-align: center;
    padding: 2rem;
    max-width: 400px;
}

.result-modal-content .result-icon {
    font-size: 4rem;
    color: #10b981;
    margin-bottom: 1rem;
}

.result-modal-content .result-icon.error {
    color: var(--error-color);
}

.result-modal-content h3 {
    margin: 0 0 1rem 0;
}

.result-modal-content p {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-overlay.hidden {
    display: none;
}

.modal-overlay .modal-content {
    background-color: var(--card-bg);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-md);
    max-height: 90vh;
    overflow-y: auto;
}

.modal-overlay .modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

.modal-overlay .modal-actions .btn-primary,
.modal-overlay .modal-actions .btn-secondary {
    width: auto;
    padding: 0.5rem 1.5rem;
}

/* ============================================
   System Logs Styles
   ============================================ */

/* Logs Content Header */
.logs-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem 1.5rem;
    background-color: var(--card-bg);
    border-radius: 0.5rem;
}

.logs-content-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
}

/* Logs Tab Container */
.logs-tab-container {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0;
}

.logs-tab-button {
    padding: 0.75rem 1.5rem;
    border: none;
    background-color: var(--bg-color);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 0.5rem 0.5rem 0 0;
    transition: all 0.2s;
    border: 1px solid var(--border-color);
    border-bottom: none;
    margin-bottom: -2px;
}

.logs-tab-button:hover {
    background-color: var(--card-bg);
    color: var(--text-color);
}

.logs-tab-button.active {
    background-color: var(--card-bg);
    color: var(--primary-color);
    border-bottom: 2px solid var(--card-bg);
}

/* Logs Tab Content */
.logs-tab-content {
    display: none;
    padding: 1rem;
    background-color: var(--card-bg);
    border-radius: 0 0.5rem 0.5rem 0.5rem;
    border: 1px solid var(--border-color);
    border-top: none;
}

.logs-tab-content.active {
    display: block;
}

/* Logs Filter Section */
.logs-filter-section {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background-color: var(--bg-color);
    border-radius: 0.5rem;
    align-items: flex-end;
}

.logs-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.logs-filter-group label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.logs-filter-group input[type="date"],
.logs-filter-group input[type="text"],
.logs-filter-group select {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    background-color: var(--card-bg);
    color: var(--text-color);
    min-width: 140px;
}

.logs-filter-group input[type="date"]:focus,
.logs-filter-group input[type="text"]:focus,
.logs-filter-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.logs-filter-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-left: auto;
}

.logs-btn-filter {
    padding: 0.5rem 1rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.logs-btn-filter:hover {
    background-color: var(--primary-hover);
}

/* Logs Download Wrapper (Dropdown) */
.logs-download-wrapper {
    position: relative;
    display: inline-block;
}

.logs-download-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    box-shadow: var(--shadow-md);
    min-width: 150px;
    z-index: 100;
}

.logs-download-dropdown.show {
    display: block;
}

.logs-download-item,
.logs-download-item-divider {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--text-color);
    text-decoration: none;
    font-size: 0.875rem;
    transition: background-color 0.2s;
}

.logs-download-item:hover,
.logs-download-item-divider:hover {
    background-color: var(--bg-color);
}

.logs-download-item-divider {
    border-top: 1px solid var(--border-color);
}

/* Logs Table Container */
.logs-table-container {
    height: 400px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
}

.logs-table-container .tabulator {
    height: 100%;
}

/* Logs Pagination Area */
.logs-pagination-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: 0.75rem;
    background-color: var(--bg-color);
    border-radius: 0.375rem;
}

.logs-pagination-btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.logs-pagination-info {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Logs Modal */
.logs-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.logs-modal.show {
    display: flex;
}

.logs-modal-content {
    background-color: var(--card-bg);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-md);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.logs-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.logs-modal-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.logs-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
}

.logs-modal-close:hover {
    color: var(--text-color);
}

.logs-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
}

/* ============================================
   Sessions List Styles
   ============================================ */

/* Sessions Content Header */
.sessions-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem 1.5rem;
    background-color: var(--card-bg);
    border-radius: 0.5rem;
}

.sessions-content-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
}

.sessions-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-left: auto;
    /* Push to right */
}

.sessions-header-actions .btn-secondary,
.sessions-header-actions .btn-danger {
    width: auto;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* Button with icon styling */
.btn-flex-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* Disabled state for buttons */
.btn-disabled-state:disabled,
.btn-disabled-state[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Sessions Table Container */
.sessions-table-container {
    background-color: var(--card-bg);
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: var(--shadow-sm);
}

.sessions-table-container .tabulator {
    border: none;
}

/* ============================================
   Menu Settings Styles
   ============================================ */

/* Card Component (Bootstrap-like) */
.card {
    background-color: var(--card-bg);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.card-body {
    padding: 1.5rem;
}

/* Table Component (Bootstrap-like) */
.table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--card-bg);
}

.table th,
.table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}

.table th {
    background-color: var(--bg-color);
    font-weight: 600;
    color: var(--text-color);
}

.table tbody tr:hover {
    background-color: var(--bg-color);
}

/* Menu Settings Specific */
.menu-settings-table-container {
    overflow-x: auto;
    max-width: 66.67%;
    /* 2/3 width */
}

/* Category row styling (大カテゴリ - 管理、発注管理、工程管理、資材管理) */
.menu-settings-table-container tr.menu-category-row {
    background-color: #e5e7eb;
}

.menu-settings-table-container tr.menu-category-row td:first-child {
    font-weight: 700;
    color: var(--text-color);
}

/* Normal item row styling */
.menu-settings-table-container tr.menu-item-row td:first-child {
    padding-left: 2rem;
    /* Indent for sub-items */
}

/* Compact table styling for menu settings */
.menu-settings-table-container .table {
    font-size: 0.8125rem;
    /* Smaller font */
}

.menu-settings-table-container .table th,
.menu-settings-table-container .table td {
    padding: 0.4rem 0.75rem;
    /* Reduced row height */
}

.menu-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.menu-settings-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
}

.menu-settings-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.menu-settings-save-btn {
    width: auto !important;
    padding: 0.5rem 1.5rem;
}

.menu-settings-col-auto {
    width: auto;
}

.menu-settings-col-20 {
    width: 20%;
}

/* Toggle Switch for Menu Settings (class names from JS: toggle-switch, slider) */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 26px;
    transition: 0.3s;
}

.toggle-switch .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked+.slider {
    background-color: var(--primary-color);
    /* Blue to match app theme */
}

.toggle-switch input:checked+.slider:before {
    transform: translateX(24px);
}

.toggle-switch input:disabled+.slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Text utilities */
.text-center {
    text-align: center;
}

.text-nowrap {
    white-space: nowrap;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-4 {
    margin-bottom: 1.5rem;
}

/* Notification Area */
#settingsNotificationArea {
    font-size: 0.875rem;
}

#settingsNotificationArea .success {
    color: #10b981;
}

#settingsNotificationArea .error {
    color: var(--error-color);
}

/* Bootstrap-like button classes */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
}

/* ============================================
   Product Process Progress Styles
   ============================================ */

.product-process-progress-page .user-content {
    flex: 1;
    overflow: hidden;
}

/* Progress Tree Container */
.progress-tree-container {
    flex: 0 0 66.67%;
    max-width: 66.67%;
    overflow-y: auto;
    background-color: var(--card-bg);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.progress-tree {
    padding: 0.5rem;
}

/* Product Row - Accordion style */
.product-row {
    margin-bottom: 0.5rem;
    border: none;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: var(--card-bg);
    box-shadow: var(--shadow-sm);
}

.product-row.d-none {
    display: none;
}

/* Product Header - Clickable */
.product-header {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: #f8fafc;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.2s;
    gap: 0.75rem;
}

.product-header:hover {
    background-color: #e2e8f0;
}

.product-row.expanded .product-header {
    background-color: #e2e8f0;
    border-bottom: 1px solid var(--border-color);
}

/* Product Toggle Arrow */
.product-toggle {
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
}

.product-row.expanded .product-toggle {
    transform: rotate(90deg);
}

/* Product Info (Code + Name) */
.product-header .product-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
    justify-content: flex-start;
    border: none;
    background-color: transparent;
    margin-bottom: 0;
    /* Reset margin for proper vertical alignment with toggle */
}

.product-header .product-code {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.875rem;
    white-space: nowrap;
}

.product-header .product-name {
    color: var(--text-color);
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Progress Bar Container */
.progress-bar-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    min-width: 150px;
}

.progress-bar {
    flex: 1;
    height: 8px;
    background-color: #94a3b8;
    border-radius: 4px;
    overflow: hidden;
    min-width: 80px;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-percent {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-color);
    min-width: 40px;
    text-align: right;
}

/* Process List - Hidden by default */
.product-row .process-list {
    display: none;
    padding: 0.5rem 1rem 1rem 1rem;
    background-color: var(--card-bg);
}

.product-row.expanded .process-list {
    display: block;
}

/* Process Item */
.progress-tree .process-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--border-color);
    gap: 0.5rem;
    font-family: monospace;
}

.progress-tree .process-item:last-child {
    border-bottom: none;
}

/* Tree Prefix (│, ├, └) */
.process-tree-prefix {
    color: var(--text-muted);
    white-space: pre;
    font-family: monospace;
    flex-shrink: 0;
}

/* Process Indentation - by level */
.process-indent-0 {
    padding-left: 0.5rem;
}

.process-indent-1 {
    padding-left: 2rem;
}

.process-indent-2 {
    padding-left: 3.5rem;
}

.process-indent-3 {
    padding-left: 5rem;
}

/* Process Status Icon */
.process-status-icon {
    font-size: 1rem;
    flex-shrink: 0;
    width: 1.25rem;
    text-align: center;
}

/* Process Code */
.progress-tree .process-item .process-code {
    color: var(--text-muted);
    font-size: 0.75rem;
    min-width: 80px;
    flex-shrink: 0;
    font-family: 'Inter', sans-serif;
}

/* Process Name */
.progress-tree .process-item .process-name {
    flex: 1;
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

/* Process DateTime */
.process-datetime {
    color: var(--text-muted);
    font-size: 0.75rem;
    min-width: 120px;
    flex-shrink: 0;
    font-family: 'Inter', sans-serif;
}

/* Process Status Label */
.process-status-label {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    min-width: 60px;
    text-align: center;
    font-family: 'Inter', sans-serif;
}

/* Status Classes */
.status-completed .process-status-label {
    background-color: #d1fae5;
    color: #065f46;
}

.status-started .process-status-label,
.status-resumed .process-status-label {
    background-color: #dbeafe;
    color: #1e40af;
}

.status-paused .process-status-label {
    background-color: #fef3c7;
    color: #92400e;
}

.status-not-started .process-status-label {
    background-color: #f3f4f6;
    color: #6b7280;
}

/* Material Items */
.material-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    padding-left: 2.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    background-color: #fafafa;
    border-bottom: 1px solid #f3f4f6;
}

.material-item.material-key {
    background-color: #fef3c7;
}

.material-icon {
    font-size: 0.875rem;
}

.material-code {
    font-weight: 500;
    color: var(--text-color);
    min-width: 80px;
}

.material-name {
    flex: 1;
    color: var(--text-muted);
}

.material-quantity {
    color: var(--text-muted);
}

/* Hide code when toggle is off */
.progress-tree.hide-code .process-code {
    display: none;
}

/* Hide materials when toggle is off */
.progress-tree.hide-materials .material-item {
    display: none;
}

/* No Process Notice */
.no-process-notice {
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

/* ============================================
   Product Install Progress Styles
   ============================================ */

.product-install-progress-page .user-content {
    flex: 1;
    overflow: hidden;
}

.product-install-progress-page .progress-tree-container {
    flex: 0 0 66.67%;
    max-width: 66.67%;
    overflow-y: auto;
    background-color: var(--card-bg);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

/* Install Count */
.install-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 1rem;
}

.process-install-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: auto;
}

/* Install Item */
.install-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    padding-left: 2.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    background-color: #fafafa;
    border-bottom: 1px solid #f3f4f6;
    border-left: 3px solid #fafafa;
    /* Match background color for alignment consistency */
}

.install-item.install-critical {
    background-color: #fef3c7;
    border-left-color: #f59e0b;
    /* Only change border color for critical items */
}

.install-icon {
    font-size: 0.875rem;
    display: inline-block;
    min-width: 3rem;
    width: 3rem;
    text-align: left;
    flex-shrink: 0;
}

.install-code {
    font-weight: 500;
    color: var(--primary-color);
    min-width: 80px;
}

.install-name {
    flex: 1;
    color: var(--text-color);
    font-weight: 500;
}

.install-qty {
    color: var(--text-muted);
    min-width: 40px;
    text-align: right;
}

.install-datetime {
    color: var(--text-muted);
    font-size: 0.75rem;
    min-width: 120px;
    text-align: right;
}

/* Critical Only Filter */
.progress-tree.critical-only .install-item:not(.install-critical) {
    display: none;
}

/* Hide code when toggle is off */
.progress-tree.hide-code .install-code {
    display: none;
}

/* ============================================
   User Process History Styles
   ============================================ */

.user-process-history-page .user-content {
    flex: 1;
    overflow: hidden;
}

.user-process-history-page .progress-tree-container {
    flex: 0 0 66.67%;
    max-width: 66.67%;
    overflow-y: auto;
    background-color: var(--card-bg);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

/* Date Filter Buttons */
.date-filter-buttons {
    display: flex;
    gap: 0.25rem;
    background-color: var(--bg-color);
    border-radius: 0.5rem;
    padding: 0.25rem;
}

.filter-btn {
    padding: 0.5rem 1rem;
    border: none;
    background-color: transparent;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 0.375rem;
    transition: all 0.2s;
    white-space: nowrap;
}

.filter-btn:hover {
    background-color: var(--card-bg);
    color: var(--text-color);
}

.filter-btn.active {
    background-color: var(--primary-color);
    color: white;
    font-weight: 600;
}

/* Custom Date Row */
.custom-date-row {
    padding: 0.75rem 0;
    margin-bottom: 0.5rem;
}

.custom-date-row.hidden {
    display: none;
}

.custom-date-range {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-input {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    background-color: var(--card-bg);
}

.date-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* Group Filter */
.group-filter {
    display: flex;
    align-items: center;
}

.group-filter.hidden {
    display: none;
}

.group-select {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    background-color: var(--card-bg);
    min-width: 150px;
}

.group-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* User Row (similar to product row) */
.user-process-history-page .product-row {
    margin-bottom: 0.5rem;
    border: none;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: var(--card-bg);
    box-shadow: var(--shadow-sm);
}

/* History Item Styling */
.history-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--card-bg);
}

.history-item:last-child {
    border-bottom: none;
}

.history-datetime {
    font-size: 0.75rem;
    color: var(--text-muted);
    min-width: 100px;
    flex-shrink: 0;
}

.history-action {
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    min-width: 60px;
    text-align: center;
    flex-shrink: 0;
}

.history-action.action-started {
    background-color: #dbeafe;
    color: #1e40af;
}

.history-action.action-completed {
    background-color: #d1fae5;
    color: #065f46;
}

.history-action.action-paused {
    background-color: #fef3c7;
    color: #92400e;
}

.history-action.action-resumed {
    background-color: #e0e7ff;
    color: #3730a3;
}

.history-product {
    font-weight: 500;
    color: var(--text-color);
    flex: 1;
}

.history-process {
    color: var(--text-muted);
    flex: 1;
}

/* User Row (accordion style) */
.user-row {
    margin-bottom: 0.5rem;
    border: none;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: var(--card-bg);
    box-shadow: var(--shadow-sm);
}

.user-row.d-none {
    display: none;
}

/* User Header - Clickable */
.user-header {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: #f8fafc;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.2s;
    gap: 0.75rem;
}

.user-header:hover {
    background-color: #e2e8f0;
}

.user-row.expanded .user-header {
    background-color: #e2e8f0;
    border-bottom: 1px solid var(--border-color);
}

/* User Toggle Arrow */
.user-toggle {
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
}

.user-row.expanded .user-toggle {
    transform: rotate(90deg);
}

/* User Info (Icon + Code + Name) */
.user-header .user-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    justify-content: flex-start;
}

.user-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.user-header .user-code {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.875rem;
    white-space: nowrap;
}

.user-header .user-name {
    color: var(--text-color);
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

/* Total Duration */
.total-duration {
    font-size: 0.75rem;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: auto;
}

/* Product List - Hidden by default */
.user-row .product-list {
    display: none;
    padding: 0.5rem 1rem 1rem 1rem;
    background-color: var(--card-bg);
}

.user-row.expanded .product-list {
    display: block;
}

/* Product Section */
.product-section {
    margin-bottom: 0.75rem;
    padding-left: 0.5rem;
}

.product-section:last-child {
    margin-bottom: 0;
}

/* Product Header Row */
.product-header-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: #f1f5f9;
    border-radius: 0.25rem;
    margin-bottom: 0.25rem;
}

.product-header-row .product-code {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.product-header-row .product-name {
    color: var(--text-color);
    font-size: 0.8125rem;
    font-weight: 500;
}

/* Process Item in User History */
.user-process-history-page .process-item {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--border-color);
    gap: 0.5rem;
    font-family: monospace;
}

.user-process-history-page .process-item:last-child {
    border-bottom: none;
}

.process-time-range {
    color: var(--text-muted);
    font-size: 0.75rem;
    min-width: 150px;
    flex-shrink: 0;
    font-family: 'Inter', sans-serif;
}

.process-duration {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    min-width: 60px;
    text-align: right;
    font-family: 'Inter', sans-serif;
}

.process-duration.no-data {
    color: var(--text-muted);
}

/* Hide code when toggle is off */
.user-process-history-page .progress-tree.hide-code .user-code,
.user-process-history-page .progress-tree.hide-code .product-code,
.user-process-history-page .progress-tree.hide-code .process-code {
    display: none;
}

/* ============================================
   Shelf QR Creation Page Styles
   ============================================ */

.shelf-qr-creation-page {
    height: 100%;
}

.shelf-qr-creation-page .feature-page {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.shelf-qr-creation-page .feature-content {
    flex: 1;
    overflow: hidden;
}

/* Accordion Toggle Button (▲/▼) */
.accordion-toggle {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: bold;
    transition: background-color 0.2s;
    min-width: 28px;
    text-align: center;
}

.accordion-toggle:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* Search Input in Header */
.search-input-header {
    width: 180px !important;
    min-width: 120px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.375rem;
    background-color: rgba(255, 255, 255, 0.9);
}

.search-input-header:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* Print Button in Header */
.shelf-qr-creation-page .print-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Save Preset Button */
.save-preset-btn {
    padding: 0.375rem 0.5rem;
    min-width: auto;
}

/* Delete Preset Button */
.delete-preset-btn {
    padding: 0.375rem 0.5rem;
    min-width: auto;
}

/* Preview Option Label */
.preview-option-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    cursor: pointer;
    margin-right: 1rem;
}

.preview-option-checkbox {
    margin: 0;
}

/* Quantity Input in Selection Table */
.quantity-input {
    width: 60px;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    text-align: center;
}

.quantity-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Select All Checkbox Column */
.select-all-th {
    width: 40px;
    text-align: center;
}

/* Pane Flex Dynamic (for resize functionality) */
.pane-flex-dynamic {
    flex: var(--pane-flex, 1);
}

/* Sheet Preview (in-page preview with scaling) */
.sheet-preview {
    transform-origin: top left;
    margin-bottom: 1.5rem;
}

/* Sheet Page Dynamic (CSS variable based sizing) - Higher specificity to override .sheet-page */
/* IMPORTANT: Combined rules for proper sizing - flex-shrink prevents container shrinking */
.shelf-qr-creation-page .sheet-page.sheet-page-dynamic {
    width: var(--page-width, 210mm) !important;
    height: var(--page-height, 297mm) !important;
    min-width: var(--page-width, 210mm) !important;
    min-height: var(--page-height, 297mm) !important;
    max-width: var(--page-width, 210mm) !important;
    max-height: var(--page-height, 297mm) !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    padding: var(--margin-top, 10mm) var(--margin-right, 10mm) var(--margin-bottom, 10mm) var(--margin-left, 10mm);
    box-sizing: border-box;
    position: relative;
    background-color: white;
    box-shadow: var(--shadow-md);
    margin-bottom: 1rem;
}

/* Meta Header Dynamic */
.sheet-meta-header-dynamic {
    position: absolute;
    top: var(--header-top, 5mm);
    left: var(--margin-left, 10mm);
    right: var(--margin-right, 10mm);
    font-size: 8pt;
    color: #666;
    text-align: center;
}

/* Page Footer Dynamic */
.page-footer-dynamic {
    position: absolute;
    bottom: var(--footer-bottom, 5mm);
    left: var(--margin-left, 10mm);
    right: var(--margin-right, 10mm);
    font-size: 8pt;
    color: #666;
    text-align: center;
}

/* Upper Pane scrollable - ensure proper overflow for interior scrollbar */
.shelf-qr-creation-page .upper-pane {
    overflow: hidden;
    min-height: 0;
    /* Critical for flex container */
}

.shelf-qr-creation-page .selection-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Critical: allows flex children to shrink below content size */
}

/* Panel section inside selection content - must also participate in flex shrinking */
.shelf-qr-creation-page .selection-content .panel-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Critical: allows scrolling in child */
    overflow: hidden;
}

.shelf-qr-creation-page .selection-list-container {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
    min-height: 0;
    /* Critical: allows scrolling when content exceeds container */
}

/* Shelf Label Item Styling */
.shelf-qr-creation-page .label-item-dynamic {
    position: absolute;
    width: var(--label-width);
    height: var(--label-height);
    left: var(--label-left);
    top: var(--label-top);
    background-color: white;
    border: 1px solid transparent;
    overflow: hidden;
}

.shelf-qr-creation-page .label-item-dynamic.show-border {
    border: 1px solid #ccc;
}

.shelf-qr-creation-page .label-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2mm 2mm 2mm 4mm;
    position: relative;
}

/* QR Code positioned on right side */
.shelf-qr-creation-page .label-qr {
    position: absolute;
    right: 2mm;
    top: 50%;
    transform: translateY(-50%);
    width: 30mm;
    height: 30mm;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shelf-qr-creation-page .label-qr canvas,
.shelf-qr-creation-page .label-qr img {
    max-width: 100%;
    max-height: 100%;
}

/* Text section on left side with left margin */
.shelf-qr-creation-page .label-group {
    font-size: 8pt;
    color: #666;
    margin-bottom: 1mm;
    margin-right: 35mm;
    margin-left: 2mm;
}

.shelf-qr-creation-page .label-name {
    font-size: var(--name-font-size, 20pt);
    font-weight: 700;
    color: #333;
    margin-bottom: 1mm;
    margin-right: 35mm;
    margin-left: 2mm;
    line-height: 1.2;
    word-break: break-all;
}

.shelf-qr-creation-page .label-code {
    font-size: 9pt;
    color: #333;
    margin-right: 35mm;
    margin-left: 2mm;
}

/* Preview Container with scaled sheets */
.shelf-qr-creation-page .preview-container {
    flex: 1;
    overflow: auto;
    padding: 1rem;
    background-color: #e5e7eb;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Align sheets to top */
}

/* Scale preview sheet to fit - ensure no flex shrink and explicit sizing */
.shelf-qr-creation-page .sheet-page.sheet-page-dynamic {
    flex-shrink: 0 !important;
    min-width: var(--page-width, 210mm) !important;
    min-height: var(--page-height, 297mm) !important;
    margin-bottom: 1rem;
}

/* Preset and Paper Size select boxes */
.shelf-qr-creation-page .preset-select,
.shelf-qr-creation-page #presetSelect {
    width: 200px !important;
    min-width: 200px !important;
}

.shelf-qr-creation-page #paperSize {
    width: 180px !important;
    min-width: 180px !important;
    max-width: none !important;
}

/* Print Styles for Shelf QR - A4 Portrait */
@media print {
    @page {
        size: A4 portrait;
        margin: 0;
    }

    .shelf-qr-creation-page .no-print,
    .shelf-qr-creation-page .feature-header,
    .shelf-qr-creation-page .upper-pane,
    .shelf-qr-creation-page .lower-pane-header,
    .shelf-qr-creation-page .settings-panel,
    .shelf-qr-creation-page .preview-header,
    .shelf-qr-creation-page .resize-bar {
        display: none !important;
    }

    .shelf-qr-creation-page .print-area {
        display: block !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .shelf-qr-creation-page .sheet-page-dynamic {
        transform: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        page-break-after: always;
    }
}

/* ============================================
   Material QR Label Creation Page Styles
   ============================================ */

.material-qr-creation-page {
    height: 100%;
}

.material-qr-creation-page .feature-page {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.material-qr-creation-page .feature-content {
    flex: 1;
    overflow: hidden;
}

/* Upper Pane scrollable - ensure proper overflow for interior scrollbar */
.material-qr-creation-page .upper-pane {
    overflow: hidden;
    min-height: 0;
    /* Critical for flex container */
}

.material-qr-creation-page .selection-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Critical: allows flex children to shrink below content size */
}

/* Panel section inside selection content - must also participate in flex shrinking */
.material-qr-creation-page .selection-content .panel-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Critical: allows scrolling in child */
    overflow: hidden;
}

.material-qr-creation-page .selection-list-container {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
    min-height: 0;
    /* Critical: allows scrolling when content exceeds container */
}

/* Material Label Item Styling */
.material-qr-creation-page .label-item-dynamic {
    position: absolute;
    width: var(--label-width);
    height: var(--label-height);
    left: var(--label-left);
    top: var(--label-top);
    background-color: white;
    border: 1px solid transparent;
    overflow: hidden;
}

.material-qr-creation-page .label-item-dynamic.show-border {
    border: 1px solid #ccc;
}

.material-qr-creation-page .label-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 4mm 2mm 2mm 4mm;
    /* Increased top padding by 2mm */
    position: relative;
}

/* QR Code positioned on right side */
.material-qr-creation-page .label-qr {
    position: absolute;
    right: 2mm;
    top: 50%;
    transform: translateY(-50%);
    width: 28mm;
    height: 28mm;
    display: flex;
    align-items: center;
    justify-content: center;
}

.material-qr-creation-page .label-qr canvas,
.material-qr-creation-page .label-qr img {
    max-width: 100%;
    max-height: 100%;
}

/* Text section on left side */
.material-qr-creation-page .label-code {
    font-size: 7pt;
    color: #666;
    margin-bottom: 1mm;
    /* Slightly increased */
    margin-right: 32mm;
    margin-left: 1mm;
}

.material-qr-creation-page .label-name {
    font-size: var(--name-font-size, 13pt);
    font-weight: 700;
    color: #333;
    margin-bottom: 1.5mm;
    margin-right: 29mm;
    margin-left: 1mm;
    line-height: 1.3;
    word-break: break-word;
    min-height: 4.5em;
    /* 3 lines */
    max-height: 4.5em;
    overflow: hidden;
    padding: 0.5mm 0.5mm;
    background-color: #fff;
}

.material-qr-creation-page .label-name.key-material {
    /* Key material styling - thick bordered box */
    border: 2px solid #333;
    padding: 0.5mm 0.5mm;
    /* Increased top/bottom padding to prevent 2nd line clipping */
    margin-left: 0;
    background-color: #fff;
}

.material-qr-creation-page .key-material-icon {
    color: #000;
    /* Black for monochrome printing */
    margin-right: 0.5mm;
    font-weight: bold;
}

.material-qr-creation-page .label-specification {
    font-size: 7pt;
    color: #555;
    margin-top: 0.5mm;
    margin-right: 32mm;
    margin-left: 1mm;
    margin-bottom: 0.5mm;
    line-height: 1.2;
    word-break: break-word;
    min-height: 2.4em;
    /* Reserve 2 lines */
    max-height: 2.4em;
    overflow: hidden;
}

.material-qr-creation-page .label-supplier {
    font-size: 6pt;
    color: #888;
    margin-right: 32mm;
    margin-left: 1mm;
    line-height: 1.2;
    word-break: break-word;
    min-height: 2.2em;
    /* Reserve 2 lines */
    max-height: 2.2em;
    overflow: hidden;
}

/* Preview Container with scaled sheets */
.material-qr-creation-page .preview-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
    background-color: #e5e7eb;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Align sheets to top */
}

/* Sheet Page Dynamic (CSS variable based sizing) - Higher specificity to override .sheet-page */
/* IMPORTANT: Combined rules for proper sizing - flex-shrink prevents container shrinking */
.material-qr-creation-page .sheet-page.sheet-page-dynamic {
    width: var(--page-width, 210mm) !important;
    height: var(--page-height, 297mm) !important;
    min-width: var(--page-width, 210mm) !important;
    min-height: var(--page-height, 297mm) !important;
    max-width: var(--page-width, 210mm) !important;
    max-height: var(--page-height, 297mm) !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    padding: var(--margin-top, 10mm) var(--margin-right, 10mm) var(--margin-bottom, 10mm) var(--margin-left, 10mm);
    box-sizing: border-box;
    position: relative;
    background-color: white;
    box-shadow: var(--shadow-md);
    margin-bottom: 1rem;
}

/* Preset and Paper Size select boxes */
.material-qr-creation-page .preset-select,
.material-qr-creation-page #presetSelect {
    width: 200px !important;
    min-width: 200px !important;
}

.material-qr-creation-page #paperSize {
    width: 180px !important;
    min-width: 180px !important;
    max-width: none !important;
}

/* Print Styles for Material QR - A4 Portrait */
@media print {

    .material-qr-creation-page .no-print,
    .material-qr-creation-page .feature-header,
    .material-qr-creation-page .upper-pane,
    .material-qr-creation-page .lower-pane-header,
    .material-qr-creation-page .settings-panel,
    .material-qr-creation-page .preview-header,
    .material-qr-creation-page .resize-bar {
        display: none !important;
    }

    .material-qr-creation-page .print-area {
        display: block !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .material-qr-creation-page .sheet-page-dynamic {
        transform: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        page-break-after: always;
    }
}

/* ============================================
   Location Stock Page - 棚別在庫一覧
   ============================================ */

/* Stock Tree Container */
.stock-tree-container {
    flex: 1;
    overflow-y: auto;
    background-color: var(--card-bg);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.stock-tree {
    padding: 0.5rem;
}

/* Hide code toggle */
.stock-tree.hide-code .location-code,
.stock-tree.hide-code .material-code {
    display: none;
}

/* Location Row - Accordion style */
.location-row {
    width: 66.67%;
    /* 2/3 width */
    margin-bottom: 0.5rem;
    border: none;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: var(--card-bg);
    box-shadow: var(--shadow-sm);
}

.location-row.search-hidden {
    display: none;
}

.location-row.unplaced {
    border-left: 3px solid var(--warning-color, #f59e0b);
}

/* Location Header - Clickable */
.location-header {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: #f8fafc;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.2s;
    gap: 0.75rem;
}

.location-header:hover {
    background-color: #e2e8f0;
}

.location-row.expanded .location-header {
    background-color: #e2e8f0;
    border-bottom: 1px solid var(--border-color);
}

/* Location Toggle Arrow */
.location-toggle {
    color: var(--text-muted);
    font-size: 0.75rem;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.location-row.expanded .location-toggle {
    transform: rotate(90deg);
}

/* Location Icon */
.location-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Location Info */
.location-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.location-code {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: monospace;
    flex-shrink: 0;
}

.location-name {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.location-summary {
    font-size: 0.875rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Material List (hidden by default) */
.material-list {
    display: none;
    padding: 0.5rem 1rem 1rem 2.5rem;
    background-color: #fff;
}

.location-row.expanded .material-list {
    display: block;
}

/* Material Section */
.material-section {
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    background-color: #f8fafc;
    border-radius: 0.375rem;
    border-left: 3px solid var(--primary-color, #2563eb);
}

.material-section:last-child {
    margin-bottom: 0;
}

.material-header-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.material-code {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: monospace;
    flex-shrink: 0;
}

.material-name {
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.material-total {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-color, #2563eb);
    flex-shrink: 0;
}

/* Lot Item */
.lot-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.lot-tree-prefix {
    color: var(--text-muted);
    font-family: monospace;
    flex-shrink: 0;
}

.lot-number {
    flex: 1;
    color: var(--text-secondary);
}

.lot-quantity {
    font-weight: 500;
    color: var(--text-primary);
    flex-shrink: 0;
}