@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    /* Paleta tablet React Native — tablet/src/theme/colors.ts (light) */
    --color-primary: #004030;
    --color-primary-dark: #002818;
    --color-primary-bright: #006B52;
    --color-secondary: #64748B;
    --color-background: #FFFFFF;
    --color-surface: #F5F7F6;
    --color-surface-light: #FFFFFF;
    --color-surface-hover: #E8F0ED;
    --color-surface-variant: #E8F0ED;
    --color-text: #004030;
    --color-text-secondary: #3D4F48;
    --color-text-muted: #64748B;
    --color-text-tertiary: #64748B;
    --color-primary-subtle: #006B52;
    --color-border: #D0DDD8;
    --color-border-light: #E8F0ED;
    --color-success: #059669;
    --color-warning: #d97706;
    --color-error: #DC2626;
    --color-error-dark: #b91c1c;
    --color-accent: #C5A028;
    --color-accent-light: #D4AF37;
    --color-info: #0284c7;
    --color-overlay: rgba(0, 64, 48, 0.45);
    --color-primary-alpha: rgba(0, 64, 48, 0.15);
    --color-primary-rgb: 0, 64, 48;
    --color-textSecondary: #3D4F48;
    --color-textMuted: #64748B;
    --color-background-soft: #F5F7F6;
    --color-surfaceHover: #E8F0ED;
    --shadowMd: 0 1px 2px rgba(0, 40, 24, 0.05), 0 8px 24px rgba(0, 40, 24, 0.08);
    --shadowLg: 0 12px 32px rgba(0, 40, 24, 0.12);
    --color-primary-fade: #E8F0ED;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 2px rgba(0, 40, 24, 0.06);
    --shadow-md: 0 1px 2px rgba(0, 40, 24, 0.05), 0 8px 24px rgba(0, 40, 24, 0.08);
    --sidebar-collapsed: 60px;
    --sidebar-expanded: 240px;
    --tab-bar-height: 50px;
    --impersonation-banner-height: 44px;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color-scheme: light;
}
html[data-theme="dark"],
html[data-theme="industrialDark"] {
    --color-primary: #2d8a6e;
    --color-primary-dark: #004030;
    --color-primary-bright: #3da882;
    --color-secondary: #94a3b8;
    --color-background: #0f1412;
    --color-surface: #1a2420;
    --color-surface-light: #232e2a;
    --color-surface-hover: #2a3832;
    --color-surface-variant: #232e2a;
    --color-text: #f8fafc;
    --color-text-secondary: #cbd5e1;
    --color-text-muted: #94a3b8;
    --color-text-tertiary: #94a3b8;
    --color-primary-subtle: #3da882;
    --color-border: #2d3834;
    --color-border-light: #232e2a;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-error-dark: #b91c1c;
    --color-accent: #C5A028;
    --color-accent-light: #D4AF37;
    --color-info: #06b6d4;
    --color-overlay: rgba(0, 0, 0, 0.55);
    --color-primary-alpha: rgba(45, 138, 110, 0.2);
    --color-primary-rgb: 45, 138, 110;
    --color-textSecondary: #cbd5e1;
    --color-textMuted: #94a3b8;
    --color-background-soft: #1a2420;
    --color-surfaceHover: #2a3832;
    --color-primary-fade: #1a2420;
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-text);
    background: var(--color-background);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; color: var(--color-text); line-height: 1.25; }
a { color: var(--color-primary); }
button, input, select, textarea { font-family: inherit; }
input, select, textarea {
    color: var(--color-text);
    caret-color: var(--color-text);
}
input::placeholder, textarea::placeholder { color: var(--color-text-muted); }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-text);
    caret-color: var(--color-text);
    box-shadow: 0 0 0 1000px var(--color-surface) inset;
    transition: background-color 9999s ease-out 0s;
}

/* ===== App shell (Vue AppSidebar + TabBar) ===== */
.app-layout { min-height: 100vh; background: var(--color-background); }
.sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 90;
    width: var(--sidebar-collapsed);
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
.sidebar.sidebar-expanded { width: var(--sidebar-expanded); }
.sidebar-content { display: flex; flex-direction: column; height: 100%; }
.sidebar-header {
    box-sizing: border-box;
    height: var(--tab-bar-height);
    display: flex; align-items: center; justify-content: center;
    border-bottom: 1px solid var(--color-border);
    padding: 0 0.75rem; flex-shrink: 0; overflow: hidden;
}
.brand-logo {
    width: 36px; height: 36px; border: 0; padding: 0;
    background: transparent; border-radius: 8px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.sidebar-expanded .brand-logo { width: 220px; height: 44px; }
.brand-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-logo img.logo-dark { display: none; }
html[data-theme="dark"] .brand-logo img.logo-light,
html[data-theme="industrialDark"] .brand-logo img.logo-light { display: none; }
html[data-theme="dark"] .brand-logo img.logo-dark,
html[data-theme="industrialDark"] .brand-logo img.logo-dark { display: block; }
/* Logo 1024×193: o brasão ocupa x 0–160 e o texto começa por volta de x 176.
   Fechada, a sidebar mostra o brasão inteiro; o wordmark fica cortado. */
.sidebar:not(.sidebar-expanded) .brand-logo { justify-content: flex-start; }
.sidebar:not(.sidebar-expanded) .brand-logo img {
    width: calc(36px * 1024 / 193);
    height: 36px;
    max-width: none;
    flex: 0 0 auto;
    object-fit: fill;
    margin-left: 3px;
    clip-path: inset(0 83.6% 0 0);
}
.brand-logo-clickable { cursor: pointer; }
.brand-logo-clickable:hover { background: var(--color-surface-hover); }

.sidebar-search-trigger {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem 0.75rem; margin: 0.5rem 0.5rem 0;
    border-radius: 8px; border: 1px solid var(--color-border);
    cursor: pointer; background: var(--color-background);
    color: var(--color-text-secondary); flex-shrink: 0; min-height: 36px;
    width: calc(100% - 1rem);
}
.sidebar:not(.sidebar-expanded) .sidebar-search-trigger {
    justify-content: center; padding: 0.5rem; border: 0; background: none; margin: 0.5rem 0.25rem 0; width: calc(100% - 0.5rem);
}
.search-trigger-icon { width: 16px; height: 16px; flex-shrink: 0; display: flex; }
.search-trigger-text { flex: 1; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-align: left; }

.sidebar-nav {
    flex: 1; display: flex; flex-direction: column; gap: 0.25rem;
    padding: 0.25rem; overflow-y: auto; overflow-x: hidden;
}
.nav-product, .nav-dropdown-item {
    display: flex; align-items: center; gap: 0.75rem;
    width: 100%; border: 0; background: transparent;
    padding: 0.75rem; border-radius: 8px; cursor: pointer;
    color: var(--color-text-secondary); min-height: 48px;
    font-size: 0.875rem; font-weight: 500; text-align: left;
}
.sidebar:not(.sidebar-expanded) .nav-product { justify-content: center; padding: 0.75rem 0; }
.nav-product:hover, .nav-dropdown-item:hover { background: var(--color-surface-hover); color: var(--color-text); }
.nav-product-active, .nav-product-active:hover {
    background: var(--color-primary); color: #fff;
}
.nav-icon { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.nav-icon svg { display: block; }
.nav-label { font-size: 0.875rem; font-weight: 500; white-space: nowrap; flex: 1; overflow: hidden; }
.nav-arrow { width: 12px; height: 12px; margin-left: auto; display: flex; transition: transform 0.2s ease; }
.nav-arrow-open { transform: rotate(180deg); }
.nav-dropdown { display: flex; flex-direction: column; gap: 0.125rem; padding-left: 2.5rem; margin-bottom: 0.25rem; }
.nav-dropdown-item { min-height: 40px; padding: 0.5rem 0.75rem; border-radius: 6px; }
.nav-dropdown-item-active, .nav-dropdown-item-active:hover { background: rgba(var(--color-primary-rgb), 0.1); color: var(--color-primary); }
.gs-overlay { position: fixed; inset: 0; z-index: 1300; background: rgba(0, 0, 0, 0.35); }
.gs-container {
    position: fixed; top: 80px; left: 50%; transform: translateX(-50%); z-index: 1301;
    width: 560px; max-width: calc(100vw - 2rem);
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 12px; box-shadow: var(--shadowLg); overflow: hidden;
}
.gs-input-wrap { display: flex; align-items: center; padding: 0.75rem; border-bottom: 1px solid var(--color-border); }
.gs-icon { width: 18px; height: 18px; color: var(--color-text-secondary); margin-right: 0.75rem; flex-shrink: 0; }
.gs-input { flex: 1; border: 0; background: none; font-size: 0.875rem; color: var(--color-text); outline: none; }
.gs-clear { width: 20px; height: 20px; border: 0; background: none; cursor: pointer; color: var(--color-text-secondary); display: flex; align-items: center; justify-content: center; }
.gs-results { max-height: 300px; overflow-y: auto; padding: 0.25rem 0; }
.gs-hit {
    width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left;
    display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem;
}
.gs-hit:hover { background: var(--color-surface-hover); }
.gs-hit-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gs-hit-title { font-size: 0.875rem; font-weight: 500; color: var(--color-text); }
.gs-hit-desc { font-size: 0.75rem; color: var(--color-text-secondary); margin-top: 0.15rem; }
.gs-hit-type { font-size: 0.625rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.gs-empty { padding: 1.25rem; text-align: center; color: var(--color-text-muted); font-size: 0.875rem; }

.sidebar-bottom { padding: 0.25rem; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; }
.sidebar-profile {
    margin-top: 0.5rem; padding: 0.25rem; border: 0; background: transparent;
    cursor: pointer; border-radius: 10px; color: var(--color-text-secondary); width: 100%;
}
.sidebar-expanded .sidebar-profile { background: rgba(220, 38, 38, 0.05); margin: 0.5rem 0.75rem; width: calc(100% - 1.5rem); color: var(--color-error); }
.sidebar-expanded .sidebar-profile:hover { background: rgba(220, 38, 38, 0.1); }
.profile-main { display: flex; align-items: center; gap: 0.5rem; justify-content: center; width: 100%; }
.sidebar-expanded .profile-main { justify-content: flex-start; }
.profile-logout-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.logout-text { font-size: 0.9rem; font-weight: 600; white-space: nowrap; }

.tags-view-container {
    position: fixed; top: 0; z-index: 1000;
    left: var(--sidebar-collapsed);
    width: calc(100% - var(--sidebar-collapsed));
    height: var(--tab-bar-height);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    display: flex; align-items: center;
    padding: 0 15px; box-sizing: border-box;
    transition: left 0.3s ease, width 0.3s ease;
}
.app-layout.expanded .tags-view-container {
    left: var(--sidebar-expanded);
    width: calc(100% - var(--sidebar-expanded));
}
.hamburger-container {
    padding: 0 12px; height: 100%; border: 0; background: transparent;
    display: flex; align-items: center; cursor: pointer; color: var(--color-text-secondary);
}
.hamburger-container:hover { background: var(--color-surface-hover); color: var(--color-text); }
.tags-view-wrapper { flex: 1; display: flex; align-items: center; overflow: hidden; margin: 0 10px; height: 100%; min-width: 0; }
.tabs-inner-scroll { display: flex; gap: 5px; align-items: center; flex: 1; overflow: hidden; }
.tags-view-item {
    display: inline-flex; align-items: center; height: 32px; padding: 0 12px;
    border: 1px solid var(--color-border); border-radius: 3px;
    font-size: 13px; color: var(--color-text-secondary); background: transparent;
    cursor: pointer; white-space: nowrap; min-width: 120px; max-width: 200px;
}
.tags-view-item:hover:not(.active) { border-color: var(--color-primary); color: var(--color-text); background: var(--color-surface-hover); }
.tags-view-item.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.tags-view-item .tab-icon { width: 14px; height: 14px; margin-right: 8px; flex-shrink: 0; display: flex; }
.tags-view-item .tab-icon svg { width: 14px; height: 14px; }
.tags-view-item .title { flex: 1; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.tag-close-button {
    flex-shrink: 0; margin-left: 8px; width: 14px; height: 14px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.tag-close-button:hover { background: var(--color-surface-hover); color: var(--color-error); }
.actions-container { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.icon-action {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; border-radius: 4px; color: var(--color-text-secondary);
    border: 1px solid var(--color-border); background: transparent; position: relative; padding: 0;
}
.icon-action:hover { border-color: var(--color-primary); color: var(--color-text); background: var(--color-surface-hover); }
.help-action { font: inherit; }
.help-mark { font-size: 1rem; font-weight: 700; line-height: 1; }
.theme-switcher-ui { margin-left: 5px; }
.theme-icon-sun { display: none; }
html[data-theme="dark"] .theme-icon-moon,
html[data-theme="industrialDark"] .theme-icon-moon { display: none; }
html[data-theme="dark"] .theme-icon-sun,
html[data-theme="industrialDark"] .theme-icon-sun { display: block; }
.nav-pop { position: relative; }
.icon-action .red-dot {
    position: absolute; top: 6px; right: 6px; width: 6px; height: 6px;
    background: var(--color-error); border-radius: 50%; border: 1px solid var(--color-surface);
}
.notif-backdrop { position: fixed; inset: 0; z-index: 1190; }
.notif-popover {
    position: absolute; top: calc(100% + 8px); right: 0; width: 320px; z-index: 1200;
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-border); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); overflow: hidden; padding: 0;
}
.notif-popover .p-head {
    padding: 10px 15px; border-bottom: 1px solid var(--color-border);
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.notif-popover .p-head b { font-size: 14px; font-weight: 700; }
.notif-popover .mark {
    border: 0; background: transparent; padding: 0; cursor: pointer;
    font-size: 12px; color: var(--color-primary); font-family: inherit; white-space: nowrap;
}
.notif-popover .mark:hover { text-decoration: underline; }
.notif-popover .p-list { max-height: 300px; overflow-y: auto; }
.notif-popover .notif-row {
    padding: 12px 15px; border-bottom: 1px solid var(--color-border);
    display: flex; gap: 10px; align-items: flex-start;
}
.notif-popover .notif-row.unread { background: var(--color-primary-alpha); }
.notif-popover .txt { flex: 1; min-width: 0; }
.notif-popover .t { font-weight: 700; font-size: 13px; color: var(--color-text); }
.notif-popover .m { font-size: 12px; color: var(--color-text-secondary); margin-top: 3px; }
.notif-popover .notif-dismiss {
    border: 0; background: transparent; padding: 0; cursor: pointer;
    color: var(--color-text-muted); display: flex; flex-shrink: 0;
}
.notif-popover .notif-dismiss:hover { color: var(--color-error); }
.notif-popover .empty {
    padding: 20px; text-align: center; color: var(--color-text-muted); font-size: 13px;
}

.main-content {
    margin-left: var(--sidebar-collapsed);
    margin-top: var(--tab-bar-height);
    min-height: calc(100vh - var(--tab-bar-height));
    padding: 0.75rem 1.25rem 1.5rem;
    transition: margin-left 0.3s ease;
}
.main-content:has(.edit-active-tab),
.main-content:has(.edit-container-tab),
.main-content:has(.edit-location-tab),
.main-content:has(.new-reader-tab),
.main-content:has(.settings-tab),
.main-content:has(.guias-tab),
.main-content:has(.kits-tab) {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.app-layout.expanded .main-content { margin-left: var(--sidebar-expanded); }

.dlg-backdrop {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(10, 20, 16, 0.45);
    display: flex; align-items: center; justify-content: center;
}
.dlg {
    background: var(--color-surface); border-radius: 12px; padding: 1.5rem 1.6rem;
    width: min(420px, calc(100vw - 2rem)); box-shadow: var(--shadow-md);
}
.dlg h3 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.dlg p { margin: 0 0 1.25rem; color: var(--color-text-secondary); }
.dlg-actions { display: flex; justify-content: flex-end; gap: 0.6rem; }

.page-title { font-size: 1.35rem; font-weight: 750; margin: 0 0 0.2rem; }
.page-desc { color: var(--color-text-muted); font-size: 0.8rem; margin: 0 0 1.25rem; }
.tab-title { font-size: 1.5rem; font-weight: 600; margin: 0; }
.tab-subtitle { font-size: 0.875rem; color: var(--color-text-muted); margin: 0.25rem 0 0; }

.card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 10px; box-shadow: var(--shadow-sm);
}

.content-container { width: 100%; }
.data-table-wrapper { width: 100%; }
.table-container { width: 100%; overflow-x: auto; }
.data-table {
    width: 100%; border-collapse: collapse; border-spacing: 0;
    text-align: left; background: var(--color-surface);
}
.data-table th {
    background-color: var(--color-surface-variant);
    color: var(--color-text-muted);
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    padding: 0.375rem 0.5rem; font-size: 0.7rem;
    box-shadow: inset 0 -1px 0 var(--color-border);
    position: sticky; top: 0; z-index: 1; white-space: nowrap;
    height: 36px; cursor: pointer;
}
.data-table th:hover { background-color: var(--color-surface-hover); }
.data-table td {
    padding: 0.375rem 0.5rem; border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text-secondary); font-size: 0.813rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    height: 36px; vertical-align: middle;
}
.data-table tbody tr { height: 36px; transition: background-color 0.15s ease; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background-color: var(--color-surface-hover); }
.data-table tr.clickable { cursor: pointer; }
.data-table tr.sub td { color: var(--color-text-muted); font-size: 0.9rem; }
.empty-table-cell { text-align: center; }
.empty-table-centered { padding: 2rem 0; color: var(--color-text-muted); font-size: 1.1rem; text-align: center; }

.state-pill { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.st-preparing { background: rgba(197,160,40,0.18); color: #a38414; }
.st-ready { background: rgba(5,150,105,0.15); color: #059669; }
.st-open { background: rgba(220,38,38,0.1); color: #dc2626; }
.st-closed { background: var(--color-surface-hover); color: var(--color-text-muted); }

.btn-primary, .gnr-btn {
    background: var(--color-primary); color: #fff; border: 0;
}
.page-toolbar { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; margin: 1rem 0; }
.field {
    border: 1px solid var(--color-border); border-radius: 8px;
    padding: 8px 15px; height: 38px; background: var(--color-surface); color: var(--color-text);
    caret-color: var(--color-text); min-width: 12rem;
}
.hint { background: var(--color-primary-fade); color: var(--color-primary); padding: 0.6rem 0.8rem; border-radius: 8px; }
.error { color: var(--color-error); }
.muted { color: var(--color-text-muted); }
.check { display: flex; gap: 0.4rem; align-items: center; margin: 0.35rem 0; }
.gnr-row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin: 0.75rem 0; }
.gnr-link { color: var(--color-primary); background: none; border: 0; cursor: pointer; padding: 0; font-weight: 600; }
.gnr-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }

/* ===== Login (LoginForm.vue) ===== */
.login-wrapper { display: flex; min-height: 100vh; min-height: 100svh; background: var(--color-background); overflow: hidden; }
.login-side {
    flex: 0 0 clamp(400px, 44vw, 560px);
    padding: clamp(32px, 5vh, 64px) clamp(32px, 4vw, 72px);
    display: flex; flex-direction: column; justify-content: center;
    background: var(--color-background); border-right: 1px solid var(--color-border);
}
.login-form-container { width: 100%; max-width: 400px; margin: 0 auto; }
.brand-header { margin-bottom: 36px; text-align: center; }
.logo-wrap { width: min(340px, 92vw); height: 64px; margin: 0 auto; }
.logo-wrap img { width: 100%; height: 100%; object-fit: contain; }
.form-header { margin-bottom: 28px; }
.form-header h2 { font-size: 1.625rem; margin: 0 0 8px; }
.form-header p { font-size: 0.9375rem; color: var(--color-text-muted); margin: 0; }
.auth-label { display: block; font-weight: 500; font-size: 14px; margin: 0 0 8px; }
.auth-input {
    width: 100%; height: 54px; padding: 8px 15px; margin-bottom: 20px;
    border: 1px solid var(--color-border); border-radius: 8px;
    background: var(--color-surface); color: var(--color-text); caret-color: var(--color-text);
    font-size: 15px;
    box-shadow: 0 0 0 1px var(--color-border) inset;
}
.auth-input::placeholder { color: var(--color-textMuted); }
.auth-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary) inset;
}
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-text);
    caret-color: var(--color-text);
    box-shadow: 0 0 0 1000px var(--color-surface) inset;
}
.auth-password { position: relative; margin-bottom: 20px; }
.auth-password .auth-input { margin-bottom: 0; padding-right: 44px; }
.show-pwd {
    position: absolute; right: 6px; top: 0; height: 54px; width: 36px;
    display: flex; align-items: center; justify-content: center;
    border: 0; background: transparent; color: var(--color-text-muted);
    cursor: pointer; padding: 0;
}
.show-pwd:hover { color: var(--color-text); }
.show-pwd svg { width: 18px; height: 18px; display: block; }
.auth-extra { display: flex; justify-content: flex-end; margin: -8px 0 16px; }
.forgot-link {
    border: 0; background: none; padding: 0; cursor: pointer;
    color: var(--color-primary); font-weight: 600; font-size: 13px;
}
.forgot-link:hover { text-decoration: underline; }
.login-button {
    width: 100%; height: 48px; font-size: 16px; font-weight: 600;
    border-radius: 8px; background: var(--color-primary); color: #fff; border: 0; cursor: pointer;
}
.login-button.ghost {
    margin-top: 10px; background: transparent; color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}
.login-button:hover { filter: brightness(1.1); transform: translateY(-1px); }
.copyright { margin-top: 48px; text-align: center; font-size: 12px; color: var(--color-text-muted); opacity: 0.75; }
.gallery-side { flex: 1; position: relative; overflow: hidden; background: #004030; }
.gallery-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.gallery-image.active { opacity: 1; }
.gallery-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(7,18,16,.15) 0%, rgba(7,18,16,.05) 35%, rgba(7,18,16,.55) 70%, rgba(7,18,16,.88) 100%);
}
.gallery-caption { position: absolute; left: 0; right: 0; bottom: 72px; padding: 0 48px; z-index: 2; }
.gallery-caption h2 { color: #fff; margin: 0 0 10px; font-size: clamp(1.5rem, 2.5vw, 2rem); }
.caption-desc { color: rgba(240,253,244,.92); margin: 0; }
.caption-detail { color: rgba(187,247,208,.85); margin: 8px 0 0; font-size: 0.95rem; }
.gallery-dots { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 2; }
.gallery-dot { width: 10px; height: 10px; border-radius: 999px; border: 0; background: rgba(255,255,255,.35); cursor: pointer; padding: 0; }
.gallery-dot.active { width: 28px; background: rgba(255,255,255,.92); }
@media (max-width: 900px) {
    .login-wrapper { align-items: center; justify-content: center; padding: 24px 16px; background: linear-gradient(160deg, #003528, #004030 45%, #0a2820); }
    .login-side { flex: 1; max-width: 440px; border: 0; border-radius: 20px; padding: 40px 32px 32px; box-shadow: 0 24px 48px rgba(0,0,0,.18); }
    .gallery-side { display: none; }
}

#blazor-error-ui { display: none; }

/* ===== Vue listings / forms / buttons ===== */
.list-header, .actives-header, .kits-header, .containers-header, .locations-header, .guias-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap;
}
.tab-title { font-size: 1.5rem; font-weight: 600; color: var(--color-text); margin: 0; }
.tab-subtitle { font-size: 0.875rem; color: var(--color-text-muted); margin: 0.25rem 0 0; }
.header-actions, .header-right { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.action-buttons { display: flex; align-items: center; gap: 0.5rem; }
.search-bar { display: flex; align-items: center; }
.search-input-wrapper { position: relative; }
.search-input, .table-search-input, .nm-input, .form-control {
    padding: 0.5rem 2.5rem 0.5rem 0.75rem;
    border: 1px solid var(--color-border); border-radius: 0.375rem;
    font-size: 0.875rem; background: var(--color-surface); color: var(--color-text);
}
.search-input { width: 250px; }
.search-input:focus, .form-control:focus, .table-search-input:focus, .nm-input:focus, .category-select:focus {
    outline: none; border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2);
}
.search-icon { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; }
.search-icon svg { width: 1rem; height: 1rem; display: block; }
.category-select, .filter-state, .guia-type-filter, .per-page-select {
    padding: 0.5rem 0.75rem; border: 1px solid var(--color-border); border-radius: 0.375rem;
    font-size: 0.875rem; min-width: 160px; background: var(--color-background); color: var(--color-text);
}
.status-toggle {
    display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
    padding: 0.5rem 0.75rem; background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: 0.375rem;
}
.status-toggle:hover { background: var(--color-surface-hover); border-color: var(--color-primary); }
.toggle-label { font-size: 0.875rem; }

.app-button, .btn-primary, .btn-outline, .gnr-btn, .reset-pin-btn {
    padding: 0.4375rem 1rem; border-radius: 0.35rem; font-weight: 500; font-size: 0.8125rem;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    gap: 0.375rem; border: none; min-height: 2rem; text-decoration: none; line-height: 1.2;
    box-sizing: border-box; transition: all 0.2s ease; font-family: inherit;
}
.app-button.uniform-width { min-width: 6.75rem; }
.app-button.primary, .btn-primary, .gnr-btn, .reset-pin-btn { background: var(--color-primary); color: #fff; }
.app-button.outline, .btn-outline, .gnr-btn.ghost {
    background: transparent; border: 1px solid var(--color-border); color: var(--color-text);
}
.app-button.danger { background: var(--color-error, #ef4444); color: #fff; }
.app-button.outline.danger { background: transparent; border: 1px solid var(--color-error, #ef4444); color: var(--color-error, #ef4444); }
.app-button.text { background: transparent; color: var(--color-primary); padding: 0.4375rem 1rem; min-height: 2rem; }
.app-button:hover, .btn-primary:hover, .gnr-btn:hover, .reset-pin-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.app-button.outline:hover, .gnr-btn.ghost:hover { background: var(--color-surface-hover); }
.app-button.danger:hover { background: var(--color-error-dark, #dc2626); }
.app-button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.button-icon, .app-button svg { width: 1rem; height: 1rem; }

.view-toggle {
    display: inline-flex; border: 1px solid var(--color-border); border-radius: 8px;
    overflow: hidden; background: var(--color-surface);
}
.vt-btn, .mode-tab-btn {
    border: 0; background: transparent; padding: 6px 14px;
    font-size: 13px; font-weight: 700; color: var(--color-text-muted); cursor: pointer;
}
.vt-btn.active, .mode-tab-btn.active { background: var(--color-primary); color: #fff; }
.kits-title-row { display: flex; align-items: center; gap: 1rem; }
.kits-filter-bar {
    display: flex; align-items: stretch; height: 38px; width: min(420px, 50vw);
    border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; background: var(--color-background);
}
.kits-filter-bar .filter-state { border: 0; border-right: 1px solid var(--color-border); border-radius: 0; max-width: 180px; }
.kits-filter-bar .filter-input { flex: 1; border: 0; padding: 0 0.75rem; background: transparent; min-width: 0; }
.create-unico-btn, .custody-monitor-btn {
    display: inline-flex; align-items: center; gap: 0.4rem; height: 38px; padding: 0 0.9rem;
    border-radius: 8px; font-size: 0.8125rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.create-unico-btn { border: 0; background: var(--color-primary); color: #fff; }
.custody-monitor-btn { border: 1px solid var(--color-border); background: var(--color-background); color: var(--color-text-secondary); }

.unico-chip, .disc-chip, .pending-chip, .guia-kind-chip {
    display: inline-flex; align-items: center; padding: 0.1rem 0.45rem; border-radius: 999px;
    font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
}
.unico-chip { color: #0e6251; background: color-mix(in srgb, #0e6251 12%, #fff); }
.disc-chip { color: #92400e; background: rgba(217, 119, 6, 0.16); }
.pending-chip { color: #991b1b; background: rgba(220, 38, 38, 0.12); }
.pending-chip.zero-pending { color: #065f46; background: rgba(5, 150, 105, 0.14); }
.status-pill, .state-pill {
    display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700;
}
.st-preparing { background: rgba(197,160,40,0.18); color: #a38414; }
.st-ready { background: rgba(5,150,105,0.15); color: #059669; }
.st-open { background: rgba(220,38,38,0.1); color: #dc2626; }
.st-closed, .status-closed { background: var(--color-surface-hover); color: var(--color-text-muted); }
.status-indicator {
    display: flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; border-radius: 50%; margin: 0 auto;
}
.status-green { background: rgba(5, 150, 105, 0.15); color: #059669; }
.status-red { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

.tab-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; gap: 1rem; }
.form-section {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 0.5rem; padding: 1.25rem; margin-bottom: 1rem;
}
.section-title {
    font-size: 1rem; font-weight: 600; margin: 0 0 1rem; padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}
.form-row { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.form-group { flex: 1; min-width: 0; }
.form-group label { display: block; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--color-text-secondary); }
.required-indicator { color: var(--color-error); }
.form-group input, .form-group select, .form-group textarea, .form-control {
    width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--color-border);
    border-radius: 0.375rem; background: var(--color-surface); color: var(--color-text); font-size: 0.9rem;
}
.form-sub-tabs { display: flex; gap: 0.25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--color-border); }
.sub-tab-btn {
    display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.65rem 1rem;
    border: 0; background: transparent; color: var(--color-text-muted); font-weight: 600; cursor: pointer;
}
.sub-tab-btn.active { color: var(--color-primary); box-shadow: inset 0 -2px 0 var(--color-primary); }

.modal-overlay {
    position: fixed; inset: 0; z-index: 1800; background: rgba(10, 20, 16, 0.45);
    display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.modal-container {
    background: var(--color-surface); border-radius: 12px; width: min(720px, 100%);
    max-height: calc(100vh - 3rem); overflow: auto; box-shadow: var(--shadow-md);
}
.modal-header, .modal-footer { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.1rem 1.25rem; }
.modal-footer { border-top: 1px solid var(--color-border); justify-content: flex-end; }
.modal-content { padding: 0 1.25rem 1.25rem; }
.modal-title { margin: 0; font-size: 1.15rem; }
.modal-subtitle { color: var(--color-text-muted); font-size: 0.8rem; margin-top: 0.25rem; }
.close-btn { border: 0; background: transparent; cursor: pointer; font-size: 1.1rem; color: var(--color-text-muted); }
.modal-tabs { display: flex; gap: 0.25rem; padding: 0 1.25rem; border-bottom: 1px solid var(--color-border); }
.modal-tab { border: 0; background: transparent; padding: 0.7rem 0.9rem; font-weight: 600; color: var(--color-text-muted); cursor: pointer; }
.modal-tab.active { color: var(--color-primary); box-shadow: inset 0 -2px 0 var(--color-primary); }
.tab-count { font-size: 0.75rem; color: var(--color-text-muted); }

.militar-search-card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: 1.25rem;
}
.search-mode-tabs { display: flex; gap: 0.4rem; margin-bottom: 0.85rem; }
.search-label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--color-text-secondary); }
.search-input-group { display: flex; gap: 0.5rem; align-items: center; }
.nm-input-shell { position: relative; flex: 1; }
.nm-input { width: 100%; padding: 0.65rem 2rem 0.65rem 0.85rem; }
.nm-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: none; cursor: pointer; }
.btn-search-nm { background: var(--color-primary); color: #fff; border: 0; border-radius: 8px; padding: 0.65rem 1rem; font-weight: 700; cursor: pointer; }
.militar-suggestions { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: #fff; border: 1px solid var(--color-border); border-radius: 8px; margin: 0; padding: 0.25rem; list-style: none; max-height: 240px; overflow: auto; }
.sug-item { padding: 0.5rem 0.7rem; border-radius: 6px; cursor: pointer; display: flex; justify-content: space-between; gap: 0.75rem; }
.sug-item.active, .sug-item:hover { background: var(--color-surface-hover); }
.sug-name { font-weight: 600; }
.sug-meta, .sug-empty { font-size: 0.8rem; color: var(--color-text-muted); }
.militar-result-box { margin-top: 0.85rem; padding: 0.8rem 0.9rem; border-radius: 8px; border: 1px solid var(--color-border); }
.militar-result-box.alert { border-color: #dc2626; background: rgba(220,38,38,0.06); }
.militar-result-box.clean { border-color: #059669; background: rgba(5,150,105,0.08); }
.badge-alert { color: #991b1b; font-weight: 800; font-size: 0.78rem; }
.badge-clean { color: #065f46; font-weight: 800; font-size: 0.78rem; }
.btn-details { margin-top: 0.6rem; border: 0; background: var(--color-primary); color: #fff; border-radius: 6px; padding: 0.4rem 0.75rem; cursor: pointer; }
.guias-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.search-filter-wrapper { display: flex; gap: 0.5rem; align-items: center; }
.table-search-input { width: min(420px, 50vw); padding-right: 0.75rem; }
.guias-pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 0.85rem; gap: 1rem; flex-wrap: wrap; }
.pagination-button { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 6px; padding: 0.35rem 0.7rem; cursor: pointer; }
.pagination-button:disabled { opacity: 0.4; cursor: not-allowed; }

.create-results, .create-selected { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.create-results { max-height: 220px; overflow-y: auto; }
.create-result-btn { width: 100%; text-align: left; border: 1px solid var(--color-border); background: var(--color-background); border-radius: 8px; padding: 0.55rem 0.75rem; cursor: pointer; }
.create-result-btn:hover { border-color: var(--color-primary); }
.create-result-name { display: block; font-weight: 600; }
.create-result-meta { display: block; font-size: 0.75rem; color: var(--color-text-muted); }
.create-selected-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; border: 1px solid var(--color-border); border-radius: 8px; padding: 0.55rem 0.75rem; }
.create-qty { width: 4rem; padding: 0.3rem 0.4rem; border: 1px solid var(--color-border); border-radius: 6px; }


@media (max-width: 768px) {
    .form-row { flex-direction: column; }
    .search-input, .table-search-input { width: 100%; }
}

/* ===== Dashboard (Vue DashboardTab) ===== */
.dashboard-tab { box-sizing: border-box; width: 100%; min-width: 0; padding: 0.75rem 1.25rem 1.5rem; background: var(--color-background); }
.dashboard-tab .dash-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-bottom: 0.85rem; }
.dashboard-tab .dash-head-title h1 { margin: 0; color: var(--color-text); font-size: 1.35rem; font-weight: 750; letter-spacing: -0.02em; line-height: 1.2; }
.dashboard-tab .dash-head-title p { margin: 0.15rem 0 0; color: var(--color-text-muted); font-size: 0.8rem; }
.dashboard-tab .dash-head-actions { display: flex; align-items: center; gap: 0.5rem; }
.dashboard-tab .refresh-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.7rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text-secondary); font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.dashboard-tab .refresh-btn:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.dashboard-tab .refresh-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.dashboard-tab .refresh-btn svg { width: 14px; height: 14px; }
.dashboard-tab .spinning { animation: dash-spin 1s linear infinite; }
@keyframes dash-spin { to { transform: rotate(360deg); } }
.dashboard-tab .datetime-chip { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.8rem; border-radius: 10px; background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); }
.dashboard-tab .datetime-chip svg { width: 18px; height: 18px; opacity: 0.85; }
.dashboard-tab .datetime-chip span { display: grid; line-height: 1.15; }
.dashboard-tab .datetime-chip strong { font-size: 1.05rem; font-weight: 750; letter-spacing: -0.02em; }
.dashboard-tab .datetime-chip small { font-size: 0.68rem; opacity: 0.9; }
.dashboard-tab .dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.7rem; align-items: stretch; width: 100%; min-width: 0; }
.dashboard-tab .span-3 { grid-column: span 3; }
.dashboard-tab .span-4 { grid-column: span 4; }
.dashboard-tab .span-8 { grid-column: span 8; }
.dashboard-tab .card { min-width: 0; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); box-shadow: var(--shadow-sm); padding: 0; }
.dashboard-tab .kpi-card { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.85rem; color: inherit; font: inherit; text-align: left; cursor: pointer; width: 100%; background: var(--color-surface); }
.dashboard-tab .kpi-card:hover { border-color: var(--color-primary); transform: translateY(-1px); }
.dashboard-tab .kpi-text { display: grid; gap: 0.08rem; min-width: 0; }
.dashboard-tab .kpi-text small { color: var(--color-text-muted); font-size: 0.7rem; font-weight: 650; }
.dashboard-tab .kpi-text strong { color: var(--color-text); font-size: 1.5rem; font-weight: 750; letter-spacing: -0.04em; line-height: 1.05; }
.dashboard-tab .kpi-text em { color: var(--color-text-muted); font-size: 0.68rem; font-style: normal; line-height: 1.3; }
.dashboard-tab .ring, .dashboard-tab .donut { flex-shrink: 0; width: 52px; height: 52px; }
.dashboard-tab .donut { width: 92px; height: 92px; }
.dashboard-tab .ring-track { fill: none; stroke: var(--color-surface-variant); stroke-width: 5; }
.dashboard-tab .ring-arc { fill: none; stroke-width: 5; transform: rotate(-90deg); transform-origin: 21px 21px; }
.dashboard-tab .donut text { fill: var(--color-text); font-size: 0.55rem; font-weight: 750; text-anchor: middle; }
.dashboard-tab .donut .donut-sub { fill: var(--color-text-muted); font-size: 0.28rem; font-weight: 600; }
.dashboard-tab .panel { display: flex; flex-direction: column; gap: 0.6rem; min-height: 0; padding: 0.75rem 0.85rem; }
.dashboard-tab .panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.dashboard-tab .panel h2 { margin: 0; color: var(--color-text); font-size: 0.92rem; font-weight: 700; }
.dashboard-tab .panel header p { margin: 0.1rem 0 0; color: var(--color-text-muted); font-size: 0.72rem; }
.dashboard-tab .panel-link { flex-shrink: 0; padding: 0; border: 0; background: none; color: var(--color-primary); font: inherit; font-size: 0.73rem; font-weight: 650; white-space: nowrap; cursor: pointer; }
.dashboard-tab .panel-link:hover { text-decoration: underline; }
.dashboard-tab .trend-summary { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem 1.5rem; }
.dashboard-tab .trend-summary > div { display: grid; gap: 0.05rem; }
.dashboard-tab .trend-summary small { color: var(--color-text-muted); font-size: 0.68rem; font-weight: 650; }
.dashboard-tab .trend-summary strong { font-size: 1.4rem; font-weight: 750; letter-spacing: -0.04em; line-height: 1.05; }
.dashboard-tab .trend-summary em { font-size: 0.7rem; font-style: normal; }
.dashboard-tab .trend-summary em.up { color: var(--color-success); }
.dashboard-tab .trend-summary em.down { color: var(--color-error); }
.dashboard-tab .trend-summary em.muted { color: var(--color-text-muted); }
.dashboard-tab .trend-legend { display: flex; gap: 0.75rem; margin: 0.2rem 0 0 auto; padding: 0; list-style: none; color: var(--color-text-muted); font-size: 0.7rem; }
.dashboard-tab .trend-legend li { display: inline-flex; align-items: center; gap: 0.3rem; }
.dashboard-tab .trend-legend i { width: 8px; height: 8px; border-radius: 50%; }
.dashboard-tab .trend-wrap { position: relative; min-width: 0; }
.dashboard-tab .trend-chart { display: block; width: 100%; height: clamp(140px, 17vh, 210px); }
.dashboard-tab .trend-grid { stroke: var(--color-border); stroke-width: 1; }
.dashboard-tab .trend-line { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dashboard-tab .trend-line.out { stroke: var(--color-primary); }
.dashboard-tab .trend-line.in { stroke: var(--color-info); stroke-dasharray: 5 4; }
.dashboard-tab .trend-dot { fill: var(--color-surface); stroke-width: 2; }
.dashboard-tab .trend-dot.out { stroke: var(--color-primary); }
.dashboard-tab .trend-dot.in { stroke: var(--color-info); }
.dashboard-tab .trend-labels { display: flex; justify-content: space-between; margin: 0.15rem 0 0; padding: 0 0.15rem; list-style: none; color: var(--color-text-muted); font-size: 0.68rem; text-transform: capitalize; }
.dashboard-tab .chart-empty { position: absolute; inset: 40% 10% auto; margin: 0; color: var(--color-text-muted); font-size: 0.75rem; text-align: center; }
.dashboard-tab .chart-block { display: flex; align-items: center; gap: 0.75rem; }
.dashboard-tab .legend { display: grid; flex: 1; gap: 0.25rem; min-width: 0; margin: 0; padding: 0; list-style: none; }
.dashboard-tab .legend li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 0.4rem; }
.dashboard-tab .legend i { width: 8px; height: 8px; border-radius: 50%; }
.dashboard-tab .legend span { overflow: hidden; color: var(--color-text-muted); font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-tab .legend strong { font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.dashboard-tab .record-list { display: grid; align-content: start; gap: 0.28rem; margin: 0; padding: 0; list-style: none; }
.dashboard-tab .record-btn { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; padding: 0.4rem 0.5rem; border: 1px solid var(--color-border); border-radius: 7px; background: var(--color-surface-light); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.dashboard-tab .record-btn.static { cursor: default; }
.dashboard-tab .record-btn:not(.static):hover { border-color: var(--color-primary); }
.dashboard-tab .record-main { display: grid; gap: 0.05rem; min-width: 0; }
.dashboard-tab .record-main strong { overflow: hidden; font-size: 0.79rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-tab .record-main small { overflow: hidden; color: var(--color-text-muted); font-size: 0.69rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-tab .rank-list { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.dashboard-tab .rank-list li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) minmax(6rem, 0.85fr); align-items: center; gap: 0.5rem; }
.dashboard-tab .rank { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border-radius: 999px; background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)); color: var(--color-primary); font-size: 0.7rem; font-weight: 700; }
.dashboard-tab .rank-main { display: grid; gap: 0.05rem; min-width: 0; }
.dashboard-tab .rank-main strong { overflow: hidden; font-size: 0.79rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-tab .rank-main small { overflow: hidden; color: var(--color-text-muted); font-size: 0.69rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-tab .rank-bar { display: grid; gap: 0.2rem; justify-items: end; }
.dashboard-tab .rank-bar small { color: var(--color-text-muted); font-size: 0.68rem; font-weight: 600; white-space: nowrap; }
.dashboard-tab .stock-list { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.dashboard-tab .stock-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto; align-items: center; gap: 0.5rem; font-size: 0.75rem; }
.dashboard-tab .stock-list li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-tab .stock-list strong { font-variant-numeric: tabular-nums; }
.dashboard-tab .bar-track { display: block; width: 100%; height: 7px; overflow: hidden; border-radius: 999px; background: var(--color-surface-variant); }
.dashboard-tab .bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--color-primary); }
.dashboard-tab .chip { display: inline-flex; flex-shrink: 0; align-items: center; padding: 0.12rem 0.45rem; border-radius: 999px; background: var(--color-surface-variant); color: var(--color-text-muted); font-size: 0.65rem; font-weight: 700; }
.dashboard-tab .chip.open { background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)); color: var(--color-primary); }
.dashboard-tab .chip.ready, .dashboard-tab .chip.out { background: color-mix(in srgb, var(--color-info) 16%, var(--color-surface)); color: var(--color-info); }
.dashboard-tab .chip.preparing { background: color-mix(in srgb, var(--color-warning) 18%, var(--color-surface)); color: var(--color-warning); }
.dashboard-tab .chip.missing { background: color-mix(in srgb, var(--color-error) 14%, var(--color-surface)); color: var(--color-error); }
.dashboard-tab .empty-copy { margin: 0.4rem 0; color: var(--color-text-muted); font-size: 0.76rem; }
.dashboard-tab .empty-ok { display: grid; place-items: center; gap: 0.4rem; padding: 1.2rem 0.5rem; text-align: center; }
.dashboard-tab .empty-ok svg { width: 34px; height: 34px; color: var(--color-success); opacity: 0.55; }
.dashboard-tab .empty-ok p { margin: 0; color: var(--color-text-muted); font-size: 0.76rem; }
@media (max-width: 1280px) {
    .dashboard-tab .span-3 { grid-column: span 6; }
    .dashboard-tab .span-8 { grid-column: span 12; }
    .dashboard-tab .span-4 { grid-column: span 6; }
    .dashboard-tab .widget-frame.mode-grid.kind-wide { grid-column: span 12; }
    .dashboard-tab .widget-frame.mode-grid.kind-kits,
    .dashboard-tab .widget-frame.mode-grid.kind-panel { grid-column: span 6; }
}
@media (max-width: 820px) {
    .dashboard-tab { padding: 0.75rem 0.85rem 1.25rem; }
    .dashboard-tab .dash-grid > * { grid-column: span 12 !important; }
    .dashboard-tab .dash-head-actions { width: 100%; justify-content: space-between; flex-wrap: wrap; }
}

.dashboard-tab .layout-mode {
    display: inline-flex; padding: 0.15rem; border: 1px solid var(--color-border);
    border-radius: 8px; background: var(--color-background);
}
.dashboard-tab .layout-mode button {
    padding: 0.28rem 0.65rem; border: 0; border-radius: 6px; background: transparent;
    color: var(--color-text-muted); font: inherit; font-size: 0.78rem; font-weight: 650; cursor: pointer;
}
.dashboard-tab .layout-mode button.active {
    background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm);
}
.dashboard-tab .widgets-btn svg { width: 14px; height: 14px; }
.dashboard-tab .widget-board { width: 100%; min-width: 0; }
.dashboard-tab .widget-board.mode-grid {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.7rem; align-items: stretch;
}
.dashboard-tab .widget-board.is-sorting { cursor: grabbing; }
.dashboard-tab .widget-board.mode-free { position: relative; min-height: 560px; }
.dashboard-tab .widget-frame {
    display: flex; flex-direction: column; min-width: 0; min-height: 0;
}
.dashboard-tab .widget-frame.mode-grid { cursor: grab; }
.dashboard-tab .widget-frame.mode-grid.sorting { opacity: 0.28; pointer-events: none; }
.dashboard-tab .widget-frame.mode-grid.kind-kpi { grid-column: span 3; }
.dashboard-tab .widget-frame.mode-grid.kind-wide { grid-column: span 8; }
.dashboard-tab .widget-frame.mode-grid.kind-kits,
.dashboard-tab .widget-frame.mode-grid.kind-panel { grid-column: span 4; }
.dashboard-tab .widget-frame.mode-free { position: absolute; cursor: grab; }
.dashboard-tab .widget-frame.active { cursor: grabbing; z-index: 80 !important; }
.dashboard-tab .widget-body { display: flex; flex: 1; min-width: 0; min-height: 0; flex-direction: column; }
.dashboard-tab .mode-free .widget-body { overflow: hidden; }
.dashboard-tab .mode-free .widget-body .kpi-card,
.dashboard-tab .mode-free .widget-body .panel {
    flex: 1; min-width: 0; min-height: 0; height: 100%; overflow: auto;
}
.dashboard-tab .mode-grid .widget-body .kpi-card,
.dashboard-tab .mode-grid .widget-body .panel { height: 100%; }
.dashboard-widget-ghost {
    position: fixed; z-index: 2000; margin: 0; pointer-events: none; opacity: 0.92;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.28)); transform: scale(1.02);
}
.dashboard-tab .resize-handle {
    position: absolute; z-index: 2; opacity: 0;
    background: color-mix(in srgb, var(--color-primary) 70%, white);
    border: 1px solid color-mix(in srgb, var(--color-primary) 50%, var(--color-border));
    border-radius: 2px;
}
.dashboard-tab .widget-frame:hover .resize-handle,
.dashboard-tab .widget-frame.active .resize-handle { opacity: 1; }
.dashboard-tab .handle-n, .dashboard-tab .handle-s { left: 18px; right: 18px; height: 6px; }
.dashboard-tab .handle-e, .dashboard-tab .handle-w { top: 18px; bottom: 18px; width: 6px; }
.dashboard-tab .handle-n { top: -3px; cursor: ns-resize; }
.dashboard-tab .handle-s { bottom: -3px; cursor: ns-resize; }
.dashboard-tab .handle-e { right: -3px; cursor: ew-resize; }
.dashboard-tab .handle-w { left: -3px; cursor: ew-resize; }
.dashboard-tab .handle-ne, .dashboard-tab .handle-nw, .dashboard-tab .handle-se, .dashboard-tab .handle-sw {
    width: 12px; height: 12px; border-radius: 3px;
}
.dashboard-tab .handle-ne { top: -5px; right: -5px; cursor: nesw-resize; }
.dashboard-tab .handle-nw { top: -5px; left: -5px; cursor: nwse-resize; }
.dashboard-tab .handle-se { bottom: -5px; right: -5px; cursor: se-resize; }
.dashboard-tab .handle-sw { bottom: -5px; left: -5px; cursor: sw-resize; }
.widgets-modal { max-width: 480px; }
.widgets-modal .mode-picker {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 0 1.25rem 0.25rem;
}
.widgets-modal .mode-option {
    display: grid; gap: 0.2rem; padding: 0.7rem 0.75rem; border: 1px solid var(--color-border);
    border-radius: 10px; background: var(--color-background); color: inherit; font: inherit;
    text-align: left; cursor: pointer;
}
.widgets-modal .mode-option strong { font-size: 0.86rem; }
.widgets-modal .mode-option small { color: var(--color-text-muted); font-size: 0.72rem; line-height: 1.35; }
.widgets-modal .mode-option.active {
    border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
}
.widgets-modal .widget-list { display: grid; gap: 0.45rem; margin: 0; padding: 1rem 1.25rem; list-style: none; }
.widgets-modal .widget-row {
    display: flex; align-items: center; justify-content: space-between; gap: 0.85rem;
    padding: 0.7rem 0.8rem; border: 1px solid var(--color-border); border-radius: 10px;
    background: var(--color-background); cursor: pointer;
}
.widgets-modal .widget-row span:first-child { display: grid; gap: 0.12rem; min-width: 0; }
.widgets-modal .widget-row strong { font-size: 0.88rem; }
.widgets-modal .widget-row small { color: var(--color-text-muted); font-size: 0.74rem; }
.widgets-modal .widget-row input { position: absolute; opacity: 0; pointer-events: none; }
.widgets-modal .switch {
    position: relative; flex-shrink: 0; width: 40px; height: 24px; border-radius: 999px;
    background: var(--color-surface-variant); border: 1px solid var(--color-border);
}
.widgets-modal .switch::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
    border-radius: 50%; background: var(--color-text-muted);
    transition: transform 0.15s ease, background 0.15s ease;
}
.widgets-modal .widget-row:has(input:checked) { border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); }
.widgets-modal .widget-row:has(input:checked) .switch { background: var(--color-primary); border-color: var(--color-primary); }
.widgets-modal .widget-row:has(input:checked) .switch::after { transform: translateX(16px); background: #fff; }

@media (max-width: 1100px) {
    .dashboard-tab .widget-frame.mode-grid.kind-panel { grid-column: span 6; }
}
@media (max-width: 980px) {
    .dashboard-tab .widget-frame.mode-grid.kind-kpi { grid-column: span 6; }
}
@media (max-width: 720px) {
    .dashboard-tab .widget-frame,
    .dashboard-tab .widget-frame.mode-grid.kind-kpi,
    .dashboard-tab .widget-frame.mode-grid.kind-wide,
    .dashboard-tab .widget-frame.mode-grid.kind-kits,
    .dashboard-tab .widget-frame.mode-grid.kind-panel {
        position: relative; left: auto !important; top: auto !important;
        width: 100% !important; height: auto !important; min-height: 0;
        cursor: default; grid-column: 1 / -1;
    }
    .dashboard-tab .resize-handle { display: none; }
    .dashboard-tab .widget-body .kpi-card,
    .dashboard-tab .widget-body .panel { overflow: visible; height: auto; }
}

/* ===== EditActiveTab (Vue) ===== */
.edit-active-tab {
    padding: 1rem 1.25rem;
    height: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.edit-active-tab .tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    gap: 1rem;
    transition: all 0.3s ease;
}
.edit-active-tab .tab-header.banner-mode {
    background: var(--color-surface);
    padding: 0.65rem 1.25rem;
    margin: -1rem -1.25rem 0.75rem -1.25rem;
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadowMd);
    align-items: center;
}
.edit-active-tab .left-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}
.edit-active-tab .banner-mode .left-header {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
.edit-active-tab .details-title-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    min-width: 0;
}
.edit-active-tab .details-title-row .tab-title { min-width: 0; }
.edit-active-tab .header-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.edit-active-tab .tab-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.edit-active-tab .banner-mode .tab-title { display: none; }
.edit-active-tab .active-info-line {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex: 1;
    flex-wrap: wrap;
}
.edit-active-tab .info-item { display: flex; flex-direction: column; gap: 0.25rem; }
.edit-active-tab .info-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--color-textMuted);
    font-weight: 800;
    letter-spacing: 0.1em;
}
.edit-active-tab .info-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.edit-active-tab .info-value.highlight-blue { color: var(--color-primary); }
.edit-active-tab .active-form { display: flex; flex-direction: column; gap: 1.15rem; }
.edit-active-tab .tab-content-with-side {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.edit-active-tab .tab-container {
    flex: 1;
    background-color: var(--color-surface);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-sm);
    padding: 1.15rem 1.25rem;
    overflow: auto;
}
.edit-active-tab .tab-navigation {
    display: flex;
    gap: 0.35rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.75rem;
    overflow-x: auto;
    padding: 0 0.25rem;
}
.edit-active-tab .nav-item {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 0.75rem;
    font-weight: 500;
    color: var(--color-textSecondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}
.edit-active-tab .nav-item:hover {
    color: var(--color-primary);
    background-color: var(--color-surface-hover);
}
.edit-active-tab .nav-item.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}
.edit-active-tab .nav-icon { width: 1.1em; height: 1.1em; flex-shrink: 0; }
.edit-active-tab .attachment-count {
    display: inline-block;
    min-width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    border-radius: 9999px;
    background-color: var(--color-primary);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    margin-left: 0.25rem;
    padding: 0 0.35rem;
}
.edit-active-tab .app-button.secondary {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}
.edit-active-tab .app-button.uniform-width { min-width: 6.75rem; }
.edit-active-tab .icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.edit-active-tab .icon-wrapper svg,
.edit-active-tab .cancel-button .button-icon { width: 1rem; height: 1rem; display: block; }
.edit-active-tab .cancel-button { min-width: fit-content; }

.edit-active-tab .toggle-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    background-color: var(--color-error);
    border: 1px solid var(--color-error);
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.9rem;
    font-weight: 400;
    color: white;
    outline: none;
    user-select: none;
}
.edit-active-tab .toggle-button.active {
    background: var(--color-success);
    border-color: var(--color-success);
    color: white;
}
.edit-active-tab .toggle-button:hover {
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.edit-active-tab .toggle-slider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 1.5rem;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 1rem;
}
.edit-active-tab .toggle-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    background-color: white;
    color: var(--color-error);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    left: 0.125rem;
    font-size: 0.7rem;
    font-weight: 800;
}
.edit-active-tab .toggle-button.active .toggle-icon {
    left: calc(100% - 1.375rem);
    color: var(--color-success);
}
.edit-active-tab .toggle-button .toggle-label {
    font-weight: 600;
    letter-spacing: 0.025em;
}

.edit-active-tab .form-section {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 1.25rem;
    margin-bottom: 0;
}
.edit-active-tab .section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}
.edit-active-tab .form-row { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.edit-active-tab .form-group { flex: 1; min-width: 0; margin-bottom: 0; }
.edit-active-tab .form-group label,
.edit-active-tab .input-label,
.edit-active-tab .due-date-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-textSecondary);
}
.edit-active-tab .form-group input,
.edit-active-tab .form-group select,
.edit-active-tab .form-group textarea,
.edit-active-tab .form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: 0.9rem;
}
.edit-active-tab .form-group input:focus,
.edit-active-tab .form-group select:focus,
.edit-active-tab .form-group textarea:focus,
.edit-active-tab .form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.1);
}
.edit-active-tab .form-group textarea { resize: vertical; min-height: 100px; }
.edit-active-tab .required-indicator { color: var(--color-error); margin-left: 0.25rem; }

.edit-active-tab .counter-section {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 0;
    padding: 1.25rem 1.5rem;
    background: var(--color-surface-light);
    border-radius: 0.75rem;
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04);
}
.edit-active-tab .counter-checkbox-group { display: flex; align-items: center; gap: 0.75rem; }
.edit-active-tab .counter-checkbox {
    width: 1.25em;
    height: 1.25em;
    accent-color: var(--color-primary);
}
.edit-active-tab .counter-label { font-weight: 600; color: var(--color-text); font-size: 1.05em; }
.edit-active-tab .counter-fields { display: flex; gap: 1.5rem; align-items: center; flex: 1; }
.edit-active-tab .counter-input { min-width: 120px; max-width: 180px; }

.edit-active-tab .rfid-management-layout { display: flex; flex-direction: column; gap: 2rem; }
.edit-active-tab .tags-dual-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    width: 100%;
    min-width: 0;
}
.edit-active-tab .tag-list-container {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.edit-active-tab .tag-list-container.full-width { grid-column: span 2; }
.edit-active-tab .tag-list-container.full-width .tag-items {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: auto;
    max-height: none;
    overflow: hidden;
    padding: 1rem;
}
.edit-active-tab .tag-list-container .list-header {
    display: block;
    background: var(--color-background-soft);
    padding: 0.75rem 1rem;
    margin: 0;
    font-weight: 700;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--color-border);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.edit-active-tab .tag-items {
    padding: 1rem;
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.edit-active-tab .empty-list-msg {
    color: var(--color-textSecondary);
    font-size: 0.85rem;
    text-align: center;
    margin-top: 2rem;
    font-style: italic;
}
.edit-active-tab .tag-item-visual {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    color: inherit;
    font: inherit;
    text-align: left;
}
.edit-active-tab .tag-item-visual:not(.read-only):hover {
    border-color: var(--color-primary);
    transform: translateX(4px);
    background: rgba(var(--color-primary-rgb), 0.02);
}
.edit-active-tab .tag-item-visual.associated {
    background: rgba(var(--color-primary-rgb), 0.05);
    border-color: var(--color-primary);
}
.edit-active-tab .tag-item-visual.read-only {
    padding: 0.35rem 0.875rem;
    border-radius: 999px;
    background: var(--color-background-soft);
    border-color: var(--color-border);
    cursor: default;
    width: auto;
}
.edit-active-tab .tag-icon { color: var(--color-primary); display: flex; }
.edit-active-tab .tag-icon svg { width: 16px; height: 16px; }
.edit-active-tab .tag-label {
    font-size: 0.875rem;
    font-weight: 500;
    font-family: monospace;
    flex: 1;
}
.edit-active-tab .add-hint,
.edit-active-tab .remove-hint {
    font-size: 1.2rem;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.2s;
}
.edit-active-tab .tag-item-visual:not(.read-only):hover .add-hint,
.edit-active-tab .tag-item-visual:not(.read-only):hover .remove-hint { opacity: 1; }
.edit-active-tab .add-hint { color: #10b981; }
.edit-active-tab .remove-hint { color: #ef4444; }

.edit-active-tab .attachments-tab { padding: 0.5rem 0; }
.edit-active-tab .attachment-uploader { margin-top: 0; }
.edit-active-tab .upload-card {
    background: var(--color-surface);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-sm);
    padding: 1.5rem 2rem 1.2rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.edit-active-tab .upload-btn {
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    font-weight: 500;
}
.edit-active-tab .upload-hint {
    display: block;
    color: var(--color-textSecondary);
    font-size: 0.95em;
    opacity: 0.85;
}
.edit-active-tab .file-row {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 1.2rem;
}
.edit-active-tab .due-date-group {
    display: flex;
    flex-direction: column;
    min-width: 120px;
    max-width: 180px;
}
.edit-active-tab .file-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    background: var(--color-background);
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border);
    width: 85%;
}
.edit-active-tab .file-label:hover { border: 1.5px solid var(--color-primary); }
.edit-active-tab .file-input { display: none; }
.edit-active-tab .file-label-text { color: var(--color-textSecondary); font-weight: 500; }
.edit-active-tab .file-icon-label { font-size: 1.5em; color: var(--color-primary); }
.edit-active-tab .styled-input {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    padding: 0.45rem 0.9rem;
}
.edit-active-tab .upload-actions { display: flex; gap: 0.7rem; align-items: stretch; height: 2.5rem; }
.edit-active-tab .upload-actions button {
    height: 100%;
    display: flex;
    align-items: center;
}
.edit-active-tab .outlined-cancel {
    background: none;
    color: var(--color-error);
    border: 1.5px solid var(--color-error);
    padding: 0.35rem 0.9rem;
    border-radius: 0.375rem;
    font-weight: 500;
    cursor: pointer;
}
.edit-active-tab .outlined-cancel:hover { background: var(--color-error); color: #fff; }
.edit-active-tab .attachments-list { display: flex; flex-direction: column; gap: 1rem; }
.edit-active-tab .attachment-product {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0.75rem 1.25rem;
    box-shadow: var(--shadow-sm);
}
.edit-active-tab .attachment-product:hover { box-shadow: var(--shadowMd); }
.edit-active-tab .preview {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-background);
    border-radius: 0.375rem;
    flex-shrink: 0;
}
.edit-active-tab .file-icon { font-size: 2.2rem; color: var(--color-textMuted); }
.edit-active-tab .meta { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.edit-active-tab .filename { font-weight: 600; color: var(--color-text); word-break: break-all; }
.edit-active-tab .duedate,
.edit-active-tab .notes { color: var(--color-textSecondary); font-size: 0.92em; }
.edit-active-tab .actions { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end; }
.edit-active-tab .actions button {
    background: var(--color-surfaceHover);
    color: var(--color-primary);
    border: none;
    border-radius: 0.375rem;
    padding: 0.35rem 0.9rem;
    font-size: 0.98em;
    cursor: pointer;
}
.edit-active-tab .actions button:hover { background: var(--color-border); color: var(--color-text); }
.edit-active-tab .delete-btn {
    color: var(--color-error);
    background: none;
    border: 1px solid var(--color-error);
}
.edit-active-tab .delete-btn:hover { background: var(--color-error); color: #fff; }
.edit-active-tab .no-attachments {
    color: var(--color-textSecondary);
    font-size: 1em;
    margin-top: 0.5rem;
    padding-left: 1rem;
}

.edit-active-tab .movements-inline-container {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.edit-active-tab .movements-inline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}
.edit-active-tab .movements-inline-header .header-info { display: flex; align-items: center; gap: 0.75rem; }
.edit-active-tab .movements-title { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--color-text); }
.edit-active-tab .movements-count-badge {
    background: var(--color-surfaceHover);
    color: var(--color-textSecondary);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    border: 1px solid var(--color-border);
}
.edit-active-tab .btn-refresh-movements {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--color-surface);
    color: var(--color-textSecondary);
    border: 1px solid var(--color-border);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.825rem;
    font-weight: 600;
    cursor: pointer;
}
.edit-active-tab .btn-refresh-movements:hover {
    background: var(--color-surfaceHover);
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.edit-active-tab .movements-empty-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    color: var(--color-textSecondary);
}
.edit-active-tab .movements-summary-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
}
.edit-active-tab .summary-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.95rem;
    padding-right: 1.5rem;
    border-right: 1px solid var(--color-border);
}
.edit-active-tab .summary-status .status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0;
    display: block;
}
.edit-active-tab .status-inside { color: #10b981; }
.edit-active-tab .status-inside .status-indicator {
    background-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
.edit-active-tab .status-outside { color: #ef4444; }
.edit-active-tab .status-outside .status-indicator {
    background-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}
.edit-active-tab .summary-details { display: flex; flex-wrap: wrap; gap: 1.5rem; flex: 1; }
.edit-active-tab .summary-detail-item { display: flex; flex-direction: column; gap: 0.2rem; }
.edit-active-tab .summary-detail-item .detail-label {
    font-size: 0.75rem;
    color: var(--color-textSecondary);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
}
.edit-active-tab .summary-detail-item .detail-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
}
.edit-active-tab .movements-filters { display: flex; align-items: center; justify-content: flex-end; }
.edit-active-tab .filter-group {
    display: flex;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
}
.edit-active-tab .filter-btn {
    background: transparent;
    border: none;
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-textSecondary);
    cursor: pointer;
}
.edit-active-tab .filter-btn:hover { background: var(--color-surfaceHover); }
.edit-active-tab .filter-btn.active {
    background: var(--color-surfaceHover);
    color: var(--color-primary);
    box-shadow: inset 0 -2px 0 var(--color-primary);
}
.edit-active-tab .movements-timeline-list { display: flex; flex-direction: column; gap: 1rem; }
.edit-active-tab .movement-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.edit-active-tab .movement-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.edit-active-tab .movement-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px dashed var(--color-border);
    margin-bottom: 0.75rem;
}
.edit-active-tab .movement-direction-wrap { display: flex; align-items: center; gap: 0.75rem; }
.edit-active-tab .direction-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
}
.edit-active-tab .badge-saida {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}
.edit-active-tab .badge-entrada {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.edit-active-tab .movement-date { font-size: 0.85rem; font-weight: 600; color: var(--color-textSecondary); }
.edit-active-tab .movement-guide-info { display: flex; align-items: center; gap: 0.75rem; font-size: 0.825rem; }
.edit-active-tab .guide-tag,
.edit-active-tab .kit-tag {
    background: var(--color-background);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    color: var(--color-primary);
    border: 1px solid var(--color-border);
}
.edit-active-tab .link-tag {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    font-family: inherit;
}
.edit-active-tab .link-tag:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); }
.edit-active-tab .link-tag .link-text { text-decoration: underline; text-decoration-color: transparent; }
.edit-active-tab .link-tag:hover .link-text { text-decoration-color: currentColor; }
.edit-active-tab .movement-card-body { display: flex; flex-direction: column; gap: 0.75rem; }
.edit-active-tab .actor-info-row { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.edit-active-tab .actor-item { font-size: 0.875rem; display: flex; align-items: center; gap: 0.35rem; }
.edit-active-tab .actor-label { color: var(--color-textSecondary); font-weight: 500; }

@media (max-width: 768px) {
    .edit-active-tab .form-row { flex-direction: column; }
    .edit-active-tab .tags-dual-list { grid-template-columns: 1fr; }
    .edit-active-tab .tag-list-container.full-width { grid-column: auto; }
    .edit-active-tab .counter-section { flex-direction: column; align-items: stretch; }
}

/* ===== GuiasTab (Vue) ===== */
.guias-tab {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    padding: 1.25rem;
    color: var(--color-text);
    overflow: visible;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}
.guias-tab .guias-header {
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 1.25rem;
    margin-bottom: 0;
    width: 100%;
    position: relative;
    z-index: 50;
    text-align: left;
}
.guias-tab .title-section { width: 100%; text-align: left; }
.guias-tab .tab-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    letter-spacing: -0.02em;
}
.guias-tab .tab-subtitle {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0.25rem 0 0;
}
.guias-tab .militar-search-card {
    position: relative;
    z-index: 51;
    overflow: visible;
    width: 100%;
    align-self: stretch;
    box-sizing: border-box;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 1.25rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    margin-bottom: 0;
}
.guias-tab .search-mode-tabs { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.guias-tab .mode-tab-btn {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
}
.guias-tab .mode-tab-btn:hover { border-color: var(--color-primary); color: var(--color-text); }
.guias-tab .mode-tab-btn.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.guias-tab .search-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text);
    display: block;
    margin-bottom: 0.5rem;
}
.guias-tab .nm-search-wrap { position: relative; z-index: 52; overflow: visible; }
.guias-tab .search-input-group {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
    position: relative;
    z-index: 52;
    width: 100%;
}
.guias-tab .nm-input-shell { position: relative; flex: 1; min-width: 0; z-index: 53; }
.guias-tab .nm-input {
    width: 100%;
    padding: 0.6rem 2.25rem 0.6rem 1rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--color-text);
    box-sizing: border-box;
}
.guias-tab .nm-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
}
.guias-tab .nm-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.25rem 0.4rem;
    z-index: 2;
}
.guias-tab .militar-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 9999;
    margin: 0;
    padding: 0.35rem 0;
    list-style: none;
    max-height: 280px;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: var(--shadowLg);
}
.guias-tab .sug-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 0.9rem;
    cursor: pointer;
}
.guias-tab .sug-item:hover,
.guias-tab .sug-item.active { background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)); }
.guias-tab .sug-name { font-weight: 600; font-size: 0.9rem; color: var(--color-text); }
.guias-tab .sug-meta { font-size: 0.78rem; color: var(--color-text-secondary); }
.guias-tab .sug-empty { padding: 0.75rem 0.9rem; font-size: 0.85rem; color: var(--color-text-muted); }
.guias-tab .sug-out { color: #ef4444; font-weight: 700; }
.guias-tab .sug-in { color: #10b981; font-weight: 700; }
.guias-tab .btn-search-nm {
    background-color: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
}
.guias-tab .btn-search-nm:hover:not(:disabled) { filter: brightness(1.08); }
.guias-tab .btn-search-nm:disabled { opacity: 0.5; cursor: not-allowed; }
.guias-tab .militar-result-box {
    margin-top: 1rem;
    padding: 0.875rem 1.25rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.guias-tab .militar-result-box.alert {
    background-color: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.28);
    color: #b91c1c;
}
.guias-tab .militar-result-box.partial {
    background-color: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #b45309;
}
.guias-tab .militar-result-box.clean {
    background-color: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.28);
    color: #047857;
}
.guias-tab .militar-found {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.75rem 1rem;
}
.guias-tab .militar-name { font-weight: 700; }
.guias-tab .militar-nm { opacity: 0.85; }
.guias-tab .badge-alert { font-weight: 700; font-size: 0.85rem; }
.guias-tab .badge-partial-info { font-weight: 700; font-size: 0.85rem; color: #b45309; }
.guias-tab .badge-clean { font-weight: 700; font-size: 0.85rem; }
.guias-tab .btn-details {
    background-color: #dc2626;
    color: #fff;
    border: none;
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.guias-tab .btn-details:hover { background-color: #b91c1c; }
.guias-tab .view-toggle-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    width: 100%;
    padding: 0.35rem 0 0.85rem;
    border-bottom: 1px solid var(--color-border);
}
.guias-tab .view-toggle {
    display: inline-flex;
    flex-wrap: wrap;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-surface);
}
.guias-tab .vt-btn {
    background: transparent;
    border: none;
    border-right: 1px solid var(--color-border);
    padding: 0.55rem 1.05rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}
.guias-tab .vt-btn:last-child { border-right: none; }
.guias-tab .vt-btn:hover { color: var(--color-text); background: var(--color-surface-hover); }
.guias-tab .vt-btn.active { background: var(--color-primary); color: #fff; }
.guias-tab .search-filter-wrapper { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.guias-tab .guia-type-filter {
    height: 38px;
    padding: 0 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    color: var(--color-text);
    font-size: 0.85rem;
}
.guias-tab .table-search-input {
    padding: 0.5rem 0.85rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    width: 300px;
    max-width: 100%;
    font-size: 0.85rem;
    color: var(--color-text);
}
.guias-tab .table-search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
}
.guias-tab .table-container { width: 100%; overflow-x: auto; overflow-y: auto; }
.guias-tab .data-table-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 200px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 12px);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.guias-tab .data-table-wrapper .data-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    text-align: left;
}
.guias-tab .data-table-wrapper .data-table th {
    background-color: var(--color-surface-variant);
    color: var(--color-text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.7rem 1rem;
    font-size: 0.7rem;
    border-bottom: none;
    box-shadow: inset 0 -1px 0 var(--color-border);
    height: auto;
    cursor: default;
}
.guias-tab .data-table-wrapper .data-table td {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    height: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.guias-tab .data-table-wrapper .data-table tbody tr { height: auto; }
.guias-tab .data-table-wrapper .data-table tbody tr:hover { background-color: var(--color-surface-hover); }
.guias-tab .data-table-wrapper .empty-table-centered {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    text-align: center;
    padding: 2rem 0;
}
.guias-tab .guia-origin-cell { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.guias-tab .guia-kind-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #0e6251;
    background: color-mix(in srgb, #0e6251 12%, #fff);
}
.guias-tab .guias-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    margin-top: 0.85rem;
    padding: 0.65rem 0.25rem 0.25rem;
    border-top: 1px solid var(--color-border);
}
.guias-tab .guias-pagination-left,
.guias-tab .guias-pagination-nav { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.guias-tab .per-page-label { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--color-text-secondary); }
.guias-tab .per-page-select {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
}
.guias-tab .range-info,
.guias-tab .pagination-info { font-size: 0.85rem; color: var(--color-text-secondary); }
.guias-tab .pagination-button {
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
}
.guias-tab .pagination-button:hover:not(:disabled) { background: var(--color-surface-hover); }
.guias-tab .pagination-button:disabled { opacity: 0.45; cursor: not-allowed; }
.guias-tab .section-title { font-size: 1.05rem; font-weight: 700; color: var(--color-text); margin: 0 0 0.75rem; border: 0; padding: 0; }
.guias-tab .status-pill {
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-block;
}
.guias-tab .status-open { background-color: rgba(217, 119, 6, 0.18); color: #b45309; border: 1px solid rgba(217, 119, 6, 0.3); }
.guias-tab .status-partial-pickup { background-color: rgba(245, 158, 11, 0.18); color: #b45309; border: 1px solid rgba(245, 158, 11, 0.35); }
.guias-tab .status-partial-return { background-color: rgba(59, 130, 246, 0.16); color: #1d4ed8; border: 1px solid rgba(59, 130, 246, 0.35); }
.guias-tab .status-closed { background-color: rgba(16, 185, 129, 0.18); color: #047857; border: 1px solid rgba(16, 185, 129, 0.3); }
.guias-tab .pending-chip { color: #dc2626; font-weight: 700; background: none; padding: 0; }
.guias-tab .pending-chip.zero-pending { color: var(--color-text-muted); font-weight: 600; }
.guias-tab .btn-manual-entry {
    padding: 6px 12px;
    background: #059669;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.guias-tab ~ .modal-overlay,
.modal-overlay:has(.modal-card) {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}
.modal-card {
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: 12px;
    width: 540px;
    max-width: 90%;
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}
.modal-card-wide { width: 720px; max-height: 85vh; overflow-y: auto; }
.modal-card .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    padding: 0 0 0.75rem;
    margin-bottom: 0.85rem;
}
.modal-card .modal-header h2 { font-size: 1.15rem; font-weight: 700; margin: 0; }
.modal-card .btn-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    line-height: 1;
}
.modal-card .modal-sub { color: var(--color-text-secondary); font-size: 0.85rem; margin: 0 0 1rem; }
.modal-card .sub-title {
    font-size: 0.85rem;
    font-weight: 700;
    margin: 0 0 0.55rem;
    color: var(--color-text);
}
.modal-card .item-list { list-style: none; padding: 0; margin: 0; }
.modal-card .item-list li {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 0.4rem;
    background: rgba(148, 163, 184, 0.05);
    font-size: 0.875rem;
}
.modal-card .item-list li.item-missing { border-color: rgba(239, 68, 68, 0.45); background: rgba(239, 68, 68, 0.08); }
.modal-card .empty-li { color: var(--color-text-muted); font-style: italic; border: none !important; padding-left: 0 !important; }
.guia-detail-header { align-items: flex-start; gap: 0.75rem; }
.guia-detail-title-block { flex: 1; min-width: 0; }
.guia-detail-kit { margin: 0.2rem 0 0; font-size: 0.9rem; font-weight: 500; color: var(--color-text-secondary); }
.guia-detail-header-actions { display: flex; align-items: center; gap: 0.65rem; }
.guia-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    margin: 0.25rem 0 1.1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.06);
}
.guia-meta-item { display: flex; flex-direction: column; gap: 0.2rem; }
.guia-meta-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-secondary); }
.guia-meta-value { font-size: 0.9rem; font-weight: 600; }
.guia-section + .guia-section { margin-top: 1rem; }
.guia-item-list .guia-item-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem 0.85rem;
    align-items: start;
    padding: 0.7rem 0.85rem;
}
.guia-item-info { display: flex; flex-direction: column; gap: 0.15rem; }
.guia-item-name { font-size: 0.9rem; font-weight: 700; }
.guia-item-stats { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.35rem; }
.qty-chip {
    display: inline-flex;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
    border: 1px solid rgba(100, 116, 139, 0.2);
}
.qty-chip.qty-in { background: rgba(16, 185, 129, 0.12); color: #047857; border-color: rgba(16, 185, 129, 0.28); }
.qty-chip.qty-pending { background: rgba(245, 158, 11, 0.14); color: #b45309; border-color: rgba(245, 158, 11, 0.3); }
.item-status-badge { display: inline-flex; padding: 0.15rem 0.5rem; border-radius: 6px; font-size: 0.72rem; font-weight: 700; }
.item-status-badge.badge-pendente { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.item-status-badge.badge-faltas { background: rgba(239, 68, 68, 0.14); color: #b91c1c; }
.item-status-badge.badge-ok { background: rgba(16, 185, 129, 0.14); color: #047857; }
.item-status-badge.badge-manual { background: rgba(59, 130, 246, 0.14); color: #1d4ed8; }
.item-meta { color: var(--color-text-secondary); font-size: 0.78rem; }

/* Modal da guia — refinamento */
.guia-detail-modal { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.guia-detail-modal .guia-detail-header { padding: 1.25rem 1.5rem 1rem; margin: 0; border-bottom: 1px solid var(--color-border); }
.guia-detail-modal .guia-detail-header h2 { font-size: 1.3rem; letter-spacing: 0.01em; }
.guia-detail-modal .modal-body { padding: 1.25rem 1.5rem 1.5rem; overflow-y: auto; }
.guia-detail-modal .btn-close {
    width: 2rem; height: 2rem; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.guia-detail-modal .btn-close:hover { background: rgba(148, 163, 184, 0.16); color: var(--color-text); }
.guia-detail-modal .guia-meta-grid { margin-top: 0; background: rgba(148, 163, 184, 0.07); border-radius: 10px; }
.guia-detail-modal .guia-meta-value { font-size: 0.95rem; }
.guia-detail-modal .sub-title {
    display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.65rem;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-secondary);
}
.guia-detail-modal .sub-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.4rem;
    border-radius: 999px; background: rgba(148, 163, 184, 0.16); color: var(--color-text); font-size: 0.72rem;
}
.guia-detail-modal .guia-section + .guia-section { margin-top: 1.25rem; }
.guia-detail-modal .guia-item-list .guia-item-row {
    position: relative; border-radius: 10px; padding: 0.8rem 1rem 0.8rem 1.15rem; margin-bottom: 0.5rem;
    background: rgba(148, 163, 184, 0.06);
}
.guia-detail-modal .guia-item-list .guia-item-row::before {
    content: ""; position: absolute; left: 0; top: 0.6rem; bottom: 0.6rem; width: 3px; border-radius: 3px; background: rgba(148, 163, 184, 0.4);
}
.guia-detail-modal .guia-item-row.item-missing::before { background: #ef4444; }
.guia-detail-modal .guia-item-info { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.75rem; }
.guia-detail-modal .guia-item-name { font-size: 0.95rem; flex-basis: 100%; }
.guia-detail-modal .guia-empty { padding: 0.85rem 1rem !important; border-radius: 10px; background: rgba(148, 163, 184, 0.06); text-align: center; }
.guia-detail-modal .qty-chip { color: var(--color-text-secondary); }
.guia-detail-modal .qty-chip.qty-in { color: #34d399; }
.guia-detail-modal .qty-chip.qty-pending { color: #fbbf24; }
.guia-detail-modal .item-status-badge.badge-pendente { color: #fbbf24; }
.guia-detail-modal .item-status-badge.badge-faltas { color: #f87171; }
.guia-detail-modal .item-status-badge.badge-ok { color: #34d399; }
.guia-detail-modal .item-status-badge.badge-manual { color: #60a5fa; }

.guia-event-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.guia-event-row {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.85rem;
    padding: 0.65rem 0.85rem; border: 1px solid var(--color-border); border-radius: 10px; background: rgba(148, 163, 184, 0.06);
}
.guia-event-icon {
    width: 2rem; height: 2rem; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1rem;
}
.guia-event-icon.ev-out { background: rgba(245, 158, 11, 0.16); color: #fbbf24; }
.guia-event-icon.ev-in { background: rgba(16, 185, 129, 0.16); color: #34d399; }
.guia-event-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; font-size: 0.9rem; }
.guia-pdf-btn { white-space: nowrap; }
.guia-pdf-error {
    margin: 0 0 1rem; padding: 0.6rem 0.85rem; border-radius: 8px; font-size: 0.85rem;
    background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.4); color: #f87171;
}
@media (max-width: 640px) {
    .guia-event-row { grid-template-columns: auto minmax(0, 1fr); }
    .guia-pdf-btn { grid-column: 1 / -1; }
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 16px;
}
.modal-dialog {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
.modal-dialog .modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: #f8fafc;
}
.modal-dialog .modal-title { margin: 0; font-size: 1.15rem; font-weight: 700; color: #0f172a; }
.modal-dialog .modal-subtitle { margin: 4px 0 0; font-size: 0.875rem; color: #64748b; }
.modal-dialog .close-btn { background: none; border: none; font-size: 1.5rem; color: #94a3b8; cursor: pointer; line-height: 1; }
.modal-dialog .modal-body { padding: 24px; }
.modal-dialog .error-banner { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; padding: 12px; border-radius: 8px; margin-bottom: 16px; }
.modal-dialog .item-summary-card {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.modal-dialog .summary-row { display: flex; justify-content: space-between; font-size: 0.875rem; }
.modal-dialog .summary-label { color: #64748b; font-weight: 500; }
.modal-dialog .summary-val { color: #0f172a; font-weight: 600; }
.modal-dialog .summary-val.highlight { color: #2563eb; font-family: monospace; }
.modal-dialog .summary-val.badge-out { color: #d97706; font-weight: 700; }
.modal-dialog .modal-form { display: flex; flex-direction: column; gap: 16px; }
.modal-dialog .form-group { display: flex; flex-direction: column; gap: 6px; }
.modal-dialog .form-label { font-size: 0.85rem; font-weight: 600; color: #334155; }
.modal-dialog .req { color: #dc2626; }
.modal-dialog .form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.9rem;
}
.modal-dialog .readonly-input { background: #f1f5f9; color: #475569; }
.modal-dialog .pin-mask { -webkit-text-security: disc; }
.modal-dialog .textarea { resize: vertical; min-height: 70px; }
.modal-dialog .modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
.modal-dialog .btn-cancel {
    padding: 10px 18px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
}
.modal-dialog .btn-confirm {
    padding: 10px 20px;
    border: none;
    background: #059669;
    color: #fff;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
}
.modal-dialog .btn-confirm:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 640px) {
    .guia-meta-grid { grid-template-columns: 1fr; }
    .guia-item-list .guia-item-row { grid-template-columns: 1fr; }
    .guia-item-stats { justify-content: flex-start; }
}

/* ===== Kits (Vue KitsTab) ===== */
.kits-tab {
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}
.kits-tab .kits-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
}
.kits-tab .header-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: nowrap;
    margin-left: auto;
}
.kits-tab .custody-monitor-btn.active {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-background));
    color: var(--color-primary);
}
.kits-tab .custody-monitor-btn.pulsing { border-color: rgba(239, 68, 68, 0.45); }
.kits-tab .monitor-live-dot {
    width: 7px; height: 7px; border-radius: 50%; background: #ef4444; flex-shrink: 0;
    animation: monitor-pulse 1.4s ease-in-out infinite;
}
@keyframes monitor-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.85); }
}
.kits-tab .live-monitor-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    font-size: 11px; font-weight: 800; background: #ef4444; color: #fff;
}
.kits-tab .custody-monitor-btn.active .live-monitor-badge { background: var(--color-primary); }
.kits-tab .content-container { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.kits-tab .data-table-wrapper {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    overflow: hidden;
}
.kits-tab .data-table { width: 100%; border-collapse: collapse; }
.kits-tab .data-table th {
    text-align: left; padding: 0.75rem 1rem; font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border); background: var(--color-background-soft, var(--color-surface));
}
.kits-tab .data-table th.sortable { cursor: pointer; }
.kits-tab .data-table td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--color-border); font-size: 0.9rem; }
.kits-tab .data-table tbody tr.clickable { cursor: pointer; }
.kits-tab .data-table tbody tr:hover { background: var(--color-surface-hover); }
.kits-tab .empty-table-centered { padding: 2rem; text-align: center; color: var(--color-text-muted); font-style: italic; }
.kits-tab .designation-cell { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.kits-tab .state-cell { display: flex; flex-direction: column; gap: 0.15rem; align-items: flex-start; }
.kits-tab .progress-hint { font-size: 0.72rem; font-weight: 600; color: var(--color-text-secondary, #64748b); }
.kits-tab .mv-none { color: var(--color-text-muted); }
.kits-tab .st-preparing { background-color: rgba(217, 119, 6, 0.18); color: #451a03; }
.kits-tab .st-ready { background-color: rgba(37, 99, 235, 0.16); color: #0b2a6b; }
.kits-tab .st-open { background-color: rgba(245, 158, 11, 0.18); color: #78350f; }
.kits-tab .st-closed { background-color: rgba(16, 185, 129, 0.16); color: #064e3b; }
.kits-tab .disc-chip {
    display: inline-block; padding: 0.12rem 0.5rem; font-size: 0.74rem; font-weight: 700;
    border-radius: 6px; background-color: rgba(220, 38, 38, 0.15); color: #7f1d1d;
}
.kits-tab .disc-chip.inline { margin-left: 0.5rem; }
.kits-tab .kits-pagination {
    display: flex; align-items: center; justify-content: center; gap: 1rem;
    margin-top: 1rem; padding-bottom: 0.5rem;
}
.kits-tab .pagination-button {
    padding: 0.5rem 1rem; border: 1px solid var(--color-border); background: var(--color-surface);
    border-radius: 0.375rem; cursor: pointer; font-size: 0.875rem; color: var(--color-text);
}
.kits-tab .pagination-button:hover:not(:disabled) { background: var(--color-surface-hover); }
.kits-tab .pagination-button:disabled { opacity: 0.45; cursor: not-allowed; }
.kits-tab .pagination-info { font-size: 0.875rem; color: var(--color-text-secondary); }
.kits-tab .live-panel-container { flex: 1; min-height: 0; }
.kits-tab .live-panel { display: flex; flex-direction: column; gap: 1rem; }
.kits-tab .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.kits-tab .live-heading-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.kits-tab .live-panel .section-title { display: flex; align-items: center; gap: 0.5rem; margin: 0; border: 0; padding: 0; font-size: 1.05rem; }
.kits-tab .live-ring {
    width: 12px; height: 12px; border-radius: 50%; border: 2px solid #ef4444;
    display: inline-flex; align-items: center; justify-content: center;
}
.kits-tab .live-ring-core { width: 5px; height: 5px; border-radius: 50%; background: #ef4444; }
.kits-tab .live-badge {
    background: #ef4444; color: #fff; border-radius: 999px; padding: 0.15rem 0.55rem;
    font-size: 0.75rem; font-weight: 800;
}
.kits-tab .idle-inline { padding: 3rem 1rem; text-align: center; color: var(--color-text-muted); }
.kits-tab .idle-inline strong { display: block; color: var(--color-text); margin-bottom: 0.35rem; }
.kits-tab .session-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.kits-tab .session-card {
    border: 1px solid var(--color-border); border-radius: 12px; padding: 1rem;
    background: var(--color-surface); display: flex; flex-direction: column; gap: 0.6rem;
    cursor: pointer; text-align: left; width: 100%;
}
.kits-tab .session-card:hover { border-color: var(--color-primary); }
.live-picks-dialog { width: min(560px, 94vw); }
.live-picks-x {
    border: 0; background: transparent; color: var(--color-text); font-size: 1.1rem;
    cursor: pointer; line-height: 1; padding: 0.2rem 0.4rem;
}
.live-pick-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.live-pick-list li {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.65rem 0.75rem; border: 1px solid var(--color-border); border-radius: 8px;
    background: var(--color-surface);
}
.live-pick-name { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.live-pick-name small { color: var(--color-text-muted); }
.live-picks-empty { margin: 0; color: var(--color-text-muted); }
.kits-tab .card-top { display: flex; justify-content: space-between; align-items: center; }
.kits-tab .gate-pill { font-size: 0.72rem; font-weight: 800; padding: 0.15rem 0.5rem; border-radius: 6px; }
.kits-tab .gate-pickup { background: rgba(37, 99, 235, 0.16); color: #1d4ed8; }
.kits-tab .gate-return { background: rgba(16, 185, 129, 0.16); color: #047857; }
.kits-tab .live-chip { font-size: 0.68rem; font-weight: 800; color: #ef4444; letter-spacing: 0.04em; }
.kits-tab .station-name { font-size: 0.85rem; color: var(--color-text-muted); }
.kits-tab .kit-ref { font-size: 0.85rem; }
.kits-tab .read-stats { display: flex; gap: 0.75rem; }
.kits-tab .stat-box { display: flex; flex-direction: column; }
.kits-tab .stat-num { font-size: 1.25rem; font-weight: 800; }
.kits-tab .stat-lbl { font-size: 0.72rem; color: var(--color-text-muted); }
.kits-tab .item-preview { list-style: none; margin: 0; padding: 0; font-size: 0.8rem; color: var(--color-text-secondary); }
.kits-tab ~ .modal-overlay .create-individual-dialog,
.modal-overlay .create-individual-dialog {
    width: min(980px, 94vw);
    max-width: 980px;
    min-height: min(640px, 86vh);
}
.modal-overlay .modal-container { width: min(880px, 96vw); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
.modal-overlay .action-modal-dialog { width: min(680px, 96vw); }
.modal-overlay .modal-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--color-border); }
.modal-overlay .modal-title { font-size: 1.2rem; font-weight: 700; margin: 0; }
.modal-overlay .modal-subtitle { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.35rem; }
.modal-overlay .modal-tabs { display: flex; border-bottom: 1px solid var(--color-border); }
.modal-overlay .modal-tab {
    padding: 0.8rem 1.5rem; border: none; background: transparent; font-size: 0.9rem; font-weight: 600;
    cursor: pointer; color: var(--color-text-muted); border-bottom: 2px solid transparent;
    display: flex; align-items: center; gap: 0.5rem;
}
.modal-overlay .modal-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.modal-overlay .tab-count {
    background-color: rgba(100, 116, 139, 0.2); border-radius: 10px; font-size: 0.75rem;
    padding: 0.05rem 0.5rem; font-weight: 700;
}
.modal-overlay .modal-content { padding: 1.2rem 1.5rem; overflow-y: auto; }
.modal-overlay .modal-footer {
    display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-border);
}
.modal-overlay .active-list { list-style: none; padding: 0; margin: 0; }
.modal-overlay .kit-item-row {
    display: flex; gap: 0.8rem; padding: 0.6rem 0.8rem; border: 1px solid var(--color-border);
    border-radius: 8px; margin-bottom: 0.4rem; align-items: center; background: var(--color-surface);
}
.modal-overlay .nature-pill {
    display: inline-block; padding: 0.12rem 0.5rem; font-size: 0.72rem; font-weight: 700;
    border-radius: 6px; min-width: 60px; text-align: center;
}
.modal-overlay .nat-serial { background-color: rgba(37, 99, 235, 0.16); color: #0b2a6b; }
.modal-overlay .nat-bulk { background-color: rgba(217, 119, 6, 0.18); color: #451a03; }
.modal-overlay .active-desc-block { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.modal-overlay .active-desc { color: var(--color-text); font-size: 0.92rem; font-weight: 500; }
.modal-overlay .active-serial-sub { font-size: 0.75rem; color: var(--color-text-muted); }
.modal-overlay .active-code { font-weight: 700; white-space: nowrap; }
.modal-overlay .item-status-wrapper { display: flex; align-items: center; gap: 0.8rem; flex-shrink: 0; }
.modal-overlay .item-badge {
    display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem;
    border-radius: 6px; font-size: 0.78rem; font-weight: 700; white-space: nowrap;
}
.modal-overlay .badge-returned { background-color: rgba(16, 185, 129, 0.15); color: #065f46; border: 1px solid rgba(16, 185, 129, 0.3); }
.modal-overlay .badge-outstanding { background-color: rgba(239, 68, 68, 0.14); color: #991b1b; border: 1px solid rgba(239, 68, 68, 0.25); }
.modal-overlay .badge-unpicked { background-color: rgba(245, 158, 11, 0.14); color: #92400e; border: 1px solid rgba(245, 158, 11, 0.3); }
.modal-overlay .badge-partial-picked { background-color: rgba(249, 115, 22, 0.14); color: #9a3412; border: 1px solid rgba(249, 115, 22, 0.3); }
.modal-overlay .badge-partial-returned { background-color: rgba(147, 51, 234, 0.14); color: #581c87; border: 1px solid rgba(147, 51, 234, 0.3); }
.modal-overlay .badge-ready { background-color: rgba(14, 165, 233, 0.14); color: #0369a1; border: 1px solid rgba(14, 165, 233, 0.25); }
.modal-overlay .badge-missing { background-color: rgba(239, 68, 68, 0.14); color: #991b1b; border: 1px solid rgba(239, 68, 68, 0.25); }
.modal-overlay .kit-actions-bar {
    display: flex; gap: 0.8rem; margin-bottom: 1rem; padding-bottom: 0.8rem;
    border-bottom: 1px dashed var(--color-border);
}
.modal-overlay .timeline { display: flex; flex-direction: column; gap: 0.6rem; }
.modal-overlay .tl-row {
    display: flex; gap: 0.8rem; padding: 0.7rem 0.8rem; border: 1px solid var(--color-border);
    border-radius: 8px; align-items: flex-start;
}
.modal-overlay .dir-pill {
    display: inline-block; padding: 0.2rem 0.6rem; font-size: 0.75rem; font-weight: 800;
    border-radius: 6px; white-space: nowrap;
}
.modal-overlay .dir-out { background-color: rgba(220, 38, 38, 0.16); color: #450a0a; }
.modal-overlay .dir-in { background-color: rgba(5, 150, 105, 0.18); color: #03110a; }
.modal-overlay .dir-manual { background-color: rgba(100, 116, 139, 0.16); color: #334155; }
.modal-overlay .tl-body { flex: 1; }
.modal-overlay .tl-line { color: var(--color-text); font-size: 0.95rem; }
.modal-overlay .tl-sign { color: var(--color-text); font-size: 0.88rem; margin-top: 0.2rem; }
.modal-overlay .tl-meta { color: var(--color-text-muted); font-size: 0.8rem; margin-top: 0.2rem; }
.modal-overlay .tl-pdf { align-self: center; white-space: nowrap; }
.modal-overlay .empty { padding: 2rem; text-align: center; color: var(--color-text-muted); font-style: italic; }
.modal-overlay .action-error-banner {
    background-color: rgba(220, 38, 38, 0.1); color: #dc2626; padding: 0.75rem; border-radius: 6px;
    font-size: 0.85rem; font-weight: 500; border: 1px solid rgba(220, 38, 38, 0.2);
}
.modal-overlay .action-form-section { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-border); }
.modal-overlay .form-label { font-size: 0.85rem; font-weight: 600; color: var(--color-text); }
.modal-overlay .req { color: #dc2626; }
.modal-overlay .readonly-input { background-color: var(--color-surface, #f1f5f9); color: var(--color-text-muted); cursor: not-allowed; }
.modal-overlay .pin-mask { -webkit-text-security: disc; }
.modal-overlay .action-items-header { display: flex; justify-content: space-between; align-items: center; margin: 1rem 0 0.75rem; }
.modal-overlay .action-items-title { font-size: 0.9rem; font-weight: 600; }
.modal-overlay .toggle-all-btn { background: transparent; border: none; color: var(--color-primary); font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.modal-overlay .action-items-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; max-height: 240px; overflow-y: auto; }
.modal-overlay .action-item-row {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.8rem;
    border: 1px solid var(--color-border); border-radius: 8px; cursor: pointer;
}
.modal-overlay .action-item-row.is-selected { border-color: var(--color-primary); background-color: rgba(37, 99, 235, 0.04); }
.modal-overlay .bulk-qty-control { display: flex; align-items: center; gap: 0.35rem; }
.modal-overlay .qty-input { width: 3.5rem; padding: 0.25rem 0.4rem; text-align: right; }
.modal-overlay .max-qty, .modal-overlay .qty-label, .modal-overlay .serialized-qty-badge { font-size: 0.8rem; color: var(--color-text-muted); }
.modal-overlay .create-results, .modal-overlay .create-selected { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.modal-overlay .create-results { max-height: 220px; overflow-y: auto; }
.modal-overlay .create-result-btn {
    width: 100%; text-align: left; border: 1px solid var(--color-border); background: var(--color-background);
    border-radius: 8px; padding: 0.55rem 0.75rem; cursor: pointer;
}
.modal-overlay .create-result-name { display: block; font-weight: 600; }
.modal-overlay .create-result-meta { display: block; font-size: 0.75rem; color: var(--color-text-secondary, #6b7280); }
.modal-overlay .create-selected-row {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    border: 1px solid var(--color-border); border-radius: 8px; padding: 0.55rem 0.75rem;
}
.modal-overlay .create-selected-actions { display: flex; align-items: center; gap: 0.4rem; }
.modal-overlay .create-qty { width: 4rem; padding: 0.3rem 0.4rem; border: 1px solid var(--color-border); border-radius: 6px; }
.modal-overlay .create-empty { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--color-text-secondary, #6b7280); }
.modal-overlay .recipient-chip {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    border: 1px solid var(--color-border); border-radius: 8px; padding: 0.55rem 0.75rem;
    background: color-mix(in srgb, var(--color-primary, #0e6251) 8%, var(--color-background));
}
.modal-overlay .app-button.danger { background-color: #dc2626; color: #fff; }
.modal-overlay .app-button.outline.danger { background: transparent; border: 1px solid #dc2626; color: #dc2626; }

.create-kit-overlay {
    background: rgba(8, 14, 12, 0.72);
    backdrop-filter: blur(3px);
    cursor: default;
}
.create-kit-overlay .create-individual-dialog {
    width: min(980px, 94vw);
    max-width: 980px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.38);
    overflow: hidden;
}
.create-kit-overlay .create-kit-header {
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.35rem 1.5rem 1.15rem;
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
}
.create-kit-overlay .create-kit-heading { min-width: 0; }
.create-kit-overlay .create-kit-kicker {
    display: inline-flex;
    margin-bottom: 0.35rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
    color: var(--color-primary-bright, var(--color-primary));
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.create-kit-overlay .modal-title { font-size: 1.35rem; letter-spacing: -0.02em; }
.create-kit-overlay .modal-subtitle {
    max-width: 42rem;
    margin-top: 0.4rem;
    font-size: 0.9rem;
    line-height: 1.45;
}
.create-kit-overlay .create-kit-close {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-background);
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.create-kit-overlay .create-kit-close:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.create-kit-overlay .create-kit-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
    min-height: 0;
    padding: 1.25rem 1.5rem 1.35rem;
}
.create-kit-overlay .create-kit-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 1rem;
    flex: 1;
    min-height: 0;
}
.create-kit-overlay .create-kit-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    min-height: 0;
    padding: 1rem 1.05rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-background);
}
.create-kit-overlay .create-kit-panel .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    flex: 0 0 auto;
}
.create-kit-overlay .create-kit-panel > .form-group.create-kit-search {
    flex: 1 1 auto;
    min-height: 0;
    justify-content: flex-start;
}
.create-kit-overlay .create-kit-panel .form-control {
    min-height: 2.75rem;
    border-radius: 10px;
}
.create-kit-overlay .create-results {
    flex: 1;
    max-height: none;
    min-height: 180px;
    margin-top: 0.15rem;
    overflow-y: auto;
}
.create-kit-overlay .create-result-btn {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    background: var(--color-surface);
}
.create-kit-overlay .create-result-btn:hover {
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
}
.create-kit-overlay .create-hint,
.create-kit-overlay .create-empty {
    margin: 0.35rem 0 0;
    padding: 0.85rem 0.9rem;
    border: 1px dashed var(--color-border);
    border-radius: 10px;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}
.create-kit-overlay .create-kit-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.create-kit-overlay .create-kit-panel-head h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
}
.create-kit-overlay .create-kit-count {
    min-width: 1.6rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 16%, transparent);
    color: var(--color-primary-bright, var(--color-primary));
    font-size: 0.75rem;
    font-weight: 800;
    text-align: center;
}
.create-kit-overlay .create-kit-selected { min-height: 280px; }
.create-kit-overlay .create-selected {
    flex: 1;
    margin: 0;
    overflow-y: auto;
}
.create-kit-overlay .create-selected-row {
    align-items: center;
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    background: var(--color-surface);
}
.create-kit-overlay .create-selected-copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.create-kit-overlay .create-selected-copy strong {
    color: var(--color-text);
    font-size: 0.92rem;
}
.create-kit-overlay .create-qty-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
}
.create-kit-overlay .create-qty {
    width: 4.25rem;
    min-height: 2.1rem;
    padding: 0.25rem 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    color: var(--color-text);
}
.create-kit-overlay .create-remove {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}
.create-kit-overlay .create-remove:hover {
    border-color: #dc2626;
    color: #dc2626;
}
.create-kit-overlay .create-kit-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 220px;
    padding: 1.5rem 1rem;
    border: 1px dashed var(--color-border);
    border-radius: 12px;
    text-align: center;
    color: var(--color-text-muted);
}
.create-kit-overlay .create-kit-empty strong { color: var(--color-text); font-size: 0.95rem; }
.create-kit-overlay .create-kit-empty p { margin: 0; max-width: 16rem; font-size: 0.85rem; line-height: 1.4; }
.create-kit-overlay .create-kit-footer {
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--color-surface);
}
.create-kit-overlay .create-kit-footer-note {
    margin: 0;
    margin-right: auto;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
.create-kit-overlay .create-kit-footer .app-button.primary {
    min-width: 8.5rem;
    min-height: 2.5rem;
    justify-content: center;
    border-radius: 10px;
}
@media (max-width: 820px) {
    .create-kit-overlay .create-kit-layout { grid-template-columns: 1fr; }
    .create-kit-overlay .create-results { min-height: 0; max-height: 220px; }
    .create-kit-overlay .create-kit-footer { flex-wrap: wrap; }
}

/* ===== Contentor (Vue EditContainerTab) ===== */
.edit-container-tab {
    padding: 0.75rem 1.25rem 1.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}
.edit-container-tab .tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    gap: 1rem;
}
.edit-container-tab .header-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.edit-container-tab .tab-title { font-size: 1.5rem; font-weight: 600; color: var(--color-text); margin: 0; }
.edit-container-tab .app-button.uniform-width { min-width: 6.75rem; }
.edit-container-tab .icon-wrapper,
.edit-container-tab .cancel-button .button-icon { width: 1rem; height: 1rem; display: inline-flex; }
.edit-container-tab .icon-wrapper svg,
.edit-container-tab .cancel-button .button-icon { width: 1rem; height: 1rem; }
.edit-container-tab .tab-navigation {
    display: flex; gap: 0.5rem; border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.625rem; overflow-x: auto; padding: 0 0.25rem;
}
.edit-container-tab .nav-item {
    background: none; border: none; border-bottom: 2px solid transparent;
    padding: 0.5rem 0.85rem; font-weight: 500; color: var(--color-text-secondary);
    cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem;
}
.edit-container-tab .nav-item:hover { color: var(--color-primary); background: var(--color-surface-hover); }
.edit-container-tab .nav-item.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.edit-container-tab .nav-icon { width: 1.1em; height: 1.1em; }
.edit-container-tab .attachment-count {
    background: color-mix(in srgb, var(--color-primary) 16%, #fff);
    color: var(--color-primary); border-radius: 999px; font-size: 0.72rem; font-weight: 700; padding: 0.05rem 0.45rem;
}
.edit-container-tab .tab-content-with-side { display: flex; flex: 1; min-height: 0; }
.edit-container-tab .tab-container {
    flex: 1; background: var(--color-surface); border-radius: 0.5rem;
    box-shadow: var(--shadow-sm); padding: 0.875rem 1rem 1rem; overflow: auto;
}
.edit-container-tab .container-form { display: flex; flex-direction: column; gap: 1rem; }
.edit-container-tab .form-section {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
}
.edit-container-tab .section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.625rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--color-border);
}
.edit-container-tab .form-row { display: flex; gap: 0.5rem; margin-bottom: 0.375rem; }
.edit-container-tab .form-group { flex: 1; min-width: 0; margin-bottom: 0; }
.edit-container-tab .form-group label { display: block; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--color-text-secondary); }
.edit-container-tab .form-group input,
.edit-container-tab .form-group textarea,
.edit-container-tab .form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: 0.9rem;
    box-sizing: border-box;
}
.edit-container-tab .form-group input:focus,
.edit-container-tab .form-group textarea:focus,
.edit-container-tab .form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.1);
}
.edit-container-tab .form-group input:disabled,
.edit-container-tab .form-group textarea:disabled,
.edit-container-tab .form-control:disabled {
    opacity: 0.75;
    cursor: default;
    background-color: var(--color-surface-light, #f7f8f7);
}
.edit-container-tab .form-group textarea { resize: vertical; min-height: 4.5rem; }
.edit-container-tab .search-group { flex: 0.5; }
.edit-container-tab .search-shell { position: relative; }
.edit-container-tab .search-shell .form-control { padding-right: 2.5rem; }
.edit-container-tab .search-shell .search-icon {
    position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
    color: var(--color-text-muted); pointer-events: none; width: 1rem; height: 1rem;
}
.edit-container-tab .search-shell .search-icon svg { width: 1rem; height: 1rem; display: block; }
.edit-container-tab .search-results {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
    list-style: none; margin: 0; padding: 0.25rem 0; max-height: 220px; overflow-y: auto;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.edit-container-tab .sug-item { padding: 0.55rem 0.85rem; cursor: pointer; font-size: 0.9rem; }
.edit-container-tab .sug-item:hover { background: var(--color-surface-hover); }
.edit-container-tab .sug-empty { padding: 0.55rem 0.85rem; color: var(--color-text-muted); font-size: 0.85rem; }
.edit-container-tab .antenna-picker { margin-top: 0.75rem; }
.edit-container-tab .pin-picker { margin-top: 0.5rem; }
.edit-container-tab .picker-label {
    display: block; font-size: 0.875rem; font-weight: 500;
    color: var(--color-text-secondary); margin-bottom: 0.5rem;
}
.edit-container-tab .pin-empty { font-size: 0.875rem; color: var(--color-text-muted); font-style: italic; margin: 0; }
.edit-container-tab .antenna-options,
.edit-container-tab .pin-options { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.edit-container-tab .antenna-option,
.edit-container-tab .pin-option {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.375rem 0.75rem; border: 1px solid var(--color-border); border-radius: 0.375rem;
    cursor: pointer; user-select: none; background: var(--color-surface);
}
.edit-container-tab .antenna-option:hover:not(.disabled):not(.occupied),
.edit-container-tab .pin-option:hover:not(.disabled):not(.occupied) { border-color: var(--color-primary); }
.edit-container-tab .antenna-option.selected,
.edit-container-tab .pin-option.selected {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.1);
}
.edit-container-tab .antenna-option.disabled,
.edit-container-tab .pin-option.disabled { cursor: not-allowed; opacity: 0.6; }
.edit-container-tab .antenna-option.occupied,
.edit-container-tab .pin-option.occupied { cursor: not-allowed; opacity: 0.45; text-decoration: line-through; }
.edit-container-tab .antenna-option input,
.edit-container-tab .pin-option input { margin: 0; cursor: inherit; }
.edit-container-tab .pin-clear {
    background: transparent; border: none; color: var(--color-text-muted);
    font-size: 1.25rem; cursor: pointer; padding: 0 0.5rem;
}
.edit-container-tab .attachments-tab { padding: 0.5rem 0; }
.edit-container-tab .attachment-uploader { margin-top: 0; }
.edit-container-tab .uploader-header { margin-bottom: 0.5rem; }
.edit-container-tab .upload-btn {
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.95rem;
    white-space: nowrap;
    margin-bottom: 0.5rem;
}
.edit-container-tab .upload-btn:hover { filter: brightness(1.06); }
.edit-container-tab .upload-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
.edit-container-tab .upload-card {
    background: var(--color-surface);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-sm);
    padding: 1.5rem 2rem 1.2rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.edit-container-tab .upload-hint {
    display: block;
    color: var(--color-textSecondary);
    font-size: 0.95em;
    opacity: 0.85;
}
.edit-container-tab .file-row {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 1.2rem;
}
.edit-container-tab .due-date-group {
    display: flex;
    flex-direction: column;
    min-width: 120px;
    max-width: 180px;
}
.edit-container-tab .due-date-label { font-size: 0.875rem; font-weight: 500; color: var(--color-text-secondary); margin-bottom: 0.35rem; }
.edit-container-tab .file-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    background: var(--color-background);
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border);
    width: 85%;
}
.edit-container-tab .file-label:hover { border: 1.5px solid var(--color-primary); }
.edit-container-tab .file-input { display: none; }
.edit-container-tab .file-label-text { color: var(--color-textSecondary); font-weight: 500; }
.edit-container-tab .file-icon-label { font-size: 1.5em; color: var(--color-primary); }
.edit-container-tab .styled-input {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    padding: 0.45rem 0.9rem;
    width: 100%;
    color: var(--color-text);
    font-size: 0.9rem;
}
.edit-container-tab .upload-actions { display: flex; gap: 0.7rem; align-items: stretch; height: 2.5rem; }
.edit-container-tab .upload-actions .upload-btn { margin-bottom: 0; }
.edit-container-tab .outlined-cancel {
    background: none;
    color: var(--color-error);
    border: 1.5px solid var(--color-error);
    padding: 0.35rem 0.9rem;
    border-radius: 0.375rem;
    font-weight: 500;
    cursor: pointer;
}
.edit-container-tab .outlined-cancel:hover { background: var(--color-error); color: #fff; }
.edit-container-tab .attachments-list { display: flex; flex-direction: column; gap: 1rem; }
.edit-container-tab .attachment-product {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0.75rem 1.25rem;
    box-shadow: var(--shadow-sm);
}
.edit-container-tab .attachment-product:hover { box-shadow: var(--shadowMd); }
.edit-container-tab .preview {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-background);
    border-radius: 0.375rem;
    flex-shrink: 0;
}
.edit-container-tab .file-icon { font-size: 2.2rem; color: var(--color-textMuted); }
.edit-container-tab .meta { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.edit-container-tab .filename { font-weight: 600; color: var(--color-text); word-break: break-all; }
.edit-container-tab .filesize,
.edit-container-tab .duedate,
.edit-container-tab .description { color: var(--color-textSecondary); font-size: 0.92em; }
.edit-container-tab .actions { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end; }
.edit-container-tab .actions button {
    background: var(--color-surfaceHover);
    color: var(--color-primary);
    border: none;
    border-radius: 0.375rem;
    padding: 0.35rem 0.9rem;
    font-size: 0.98em;
    cursor: pointer;
}
.edit-container-tab .actions button:hover { background: var(--color-border); color: var(--color-text); }
.edit-container-tab .delete-btn {
    color: var(--color-error);
    background: none;
    border: 1px solid var(--color-error);
}
.edit-container-tab .delete-btn:hover { background: var(--color-error); color: #fff; }
.edit-container-tab .no-attachments {
    color: var(--color-textSecondary);
    font-size: 1em;
    margin-top: 0.5rem;
    padding-left: 1rem;
}
.edit-container-tab .app-button.danger { background: #dc2626; color: #fff; }

/* ===== Localização (Vue EditLocationTab) ===== */
.edit-location-tab {
    padding: 0.75rem 1.25rem 1.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}
.edit-location-tab .tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    gap: 1rem;
}
.edit-location-tab .header-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.edit-location-tab .tab-title { font-size: 1.5rem; font-weight: 600; color: var(--color-text); margin: 0; }
.edit-location-tab .app-button.uniform-width { min-width: 6.75rem; }
.edit-location-tab .icon-wrapper,
.edit-location-tab .cancel-button .button-icon { width: 1rem; height: 1rem; display: inline-flex; }
.edit-location-tab .icon-wrapper svg,
.edit-location-tab .cancel-button .button-icon { width: 1rem; height: 1rem; }
.edit-location-tab .tab-navigation {
    display: flex; gap: 0.5rem; border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.625rem; overflow-x: auto; padding: 0 0.25rem;
}
.edit-location-tab .nav-item {
    background: none; border: none; border-bottom: 2px solid transparent;
    padding: 0.5rem 0.85rem; font-weight: 500; color: var(--color-text-secondary);
    cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem;
}
.edit-location-tab .nav-item:hover { color: var(--color-primary); background: var(--color-surface-hover); }
.edit-location-tab .nav-item.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.edit-location-tab .nav-icon { width: 1.1em; height: 1.1em; }
.edit-location-tab .attachment-count {
    background: color-mix(in srgb, var(--color-primary) 16%, #fff);
    color: var(--color-primary); border-radius: 999px; font-size: 0.72rem; font-weight: 700; padding: 0.05rem 0.45rem;
}
.edit-location-tab .tab-content-with-side { display: flex; flex: 1; min-height: 0; }
.edit-location-tab .tab-container {
    flex: 1; background: var(--color-surface); border-radius: 0.5rem;
    box-shadow: var(--shadow-sm); padding: 0.875rem 1rem 1rem; overflow: auto;
}
.edit-location-tab .location-form { display: flex; flex-direction: column; gap: 0.75rem; }
.edit-location-tab .form-section {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
}
.edit-location-tab .section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.625rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--color-border);
}
.edit-location-tab .form-row { display: flex; gap: 0.5rem; margin-bottom: 0.375rem; align-items: flex-end; }
.edit-location-tab .form-group { flex: 1; min-width: 0; margin-bottom: 0; }
.edit-location-tab .email-group { flex: 0.5; }
.edit-location-tab .form-group label { display: block; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--color-text-secondary); }
.edit-location-tab .form-group input,
.edit-location-tab .form-group textarea,
.edit-location-tab .form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: 0.9rem;
    box-sizing: border-box;
}
.edit-location-tab .form-group input:focus,
.edit-location-tab .form-group textarea:focus,
.edit-location-tab .form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.1);
}
.edit-location-tab .form-group input:disabled,
.edit-location-tab .form-group textarea:disabled,
.edit-location-tab .form-control:disabled {
    opacity: 0.75;
    cursor: default;
    background-color: var(--color-surface-light, #f7f8f7);
}
.edit-location-tab .form-group textarea { resize: vertical; min-height: 4.5rem; }
.edit-location-tab .checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0;
    flex: 0 0 auto;
    white-space: nowrap;
}
.edit-location-tab .checkbox-input {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    accent-color: var(--color-primary);
}
.edit-location-tab .checkbox-input:disabled { cursor: not-allowed; opacity: 0.6; }
.edit-location-tab .checkbox-label {
    font-size: 0.875rem;
    color: var(--color-text);
    cursor: pointer;
    user-select: none;
}
.edit-location-tab .attachments-tab { padding: 0.5rem 0; }
.edit-location-tab .attachment-uploader { margin-top: 0; }
.edit-location-tab .uploader-header { margin-bottom: 0.5rem; }
.edit-location-tab .upload-btn {
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.95rem;
    white-space: nowrap;
    margin-bottom: 0.5rem;
}
.edit-location-tab .upload-btn:hover { filter: brightness(1.06); }
.edit-location-tab .upload-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
.edit-location-tab .upload-card {
    background: var(--color-surface);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-sm);
    padding: 1.5rem 2rem 1.2rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.edit-location-tab .upload-hint { display: block; color: var(--color-textSecondary); font-size: 0.95em; opacity: 0.85; }
.edit-location-tab .file-row { display: flex; flex-direction: row; align-items: flex-end; gap: 1.2rem; }
.edit-location-tab .due-date-group { display: flex; flex-direction: column; min-width: 120px; max-width: 180px; }
.edit-location-tab .due-date-label { font-size: 0.875rem; font-weight: 500; color: var(--color-text-secondary); margin-bottom: 0.35rem; }
.edit-location-tab .file-label {
    display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
    background: var(--color-background); border-radius: 0.375rem; padding: 0.5rem 1rem;
    border: 1px solid var(--color-border); width: 85%;
}
.edit-location-tab .file-label:hover { border: 1.5px solid var(--color-primary); }
.edit-location-tab .file-input { display: none; }
.edit-location-tab .file-label-text { color: var(--color-textSecondary); font-weight: 500; }
.edit-location-tab .file-icon-label { font-size: 1.5em; color: var(--color-primary); }
.edit-location-tab .styled-input {
    background: var(--color-background); border: 1px solid var(--color-border);
    border-radius: 0.375rem; padding: 0.45rem 0.9rem; width: 100%;
    color: var(--color-text); font-size: 0.9rem;
}
.edit-location-tab .upload-actions { display: flex; gap: 0.7rem; align-items: stretch; height: 2.5rem; }
.edit-location-tab .upload-actions .upload-btn { margin-bottom: 0; }
.edit-location-tab .outlined-cancel {
    background: none; color: var(--color-error); border: 1.5px solid var(--color-error);
    padding: 0.35rem 0.9rem; border-radius: 0.375rem; font-weight: 500; cursor: pointer;
}
.edit-location-tab .outlined-cancel:hover { background: var(--color-error); color: #fff; }
.edit-location-tab .attachments-list { display: flex; flex-direction: column; gap: 1rem; }
.edit-location-tab .attachment-product {
    display: flex; align-items: flex-start; gap: 1.25rem;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 0.5rem; padding: 0.75rem 1.25rem; box-shadow: var(--shadow-sm);
}
.edit-location-tab .preview {
    width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
    background: var(--color-background); border-radius: 0.375rem; flex-shrink: 0;
}
.edit-location-tab .file-icon { font-size: 2.2rem; color: var(--color-textMuted); }
.edit-location-tab .meta { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.edit-location-tab .filename { font-weight: 600; color: var(--color-text); word-break: break-all; }
.edit-location-tab .filesize,
.edit-location-tab .duedate,
.edit-location-tab .description { color: var(--color-textSecondary); font-size: 0.92em; }
.edit-location-tab .actions { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end; }
.edit-location-tab .actions button {
    background: var(--color-surfaceHover); color: var(--color-primary); border: none;
    border-radius: 0.375rem; padding: 0.35rem 0.9rem; font-size: 0.98em; cursor: pointer;
}
.edit-location-tab .delete-btn { color: var(--color-error); background: none; border: 1px solid var(--color-error); }
.edit-location-tab .delete-btn:hover { background: var(--color-error); color: #fff; }
.edit-location-tab .no-attachments {
    color: var(--color-textSecondary); font-size: 1em; margin-top: 0.5rem; padding-left: 1rem;
}
.edit-location-tab .app-button.danger { background: #dc2626; color: #fff; }
@media (max-width: 900px) {
    .edit-location-tab .form-row { flex-direction: column; align-items: stretch; }
    .edit-location-tab .email-group { flex: 1; }
}

/* ===== Definições (Vue SettingsTab) ===== */
.settings-tab { height: 100%; padding: 24px; background-color: var(--color-background); overflow-y: auto; box-sizing: border-box; }
.settings-dashboard-grid { animation: settings-fade 0.4s ease-out; }
.settings-tab .dashboard-header { margin-bottom: 32px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.settings-tab .title-section h2 { margin: 0; font-size: 2rem; font-weight: 700; color: var(--color-text); letter-spacing: -0.02em; }
.settings-tab .title-section .subtitle { margin: 4px 0 0; color: var(--color-text-secondary); font-size: 1rem; }
.settings-tab .search-wrapper { position: relative; width: 320px; }
.settings-tab .dashboard-search-input {
    width: 100%; padding: 12px 16px 12px 42px; background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: 12px; color: var(--color-text); font-size: 0.9375rem;
}
.settings-tab .dashboard-search-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.1); }
.settings-tab .search-icon-svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--color-text-tertiary); }
.settings-tab .sections-container { display: flex; flex-direction: column; gap: 48px; }
.settings-tab .settings-section .section-header { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.settings-tab .settings-section .section-title {
    margin: 0; padding: 0; border: 0; font-size: 0.75rem; font-weight: 700; color: var(--color-text-tertiary);
    text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap;
}
.settings-tab .section-line { flex: 1; height: 1px; background: linear-gradient(to right, var(--color-border), transparent); }
.settings-tab .grid-list-wrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.settings-tab .grid-card {
    background: var(--color-surface); border-radius: 16px; padding: 24px 20px; cursor: pointer;
    border: 1px solid var(--color-border); display: flex; flex-direction: column; align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.settings-tab .grid-card:hover { transform: translateY(-8px); box-shadow: 0 12px 30px -10px rgba(0,0,0,.15); border-color: var(--color-primary-subtle); }
.settings-tab .card-content { display: flex; flex-direction: column; align-items: center; }
.settings-tab .icon-section { position: relative; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.settings-tab .main-icon { width: 28px; height: 28px; color: var(--color-text-secondary); z-index: 2; }
.settings-tab .grid-card:hover .main-icon { color: var(--color-primary); }
.settings-tab .icon-blob { position: absolute; inset: 0; background: var(--color-primary); border-radius: 35% 65% 70% 30% / 30% 30% 70% 70%; opacity: 0.05; }
.settings-tab .card-label { font-weight: 700; color: var(--color-text); font-size: 1rem; text-align: center; line-height: 1.25; }
.settings-tab .content-card { background: var(--color-surface); border-radius: 20px; border: 1px solid var(--color-border); min-height: calc(100vh - 160px); }
.settings-tab .content-card:has(.groups-settings) { min-height: auto; }
.settings-tab .nav-header { padding: 20px 24px; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.settings-tab .tags-new-btn { border-radius: 0.5rem; padding: 0.45rem 0.95rem; font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.settings-tab .content-card:has(.user-tags-panel) { min-height: auto; }
.settings-tab .content-card:has(.container-permissions-settings) { min-height: auto; }
.settings-tab .content-card:has(.categories-settings) { display: flex; flex-direction: column; }
.settings-tab .detail-content-area:has(.categories-settings) { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.settings-tab .detail-content-area:has(.container-permissions-settings) { padding: 0.85rem 1.15rem 1.15rem; }
.settings-tab .detail-content-area:has(.user-tags-panel) { padding: 0.85rem 1.15rem 1.15rem; }
.settings-tab .user-tags-panel .data-table { border-bottom: 1px solid var(--color-border); table-layout: fixed; }
.settings-tab .user-tags-panel .data-table th:last-child,
.settings-tab .user-tags-panel .data-table td:last-child { width: 6rem; }
.settings-tab .user-tags-panel .empty-table-cell { padding: 1.15rem 1rem; font-size: 0.9rem; }
.settings-tab .header-left { display: flex; align-items: center; gap: 16px; }
.settings-tab .back-btn {
    display: flex; align-items: center; gap: 8px; background: none; border: none;
    color: var(--color-text-secondary); font-size: 0.875rem; font-weight: 600; cursor: pointer;
    padding: 8px 12px; border-radius: 8px;
}
.settings-tab .back-btn:hover { background: var(--color-surface-hover); color: var(--color-primary); }
.settings-tab .back-icon { width: 18px; height: 18px; }
.settings-tab .breadcrumb-separator { color: var(--color-border); }
.settings-tab .current-page-title { font-size: 1.25rem; font-weight: 700; color: var(--color-text); }
.settings-tab .detail-content-area { padding: 32px; }
.settings-tab .settings-section-detail { max-width: 800px; }
.settings-tab .settings-section-detail--wide { max-width: none; }
.settings-tab .settings-section-detail > .section-title { font-size: 1.75rem; font-weight: 700; color: var(--color-text); margin: 0 0 8px; text-transform: none; letter-spacing: normal; }
.settings-tab .section-description { color: var(--color-text-secondary); margin-bottom: 32px; font-size: 1rem; }
.settings-tab .setting-group { margin-bottom: 24px; padding: 24px; background: var(--color-background); border: 1px solid var(--color-border); border-radius: 16px; }
.settings-tab .group-title { font-size: 1.125rem; font-weight: 700; color: var(--color-text); margin: 0 0 20px; }
.settings-tab .setting-product { margin-bottom: 16px; }
.settings-tab .setting-label { display: flex; align-items: center; gap: 12px; cursor: pointer; color: var(--color-text); font-weight: 500; }
.settings-tab .checkbox-label { position: relative; padding-left: 32px; }
.settings-tab .checkbox-label input { position: absolute; opacity: 0; }
.settings-tab .checkbox-custom { position: absolute; left: 0; width: 20px; height: 20px; border: 2px solid var(--color-border); border-radius: 6px; }
.settings-tab .checkbox-label input:checked + .checkbox-custom { background: var(--color-primary); border-color: var(--color-primary); }
.settings-tab .checkbox-custom::after { content: "✓"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0); color: #fff; font-size: 12px; }
.settings-tab .checkbox-label input:checked + .checkbox-custom::after { transform: translate(-50%,-50%) scale(1); }
.settings-tab .notification-advance-time-inputs { display: flex; gap: 12px; align-items: center; }
.settings-tab .setting-input, .settings-tab .setting-select {
    padding: 10px 14px; background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 8px; color: var(--color-text);
}
.settings-tab .theme-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }
.settings-tab .theme-option { padding: 16px; border: 2px solid var(--color-border); border-radius: 12px; text-align: center; cursor: pointer; font-weight: 600; }
.settings-tab .theme-option.active { border-color: var(--color-primary); }
.settings-tab .form-grid, .settings-tab .address-subgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.settings-tab .input-group { display: flex; flex-direction: column; gap: 0.4rem; }
.settings-tab .input-group label { font-size: 0.875rem; font-weight: 500; color: var(--color-text-secondary); }
.settings-tab .form-input { padding: 0.75rem 1rem; border: 1px solid var(--color-border); border-radius: 0.375rem; background: var(--color-surface); color: var(--color-text); }
.settings-tab .embedded-toolbar,
.settings-tab .header-actions,
.settings-tab .details-actions,
.settings-tab .form-actions,
.settings-tab .rop-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
}
.settings-tab .embedded-toolbar { justify-content: space-between; margin-bottom: 1rem; }
.settings-tab .embedded-toolbar.toolbar-end { justify-content: flex-end; }
.settings-tab .form-actions { justify-content: flex-end; margin-top: 2rem; }
.settings-tab .app-button {
    padding: 0.4375rem 1rem; border-radius: 0.35rem; font-weight: 500; font-size: 0.8125rem;
    min-height: 2rem; line-height: 1.2; box-sizing: border-box;
    display: inline-flex; align-items: center; gap: 0.4rem;
}
.settings-tab .inline-add { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.settings-tab .inline-add .form-control { min-width: 10rem; }
.settings-tab .pairing-page { display: flex; flex-direction: column; gap: 1.25rem; }
.settings-tab .pairing-page .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.settings-tab .app-switch { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--color-surface-light, var(--color-background)); border: 1px solid var(--color-border); }
.settings-tab .app-switch-btn { border: 0; background: transparent; color: var(--color-text-secondary); border-radius: 999px; padding: 0.45rem 0.9rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.82rem; }
.settings-tab .app-switch-btn small { font-size: 0.68rem; font-weight: 700; opacity: 0.7; }
.settings-tab .app-switch-btn.active { background: var(--color-primary); color: #fff; }
.settings-tab .app-switch-btn.active small { color: rgba(255,255,255,.8); }
.settings-tab .app-mark { width: 18px; height: 18px; border-radius: 5px; object-fit: cover; display: block; background: #004030; }
.settings-tab .stage-mark { width: 72px; height: 72px; border-radius: 18px; object-fit: cover; display: block; margin: 0 auto 0.85rem; background: #004030; }
.settings-tab .ghost-icon { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.settings-tab .studio { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(280px, 380px); gap: 1.25rem; min-height: 460px; }
.settings-tab .stage { background: #eef1f0; color: #1c2b26; border: 1px solid var(--color-border); border-radius: 28px; padding: 2rem 2.1rem 1.7rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.2rem; }
.settings-tab .stage-copy { max-width: 26rem; }
.settings-tab .stage-copy .eyebrow { margin: 0 0 0.25rem; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; font-weight: 800; color: var(--color-accent); }
.settings-tab .stage-copy h2 { margin: 0; font-size: 1.7rem; letter-spacing: -0.03em; font-weight: 750; color: #14211c; }
.settings-tab .stage-copy .lede { margin: 0.4rem 0 0; font-size: 0.92rem; line-height: 1.45; color: #4d5e57; }
.settings-tab .qr-plate { background: #fff; padding: 14px; border-radius: 22px; line-height: 0; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); }
.settings-tab .qr-plate img { display: block; }
.settings-tab .qr-plate--wait { width: 228px; height: 228px; display: grid; place-items: center; color: #4d5e57; font-size: 0.85rem; padding: 1rem; line-height: 1.4; }
.settings-tab .code-bar { width: min(100%, 320px); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 0.9rem; border-radius: 16px; background: #fff; border: 1px solid #d7dedb; text-align: left; }
.settings-tab .code-bar span { display: block; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: #66756f; }
.settings-tab .code-bar strong { font-size: 1.05rem; letter-spacing: 0.14em; color: #14211c; }
.settings-tab .text-btn { border: 0; background: transparent; color: var(--color-primary); cursor: pointer; font-weight: 700; }
.settings-tab .stage .actions { display: flex; gap: 0.55rem; }
.settings-tab .stage .primary, .settings-tab .stage .secondary { border-radius: 999px; padding: 0.6rem 1.15rem; cursor: pointer; font-size: 0.85rem; font-weight: 700; }
.settings-tab .stage .primary { border: 0; background: var(--color-primary); color: #fff; }
.settings-tab .stage .primary:disabled { opacity: 0.45; cursor: not-allowed; }
.settings-tab .stage .secondary { border: 1px solid #d7dedb; background: #fff; color: #14211c; }
.settings-tab .devices { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 28px; padding: 1.25rem 1.15rem; display: flex; flex-direction: column; min-height: 0; }
.settings-tab .devices header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.85rem; }
.settings-tab .devices h3 { margin: 0; font-size: 1.05rem; }
.settings-tab .devices header p { margin: 0.25rem 0 0; font-size: 0.78rem; line-height: 1.4; color: var(--color-text-secondary); }
.settings-tab .devices .count { min-width: 1.7rem; height: 1.7rem; padding: 0 0.45rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-background); color: var(--color-primary); font-size: 0.78rem; font-weight: 800; }
.settings-tab .devices-empty { flex: 1; display: grid; place-items: center; color: var(--color-text-muted); font-size: 0.88rem; text-align: center; min-height: 180px; }
.settings-tab .devices ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; overflow: auto; }
.settings-tab .devices li { display: grid; grid-template-columns: 40px 1fr auto; gap: 0.7rem; align-items: center; padding: 0.7rem; border-radius: 16px; background: var(--color-background); }
.settings-tab .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--color-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.settings-tab .devices li strong { display: block; font-size: 0.88rem; }
.settings-tab .devices li small { color: var(--color-text-muted); font-size: 0.74rem; }
.settings-tab .unpair { border: 0; background: transparent; color: var(--color-error, #dc2626); cursor: pointer; font-size: 0.78rem; font-weight: 700; }
.settings-tab .devices li.dev-card { grid-template-columns: 40px 1fr auto; grid-template-areas: "av info status" "sel sel rem"; row-gap: 0.65rem; border: 1px solid var(--color-border); padding: 0.8rem; }
.settings-tab .dev-card .avatar { grid-area: av; }
.settings-tab .dev-card .dev-info { grid-area: info; min-width: 0; }
.settings-tab .dev-card .dev-info small { display: block; margin-top: 0.1rem; font-family: ui-monospace, Consolas, monospace; }
.settings-tab .dev-status { grid-area: status; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; }
.settings-tab .dev-status.ok { background: rgba(34, 197, 94, 0.16); color: #22c55e; }
.settings-tab .dev-status.pending { background: rgba(245, 158, 11, 0.18); color: #f59e0b; }
.settings-tab .dev-select { grid-area: sel; width: 100%; min-width: 0; }
.settings-tab .dev-card .dev-remove { grid-area: rem; justify-self: end; align-self: center; }
.settings-tab .permissions-content { display: grid; grid-template-columns: 350px 1fr; gap: 2rem; min-height: 420px; }
.settings-tab .containers-list { background: var(--color-background); border: 1px solid var(--color-border); border-radius: 16px; overflow: auto; }
.settings-tab .container-item { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; cursor: pointer; border-bottom: 1px solid var(--color-border); }
.settings-tab .container-item.active { background: rgba(var(--color-primary-rgb), 0.08); border-left: 4px solid var(--color-primary); }
.settings-tab .container-icon { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--color-primary-rgb), 0.1); color: var(--color-primary); flex-shrink: 0; }
.settings-tab .container-info { flex: 1; min-width: 0; }
.settings-tab .container-name { font-weight: 600; }
.settings-tab .users-badge { font-size: 0.85rem; font-weight: 600; color: var(--color-text-secondary); background: var(--color-surface); padding: 0.25rem 0.5rem; border-radius: 6px; display: inline-flex; align-items: center; gap: 0.3rem; }
.settings-tab .users-grid { display: flex; flex-direction: column; gap: 0.45rem; }
.settings-tab .user-checkbox-item { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--color-border); border-radius: 8px; padding: 0.55rem 0.75rem; }
.settings-tab .user-details { display: flex; flex-direction: column; gap: 0.15rem; }
.settings-tab .user-email { font-size: 0.8rem; color: var(--color-text-muted); }
.settings-tab .admin-toggle, .settings-tab .alerts-toggle { border: 1px solid var(--color-border); background: none; border-radius: 6px; padding: 0.25rem 0.5rem; cursor: pointer; }
.settings-tab .admin-toggle.active, .settings-tab .alerts-toggle.active { border-color: var(--color-primary); color: var(--color-primary); }
.settings-tab .empty-selection { display: flex; align-items: center; justify-content: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; color: var(--color-text-secondary); min-height: 280px; }
.settings-tab .container-permissions-settings .permissions-content { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 0.85rem; min-height: 0; }
.settings-tab .container-permissions-settings .containers-list { background: var(--color-background); border-radius: 12px; }
.settings-tab .container-permissions-settings .container-item { padding: 0.85rem 1rem; }
.settings-tab .container-permissions-settings .users-selection { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; display: flex; flex-direction: column; min-width: 0; }
.settings-tab .container-permissions-settings .selection-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0.85rem 1rem; border-bottom: 1px solid var(--color-border); }
.settings-tab .container-permissions-settings .header-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.settings-tab .container-permissions-settings .header-info h3 { margin: 0; font-size: 0.95rem; font-weight: 650; }
.settings-tab .container-permissions-settings .selection-stats { font-size: 0.78rem; color: var(--color-text-secondary); }
.settings-tab .container-permissions-settings .header-actions { margin-left: auto; gap: 0.55rem; flex-wrap: nowrap; }
.settings-tab .container-permissions-settings .access-search { position: relative; width: 220px; }
.settings-tab .container-permissions-settings .access-search svg { position: absolute; left: 0.65rem; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; }
.settings-tab .container-permissions-settings .access-search input { width: 100%; height: 34px; box-sizing: border-box; padding: 0 0.75rem 0 2.05rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-background); color: var(--color-text); font-size: 0.82rem; }
.settings-tab .container-permissions-settings .access-search input:focus { outline: none; border-color: var(--color-primary); }
.settings-tab .container-permissions-settings .access-clear, .settings-tab .container-permissions-settings .access-save { height: 34px; padding: 0 0.9rem; border-radius: 8px; font-weight: 600; font-size: 0.82rem; cursor: pointer; white-space: nowrap; }
.settings-tab .container-permissions-settings .access-clear { background: var(--color-background); border: 1px solid var(--color-border); color: var(--color-text); }
.settings-tab .container-permissions-settings .access-save { background: var(--color-primary); border: 0; color: #fff; }
.settings-tab .container-permissions-settings .users-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.7rem; padding: 0.85rem 1rem 1rem; }
.settings-tab .container-permissions-settings .user-checkbox-item { justify-content: flex-start; gap: 0.7rem; padding: 0.7rem 0.8rem; border-radius: 10px; background: transparent; min-width: 0; }
.settings-tab .container-permissions-settings .user-checkbox-item.checked { border-color: var(--color-primary); background: rgba(var(--color-primary-rgb), 0.06); }
.settings-tab .container-permissions-settings .checkbox-indicator { width: 20px; height: 20px; flex-shrink: 0; border: 2px solid var(--color-border); border-radius: 5px; background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.settings-tab .container-permissions-settings .checked .checkbox-indicator { background: var(--color-primary); border-color: var(--color-primary); }
.settings-tab .container-permissions-settings .user-details { flex: 1; min-width: 0; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; color: inherit; }
.settings-tab .container-permissions-settings .user-name { display: block; font-weight: 650; font-size: 0.88rem; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-tab .container-permissions-settings .user-email { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-tab .container-permissions-settings .admin-toggle, .settings-tab .container-permissions-settings .alerts-toggle { width: 28px; height: 28px; flex-shrink: 0; border: 0; border-radius: 8px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-secondary); background: var(--color-surface); opacity: 0.55; cursor: pointer; }
.settings-tab .container-permissions-settings .admin-toggle.active { color: #f59e0b; background: rgba(245, 158, 11, 0.14); opacity: 1; }
.settings-tab .container-permissions-settings .alerts-toggle.active { color: var(--color-primary-bright); background: rgba(var(--color-primary-rgb), 0.16); opacity: 1; }
.settings-tab .container-permissions-settings .empty-selection { min-height: 0; background: var(--color-background); border-radius: 12px; }
.settings-tab .container-permissions-settings .no-users-found { grid-column: 1 / -1; margin: 0; text-align: center; color: var(--color-text-secondary); padding: 1.5rem; }
.settings-tab .empty-state { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 280px; }
.settings-tab .empty-state .big-icon { width: 64px; height: 64px; opacity: 0.2; }
.settings-tab .empty-state p { margin: 0; }
.settings-tab .devices-empty, .settings-tab .no-results-dashboard { color: var(--color-text-muted); }
.settings-tab .empty-table-cell { padding: 2.5rem 1rem; color: var(--color-text-muted); }
.settings-tab .pagination-container { display: flex; justify-content: center; margin-top: 1rem; padding-bottom: 0.5rem; }
.settings-tab .pagination { display: flex; align-items: center; gap: 1rem; }
.settings-tab .pagination-info { font-size: 0.875rem; color: var(--color-text-secondary); }
.settings-tab .data-table th.sortable { cursor: default; }
.settings-tab .sort-caret { display: inline-block; margin-left: 0.3rem; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid currentColor; opacity: 0.55; vertical-align: middle; }
.settings-tab .detail-content-area:has(.settings-embedded-tab) { padding: 16px 20px 24px; }
.settings-tab .settings-list-header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.settings-tab .search-bar { flex: 1; min-width: 220px; }
.settings-tab .search-input-wrapper { position: relative; }
.settings-tab .search-input { width: 100%; padding: 0.5rem 2.5rem 0.5rem 0.75rem; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-background); color: var(--color-text); }
.settings-tab .search-icon { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: var(--color-text-muted); pointer-events: none; }
.settings-tab .search-icon svg { width: 1rem; height: 1rem; display: block; }
.settings-tab .status-toggle { display: flex; align-items: center; gap: 0.45rem; font-size: 0.875rem; color: var(--color-text); }
.settings-tab .action-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-left: auto; }
.settings-tab .split-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; min-height: 420px; }
.settings-tab .brands-section, .settings-tab .models-section { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; }
.settings-tab .split-section-header { padding: 1.25rem; border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.settings-tab .split-title { font-size: 1.125rem; font-weight: 600; margin: 0; color: var(--color-text); }
.settings-tab .brands-list, .settings-tab .models-list { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.25rem; }
.settings-tab .brand-product, .settings-tab .model-product { border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-background); min-height: 2.5rem; }
.settings-tab .brand-product:not(.new-product) { cursor: pointer; }
.settings-tab .brand-product:hover:not(.new-product), .settings-tab .model-product:hover { background: var(--color-surface-hover); border-color: var(--color-primary); }
.settings-tab .brand-product.active, .settings-tab .brand-product.active:hover:not(.new-product) { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.settings-tab .brand-product.active .brand-name, .settings-tab .brand-product.active .brand-meta, .settings-tab .brand-product.active .category-name, .settings-tab .brand-product.active .category-label, .settings-tab .brand-product.active .category-description { color: #fff; }
.settings-tab .brand-info, .settings-tab .model-info { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.75rem; gap: 0.75rem; }
.settings-tab .brand-name, .settings-tab .model-name { font-size: 0.875rem; font-weight: 500; margin: 0; }
.settings-tab .brand-actions, .settings-tab .model-actions { display: flex; gap: 0.25rem; }
.settings-tab .action-btn { width: 1.5rem; height: 1.5rem; border: none; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.settings-tab .edit-btn { background: rgba(245, 158, 11, 0.1); color: rgb(245, 158, 11); }
.settings-tab .delete-btn { background: rgba(239, 68, 68, 0.1); color: rgb(239, 68, 68); }
.settings-tab .new-product { border: 2px dashed var(--color-primary); background: rgba(var(--color-primary-rgb), 0.05); }
.settings-tab .new-brand-form, .settings-tab .new-model-form, .settings-tab .edit-brand-form { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; flex-wrap: wrap; }
.settings-tab .inline-input { flex: 1; min-width: 8rem; padding: 0.375rem 0.5rem; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-background); color: var(--color-text); }
.settings-tab .inline-actions { display: flex; gap: 0.25rem; }
.settings-tab .inline-btn { width: 1.5rem; height: 1.5rem; border: none; border-radius: 4px; cursor: pointer; }
.settings-tab .save-btn { background: rgba(34, 197, 94, 0.1); color: rgb(34, 197, 94); }
.settings-tab .cancel-btn { background: rgba(156, 163, 175, 0.1); color: rgb(156, 163, 175); }
.settings-tab .empty-state { padding: 2rem 1rem; text-align: center; color: var(--color-text-muted); }
.settings-tab .category-details { display: flex; flex-direction: column; gap: 0.15rem; }
.settings-tab .category-label { font-size: 0.75rem; color: var(--color-text-muted); }
.settings-tab .categories-settings { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.settings-tab .categories-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.settings-tab .categories-toolbar .search-bar { flex: 0 1 280px; min-width: 180px; }
.settings-tab .categories-export { display: inline-flex; align-items: center; gap: 0.4rem; border: 0; background: transparent; color: var(--color-text-secondary); font-size: 0.85rem; font-weight: 600; cursor: pointer; padding: 0.35rem 0.2rem; }
.settings-tab .categories-export:disabled { opacity: 0.45; cursor: not-allowed; }
.settings-tab .categories-export:not(:disabled):hover { color: var(--color-primary); }
.settings-tab .categories-settings .categories-split { flex: 1; min-height: 0; align-items: stretch; }
.settings-tab .categories-settings .categories-panel-head { display: flex; align-items: center; justify-content: flex-end; padding: 0.7rem 1rem; min-height: 52px; }
.settings-tab .categories-settings .assets-panel .categories-panel-head { justify-content: flex-start; }
.settings-tab .categories-settings .categories-panel-head h2 { margin: 0; font-size: 1rem; font-weight: 650; color: var(--color-text); }
.settings-tab .categories-settings .new-category-btn { border: 0; border-radius: 0.5rem; padding: 0.45rem 0.9rem; min-height: 2.15rem; background: var(--color-primary); color: #fff; font-weight: 600; font-size: 0.85rem; }
.settings-tab .categories-settings .brands-list, .settings-tab .categories-settings .models-list { flex: 1; }
.settings-tab .categories-settings .categories-empty { flex: 1; display: flex; align-items: center; justify-content: center; max-width: none; padding: 2rem 1rem; color: var(--color-text-muted); text-align: center; }
.settings-tab .categories-settings .categories-empty p { margin: 0; }
.settings-tab .categories-settings .brand-product.new-product { border: 2px dashed var(--color-primary); background: rgba(var(--color-primary-rgb), 0.05); border-radius: 10px; }
.settings-tab .categories-settings .new-brand-form, .settings-tab .categories-settings .edit-brand-form { flex-direction: column; align-items: stretch; gap: 0.55rem; width: 100%; padding: 0.85rem 0.95rem; }
.settings-tab .categories-settings .inline-input { width: 100%; min-width: 0; flex: none; padding: 0.55rem 0.75rem; border-radius: 6px; background: var(--color-background); }
.settings-tab .categories-settings .inline-actions { justify-content: flex-start; margin-top: 0.15rem; }
.settings-tab .categories-settings .inline-btn { width: 28px; height: 28px; border-radius: 6px; }
.settings-tab .add-asset-section { padding: 1rem 1rem 0; position: relative; }
.settings-tab .add-asset-label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.4rem; }
.settings-tab .asset-filter-input { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-background); color: var(--color-text); }
.settings-tab .add-results-dropdown { position: absolute; left: 1rem; right: 1rem; z-index: 5; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; margin-top: 0.25rem; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.settings-tab .picker-row { display: block; width: 100%; text-align: left; border: none; background: none; padding: 0.55rem 0.75rem; cursor: pointer; color: var(--color-text); }
.settings-tab .picker-row:hover { background: var(--color-surface-hover); }
.settings-tab .status-indicator.status-green { color: #059669; }
.settings-tab .status-indicator.status-red { color: #ef4444; }
.settings-tab .status-indicator { display: inline-flex; }
.settings-tab .users-tab .users-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.settings-tab .users-tab .users-toolbar-left { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }
.settings-tab .users-tab .search-input { width: min(280px, 46vw); background: var(--color-background); color: var(--color-text); }
.settings-tab .users-tab .action-buttons { display: flex; align-items: center; gap: 0.7rem; margin-left: auto; }
.settings-tab .users-tab .action-buttons .app-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
    background: var(--color-primary); color: #fff; border: none;
    border-radius: 0.5rem; padding: 0.55rem 1.05rem; min-height: 2.4rem;
    font-size: 0.9rem; font-weight: 500; line-height: 1;
}
.settings-tab .users-tab .action-buttons .app-button svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.settings-tab .users-tab .status-indicator { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.settings-tab .users-tab .status-indicator.status-green { background: #059669; color: #fff; }
.settings-tab .users-tab .status-indicator.status-red { background: #dc2626; color: #fff; }
.settings-tab .users-tab .sort-caret.desc { border-bottom: 0; border-top: 5px solid currentColor; }
.settings-tab .users-tab th.sortable { cursor: pointer; }
.settings-tab .users-tab .actions-header, .settings-tab .users-tab .actions-cell { width: 4.5rem; text-align: right; }
.settings-tab .users-tab .data-table td.actions-cell { overflow: visible; position: relative; z-index: 2; }
.settings-tab .users-tab .data-table tr:has(.dropdown-trigger.active) { position: relative; z-index: 5; }
.settings-tab .users-tab .action-dropdown { position: relative; display: inline-flex; justify-content: flex-end; }
.settings-tab .users-tab .dropdown-trigger { width: 32px; height: 32px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.settings-tab .users-tab .dropdown-trigger.active, .settings-tab .users-tab .dropdown-trigger:hover { border-color: var(--color-primary); color: var(--color-primary); }
.settings-tab .users-tab .dropdown-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; min-width: 220px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: 0 12px 28px rgba(0,0,0,.28); padding: 0.25rem; }
.settings-tab .dropdown-product {
    display: flex; align-items: center; width: 100%; padding: 0.5rem 0.75rem;
    font-size: 0.875rem; color: var(--color-text); background: transparent; border: none;
    cursor: pointer; text-align: left; border-radius: 8px;
}
.settings-tab .dropdown-product:hover { background: var(--color-surface-hover); }
.settings-tab .edit-user-tab .sub-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--color-border); margin-bottom: 1.25rem; }
.settings-tab .edit-user-tab .form-section h3 { margin: 1.4rem 0 1rem; padding-bottom: 0.65rem; border-bottom: 1px solid var(--color-border); font-size: 0.98rem; font-weight: 650; }
.settings-tab .edit-user-tab .user-basic { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 1.5rem; align-items: start; }
.settings-tab .edit-user-tab .form-group.narrow { flex: 0.55; }
.settings-tab .edit-user-tab .flags-row { align-items: flex-end; flex-wrap: wrap; }
.settings-tab .edit-user-tab .group-field { flex: 0.9; }
.settings-tab .edit-user-tab .inline-flags { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-bottom: 0.7rem; }
.settings-tab .edit-user-tab .plain-check { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--color-text); font-size: 0.9rem; }
.settings-tab .edit-user-tab .photo-panel { display: flex; flex-direction: column; gap: 0.45rem; }
.settings-tab .edit-user-tab .photo-label { font-size: 0.875rem; font-weight: 500; color: var(--color-text-secondary); }
.settings-tab .edit-user-tab .photo-frame { width: 160px; height: 170px; border: 2px dashed var(--color-border); border-radius: 12px; background: var(--color-background); color: var(--color-text-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; text-align: center; cursor: pointer; position: relative; overflow: hidden; padding: 0.5rem; }
.settings-tab .edit-user-tab .photo-frame small { font-size: 0.7rem; }
.settings-tab .edit-user-tab .photo-icon { width: 36px; height: 36px; }
.settings-tab .edit-user-tab .photo-frame.has-image { padding: 0; cursor: default; }
.settings-tab .edit-user-tab .photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.settings-tab .edit-user-tab .remove-photo { position: absolute; top: 0.4rem; right: 0.4rem; width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--color-error, #dc2626); color: #fff; cursor: pointer; }
.settings-tab .edit-user-tab .military-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.85rem 1rem; }
.settings-tab .edit-user-tab .military-grid .wide, .settings-tab .edit-user-tab .contact-grid .wide { grid-column: 1 / -1; }
.settings-tab .edit-user-tab .contacts-card { border: 1px solid var(--color-border); border-radius: 12px; padding: 1rem 1rem 0.4rem; }
.settings-tab .edit-user-tab .contacts-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.8rem; }
.settings-tab .edit-user-tab .contacts-head h4 { margin: 0; font-size: 0.95rem; }
.settings-tab .edit-user-tab .contact-grid { display: grid; grid-template-columns: 1.4fr 0.8fr; gap: 0.85rem 1rem; margin-bottom: 0.8rem; }
.settings-tab .edit-user-tab .rfid-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.settings-tab .edit-user-tab .tag-list { border: 1px solid var(--color-border); border-radius: 12px; min-height: 220px; display: flex; flex-direction: column; }
.settings-tab .edit-user-tab .list-header { padding: 0.75rem 1rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border); }
.settings-tab .edit-user-tab .tag-items { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; }
.settings-tab .edit-user-tab .empty-list-msg { margin: 1.5rem 0; text-align: center; color: var(--color-text-muted); font-size: 0.88rem; }
.settings-tab .edit-user-tab .tag-item { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; border: 1px solid var(--color-border); background: var(--color-background); color: var(--color-text); border-radius: 8px; padding: 0.55rem 0.7rem; cursor: pointer; }
.settings-tab .edit-user-tab .tag-item small { color: var(--color-text-muted); }
.settings-tab .edit-user-tab .add-hint, .settings-tab .edit-user-tab .unlink { margin-left: auto; color: var(--color-primary); font-weight: 700; background: none; border: 0; cursor: pointer; }
.users-import-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 1vh 1vw; }
.users-import-modal { width: 98vw; max-width: 98vw; height: 95vh; max-height: 95vh; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; }
.users-import-header, .users-import-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.75rem; border-bottom: 1px solid var(--color-border); }
.users-import-footer { border-bottom: 0; border-top: 1px solid var(--color-border); justify-content: flex-end; gap: 0.75rem; }
.users-import-header h2 { margin: 0; font-size: 1.2rem; font-weight: 700; }
.users-import-close { width: 32px; height: 32px; border: 0; border-radius: 8px; background: var(--color-background); color: var(--color-text-secondary); cursor: pointer; font-size: 1.25rem; }
.users-import-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.75rem; border-bottom: 1px solid var(--color-border); }
.users-import-browse { display: inline-flex; align-items: center; justify-content: center; padding: 0.55rem 1.25rem; border: 0; border-radius: 8px; background: var(--color-primary); color: #fff; font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.users-import-browse:hover { filter: brightness(1.06); }
.users-import-options { display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; padding: 1rem 1.75rem; border-bottom: 1px solid var(--color-border); }
.users-import-options > label { margin: 0; max-width: 320px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-secondary); }
.users-import-options p { margin: 0.15rem 0 0; max-width: 420px; color: var(--color-text-secondary); font-size: 0.75rem; }
.users-import-options .form-control, .users-import-modal .form-control, .users-import-modal .stepper input { background: var(--color-background); color: var(--color-text); border: 1px solid var(--color-border); }
.users-import-options select.form-control {
    appearance: none;
    -webkit-appearance: none;
    max-width: 320px;
    width: 100%;
    height: auto;
    min-height: 44px;
    margin-top: 0.15rem;
    padding: 0.7rem 2.5rem 0.7rem 0.9rem;
    line-height: 1.4;
    overflow: visible;
    border-radius: 6px;
    font-weight: 600;
    color: var(--color-primary);
    background-color: var(--color-background);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232d8a6e' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 12px 8px;
}
.users-import-modal .row-controls { display: flex; gap: 1.5rem; }
.users-import-modal .row-controls label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-secondary); }
.users-import-modal .stepper { display: inline-flex; align-items: center; height: 34px; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; background: var(--color-background); }
.users-import-modal .stepper button { width: 30px; height: 100%; border: 0; background: transparent; color: var(--color-text-secondary); cursor: pointer; }
.users-import-modal .stepper input { width: 65px; height: 100%; border: 0; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); text-align: center; background: transparent; color: var(--color-text); }
.users-import-preview { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem 1.75rem; }
.users-import-preview h3 { margin: 0; font-size: 0.9rem; color: var(--color-text-secondary); font-weight: 600; }
.users-import-empty { flex: 1; min-height: 280px; display: grid; place-items: center; color: var(--color-text-muted); background: var(--color-background); border: 1px solid var(--color-border); border-radius: 10px; }
.users-import-table-wrap { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-background); }
.import-preview-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.82rem; }
.import-preview-table th, .import-preview-table td { padding: 0.55rem 0.75rem; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); text-align: left; white-space: nowrap; }
.import-preview-table .map-row th { background: var(--color-surface); border-bottom: 1px solid var(--color-primary); }
.import-preview-table .map-row select { color: var(--color-primary); font-weight: 600; background: var(--color-background); }
.users-import-footer .app-button { padding: 0.55rem 1.15rem; border-radius: 8px; min-height: 2.35rem; font-weight: 600; }
.users-import-footer .app-button.outline { background: transparent; border: 1px solid var(--color-border); color: var(--color-text-secondary); }
.users-import-footer .app-button.primary { background: var(--color-primary); color: #fff; border: 0; }
@media (max-width: 900px) {
    .settings-tab .edit-user-tab .user-basic, .settings-tab .edit-user-tab .rfid-split, .settings-tab .edit-user-tab .military-grid { grid-template-columns: 1fr; }
}
.settings-tab .not-associated { color: var(--color-text-muted); font-style: italic; }
.settings-tab .users-tab .tab-header, .settings-tab .edit-reader-tab .tab-header, .settings-tab .edit-user-tab .tab-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.settings-tab .tab-title { margin: 0; font-size: 1.35rem; font-weight: 700; }
.settings-tab .tab-navigation { display: flex; gap: 0.5rem; border-bottom: 1px solid var(--color-border); margin-bottom: 1rem; }
.settings-tab .nav-item { border: none; background: none; padding: 0.6rem 0.85rem; cursor: pointer; color: var(--color-text-secondary); font-weight: 600; }
.settings-tab .nav-item.active { color: var(--color-primary); border-bottom: 2px solid var(--color-primary); }
.settings-tab .required-indicator { color: var(--color-error); }
.settings-tab .groups-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: nowrap; }
.settings-tab .groups-toolbar .toolbar-actions { align-self: flex-start; margin-left: auto; }
.settings-tab .cards-stack { display: flex; flex-direction: column; gap: 1.25rem; flex: 1; min-width: 0; }
.settings-tab .section-heading { margin: 0; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-text-secondary); }
.settings-tab .section-empty { margin: 0; padding: 0.75rem 0.25rem; font-size: 0.88rem; color: var(--color-text-secondary); }
.settings-tab .types-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.75rem; }
.settings-tab .type-card { border: 1px solid var(--color-border); border-radius: 12px; padding: 0.9rem 1rem; background: var(--color-surface); cursor: pointer; }
.settings-tab .type-card:hover { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); }
.settings-tab .type-card.selected { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.settings-tab .type-card-header { display: flex; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.settings-tab .type-title { margin: 0; font-size: 1.02rem; font-weight: 700; }
.settings-tab .type-badges { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.25rem; }
.settings-tab .group-badge, .settings-tab .system-badge, .settings-tab .individual-badge { display: inline-flex; padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; }
.settings-tab .group-badge { background: color-mix(in srgb, var(--color-primary) 16%, var(--color-surface)); color: var(--color-primary); }
.settings-tab .system-badge { background: color-mix(in srgb, #0284c7 22%, var(--color-surface)); color: #0284c7; }
.settings-tab .individual-badge { background: color-mix(in srgb, #c5a028 22%, var(--color-surface)); color: #c5a028; }
.settings-tab .type-key { font-size: 0.75rem; color: var(--color-text-secondary); }
.settings-tab .type-details { border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); padding: 1.25rem 1.35rem 1.4rem; margin-top: 1.25rem; }
.settings-tab .details-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); }
.settings-tab .details-title-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.settings-tab .details-title-row h3 { margin: 0; font-size: 1.35rem; }
.settings-tab .details-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.settings-tab .detail-section { margin-top: 1.25rem; }
.settings-tab .detail-section h4 { margin: 0 0 0.75rem; font-size: 0.95rem; font-weight: 700; }
.settings-tab .permissions-table-wrapper { overflow: auto; border: 1px solid var(--color-border); border-radius: 12px; }
.settings-tab .permissions-table-wrapper.flags-wrap { max-width: 420px; }
.settings-tab .permissions-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.settings-tab .permissions-table th, .settings-tab .permissions-table td { padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--color-border); text-align: center; }
.settings-tab .permissions-table th:first-child, .settings-tab .permissions-table td:first-child { text-align: left; }
.settings-tab .permissions-table thead th { background: var(--color-surface-hover); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary); }
.settings-tab .permission-indicator { display: inline-flex; align-items: center; justify-content: center; width: 1.55rem; height: 1.55rem; border-radius: 999px; font-weight: 800; }
.settings-tab .permission-indicator.enabled { background: #059669; color: #fff; }
.settings-tab .permission-indicator.disabled { background: #dc2626; color: #fff; }
.settings-tab .member-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.settings-tab .member-list li { display: flex; justify-content: space-between; align-items: center; padding: 0.45rem 0; border-bottom: 1px solid var(--color-border); }
.settings-tab .groups-settings .types-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 260px)); }
.settings-tab .permission-na { color: var(--color-text-muted); font-size: 0.95rem; }
.settings-tab .add-users-cta {
    display: flex; align-items: center; gap: 0.75rem; text-align: left; padding: 0.7rem 0.9rem;
    border-radius: 10px; border: 1px solid color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)); color: inherit;
    cursor: pointer; min-width: 220px; flex-shrink: 0; font-family: inherit;
}
.settings-tab .add-users-cta:hover { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 18%, var(--color-surface)); }
.settings-tab .add-users-cta .cta-icon { width: 1.35rem; height: 1.35rem; color: var(--color-primary); flex-shrink: 0; }
.settings-tab .add-users-cta span { display: flex; flex-direction: column; gap: 0.1rem; }
.settings-tab .add-users-cta strong { font-size: 0.92rem; color: var(--color-text); font-weight: 650; }
.settings-tab .add-users-cta small { font-size: 0.75rem; color: var(--color-text-secondary); }
.settings-tab .user-type-form {
    border: 1px solid var(--color-border); border-radius: 8px; padding: 1rem 1.1rem 1.15rem;
    background: var(--color-surface); display: flex; flex-direction: column; gap: 1rem;
}
.settings-tab .form-header-text h3 { margin: 0; font-size: 1.15rem; }
.settings-tab .form-header-hint { margin: 0.2rem 0 0; font-size: 0.88rem; color: var(--color-text-secondary); font-weight: 400; }
.settings-tab .scope-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; }
.settings-tab .scope-choice-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; text-align: left;
    padding: 0.85rem 1rem; border-radius: 12px; border: 1px solid var(--color-border);
    background: var(--color-background); color: var(--color-text); cursor: pointer; font-family: inherit;
}
.settings-tab .scope-choice-card.active { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 30%, transparent); }
.settings-tab .scope-choice-card small { font-size: 0.78rem; color: var(--color-text-secondary); }
.settings-tab .groups-settings .form-field { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; }
.settings-tab .groups-settings .form-field input, .settings-tab .groups-settings .form-field select {
    padding: 0.55rem 0.7rem; border: 1px solid var(--color-border); border-radius: 8px;
    background: var(--color-background); color: var(--color-text); font: inherit;
}
.settings-tab .page-permissions-group h4 { margin: 0.4rem 0 0.55rem; font-size: 0.95rem; }
.settings-tab .flags-edit-list { display: flex; flex-direction: column; gap: 0.45rem; }
.settings-tab .flag-edit-row { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; cursor: pointer; }
.settings-tab .groups-settings input[type="checkbox"] { accent-color: var(--color-primary); width: 1rem; height: 1rem; }
.settings-tab .group-form-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.4rem; }
.agm-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(10, 22, 18, 0.62); display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.agm-modal { width: min(1180px, 96vw); height: min(860px, 90vh); background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; }
.agm-header, .agm-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--color-border); }
.agm-header h2 { margin: 0 0 0.3rem; font-size: 1.25rem; }
.agm-header p, .agm-footer span, .agm-hint, .agm-empty { margin: 0; color: var(--color-text-secondary); font-size: 0.875rem; }
.agm-close { border: 0; background: transparent; color: var(--color-text-muted); font-size: 1.5rem; width: 2.1rem; height: 2.1rem; cursor: pointer; border-radius: 8px; }
.agm-toolbar { padding: 0.8rem 1.35rem; border-bottom: 1px solid var(--color-border); }
.agm-search { width: 100%; box-sizing: border-box; padding: 0.55rem 0.75rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-background); color: var(--color-text); }
.agm-columns { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(220px, 0.9fr) minmax(280px, 1.25fr) minmax(220px, 0.95fr); }
.agm-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--color-border); }
.agm-col:last-child { border-right: 0; }
.agm-col.is-drop-target { background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-primary) 45%, transparent); }
.agm-col-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 0.85rem; border-bottom: 1px solid var(--color-border); }
.agm-col-title { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.agm-col-title h3 { margin: 0; font-size: 0.88rem; font-weight: 650; white-space: nowrap; }
.agm-col-actions { display: flex; align-items: center; gap: 0.45rem; }
.agm-count { font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 999px; background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)); color: var(--color-primary); }
.agm-count.filled { background: var(--color-primary); color: #fff; }
.agm-text-btn { border: 0; background: none; color: var(--color-primary); cursor: pointer; font-size: 0.78rem; font-weight: 650; }
.agm-text-btn.danger { color: #ef4444; }
.agm-move { border: 0; background: var(--color-primary); color: #fff; border-radius: 8px; padding: 0.3rem 0.65rem; cursor: pointer; font-size: 0.78rem; font-weight: 650; }
.agm-move:disabled, .agm-text-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.agm-table-wrap { flex: 1; min-height: 0; overflow: auto; }
.agm-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.agm-table th { text-align: left; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-secondary); padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--color-border); }
.agm-table td { padding: 0.4rem 0.7rem; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.agm-table tr.selected { background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.agm-person { display: flex; align-items: center; gap: 0.55rem; }
.agm-avatar { width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--color-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 700; flex-shrink: 0; }
.agm-person-meta { display: flex; flex-direction: column; min-width: 0; }
.agm-name { font-weight: 600; }
.agm-meta { font-size: 0.75rem; color: var(--color-text-muted); }
.agm-col-action { width: 2.4rem; text-align: right; }
.agm-col-check { width: 1.6rem; }
.agm-icon-btn { width: 1.6rem; height: 1.6rem; border: 1px solid var(--color-border); border-radius: 6px; background: transparent; color: var(--color-text); cursor: pointer; }
.agm-icon-btn.danger { color: #ef4444; border-color: transparent; }
.agm-check { display: inline-block; width: 0.95rem; height: 0.95rem; border: 1px solid var(--color-border); border-radius: 3px; background: var(--color-background); }
.agm-check.on { background: var(--color-primary); border-color: var(--color-primary); box-shadow: inset 0 0 0 2px var(--color-surface); }
.agm-hint { padding: 0.55rem 0.85rem; border-top: 1px solid var(--color-border); }
.agm-drop { margin: 0.85rem; min-height: 8rem; border: 1px dashed var(--color-border); border-radius: 10px; display: grid; place-items: center; text-align: center; color: var(--color-text-muted); padding: 1rem; }
.agm-empty { padding: 1.2rem 0.85rem; }
.agm-footer { border-bottom: 0; border-top: 1px solid var(--color-border); align-items: center; }
.agm-footer-actions { display: flex; gap: 0.55rem; }
@media (max-width: 980px) { .agm-columns { grid-template-columns: 1fr; } .agm-col { border-right: 0; border-bottom: 1px solid var(--color-border); min-height: 180px; } }
.settings-tab .company-settings .settings-form { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 2rem; }
.settings-tab .company-form-grid { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 2.5rem; }
.settings-tab .company-settings .info-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
.settings-tab .company-settings .address-section { grid-column: 1 / -1; margin-top: 1rem; }
.settings-tab .company-settings .address-subgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.settings-tab .company-settings .form-input { background: var(--color-background); }
.settings-tab .company-settings .form-input::placeholder { color: var(--color-text-muted); }
.settings-tab .logo-section { display: flex; flex-direction: column; gap: 0.75rem; }
.settings-tab .logo-container { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.settings-tab .logo-file { display: none; }
.settings-tab .logo-preview, .settings-tab .logo-placeholder { width: 160px; height: 160px; border-radius: 12px; border: 2px dashed var(--color-border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem; background: var(--color-background); position: relative; cursor: pointer; overflow: hidden; color: var(--color-text-muted); }
.settings-tab .logo-placeholder span { font-size: 0.75rem; text-align: center; padding: 0 0.5rem; }
.settings-tab .logo-preview img { width: 100%; height: 100%; object-fit: contain; padding: 0.5rem; }
.settings-tab .logo-file-btn { background: #fff; color: #111; border: 1px solid #767676; border-radius: 2px; padding: 1px 6px; font-size: 13px; font-weight: 400; cursor: pointer; }
.settings-tab .remove-logo { position: absolute; top: 0.5rem; right: 0.5rem; width: 24px; height: 24px; border-radius: 50%; background: var(--color-error, #dc2626); color: #fff; border: 0; cursor: pointer; line-height: 1; }
.settings-tab .save-btn svg { flex-shrink: 0; }
.settings-tab .workflow-section { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--color-border); }
.settings-tab .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.settings-tab .toggle-description { margin: 0.25rem 0 0; font-size: 0.8rem; color: var(--color-text-muted); }
.settings-tab .toggle-switch { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.settings-tab .toggle-switch input { opacity: 0; width: 0; height: 0; }
.settings-tab .toggle-slider { position: absolute; inset: 0; background: var(--color-border); border-radius: 999px; cursor: pointer; }
.settings-tab .toggle-slider::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s; }
.settings-tab .toggle-switch input:checked + .toggle-slider { background: var(--color-primary); }
.settings-tab .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
.rop-modal-wide { width: min(560px, 94vw); }
.rop-overlay { position: fixed; inset: 0; background: rgba(10,20,16,.45); z-index: 2000; display: flex; align-items: center; justify-content: center; }
.rop-modal { background: var(--color-surface); border-radius: 16px; padding: 1.5rem; width: min(420px, 94vw); display: flex; flex-direction: column; gap: 0.75rem; }
.rop-modal label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.875rem; }
.rop-modal input { padding: 0.65rem 0.8rem; border: 1px solid var(--color-border); border-radius: 8px; }
.rop-error { color: var(--color-error); margin: 0.5rem 0 0; font-size: 0.85rem; }
.rop-success { color: #004030; background: rgba(0, 64, 48, 0.08); border: 1px solid rgba(197, 160, 40, 0.45); border-radius: 8px; padding: 12px 14px; margin: 0 0 12px; }
.rop-hint { margin: 0 0 1rem; color: var(--color-text-muted, #64748b); font-size: 0.9rem; }
.rop-form { display: flex; flex-direction: column; gap: 0.85rem; }
.rop-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.4rem; }

.confirmation-modal-backdrop {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 2000;
    display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px);
}
.confirmation-modal {
    width: 480px; max-width: 90%; background: var(--color-surface, #fff);
    border-radius: 12px; border: 1px solid var(--color-border); overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.confirmation-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.5rem; border-bottom: 1px solid var(--color-border);
}
.confirmation-modal-title { display: flex; align-items: center; gap: 0.75rem; }
.confirmation-modal-title h3 { margin: 0; font-size: 1.25rem; font-weight: 600; color: var(--color-text); }
.confirmation-modal-icon { width: 1.5rem; height: 1.5rem; color: var(--color-warning); flex-shrink: 0; }
.confirmation-modal-icon svg { width: 100%; height: 100%; }
.confirmation-modal-close {
    background: none; border: none; cursor: pointer; color: var(--color-text-muted);
    padding: 0.5rem; border-radius: 6px; display: flex;
}
.confirmation-modal-close svg { width: 1.25rem; height: 1.25rem; }
.confirmation-modal-body { padding: 1.5rem; }
.confirmation-modal-body p { margin: 0; color: var(--color-text); line-height: 1.6; font-size: 0.9375rem; }
.confirmation-modal-body p.pin-reset-error { color: var(--color-error); margin-top: 0.75rem; }
.confirmation-modal-footer {
    display: flex; justify-content: flex-end; gap: 0.75rem;
    padding: 1rem 1.5rem; border-top: 1px solid var(--color-border);
}
.confirmation-modal-button {
    padding: 0.625rem 1.25rem; border-radius: 6px; font-weight: 500; font-size: 0.9375rem;
    cursor: pointer; min-width: 5.5rem; white-space: nowrap;
}
.confirmation-modal-button.cancel { background: transparent; border: 1px solid var(--color-border); color: var(--color-text); }
.confirmation-modal-button.confirm { background: var(--color-primary); color: #fff; border: none; }
.confirmation-modal-button:disabled { opacity: 0.5; cursor: not-allowed; }

.reset-success { background: color-mix(in srgb, var(--color-success) 14%, var(--color-surface)); color: var(--color-text); padding: 14px 16px; border-radius: 8px; margin-bottom: 16px; border: 1px solid color-mix(in srgb, var(--color-accent) 55%, var(--color-border)); }
.pin-requirements { background: var(--color-surface); border-radius: 8px; padding: 14px 16px; border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); text-align: left; margin-bottom: 20px; }
.pin-requirements ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--color-text-secondary); }
.pin-requirements li { margin-bottom: 4px; }
.pin-requirements li.met { color: var(--color-primary); font-weight: 600; }
@keyframes settings-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
    .settings-tab .dashboard-header, .settings-tab .studio, .settings-tab .permissions-content, .settings-tab .split-layout, .settings-tab .company-form-grid { grid-template-columns: 1fr; display: flex; flex-direction: column; }
    .settings-tab .search-wrapper { width: 100%; }
}

.impersonation-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1100;
    display: flex; justify-content: center; align-items: center; gap: 0.85rem;
    height: var(--impersonation-banner-height);
    padding: 0 1rem; box-sizing: border-box;
    background: #dbeafe; color: #1e3a5f; font-size: 0.9rem; font-weight: 600;
    border-bottom: 1px solid #93c5fd;
}
.impersonation-banner button {
    border: 1px solid #1d4ed8; background: #1d4ed8; color: #fff; border-radius: 6px;
    padding: 0.25rem 0.7rem; cursor: pointer; font-weight: 600;
}
.impersonation-banner button:hover { background: #1e40af; }
body:has(.impersonation-banner) .sidebar {
    top: var(--impersonation-banner-height);
}
body:has(.impersonation-banner) .tags-view-container {
    top: var(--impersonation-banner-height);
}
body:has(.impersonation-banner) .main-content {
    margin-top: calc(var(--tab-bar-height) + var(--impersonation-banner-height));
    min-height: calc(100vh - var(--tab-bar-height) - var(--impersonation-banner-height));
}
.su-page { position: fixed; inset: 0; overflow: auto; box-sizing: border-box; padding: 28px 32px 48px; background: var(--color-background); color: var(--color-text); }
.su-header, .su-header-actions, .su-tabs, .su-row-actions, .su-modal-actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.su-header { position: sticky; top: 0; z-index: 5; justify-content: space-between; margin-bottom: 0.25rem; background: var(--color-background); padding-bottom: 0.75rem; }
.su-header h1 { margin: 0; font-size: 1.5rem; font-weight: 750; letter-spacing: -0.02em; }
.su-search, .su-modal input, .su-modal select, .su-modal textarea {
    width: 100%; padding: 0.45rem 0.9rem; border: 1px solid var(--color-border); border-radius: 8px;
    background: var(--color-surface); color: var(--color-text); font: inherit;
}
.su-header .su-search { width: 220px; }
.su-new, .su-btn { border: 0; background: var(--color-primary); color: #fff; border-radius: 6px; padding: 0.5rem 1.2rem; font-weight: 600; font-size: 1rem; cursor: pointer; }
.su-new.secondary { background: #8b5cf6; }
.su-new.secondary:hover { background: #7c3aed; }
.su-new.tertiary { background: #10b981; }
.su-new.tertiary:hover { background: #059669; }
.su-logout { display: inline-flex; align-items: center; gap: 0.45rem; background: transparent; color: #f87171; border: 1px solid rgba(239, 68, 68, 0.45); border-radius: 6px; padding: 0.5rem 1rem; font-weight: 600; cursor: pointer; }
.su-logout:hover { background: color-mix(in srgb, var(--color-error) 12%, var(--color-surface)); }
.su-btn-quiet { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); }
.su-tabs { margin: 0 0 1.25rem; border-bottom: 1px solid var(--color-border); gap: 0.25rem; }
.su-tabs button { border: 0; background: transparent; color: var(--color-text-muted); font-weight: 650; font-size: 0.88rem; padding: 0.7rem 1.1rem; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.su-tabs button.on { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.su-dev { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; padding: 0.85rem 1rem; border-radius: 10px; color: var(--color-text-secondary); background: color-mix(in srgb, var(--color-info) 12%, var(--color-surface)); border: 1px solid color-mix(in srgb, var(--color-info) 35%, var(--color-border)); }
.su-dev strong { display: block; color: var(--color-text); margin-bottom: 0.15rem; }
.su-dev code { background: var(--color-surface-variant); color: var(--color-primary); padding: 0.15rem 0.4rem; border-radius: 5px; border: 1px solid var(--color-border); font-weight: 650; }
.su-empty { color: var(--color-text); }
.su-table-wrap { overflow-x: auto; }
.su-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.su-table th { background: var(--color-surface-variant); color: var(--color-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.7rem 1rem; font-size: 0.7rem; text-align: left; }
.su-table td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--color-border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-table tbody tr { cursor: pointer; }
.su-table tbody tr:hover { background: var(--color-surface-hover); }
.su-pill.on, .su-status.on { color: #10b981; font-weight: 700; }
.su-pill.off, .su-status.off { color: #ef4444; font-weight: 700; }
.su-impersonate { background: var(--color-primary); color: #fff; border: 0; border-radius: 6px; padding: 0.35rem 0.75rem; font-weight: 600; font-size: 0.85rem; cursor: pointer; }
.su-impersonate:hover { background: var(--color-primary-dark); }
.su-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 380px)); gap: 1.5rem; }
.su-plan { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 1.5rem; }
.su-plan:hover { border-color: var(--color-primary); }
.su-plan header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); }
.su-plan h3 { margin: 0; font-size: 1.15rem; }
.su-plan-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; }
.su-plan-row span { color: var(--color-text-muted); font-size: 0.875rem; }
.su-edit { width: 100%; margin-top: 0.75rem; background: #2563eb; color: #fff; border: 0; border-radius: 6px; padding: 0.625rem 1rem; font-weight: 600; cursor: pointer; }
.su-edit:hover { background: #1d4ed8; }
.su-apk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.su-apk { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.su-apk:hover { border-color: var(--color-primary); }
.su-apk.empty { border-style: dashed; }
.su-apk-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.85rem; }
.su-apk-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #004030; }
.su-apk-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.su-apk-titles { min-width: 0; }
.su-apk-titles h3 { margin: 0; font-size: 1.15rem; }
.su-apk-titles code { color: var(--color-text-muted); font-size: 0.78rem; background: transparent; }
.su-apk-pill { align-self: start; padding: 0.35rem 0.7rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.su-apk-pill.ok { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 16%, var(--color-surface)); border: 1px solid color-mix(in srgb, var(--color-success) 35%, transparent); }
.su-apk-pill.empty { color: var(--color-text-muted); background: var(--color-surface-variant); border: 1px solid var(--color-border); }
.su-apk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; background: var(--color-surface-variant); border: 1px solid var(--color-border); border-radius: 10px; padding: 0.85rem 0.5rem; }
.su-apk-stats div { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-align: center; }
.su-apk-stats span { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.su-apk-stats strong { font-size: 0.95rem; }
.su-bool { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; font-style: normal; }
.su-bool.off { color: var(--color-text-muted); background: rgba(148, 163, 184, 0.12); border: 1px solid rgba(148, 163, 184, 0.25); }
.su-bool.on { color: #fca5a5; background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.35); }
.su-apk-notes { margin: 0; font-size: 0.85rem; color: var(--color-text-secondary); border-left: 3px solid #3b82f6; padding: 0.6rem 0.85rem; border-radius: 6px; background: color-mix(in srgb, var(--color-surface-variant) 70%, transparent); }
.su-qr { display: flex; gap: 1rem; align-items: flex-start; padding: 0.85rem; border-radius: 8px; background: color-mix(in srgb, #0f172a 18%, var(--color-surface)); }
.su-qr-image { background: #fff; padding: 6px; border-radius: 6px; line-height: 0; flex-shrink: 0; }
.su-qr-image img { display: block; width: 180px; height: 180px; }
.su-qr-wait { width: 192px; height: 192px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0.5rem; box-sizing: border-box; border: 1px dashed var(--color-border); border-radius: 6px; color: var(--color-text-muted); font-size: 0.75rem; }
.su-qr-wait p, .su-qr-title, .su-qr-hint, .su-qr-url, .su-monitor-code { margin: 0; }
.su-qr-side { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; flex: 1; }
.su-qr-title { font-size: 0.85rem; font-weight: 600; }
.su-qr-hint, .su-qr-url { font-size: 0.75rem; color: var(--color-text-muted); line-height: 1.4; }
.su-qr-url { word-break: break-all; font-size: 0.65rem; }
.su-qr-side label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.75rem; color: var(--color-text-muted); }
.su-qr-side select { background: var(--color-background); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 6px; padding: 0.4rem 0.5rem; }
.su-copy { align-self: flex-start; margin-top: 0.25rem; background: transparent; color: #60a5fa; border: 1px solid rgba(96, 165, 250, 0.5); padding: 0.35rem 0.7rem; border-radius: 6px; font-size: 0.8rem; cursor: pointer; }
.su-copy:hover:not(:disabled) { background: rgba(96, 165, 250, 0.15); }
.su-copy:disabled { opacity: 0.45; cursor: not-allowed; }
.su-paired { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 0.45rem; }
.su-paired ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.su-paired li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.65rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-background); }
.su-paired li div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.su-paired li span { font-size: 0.72rem; color: var(--color-text-muted); }
.su-unpair { flex-shrink: 0; border: 0; border-radius: 8px; padding: 0.4rem 0.7rem; font-size: 0.75rem; font-weight: 700; cursor: pointer; background: #b91c1c; color: #fff; }
.su-history { display: flex; flex-direction: column; gap: 0.5rem; }
.su-history-head { display: flex; align-items: center; gap: 0.5rem; }
.su-history-head span { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.su-history-head em { background: rgba(59, 130, 246, 0.18); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.35); border-radius: 999px; padding: 0.1rem 0.45rem; font-size: 0.7rem; font-weight: 700; font-style: normal; }
.su-history > p { margin: 0; font-size: 0.85rem; color: var(--color-text-muted); font-style: italic; }
.su-history ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; max-height: 180px; overflow: auto; }
.su-history li { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.55rem 0.75rem; border: 1px solid var(--color-border); border-radius: 8px; background: color-mix(in srgb, var(--color-background) 65%, transparent); }
.su-history li.latest { border-color: rgba(16, 185, 129, 0.45); background: rgba(16, 185, 129, 0.06); }
.su-history li div { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.su-history li span { color: var(--color-text-muted); font-family: Consolas, monospace; font-size: 0.78rem; }
.su-history li em { background: rgba(16, 185, 129, 0.18); color: var(--color-success); border: 1px solid rgba(16, 185, 129, 0.4); border-radius: 999px; padding: 0.1rem 0.5rem; font-size: 0.65rem; font-weight: 700; font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; }
.su-history small { color: var(--color-text-muted); font-size: 0.75rem; }
.su-publish { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 0.5rem; background: linear-gradient(135deg, #0a7350 0%, #047857 100%); color: #fff; border: 0; border-radius: 10px; padding: 0.75rem 1rem; font-weight: 700; cursor: pointer; }
.su-publish:hover { background: linear-gradient(135deg, #059669 0%, #047857 100%); }
.su-updates { display: flex; flex-direction: column; gap: 1rem; }
.su-update { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 1.25rem 1.4rem; }
.su-update.off { opacity: 0.72; }
.su-update header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.su-update-version { color: var(--color-primary); font-weight: 700; }
.su-update h3 { margin: 0.15rem 0; }
.su-update header p, .su-update-notes { color: var(--color-text-muted); margin: 0; }
.su-update-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.75rem 0; }
.su-update-tags span, .su-tag { display: inline-block; border-radius: 999px; padding: 0.1rem 0.55rem; font-size: 0.75rem; font-weight: 700; background: var(--color-primary-fade); color: var(--color-primary); }
.su-link { background: none; border: 0; color: var(--color-primary); font-weight: 600; cursor: pointer; padding: 0; text-decoration: none; }
.su-danger { color: var(--color-error); }
.su-error { color: var(--color-error); }
.su-notice, .su-modal { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 1.6rem 1.8rem 1.4rem; }
.su-notice { margin-bottom: 1rem; }
.su-notice code { font-weight: 700; }
.su-users { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow: auto; display: flex; flex-direction: column; gap: 0.6rem; }
.su-users li { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.8rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-background); }
.su-users li div { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; }
.su-users li em { color: var(--color-primary-bright); font-style: normal; font-size: 0.85rem; }
.su-users li span { color: var(--color-text-muted); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; }
.su-modal-bg { position: fixed; inset: 0; background: rgba(10,20,16,.55); display: flex; align-items: center; justify-content: center; padding: 1.5rem; z-index: 30; }
.su-modal { width: min(480px, 100%); display: flex; flex-direction: column; gap: 1.1rem; max-height: calc(100vh - 3rem); overflow: auto; }
.su-modal-wide { width: min(720px, 100%); }
.su-modal h2 { margin: 0 0 0.4rem; font-size: 1.3rem; font-weight: 700; color: var(--color-primary-bright); }
.su-modal fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.su-modal legend { color: var(--color-text-muted); font-weight: 600; font-size: 1rem; margin-bottom: 0.35rem; }
.su-modal label { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 600; font-size: 0.97rem; margin-bottom: 0.85rem; }
.su-modal input, .su-modal select, .su-modal textarea { background: var(--color-background); border-color: var(--color-border); border-radius: 4px; }
.su-modal input:focus, .su-modal select:focus, .su-modal textarea:focus { border-color: var(--color-primary-bright); outline: none; }
.su-modal input::placeholder, .su-modal textarea::placeholder { color: var(--color-text-muted); opacity: 0.7; }
.su-check { flex-direction: row !important; align-items: center; margin-bottom: 0.4rem; }
.su-modal .su-check input { width: 18px; height: 18px; padding: 0; accent-color: var(--color-primary-bright); }
.su-modal-actions { justify-content: flex-start; margin-top: 0.4rem; }
.su-modal-actions.end { justify-content: flex-end; }
.su-save, .su-cancel { display: inline-flex; align-items: center; gap: 0.4rem; border-radius: 6px; padding: 0.5rem 0.95rem; font-weight: 600; cursor: pointer; }
.su-save { border: 0; background: #10b981; color: #fff; }
.su-save:hover:not(:disabled) { background: #059669; }
.su-save:disabled, .su-cancel:disabled { opacity: 0.55; cursor: not-allowed; }
.su-cancel { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); }
.su-cancel:hover:not(:disabled) { background: var(--color-surface-hover); }
.su-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; min-height: 148px; margin: 0; padding: 1.4rem; text-align: center; cursor: pointer; color: var(--color-text-muted); font-weight: 500; border: 2px dashed var(--color-border); border-radius: 10px; background: var(--color-background); }
.su-drop strong { color: var(--color-text); }
.su-drop-icon { font-size: 1.6rem; }
.su-drop:hover, .su-drop:focus-within { border-color: var(--color-primary-bright); }
.su-drop.has-file { border-style: solid; border-color: #10b981; background: rgba(16, 185, 129, 0.08); }
.su-modal .su-drop input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.su-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.su-tag { border: 0; cursor: pointer; }
.su-tag.on { background: rgba(5,150,105,.15); color: #059669; }
@media (max-width: 1100px) { .su-apk-grid { grid-template-columns: 1fr; } }

.settings-tab:has(.new-tag-composer) {
    display: flex; flex-direction: column; height: calc(100vh - var(--tab-bar-height)); overflow: hidden;
}
body:has(.impersonation-banner) .settings-tab:has(.new-tag-composer) {
    height: calc(100vh - var(--tab-bar-height) - var(--impersonation-banner-height));
}
.settings-tab:has(.new-tag-composer) .settings-layout,
.settings-tab:has(.new-tag-composer) .settings-content,
.settings-tab:has(.new-tag-composer) .content-card,
.settings-tab:has(.new-tag-composer) .detail-content-area,
.settings-tab:has(.new-tag-composer) .settings-embedded-tab {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.settings-tab:has(.new-tag-composer) .content-card { min-height: 0; overflow: hidden; }
.settings-tab:has(.new-tag-composer) .nav-header { flex-shrink: 0; }
.settings-tab:has(.new-tag-composer) .detail-content-area { padding: 16px 20px 20px; }
.settings-tab .new-tag-composer { flex: 1; min-height: 0; display: flex; flex-direction: column; height: 100%; }
.settings-tab .ntag-board {
    flex: 1; min-height: 0; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1fr);
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.5rem; overflow: hidden;
}
.settings-tab .ntag-form {
    padding: 1.5rem; border-right: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; overflow: auto;
}
.settings-tab .ntag-form-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.settings-tab .ntag-form-head h2, .settings-tab .ntag-list-head h2 { margin: 0; font-size: 1.15rem; font-weight: 650; color: var(--color-text); }
.settings-tab .zebra-pill {
    display: inline-flex; align-items: center; gap: 0.65rem; padding: 0.4rem 0.85rem;
    background: var(--color-background); border: 1px solid var(--color-border); border-radius: 2rem;
    font-size: 0.82rem; color: var(--color-text-secondary); white-space: nowrap;
}
.settings-tab .zebra-pill.active { border-color: #22c55e; background: rgba(34, 197, 94, 0.08); color: #16a34a; }
.settings-tab .zebra-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-text-muted); flex-shrink: 0; }
.settings-tab .zebra-pill.active .zebra-dot { background: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, 0.5); }
.settings-tab .zebra-toggle {
    padding: 0.2rem 0.65rem; background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 4px; font-size: 0.75rem; font-weight: 650; color: var(--color-text); cursor: pointer;
}
.settings-tab .ntag-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 1.15rem 1.25rem; }
.settings-tab .ntag-card h3 { margin: 0 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border); font-size: 1rem; font-weight: 600; }
.settings-tab .ntag-card label { display: block; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--color-text-secondary); }
.settings-tab .ntag-error { margin: 0; color: var(--color-error); font-size: 0.875rem; }
.settings-tab .ntag-add {
    display: flex; align-items: center; justify-content: center; padding: 1rem;
    background: linear-gradient(180deg, var(--color-surface), var(--color-background));
    border-right: 1px solid var(--color-border);
}
.settings-tab .add-tag-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem;
    width: 96px; min-height: 108px; padding: 1rem 0.7rem; border: 0; border-radius: 1rem; color: #fff;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    font-weight: 650; font-size: 0.84rem; line-height: 1.2; text-align: center; cursor: pointer;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}
.settings-tab .add-tag-btn svg { width: 1.4rem; height: 1.4rem; }
.settings-tab .add-tag-btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.settings-tab .ntag-list { padding: 1.5rem; background: var(--color-background); display: flex; flex-direction: column; gap: 1rem; min-width: 0; min-height: 0; height: 100%; overflow: auto; }
.settings-tab .ntag-list-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.settings-tab .ntag-count { font-size: 0.85rem; font-weight: 600; color: var(--color-text-secondary); background: var(--color-surface); border-radius: 1rem; padding: 0.15rem 0.5rem; }
.settings-tab .ntag-clear { padding: 0.4rem 0.8rem; background: transparent; color: var(--color-error); border: 1px solid var(--color-error); border-radius: 0.375rem; cursor: pointer; }
.settings-tab .ntag-empty { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.75rem; padding: 1rem; }
.settings-tab .ntag-empty svg { width: 3rem; height: 3rem; color: var(--color-text-muted); }
.settings-tab .ntag-empty p { margin: 0; font-size: 1.05rem; font-weight: 550; color: var(--color-text-secondary); }
.settings-tab .ntag-empty span { max-width: 280px; font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.4; }
.settings-tab .ntag-items { display: flex; flex-direction: column; gap: 0.75rem; overflow: auto; }
.settings-tab .ntag-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.5rem; }
.settings-tab .ntag-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border-radius: 1rem; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: #fff; font-family: ui-monospace, monospace; font-weight: 650; font-size: 0.85rem; }
.settings-tab .ntag-chip svg, .settings-tab .ntag-remove svg { width: 0.9rem; height: 0.9rem; }
.settings-tab .ntag-item p { margin: 0.45rem 0 0; font-size: 0.85rem; color: var(--color-text-secondary); }
.settings-tab .ntag-remove { width: 2rem; height: 2rem; border: 0; border-radius: 0.375rem; background: transparent; color: var(--color-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.settings-tab .ntag-remove:hover { background: var(--color-error); color: #fff; }
@media (max-width: 900px) {
    .settings-tab .ntag-board { grid-template-columns: 1fr; }
    .settings-tab .ntag-add { border-right: 0; border-bottom: 1px solid var(--color-border); }
    .settings-tab .add-tag-btn { flex-direction: row; width: auto; min-height: 0; }
}

.new-reader-tab {
    height: calc(100vh - var(--tab-bar-height));
    display: flex; flex-direction: column; box-sizing: border-box;
    padding: 0.75rem 1.25rem 1.25rem; background: var(--color-background); min-height: 0;
}
body:has(.impersonation-banner) .new-reader-tab {
    height: calc(100vh - var(--tab-bar-height) - var(--impersonation-banner-height));
}
.new-reader-tab .edit-reader-tab { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.new-reader-tab .tab-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; flex-shrink: 0; }
.new-reader-tab .tab-title { margin: 0; font-size: 1.5rem; font-weight: 600; }
.new-reader-tab .header-actions { display: flex; gap: 0.75rem; }
.new-reader-tab .reader-tab-container {
    flex: 1; min-height: 0; overflow: auto;
    background: var(--color-surface); border-radius: 0.5rem; padding: 0.875rem 1rem 1rem;
}
.new-reader-tab .reader-form-section { border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 1rem; background: var(--color-surface); }
.new-reader-tab .reader-form-section h2 { margin: 0 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border); font-size: 1rem; font-weight: 600; }
.new-reader-tab .form-group label { display: block; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--color-text-secondary); }
.new-reader-tab .reader-grid { display: grid; gap: 0.75rem 0.5rem; margin-bottom: 0.85rem; }
.new-reader-tab .reader-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.new-reader-tab .reader-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.new-reader-tab .reader-span { margin-bottom: 0.85rem; }
.new-reader-tab .setting-group { margin-top: 1rem; }

.settings-tab .reader-sheet { background: var(--color-surface); border-radius: 0.5rem; padding: 0.875rem 1rem 1rem; }
.settings-tab .reader-grid { display: grid; gap: 0.75rem 0.5rem; margin-bottom: 0.85rem; }
.settings-tab .reader-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.settings-tab .reader-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-tab .reader-span { margin-bottom: 0.85rem; }
.settings-tab .edit-reader-tab .ntag-card { margin-bottom: 0; }
@media (max-width: 900px) {
    .settings-tab .reader-grid.four, .settings-tab .reader-grid.two { grid-template-columns: 1fr; }
}

html[data-theme="dark"] .disc-chip,
html[data-theme="industrialDark"] .disc-chip,
html[data-theme="dark"] .kits-tab .disc-chip,
html[data-theme="industrialDark"] .kits-tab .disc-chip {
    background: #b91c1c;
    color: #fff;
    border: 1px solid #fecaca;
}
html[data-theme="dark"] .modal-overlay .nat-serial,
html[data-theme="industrialDark"] .modal-overlay .nat-serial {
    background: #1d4ed8;
    color: #fff;
}
html[data-theme="dark"] .modal-overlay .nat-bulk,
html[data-theme="industrialDark"] .modal-overlay .nat-bulk {
    background: #c2410c;
    color: #fff;
}
html[data-theme="dark"] .modal-overlay .item-badge,
html[data-theme="industrialDark"] .modal-overlay .item-badge {
    color: #fff;
    border-color: transparent;
}
html[data-theme="dark"] .modal-overlay .badge-returned,
html[data-theme="industrialDark"] .modal-overlay .badge-returned {
    background: #047857;
}
html[data-theme="dark"] .modal-overlay .badge-outstanding,
html[data-theme="industrialDark"] .modal-overlay .badge-outstanding,
html[data-theme="dark"] .modal-overlay .badge-missing,
html[data-theme="industrialDark"] .modal-overlay .badge-missing {
    background: #b91c1c;
}
html[data-theme="dark"] .modal-overlay .badge-unpicked,
html[data-theme="industrialDark"] .modal-overlay .badge-unpicked,
html[data-theme="dark"] .modal-overlay .badge-partial-picked,
html[data-theme="industrialDark"] .modal-overlay .badge-partial-picked {
    background: #c2410c;
}
html[data-theme="dark"] .modal-overlay .badge-partial-returned,
html[data-theme="industrialDark"] .modal-overlay .badge-partial-returned {
    background: #7e22ce;
}
html[data-theme="dark"] .modal-overlay .badge-ready,
html[data-theme="industrialDark"] .modal-overlay .badge-ready {
    background: #0369a1;
}
html[data-theme="dark"] .st-preparing,
html[data-theme="industrialDark"] .st-preparing,
html[data-theme="dark"] .kits-tab .st-preparing,
html[data-theme="industrialDark"] .kits-tab .st-preparing {
    background: #b45309;
    color: #fff;
}
html[data-theme="dark"] .st-ready,
html[data-theme="industrialDark"] .st-ready,
html[data-theme="dark"] .kits-tab .st-ready,
html[data-theme="industrialDark"] .kits-tab .st-ready {
    background: #1d4ed8;
    color: #fff;
}
html[data-theme="dark"] .st-open,
html[data-theme="industrialDark"] .st-open,
html[data-theme="dark"] .kits-tab .st-open,
html[data-theme="industrialDark"] .kits-tab .st-open {
    background: #c2410c;
    color: #fff;
}
html[data-theme="dark"] .st-closed,
html[data-theme="industrialDark"] .st-closed,
html[data-theme="dark"] .kits-tab .st-closed,
html[data-theme="industrialDark"] .kits-tab .st-closed {
    background: #047857;
    color: #fff;
}
html[data-theme="dark"] .modal-overlay .dir-out,
html[data-theme="industrialDark"] .modal-overlay .dir-out {
    background: #b91c1c;
    color: #fff;
}
html[data-theme="dark"] .modal-overlay .dir-in,
html[data-theme="industrialDark"] .modal-overlay .dir-in {
    background: #047857;
    color: #fff;
}
html[data-theme="dark"] .modal-overlay .dir-manual,
html[data-theme="industrialDark"] .modal-overlay .dir-manual {
    background: #475569;
    color: #fff;
}