:root {
    --font-main: "Segoe UI", Tahoma, sans-serif;
    --font-normal: 14px;
    --font-heading: 20px;
    --bg: #f6f9fd;
    --panel: #ffffff;
    --panel-soft: #f9fcff;
    --primary: #2f80c9;
    --primary-dark: #1d5f99;
    --primary-soft: #eaf5ff;
    --primary-line: #cfe7fb;
    --text: #1f2937;
    --muted: #667085;
    --border: #d8e6f3;
    --danger: #b42318;
    --danger-bg: #fff1f0;
    --success: #067647;
    --success-bg: #ecfdf3;
    --warning: #b54708;
    --warning-bg: #fff7ed;
    --shadow: 0 10px 24px rgba(36, 76, 118, .08);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-main);
    font-size: var(--font-normal);
    line-height: 1.45;
    color: var(--text);
    background: var(--bg);
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: var(--font-main); font-size: var(--font-normal); }

h1, h2, h3, .page-title, .section-title {
    font-family: var(--font-main);
    font-size: var(--font-heading);
    line-height: 1.25;
    margin: 0;
    font-weight: 700;
    letter-spacing: 0;
}

p { margin: 0; }

.auth-shell {
    background:
        linear-gradient(135deg, rgba(47, 128, 201, .10), rgba(255,255,255,.20)),
        var(--bg);
}

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-card {
    width: 420px;
    max-width: 100%;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 28px;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--primary-soft);
    border: 1px solid var(--primary-line);
    color: var(--primary-dark);
    font-weight: 700;
    font-size: var(--font-normal);
}

.brand-mark.small {
    width: 34px;
    height: 34px;
    border-radius: 8px;
}

.login-brand h1 { font-size: var(--font-heading); }
.login-brand p,
.login-heading p,
.panel-header p,
.topbar p,
.side-brand span {
    color: var(--muted);
    font-size: var(--font-normal);
}

.login-heading {
    padding: 22px 0 16px;
}

.login-heading h2 {
    margin-bottom: 6px;
}

.form-stack {
    display: grid;
    gap: 14px;
}

.form-field span {
    display: block;
    margin-bottom: 6px;
    color: var(--text);
    font-weight: 600;
    font-size: var(--font-normal);
}

.form-field input,
.form-field select,
.form-field textarea,
input,
select,
textarea {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    background: #fff;
    color: var(--text);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-field input:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(47, 128, 201, .12);
}

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

.check-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: var(--font-normal);
}

.check-row input {
    width: 15px;
    height: 15px;
    min-height: auto;
}

.btn {
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px 14px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-weight: 600;
    font-size: var(--font-normal);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

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

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

.btn-secondary {
    background: #fff;
    color: var(--primary-dark);
    border-color: var(--primary-line);
}

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

.btn-full {
    width: 100%;
}

.alert {
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
    font-size: var(--font-normal);
    font-weight: 600;
}

.alert-danger {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid #ffd5d2;
}

.alert-success {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid #bbf7d0;
}

.app-shell {
    display: flex;
    min-height: 100vh;
    background: var(--bg);
}

.sidebar {
    width: 245px;
    min-height: 100vh;
    padding: 16px;
    background: #ffffff;
    color: var(--text);
    border-right: 1px solid var(--border);
    position: sticky;
    top: 0;
}

.side-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 4px 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 14px;
}

.side-brand strong {
    display: block;
    font-size: var(--font-heading);
    font-weight: 700;
}

.side-nav {
    display: grid;
    gap: 4px;
}

.side-nav a {
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--text);
    font-size: var(--font-normal);
    font-weight: 600;
    border: 1px solid transparent;
}

.side-nav a:hover,
.side-nav a.active {
    color: var(--primary-dark);
    background: var(--primary-soft);
    border-color: var(--primary-line);
}

.main-content {
    flex: 1;
    min-width: 0;
    padding: 20px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.topbar h1 {
    font-size: var(--font-heading);
    margin-bottom: 3px;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-pill {
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--primary-soft);
    border: 1px solid var(--primary-line);
    color: var(--primary-dark);
    font-weight: 600;
    font-size: var(--font-normal);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.stat-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    box-shadow: var(--shadow);
}

.stat-card span {
    display: block;
    color: var(--muted);
    font-size: var(--font-normal);
    font-weight: 600;
}

.stat-card strong {
    display: block;
    margin-top: 6px;
    color: var(--primary-dark);
    font-size: var(--font-heading);
    font-weight: 700;
}

.content-panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.panel-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--panel-soft);
}

.panel-header h2 {
    font-size: var(--font-heading);
    margin-bottom: 3px;
}

.table-scroll {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-normal);
}

.data-table th {
    text-align: left;
    padding: 10px 12px;
    color: var(--text);
    background: #f1f7fd;
    border-bottom: 1px solid var(--border);
    font-size: var(--font-normal);
    font-weight: 700;
}

.data-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #edf3f9;
    vertical-align: middle;
    font-size: var(--font-normal);
}

.data-table tr:hover td {
    background: #fbfdff;
}

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: var(--font-normal);
    font-weight: 600;
    background: var(--primary-soft);
    color: var(--primary-dark);
    border: 1px solid var(--primary-line);
}

.badge-priority {
    background: var(--warning-bg);
    color: var(--warning);
    border-color: #fed7aa;
}

.badge-status {
    background: var(--success-bg);
    color: var(--success);
    border-color: #bbf7d0;
}

.empty-cell {
    text-align: center;
    color: var(--muted);
    padding: 24px !important;
}

@media (max-width: 1100px) {
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
    .app-shell { display: block; }
    .sidebar { width: 100%; min-height: auto; position: relative; }
    .side-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .topbar { align-items: flex-start; flex-direction: column; }
    .topbar-actions { width: 100%; justify-content: space-between; }
    .stats-grid { grid-template-columns: 1fr; }
}

.nav-toggle,
.mobile-menu-button,
.mobile-menu-backdrop {
    display: none;
}

.role-pill {
    padding: 8px 12px;
    border-radius: 999px;
    background: #f7fbff;
    border: 1px solid var(--border);
    color: var(--muted);
    font-weight: 600;
    font-size: var(--font-normal);
}

.quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.action-card {
    display: grid;
    gap: 6px;
    padding: 16px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.action-card strong {
    font-size: var(--font-heading);
    color: var(--primary-dark);
}

.action-card span {
    font-size: var(--font-normal);
    color: var(--muted);
}

.primary-action {
    background: var(--primary-soft);
    border-color: var(--primary-line);
}

.compact-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.simple-panel {
    padding: 22px;
}

.empty-state {
    display: grid;
    gap: 8px;
    color: var(--muted);
}

.empty-state h2 {
    color: var(--text);
}

@media (max-width: 800px) {
    .mobile-menu-button {
        display: inline-flex;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 40;
        min-height: 36px;
        align-items: center;
        justify-content: center;
        padding: 7px 11px;
        border-radius: 8px;
        border: 1px solid var(--primary-line);
        background: var(--panel);
        color: var(--primary-dark);
        font-weight: 700;
        box-shadow: var(--shadow);
    }

    .mobile-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: 30;
        background: rgba(15, 23, 42, .35);
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 50;
        width: 265px;
        min-height: 100vh;
        transform: translateX(-105%);
        transition: transform .18s ease;
        box-shadow: var(--shadow);
        overflow-y: auto;
    }

    .nav-toggle:checked ~ .sidebar {
        transform: translateX(0);
    }

    .nav-toggle:checked ~ .mobile-menu-backdrop {
        display: block;
    }

    .main-content {
        padding: 58px 12px 14px;
    }

    .side-nav {
        grid-template-columns: 1fr;
    }

    .topbar {
        gap: 12px;
        padding: 12px;
    }

    .topbar-actions {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .topbar-actions form,
    .topbar-actions button,
    .user-pill,
    .role-pill {
        width: 100%;
    }

    .quick-actions,
    .compact-grid {
        grid-template-columns: 1fr;
    }

    .panel-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .panel-header .btn {
        width: 100%;
    }
}

/* Dashboard visual enhancement pack */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.compact-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kpi-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 76px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #fff;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.kpi-card::after {
    content: "";
    position: absolute;
    right: -18px;
    top: -22px;
    width: 62px;
    height: 62px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .58);
}

.kpi-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.70);
    border: 1px solid rgba(255,255,255,.65);
    position: relative;
    z-index: 1;
}

.kpi-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.kpi-content {
    display: grid;
    gap: 1px;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.kpi-content span,
.kpi-content small {
    font-size: var(--font-normal);
    font-weight: 600;
}

.kpi-content span { color: rgba(31, 41, 55, .78); }
.kpi-content small { color: rgba(31, 41, 55, .60); }

.kpi-content strong {
    color: var(--text);
    font-size: var(--font-heading);
    line-height: 1.15;
    font-weight: 700;
}

.kpi-blue { background: linear-gradient(135deg, #eef8ff, #ffffff); border-color: #cdeaff; color: #1d5f99; }
.kpi-amber { background: linear-gradient(135deg, #fff8e8, #ffffff); border-color: #fde7b5; color: #a15c00; }
.kpi-red { background: linear-gradient(135deg, #fff1f1, #ffffff); border-color: #ffd1d1; color: #b42318; }
.kpi-teal { background: linear-gradient(135deg, #eafbf7, #ffffff); border-color: #bfeee2; color: #047466; }
.kpi-purple { background: linear-gradient(135deg, #f3f1ff, #ffffff); border-color: #ddd6fe; color: #5145a5; }
.kpi-green { background: linear-gradient(135deg, #ecfdf3, #ffffff); border-color: #bbf7d0; color: #067647; }

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}

.dashboard-side-stack {
    display: grid;
    gap: 16px;
}

.compact-panel {
    overflow: hidden;
}

.tight-header {
    padding: 12px 14px;
}

.action-list,
.summary-list {
    display: grid;
    gap: 8px;
    padding: 12px;
}

.mini-action {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #fbfdff;
    color: var(--text);
    font-weight: 600;
}

.mini-action:hover {
    border-color: var(--primary-line);
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.mini-action-icon,
.action-symbol {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--primary-soft);
    border: 1px solid var(--primary-line);
    color: var(--primary-dark);
    font-weight: 700;
    font-size: var(--font-normal);
}

.summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #edf3f9;
    font-size: var(--font-normal);
    color: var(--muted);
}

.summary-row:last-child {
    border-bottom: 0;
}

.summary-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    min-width: 54px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: var(--font-normal);
    font-weight: 700;
    border: 1px solid transparent;
}

.chip-blue { background: var(--primary-soft); color: var(--primary-dark); border-color: var(--primary-line); }
.chip-green { background: var(--success-bg); color: var(--success); border-color: #bbf7d0; }
.chip-amber { background: var(--warning-bg); color: var(--warning); border-color: #fed7aa; }
.chip-red { background: var(--danger-bg); color: var(--danger); border-color: #ffd5d2; }

.polished-actions .action-card {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 4px 12px;
}

.polished-actions .action-card strong,
.polished-actions .action-card span:last-child {
    grid-column: 2;
}

.polished-actions .action-symbol {
    grid-row: 1 / span 2;
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 12px;
}

@media (max-width: 1200px) {
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .compact-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
    .kpi-grid,
    .compact-kpi-grid {
        grid-template-columns: 1fr;
    }

    .kpi-card {
        min-height: 74px;
    }
}

/* Store directory module */
.store-directory-panel,
.store-view-panel {
    overflow: visible;
}

.store-directory-topbar {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-bottom: 1px solid var(--border);
    background: var(--panel-soft);
    border-radius: 12px 12px 0 0;
}

.store-type-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.store-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 7px 13px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--text);
    font-weight: 700;
}

.store-tab small {
    min-width: 24px;
    min-height: 24px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #f4f8fc;
    color: var(--muted);
    font-size: 12px;
}

.store-tab:hover,
.store-tab.active {
    background: var(--primary-soft);
    border-color: var(--primary-line);
    color: var(--primary-dark);
}

.store-tab.active small {
    background: rgba(47, 128, 201, .16);
    color: var(--primary-dark);
}

.store-search-form {
    width: 100%;
}

.store-search-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 180px auto auto;
    gap: 10px;
}

.store-directory-header {
    background: #fff;
}

.page-chip {
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--primary-soft);
    border: 1px solid var(--primary-line);
    color: var(--primary-dark);
    font-weight: 700;
}

.store-table th {
    white-space: nowrap;
}

.store-table td {
    white-space: normal;
}

.store-no-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    min-height: 30px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f2f7ff;
    border: 1px solid #cfe1fb;
    color: #235d99;
    font-weight: 700;
}

.store-main-cell {
    display: grid;
    gap: 4px;
}

.store-main-cell strong {
    font-size: var(--font-normal);
}

.store-main-cell small {
    color: var(--muted);
    font-size: 12px;
}

.address-cell {
    min-width: 270px;
}

.break-cell {
    word-break: break-word;
}

.category-badge,
.status-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid transparent;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.category-kfc { background: #eaf2ff; color: #2459c0; border-color: #cddfff; }
.category-costa { background: #f7edf1; color: #9c3857; border-color: #eed6de; }
.category-hotel { background: #efeaff; color: #6346c4; border-color: #ddd4ff; }
.category-pizza-hut { background: #fff4de; color: #a86a00; border-color: #f7d89a; }
.category-property { background: #eefaf4; color: #0d7a4f; border-color: #ccefdc; }
.category-general { background: #f4f7fa; color: #445163; border-color: #dce5ef; }

.status-open { background: #ecfdf3; color: #067647; border-color: #bbf7d0; }
.status-closed,
.status-permanently-closed { background: #fff1f0; color: #b42318; border-color: #ffd5d2; }

.row-action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 8px;
    color: var(--primary-dark);
    border: 1px solid var(--primary-line);
    background: var(--primary-soft);
    font-weight: 700;
}

.row-action-link:hover {
    background: #dff0ff;
}

.table-actions-col {
    width: 92px;
    white-space: nowrap;
}

.store-pagination-wrap {
    padding: 14px 16px 16px;
    border-top: 1px solid var(--border);
}

.pagination-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.pagination-left,
.pagination-center,
.pagination-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-btn,
.pagination-number,
.pagination-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    font-weight: 600;
}

.pagination-number.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.pagination-btn:hover,
.pagination-number:hover {
    border-color: var(--primary-line);
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.pagination-btn.disabled {
    color: #98a2b3;
    background: #f8fafc;
}

.store-view-header {
    align-items: flex-start;
}

.store-view-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.store-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
}

.detail-card {
    display: grid;
    gap: 6px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
}

.detail-card span {
    color: var(--muted);
    font-weight: 600;
}

.detail-card strong {
    font-size: var(--font-normal);
    color: var(--text);
    word-break: break-word;
}

.detail-wide {
    grid-column: span 2;
}

@media (max-width: 1200px) {
    .store-search-row {
        grid-template-columns: 1fr 1fr;
    }

    .store-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .store-directory-topbar,
    .store-pagination-wrap,
    .store-detail-grid {
        padding: 12px;
    }

    .store-search-row {
        grid-template-columns: 1fr;
    }

    .page-chip {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .store-table thead {
        display: none;
    }

    .store-table,
    .store-table tbody,
    .store-table tr,
    .store-table td {
        display: block;
        width: 100%;
    }

    .store-table tr {
        margin: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 12px;
        overflow: hidden;
        background: #fff;
    }

    .store-table td {
        border-bottom: 1px solid #edf3f9;
        padding: 10px 12px;
    }

    .store-table td:last-child {
        border-bottom: 0;
    }

    .store-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: var(--muted);
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .02em;
    }

    .table-actions-col {
        width: 100%;
    }

    .pagination-nav,
    .pagination-left,
    .pagination-center,
    .pagination-right,
    .store-view-actions {
        width: 100%;
    }

    .pagination-nav {
        flex-direction: column;
        align-items: stretch;
    }

    .pagination-left,
    .pagination-right {
        justify-content: space-between;
    }

    .pagination-center {
        flex-wrap: wrap;
        justify-content: center;
    }

    .store-detail-grid {
        grid-template-columns: 1fr;
    }

    .detail-wide {
        grid-column: span 1;
    }
}


/* Store listing refinement pack */
.store-table th:nth-child(3),
.store-table td:nth-child(3) {
    min-width: 135px;
    width: 135px;
}

.store-table .category-badge {
    white-space: nowrap;
    min-width: 104px;
}

.store-table th:nth-child(4),
.store-table td:nth-child(4) {
    min-width: 330px;
}

.store-table th:nth-child(5),
.store-table td:nth-child(5) {
    min-width: 155px;
}

.store-table th:nth-child(6),
.store-table td:nth-child(6) {
    min-width: 125px;
}

@media (max-width: 800px) {
    .store-table th:nth-child(3),
    .store-table td:nth-child(3),
    .store-table th:nth-child(4),
    .store-table td:nth-child(4),
    .store-table th:nth-child(5),
    .store-table td:nth-child(5),
    .store-table th:nth-child(6),
    .store-table td:nth-child(6) {
        min-width: 0;
        width: 100%;
    }
}

/* Store create/edit/delete pack */
.btn-danger {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

.btn-danger:hover {
    background: #8f1d14;
    border-color: #8f1d14;
}

.store-header-actions,
.row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.row-action-link.secondary {
    background: #fff;
    color: var(--text);
    border-color: var(--border);
}

.row-action-link.secondary:hover {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.store-form-body {
    padding: 16px;
}

.store-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.store-form-grid .form-field {
    display: grid;
    gap: 6px;
    margin: 0;
}

.store-form-grid .form-field span {
    margin: 0;
}

.store-form-grid textarea {
    min-height: 86px;
    resize: vertical;
}

.field-error {
    color: var(--danger);
    font-weight: 600;
    font-size: 12px;
}

.form-actions-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.delete-panel {
    margin: 0 16px 16px;
    padding: 14px;
    border: 1px solid #ffd5d2;
    border-radius: 12px;
    background: #fff8f7;
    display: grid;
    gap: 12px;
}

.delete-panel h2 {
    color: var(--danger);
}

.delete-panel p {
    color: var(--muted);
    margin-top: 4px;
}

.delete-store-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 10px;
    align-items: center;
}

@media (max-width: 1200px) {
    .store-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .store-header-actions,
    .row-actions,
    .form-actions-bar {
        width: 100%;
    }

    .store-header-actions .btn,
    .row-actions .row-action-link,
    .form-actions-bar .btn {
        flex: 1;
    }

    .store-form-body {
        padding: 12px;
    }

    .store-form-grid {
        grid-template-columns: 1fr;
    }

    .delete-panel {
        margin: 0 12px 12px;
    }

    .delete-store-form {
        grid-template-columns: 1fr;
    }
}

/* Store directory compact professional refinement */
.btn-sm {
    min-height: 31px;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.1;
}

.store-directory-topbar {
    gap: 10px;
    padding: 12px 14px;
}

.store-type-tabs {
    gap: 8px;
}

.store-tab {
    min-height: 34px;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 13px;
    box-shadow: none;
}

.store-tab small {
    min-width: 25px;
    min-height: 22px;
    font-size: 12px;
    font-weight: 800;
}

.store-tab-all { background: #eaf5ff; color: #155b91; border-color: #c2def7; }
.store-tab-kfc { background: #eaf2ff; color: #2459c0; border-color: #cddfff; }
.store-tab-costa { background: #f7edf1; color: #9c3857; border-color: #eed6de; }
.store-tab-hotel { background: #efeaff; color: #6346c4; border-color: #ddd4ff; }
.store-tab-pizza-hut { background: #fff4de; color: #a86a00; border-color: #f7d89a; }
.store-tab-property { background: #eefaf4; color: #0d7a4f; border-color: #ccefdc; }

.store-tab-all small { background: #d8ecff; color: #155b91; }
.store-tab-kfc small { background: #dbe8ff; color: #2459c0; }
.store-tab-costa small { background: #efd9e2; color: #9c3857; }
.store-tab-hotel small { background: #e0d8ff; color: #6346c4; }
.store-tab-pizza-hut small { background: #ffe3ad; color: #a86a00; }
.store-tab-property small { background: #d7f4e5; color: #0d7a4f; }

.store-tab.active {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 5px 14px rgba(36, 76, 118, .10);
}

.store-search-row {
    grid-template-columns: minmax(260px, 1fr) 145px auto auto;
    gap: 8px;
    align-items: center;
}

.store-search-row input,
.store-search-row select {
    min-height: 34px;
    padding: 6px 9px;
    font-size: 13px;
}

.store-directory-header {
    padding: 10px 14px;
}

.store-header-actions {
    gap: 7px;
}

.page-chip {
    min-height: 31px;
    padding: 5px 10px;
    font-size: 13px;
}

.store-table {
    table-layout: fixed;
    font-size: 13px;
}

.store-table th,
.store-table td {
    padding: 7px 10px;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.store-table th:nth-child(1),
.store-table td:nth-child(1) { width: 90px; }
.store-table th:nth-child(2),
.store-table td:nth-child(2) { width: 170px; }
.store-table th:nth-child(3),
.store-table td:nth-child(3) { width: 155px; min-width: 155px; }
.store-table th:nth-child(4),
.store-table td:nth-child(4) { width: auto; min-width: 260px; }
.store-table th:nth-child(5),
.store-table td:nth-child(5) { width: 155px; min-width: 155px; }
.store-table th:nth-child(6),
.store-table td:nth-child(6) { width: 128px; min-width: 128px; }
.store-table th:nth-child(7),
.store-table td:nth-child(7) { width: 96px; }
.store-table th:nth-child(8),
.store-table td:nth-child(8) { width: 92px; }

.store-main-cell,
.store-main-cell.single-line,
.address-cell,
.address-cell span,
.store-table td span,
.store-table td strong {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.store-no-pill {
    min-width: 44px;
    min-height: 25px;
    padding: 3px 9px;
    font-size: 13px;
}

.store-table .category-badge,
.store-table .status-tag {
    display: inline-flex;
    min-height: 25px;
    padding: 3px 9px;
    font-size: 12px;
    max-width: none;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

.store-table .category-badge {
    min-width: 112px;
}

.store-table .status-tag {
    min-width: 64px;
}

.row-actions {
    gap: 6px;
    justify-content: flex-start;
    flex-wrap: nowrap;
}

.row-action-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: var(--primary-dark);
    border: 1px solid var(--primary-line);
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
}

.row-action-icon:hover {
    background: #dff0ff;
}

.row-action-icon.secondary {
    background: #fff;
    color: #475467;
    border-color: var(--border);
}

.row-action-icon.secondary:hover {
    background: var(--primary-soft);
    color: var(--primary-dark);
    border-color: var(--primary-line);
}

@media (max-width: 800px) {
    .store-search-row {
        grid-template-columns: 1fr;
    }

    .store-table {
        table-layout: auto;
    }

    .store-table th,
    .store-table td,
    .store-table th:nth-child(n),
    .store-table td:nth-child(n) {
        width: 100%;
        min-width: 0;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .store-table td span,
    .store-table td strong,
    .address-cell span {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .row-actions {
        justify-content: flex-start;
    }

    .row-actions .row-action-icon {
        flex: 0 0 30px;
    }
}

/* Sidebar category/icon standard based on previous portal */
.sidebar {
    width: 270px;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.side-brand {
    padding: 8px 8px 14px;
    margin-bottom: 4px;
}

.side-brand strong {
    font-size: 16px;
}

.side-brand span {
    font-size: 12px;
}

.side-nav {
    display: block;
    overflow-y: auto;
    padding-right: 2px;
}

.nav-category {
    margin: 16px 6px 6px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.nav-category:first-child {
    margin-top: 4px;
}

.nav-category span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nav-category span::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}

.nav-link,
.side-nav a.nav-link {
    min-height: 38px;
    padding: 6px 9px;
    margin: 3px 0;
    border-radius: 11px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid transparent;
}

.nav-link:hover,
.nav-link.active,
.side-nav a.nav-link:hover,
.side-nav a.nav-link.active {
    background: linear-gradient(135deg, #eef7ff 0%, #e7f3ff 100%);
    color: #0f172a;
    border-color: #bfdbfe;
    box-shadow: inset 3px 0 0 #2563eb, 0 6px 16px rgba(37, 99, 235, .08);
}

.nav-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}

.nav-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-icon-blue { background: linear-gradient(135deg, #2563eb, #38bdf8); }
.nav-icon-green { background: linear-gradient(135deg, #16a34a, #22c55e); }
.nav-icon-teal { background: linear-gradient(135deg, #0d9488, #14b8a6); }
.nav-icon-cyan { background: linear-gradient(135deg, #0891b2, #22d3ee); }
.nav-icon-emerald { background: linear-gradient(135deg, #059669, #10b981); }
.nav-icon-sky { background: linear-gradient(135deg, #0284c7, #38bdf8); }
.nav-icon-amber { background: linear-gradient(135deg, #f59e0b, #f97316); }
.nav-icon-lime { background: linear-gradient(135deg, #65a30d, #84cc16); }
.nav-icon-indigo { background: linear-gradient(135deg, #4f46e5, #6366f1); }
.nav-icon-violet { background: linear-gradient(135deg, #7c3aed, #8b5cf6); }
.nav-icon-orange { background: linear-gradient(135deg, #ea580c, #fb923c); }
.nav-icon-yellow { background: linear-gradient(135deg, #ca8a04, #facc15); color: #3f2a00; }
.nav-icon-rose { background: linear-gradient(135deg, #e11d48, #fb7185); }
.nav-icon-purple { background: linear-gradient(135deg, #9333ea, #a855f7); }
.nav-icon-fuchsia { background: linear-gradient(135deg, #c026d3, #e879f9); }
.nav-icon-slate { background: linear-gradient(135deg, #475569, #64748b); }
.nav-icon-red { background: linear-gradient(135deg, #dc2626, #ef4444); }

.sidebar-footer {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.sidebar-user-name {
    padding: 0 8px 6px;
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-logout {
    width: 100%;
    min-height: 38px;
    padding: 6px 9px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: var(--danger);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    text-align: left;
}

.sidebar-logout:hover {
    background: var(--danger-bg);
    border-color: #fecaca;
}

@media (max-width: 800px) {
    .sidebar {
        width: 270px;
        padding: 14px 12px;
    }

    .side-nav {
        display: block;
    }
}

/* Sidebar icon correction: real vector symbols, no letter placeholders */
.nav-icon svg {
    width: 16px;
    height: 16px;
    display: block;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-icon svg path {
    vector-effect: non-scaling-stroke;
}

/* Sidebar scroll correction: menu scrolls separately, bottom access stays visible */
.sidebar {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

.side-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: #bfdbfe #f8fbff;
}

.side-nav::-webkit-scrollbar {
    width: 7px;
}

.side-nav::-webkit-scrollbar-track {
    background: #f8fbff;
    border-radius: 999px;
}

.side-nav::-webkit-scrollbar-thumb {
    background: #bfdbfe;
    border-radius: 999px;
}

.side-nav::-webkit-scrollbar-thumb:hover {
    background: #93c5fd;
}

.sidebar-footer {
    flex: 0 0 auto;
    background: #ffffff;
    margin-left: -2px;
    margin-right: -2px;
    padding: 10px 2px 0;
}

@media (max-width: 800px) {
    .sidebar {
        height: 100vh;
        max-height: 100vh;
        overflow: hidden;
    }

    .side-nav {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
}

/* Store list row-click behaviour */
.store-table tbody tr.clickable-row {
    cursor: pointer;
}

.store-table tbody tr.clickable-row:hover td {
    background: #f7fbff;
}

.store-table tbody tr.clickable-row:focus {
    outline: 2px solid #bfdbfe;
    outline-offset: -2px;
}

.store-table tbody tr.clickable-row .row-action-icon {
    cursor: pointer;
}

/* Store profile tabbed view pack */
.store-profile-panel {
    overflow: visible;
}

.store-profile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--panel-soft);
    border-radius: 12px 12px 0 0;
}

.store-profile-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.store-profile-title h2 {
    font-size: var(--font-heading);
    margin: 0 0 3px;
}

.store-profile-title p {
    max-width: 780px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.store-profile-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.store-summary-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: #fff;
}

.store-summary-strip div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fbfdff;
}

.store-summary-strip span {
    color: var(--muted);
    font-weight: 700;
}

.store-summary-strip strong {
    color: var(--primary-dark);
    font-weight: 800;
}

.store-tabs > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.store-tab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: #fbfdff;
}

.store-tab-bar label {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    font-weight: 700;
    cursor: pointer;
}

.store-tab-bar label:hover {
    border-color: var(--primary-line);
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.store-tab-content {
    display: none;
    padding: 14px 16px 16px;
}

#tab-details:checked ~ .store-tab-bar label[for="tab-details"],
#tab-accounts:checked ~ .store-tab-bar label[for="tab-accounts"],
#tab-cctv:checked ~ .store-tab-bar label[for="tab-cctv"],
#tab-assets:checked ~ .store-tab-bar label[for="tab-assets"],
#tab-tickets:checked ~ .store-tab-bar label[for="tab-tickets"],
#tab-audit:checked ~ .store-tab-bar label[for="tab-audit"] {
    background: var(--primary-soft);
    color: var(--primary-dark);
    border-color: var(--primary-line);
}

#tab-details:checked ~ .tab-details-content,
#tab-accounts:checked ~ .tab-accounts-content,
#tab-cctv:checked ~ .tab-cctv-content,
#tab-assets:checked ~ .tab-assets-content,
#tab-tickets:checked ~ .tab-tickets-content,
#tab-store-users:checked ~ .tab-store-users-content,
#tab-audit:checked ~ .tab-audit-content {
    display: block;
}

.compact-detail-grid {
    padding: 0;
}

.compact-detail-grid .detail-card {
    min-height: 62px;
    padding: 10px 12px;
}

.section-mini-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.section-mini-header strong {
    color: var(--text);
    font-size: var(--font-heading);
    line-height: 1.2;
}

.section-mini-header span {
    color: var(--muted);
    font-weight: 600;
}

.store-profile-table {
    font-size: 13px;
}

.store-profile-table th,
.store-profile-table td {
    padding: 7px 9px;
    white-space: nowrap;
}

.store-profile-table .clip-cell {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compact-scroll-table {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
}

.split-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.mini-data-panel {
    min-width: 0;
}

.inventory-panel {
    margin-top: 12px;
}

.compact-delete-panel {
    margin: 0 16px 16px;
}

.compact-delete-panel .delete-store-form {
    gap: 8px;
}

.compact-delete-panel input {
    min-height: 34px;
}

@media (max-width: 1200px) {
    .store-summary-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .split-panel-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {
    .store-profile-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 12px;
    }

    .store-profile-title {
        align-items: flex-start;
        width: 100%;
    }

    .store-profile-title p {
        white-space: normal;
    }

    .store-profile-actions,
    .store-summary-strip,
    .store-tab-bar,
    .store-tab-content {
        width: 100%;
    }

    .store-summary-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 12px;
    }

    .store-tab-bar {
        padding: 12px;
    }

    .store-tab-bar label {
        flex: 1 1 auto;
    }

    .store-tab-content {
        padding: 12px;
    }

    .section-mini-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .compact-delete-panel {
        margin: 0 12px 12px;
    }
}

/* Delete action modal standard */
.row-action-icon.danger {
    background: #fff1f0;
    color: var(--danger);
    border-color: #ffd5d2;
    cursor: pointer;
}

.row-action-icon.danger:hover {
    background: #ffe7e4;
    color: #8f1d14;
}

.modal-toggle {
    display: none;
}

.confirm-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.modal-toggle:checked + .confirm-modal {
    display: flex;
}

.confirm-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .42);
    cursor: pointer;
}

.confirm-modal-card {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .18);
    overflow: hidden;
}

.confirm-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border-bottom: 1px solid var(--border);
    background: var(--panel-soft);
}

.confirm-modal-header h2 {
    font-size: var(--font-heading);
    margin: 0 0 4px;
    color: var(--danger);
}

.confirm-modal-header p {
    color: var(--muted);
}

.confirm-delete-form {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.delete-warning-box {
    display: grid;
    gap: 4px;
    padding: 11px 12px;
    border: 1px solid #ffd5d2;
    border-radius: 10px;
    background: #fff8f7;
}

.delete-warning-box strong {
    color: var(--danger);
}

.delete-warning-box span {
    color: var(--muted);
}

.confirm-delete-form textarea {
    min-height: 78px;
    resize: vertical;
}

.confirm-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 2px;
}

.confirm-modal-actions label {
    cursor: pointer;
}

@media (max-width: 800px) {
    .confirm-modal {
        align-items: flex-end;
        padding: 10px;
    }

    .confirm-modal-card {
        border-radius: 14px;
    }

    .confirm-modal-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

/* Store row hover alignment fix */
.store-table td.address-cell {
    display: table-cell;
    max-width: none;
}

.store-table tbody tr.clickable-row:hover td,
.store-table tbody tr.clickable-row:hover td.address-cell {
    background-color: #f7fbff !important;
}

.store-table td.address-cell > span,
.store-table td.address-cell .cell-clip {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 800px) {
    .store-table td.address-cell {
        display: block;
        max-width: 100%;
    }
}

/* Store account / broadband module */
.account-table th:nth-child(1) { width: 150px; }
.account-table th:nth-child(2) { width: 120px; }
.account-table th:nth-child(3) { width: 160px; }
.account-table th:nth-child(4) { width: 150px; }
.account-table th:nth-child(6) { width: 154px; }

.secret-value {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid var(--border);
    color: var(--text);
    font-weight: 700;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.row-action-group {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.row-action-icon.copied {
    background: var(--success-bg);
    color: var(--success);
    border-color: #bbf7d0;
}

.store-account-form-panel {
    padding: 14px;
}

.store-account-context {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.store-account-context strong,
.store-account-context small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.store-account-context small {
    color: var(--muted);
}

.compact-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.form-field-wide {
    grid-column: 1 / -1;
}

.compact-form-grid textarea {
    min-height: 82px;
    resize: vertical;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.field-error {
    display: block;
    margin-top: 4px;
    color: var(--danger);
    font-weight: 600;
}

@media (max-width: 800px) {
    .account-table th:nth-child(n) {
        width: auto;
    }

    .store-account-context {
        align-items: flex-start;
        flex-direction: column;
    }

    .compact-form-grid {
        grid-template-columns: 1fr;
    }

    .form-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

/* CCTV store profile module */
.cctv-table th:nth-child(1) { width: 90px; }
.cctv-table th:nth-child(2) { width: 90px; }
.cctv-table th:nth-child(3),
.cctv-table th:nth-child(4) { width: 170px; }
.cctv-table th:nth-child(5) { width: 120px; }
.cctv-table th:nth-child(6) { width: 100px; }
.cctv-table th:nth-child(7) { width: 120px; }
.cctv-table th:nth-child(8) { width: 54px; }
.cctv-table th:nth-child(10) { width: 154px; }

.store-cctv-form-panel .store-account-context {
    margin-bottom: 14px;
}

@media (max-width: 800px) {
    .cctv-table th:nth-child(n) {
        width: auto;
    }
}

/* Area Manager assignment pack */
.area-manager-search-row {
    grid-template-columns: minmax(220px, 1fr) auto auto auto;
}

.field-hint {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 4px;
}

.area-manager-store-panel {
    margin: 14px 0 0;
}

.area-manager-store-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
}

.store-assignment-option {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

.store-assignment-option:hover {
    background: var(--primary-soft);
    border-color: var(--primary-line);
}

.store-assignment-option input {
    width: 15px;
    min-height: auto;
    margin: 0;
}

.store-assignment-option strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-normal);
}

.form-wide-error {
    display: block;
    padding: 0 12px 12px;
}

.area-manager-table td span:not(.store-no-pill):not(.status-tag) {
    display: inline-block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

@media (max-width: 1200px) {
    .area-manager-search-row {
        grid-template-columns: 1fr 1fr;
    }

    .area-manager-store-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .area-manager-search-row,
    .area-manager-store-grid {
        grid-template-columns: 1fr;
    }
}

/* Store edit/add form alignment fix */
.aligned-store-form {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 10px 12px;
    align-items: start;
}

.aligned-store-form .field-span-3 { grid-column: span 3; }
.aligned-store-form .field-span-4 { grid-column: span 4; }
.aligned-store-form .field-span-6 { grid-column: span 6; }
.aligned-store-form .field-span-12 { grid-column: 1 / -1; }

.aligned-store-form .form-field {
    min-width: 0;
}

.aligned-store-form .form-field span {
    min-height: 18px;
    line-height: 18px;
    white-space: nowrap;
}

.aligned-store-form input,
.aligned-store-form select {
    height: 38px;
    min-height: 38px;
    padding-top: 7px;
    padding-bottom: 7px;
}

.aligned-store-form textarea {
    height: 76px;
    min-height: 76px;
    padding-top: 8px;
    padding-bottom: 8px;
    resize: vertical;
}

.aligned-store-form .field-error {
    min-height: 16px;
}

.store-form-panel .panel-header .btn,
.form-actions-bar .btn {
    min-height: 34px;
    padding: 7px 12px;
}

@media (max-width: 1200px) {
    .aligned-store-form .field-span-3,
    .aligned-store-form .field-span-4 {
        grid-column: span 6;
    }

    .aligned-store-form .field-span-6 {
        grid-column: 1 / -1;
    }
}

@media (max-width: 800px) {
    .aligned-store-form {
        grid-template-columns: 1fr;
    }

    .aligned-store-form .field-span-3,
    .aligned-store-form .field-span-4,
    .aligned-store-form .field-span-6,
    .aligned-store-form .field-span-12 {
        grid-column: 1 / -1;
    }
}


/* Store user link pack */
.mini-pill {
    min-width: 44px;
    min-height: 24px;
    padding: 2px 8px;
    margin-right: 6px;
}
.compact-admin-search-row {
    grid-template-columns: minmax(220px, 1fr) auto auto auto;
}
.compact-admin-table td,
.compact-admin-table th {
    white-space: nowrap;
}
@media (max-width: 800px) {
    .compact-admin-search-row {
        grid-template-columns: 1fr;
    }
}

/* Store user form alignment fix */
.aligned-store-form .field-help {
    display: block;
    min-height: 16px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.store-form-panel .panel-header.store-form-header {
    align-items: flex-start;
}

.store-form-panel .panel-header.store-form-header .btn {
    min-height: 34px;
    padding: 7px 12px;
}

/* Ticket foundation pack */
.ticket-search-row {
    grid-template-columns: minmax(220px, 1fr) 150px 150px 180px auto auto;
}

.ticket-table th:first-child,
.ticket-table td:first-child {
    width: 135px;
}

.ticket-table th:nth-child(2),
.ticket-table td:nth-child(2) {
    min-width: 260px;
}

.ticket-no-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eef5ff;
    border: 1px solid #cfe1fb;
    color: #235d99;
    font-weight: 800;
    white-space: nowrap;
}

.priority-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid transparent;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
}

.priority-low { background: #eefaf4; color: #0d7a4f; border-color: #ccefdc; }
.priority-medium { background: #eef5ff; color: #235d99; border-color: #cfe1fb; }
.priority-high { background: #fff4de; color: #a86a00; border-color: #f7d89a; }
.priority-urgent { background: #fff1f0; color: #b42318; border-color: #ffd5d2; }

.status-in-progress { background: #eef5ff; color: #235d99; border-color: #cfe1fb; }
.status-pending { background: #fff4de; color: #a86a00; border-color: #f7d89a; }
.status-resolved { background: #eefaf4; color: #0d7a4f; border-color: #ccefdc; }

.clickable-row {
    cursor: pointer;
}

.clickable-row:hover td {
    background: #eef7ff !important;
}

.compact-ticket-header {
    align-items: flex-start;
}

.ticket-header-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.ticket-detail-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ticket-history-panel {
    margin-top: 14px;
}

.ticket-create-panel textarea {
    min-height: 112px;
}

@media (max-width: 1200px) {
    .ticket-search-row {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .ticket-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .ticket-search-row,
    .ticket-detail-grid {
        grid-template-columns: 1fr;
    }

    .ticket-table thead {
        display: none;
    }

    .ticket-table,
    .ticket-table tbody,
    .ticket-table tr,
    .ticket-table td {
        display: block;
        width: 100%;
    }

    .ticket-table tr {
        margin: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 12px;
        overflow: hidden;
        background: #fff;
    }

    .ticket-table td {
        border-bottom: 1px solid #edf3f9;
        padding: 10px 12px;
    }

    .ticket-table td:last-child {
        border-bottom: 0;
    }

    .ticket-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: var(--muted);
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .02em;
    }
}

/* Ticket attachment upload and preview */
.ticket-upload-field input[type="file"] {
    height: auto;
    min-height: 38px;
    padding: 7px 10px;
}

.ticket-attachment-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
}

.ticket-attachment-card {
    display: grid;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    min-width: 0;
}

.ticket-attachment-card:hover {
    border-color: var(--primary-line);
    background: var(--primary-soft);
}

.ticket-attachment-card img {
    width: 100%;
    height: 92px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #edf3f9;
    background: #f8fafc;
}

.ticket-attachment-card strong,
.ticket-attachment-card small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-attachment-card strong {
    font-size: 12px;
    color: var(--text);
}

.ticket-attachment-card small {
    font-size: 12px;
    color: var(--muted);
}

.ticket-file-icon {
    height: 92px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    border: 1px solid #edf3f9;
    background: #f8fafc;
    color: var(--primary-dark);
    font-size: 26px;
}

.padded-empty-state {
    grid-column: 1 / -1;
    padding: 12px;
}

@media (max-width: 1200px) {
    .ticket-attachment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .ticket-attachment-grid {
        grid-template-columns: 1fr;
        padding: 12px;
    }
}

/* Ticket view workflow pack */
.ticket-workflow-panel,
.ticket-action-panel {
    margin-top: 14px;
}

.ticket-control-grid {
    align-items: end;
}

.ticket-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.ticket-action-panel textarea {
    min-height: 92px;
    resize: vertical;
}

.compact-ticket-actions {
    margin-top: 10px;
    padding-top: 10px;
}

.compact-ticket-actions .btn {
    min-height: 32px;
    padding: 6px 11px;
}

.compact-upload-field input[type="file"] {
    min-height: 38px;
    padding: 7px 10px;
}

.ticket-log-details {
    max-width: 760px;
    white-space: normal;
    line-height: 1.35;
}

.ticket-history-table th:first-child,
.ticket-history-table td:first-child {
    width: 145px;
}

.ticket-history-table th:nth-child(2),
.ticket-history-table td:nth-child(2) {
    width: 170px;
}

.ticket-history-table th:nth-child(3),
.ticket-history-table td:nth-child(3) {
    width: 125px;
}

@media (max-width: 1200px) {
    .ticket-action-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {
    .ticket-action-grid {
        gap: 12px;
    }
}

/* Ticket one-page view pack */
.ticket-one-page-panel {
    overflow: hidden;
}

.ticket-one-page-header {
    align-items: flex-start;
    padding: 12px 14px;
}

.ticket-heading-block {
    min-width: 0;
}

.ticket-one-page-header h2 {
    max-width: 980px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compact-ticket-badges {
    margin-bottom: 6px;
}

.ticket-one-page-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    border-bottom: 1px solid var(--border);
    background: #fbfdff;
}

.ticket-one-page-summary div {
    min-width: 0;
    padding: 8px 12px;
    border-right: 1px solid #edf3f9;
}

.ticket-one-page-summary div:last-child {
    border-right: 0;
}

.ticket-one-page-summary span,
.ticket-compact-lines span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 2px;
}

.ticket-one-page-summary strong,
.ticket-compact-lines strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--text);
}

.ticket-workspace-grid {
    display: grid;
    grid-template-columns: minmax(260px, .85fr) minmax(360px, 1.15fr) minmax(280px, .85fr);
    gap: 12px;
    padding: 12px;
    align-items: start;
}

.ticket-workspace-column {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.ticket-mini-section {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    padding: 10px;
}

.ticket-mini-title {
    font-weight: 800;
    color: var(--text);
    margin-bottom: 8px;
}

.ticket-description-box {
    max-height: 170px;
    overflow: auto;
    padding: 10px;
    border: 1px solid #edf3f9;
    border-radius: 10px;
    background: #fbfdff;
    line-height: 1.4;
    white-space: pre-wrap;
}

.ticket-compact-lines {
    display: grid;
    gap: 8px;
}

.ticket-inline-form {
    display: grid;
    gap: 9px;
}

.ticket-inline-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.ticket-inline-grid .form-field,
.ticket-inline-form .form-field {
    display: grid;
    gap: 4px;
    margin: 0;
    min-width: 0;
}

.ticket-inline-grid .form-field span,
.ticket-inline-form .form-field span {
    margin: 0;
    min-height: 16px;
    line-height: 16px;
    white-space: nowrap;
}

.ticket-inline-grid input,
.ticket-inline-grid select,
.ticket-inline-form input,
.ticket-inline-form select {
    height: 36px;
    min-height: 36px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.ticket-inline-form textarea {
    min-height: 76px;
    max-height: 130px;
    resize: vertical;
    padding: 8px 10px;
}

.ticket-private-card textarea {
    min-height: 58px;
}

.ticket-inline-wide {
    grid-column: 1 / -1;
}

.ticket-inline-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
}

.ticket-inline-actions .btn {
    min-height: 31px;
    padding: 6px 11px;
}

.ticket-compact-attachments {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 226px;
    overflow: auto;
}

.ticket-compact-attachment {
    min-width: 0;
    display: grid;
    gap: 4px;
    padding: 7px;
    border: 1px solid #edf3f9;
    border-radius: 9px;
    background: #fbfdff;
}

.ticket-compact-attachment:hover {
    border-color: var(--primary-line);
    background: var(--primary-soft);
}

.ticket-compact-attachment img,
.compact-file-icon {
    width: 100%;
    height: 58px;
    border-radius: 7px;
    border: 1px solid #edf3f9;
    object-fit: cover;
    background: #fff;
}

.compact-file-icon {
    display: grid;
    place-items: center;
    color: var(--primary-dark);
    font-size: 20px;
}

.ticket-compact-attachment span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
}

.ticket-compact-timeline {
    display: grid;
    gap: 8px;
    max-height: 350px;
    overflow: auto;
}

.ticket-timeline-item {
    border-bottom: 1px solid #edf3f9;
    padding-bottom: 8px;
}

.ticket-timeline-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.ticket-timeline-item div {
    display: grid;
    gap: 2px;
    margin-bottom: 4px;
}

.ticket-timeline-item strong {
    color: var(--primary-dark);
    font-size: 12px;
}

.ticket-timeline-item span,
.ticket-timeline-item p,
.ticket-muted-text {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.ticket-timeline-item p {
    color: var(--text);
    margin: 0;
}

@media (max-width: 1250px) {
    .ticket-workspace-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ticket-side-column {
        grid-column: 1 / -1;
        grid-template-columns: 1fr 1fr;
    }

    .ticket-one-page-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    .ticket-one-page-header {
        flex-direction: column;
    }

    .ticket-one-page-header h2 {
        white-space: normal;
    }

    .ticket-one-page-summary,
    .ticket-workspace-grid,
    .ticket-side-column,
    .ticket-inline-grid {
        grid-template-columns: 1fr;
    }

    .ticket-workspace-grid {
        padding: 10px;
    }

    .ticket-one-page-summary div {
        border-right: 0;
        border-bottom: 1px solid #edf3f9;
    }
}

/* Ticket one-page layout refinement */
.ticket-single-page-panel {
    overflow: hidden;
}

.ticket-single-page-header {
    align-items: flex-start;
    padding: 14px 16px;
}

.ticket-single-page-header h2 {
    margin: 0 0 6px;
    font-size: var(--font-heading);
    line-height: 1.2;
}

.ticket-single-page-header p {
    margin: 0;
    color: var(--muted);
}

.ticket-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.department-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #f8fbff;
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}

.ticket-meta-sep {
    display: inline-block;
    margin: 0 6px;
}

.ticket-top-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 14px 16px 0;
}

.ticket-stat-card {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
}

.ticket-stat-card span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 4px;
}

.ticket-stat-card strong {
    display: block;
    color: var(--text);
    font-size: var(--font-normal);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticket-stat-card small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticket-layout-grid {
    display: grid;
    grid-template-columns: minmax(290px, 1fr) minmax(360px, 1.18fr) minmax(300px, .92fr);
    gap: 14px;
    padding: 14px 16px 16px;
    align-items: start;
}

.ticket-layout-left,
.ticket-layout-middle,
.ticket-layout-right {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.ticket-card {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    padding: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}

.ticket-card-title {
    margin-bottom: 12px;
    font-size: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
}

.ticket-description-panel {
    min-height: 88px;
    max-height: 220px;
    overflow: auto;
    padding: 12px;
    border: 1px solid #e8eff7;
    border-radius: 12px;
    background: #fbfdff;
    white-space: pre-wrap;
    line-height: 1.45;
}

.ticket-detail-list.two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

.ticket-detail-item {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #edf3f9;
    border-radius: 10px;
    background: #fbfdff;
}

.ticket-detail-item.full-row {
    grid-column: 1 / -1;
}

.ticket-detail-item span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 4px;
}

.ticket-detail-item strong {
    display: block;
    color: var(--text);
    font-size: var(--font-normal);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticket-detail-item strong.allow-wrap {
    white-space: normal;
    overflow: visible;
}

.ticket-action-form {
    display: grid;
    gap: 10px;
}

.ticket-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

.ticket-form-grid .form-field,
.ticket-action-form .form-field {
    display: grid;
    gap: 5px;
    margin: 0;
    min-width: 0;
}

.ticket-form-grid .form-field span,
.ticket-action-form .form-field span {
    display: block;
    margin: 0;
    color: var(--text);
    font-weight: 700;
    white-space: nowrap;
}

.ticket-form-grid input,
.ticket-form-grid select,
.ticket-action-form input,
.ticket-action-form select,
.ticket-action-form textarea {
    width: 100%;
}

.ticket-form-grid input,
.ticket-form-grid select,
.ticket-action-form input,
.ticket-action-form select {
    min-height: 38px;
    height: 38px;
}

.ticket-action-form textarea {
    min-height: 104px;
    resize: vertical;
}

.full-width-field {
    grid-column: 1 / -1;
}

.ticket-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 2px;
}

.ticket-card-actions .btn {
    min-height: 32px;
    padding: 6px 12px;
}

.ticket-file-list {
    display: grid;
    gap: 8px;
    max-height: 250px;
    overflow: auto;
}

.ticket-file-row {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 8px;
    border: 1px solid #edf3f9;
    border-radius: 10px;
    background: #fbfdff;
}

.ticket-file-row:hover {
    background: var(--primary-soft);
    border-color: var(--primary-line);
}

.ticket-file-preview {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #edf3f9;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ticket-file-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ticket-file-icon {
    font-size: 18px;
    line-height: 1;
}

.ticket-file-text {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.ticket-file-text strong,
.ticket-file-text small {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticket-file-text small,
.ticket-muted-text {
    color: var(--muted);
    font-size: 12px;
}

.ticket-timeline-card {
    min-height: 0;
}

.ticket-timeline-list {
    display: grid;
    gap: 10px;
    max-height: 420px;
    overflow: auto;
}

.ticket-timeline-row {
    border-bottom: 1px solid #edf3f9;
    padding-bottom: 10px;
}

.ticket-timeline-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.ticket-timeline-head {
    display: grid;
    gap: 3px;
    margin-bottom: 5px;
}

.ticket-timeline-head strong {
    color: var(--primary-dark);
    font-size: 12px;
}

.ticket-timeline-head span {
    color: var(--muted);
    font-size: 12px;
}

.ticket-timeline-row p {
    margin: 0;
    color: var(--text);
    font-size: 13px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 1350px) {
    .ticket-top-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ticket-layout-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ticket-layout-right {
        grid-column: 1 / -1;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .ticket-single-page-header {
        flex-direction: column;
        gap: 10px;
    }

    .ticket-single-page-header h2 {
        white-space: normal;
    }

    .ticket-top-stats,
    .ticket-layout-grid,
    .ticket-layout-right,
    .ticket-detail-list.two-col,
    .ticket-form-grid {
        grid-template-columns: 1fr;
    }

    .ticket-top-stats,
    .ticket-layout-grid {
        padding-left: 12px;
        padding-right: 12px;
    }

    .ticket-stat-card strong,
    .ticket-stat-card small,
    .ticket-detail-item strong,
    .ticket-file-text strong,
    .ticket-file-text small {
        white-space: normal;
    }
}

/* Ticket notifications and engineer visit pack */
.ticket-bell-indicator,
.ticket-bell-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    font-size: 14px;
}

.ticket-bell-indicator {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #b54708;
    box-shadow: 0 0 0 3px rgba(251, 146, 60, .12);
}

.ticket-bell-empty {
    color: #98a2b3;
}

.visit-time-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #f3f1ff;
    border: 1px solid #ddd6fe;
    color: #5145a5;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.visit-stat-card {
    background: linear-gradient(180deg, #f7f4ff 0%, #ffffff 100%);
    border-color: #ddd6fe;
}

.ticket-status-card {
    background: linear-gradient(180deg, #f3f9ff 0%, #ffffff 100%);
    border-color: #cfe7fb;
}

.ticket-reply-card-colour {
    background: linear-gradient(180deg, #f2fbf7 0%, #ffffff 100%);
    border-color: #ccefdc;
}

.ticket-private-note-colour {
    background: linear-gradient(180deg, #fff8ed 0%, #ffffff 100%);
    border-color: #fed7aa;
}

.ticket-feed-colour {
    background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
    border-color: #d8e6f3;
}

.ticket-status-card .ticket-card-title,
.ticket-reply-card-colour .ticket-card-title,
.ticket-private-note-colour .ticket-card-title,
.ticket-feed-colour .ticket-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ticket-status-card .ticket-card-title::before,
.ticket-reply-card-colour .ticket-card-title::before,
.ticket-private-note-colour .ticket-card-title::before,
.ticket-feed-colour .ticket-card-title::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 999px;
    display: inline-block;
}

.ticket-status-card .ticket-card-title::before { background: #2f80c9; }
.ticket-reply-card-colour .ticket-card-title::before { background: #12b76a; }
.ticket-private-note-colour .ticket-card-title::before { background: #f79009; }
.ticket-feed-colour .ticket-card-title::before { background: #667085; }

@media (min-width: 1351px) {
    .ticket-top-stats {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* Store dashboard clean pack */
.store-dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: linear-gradient(135deg, #f5fbff 0%, #ffffff 72%);
    box-shadow: var(--shadow);
}

.store-dashboard-welcome {
    min-width: 0;
}

.store-dashboard-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 10px;
    margin-bottom: 8px;
    border-radius: 999px;
    background: var(--primary-soft);
    border: 1px solid var(--primary-line);
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 700;
}

.store-dashboard-welcome h2 {
    margin: 0 0 4px;
    font-size: var(--font-heading);
    line-height: 1.2;
}

.store-dashboard-welcome p {
    margin: 0;
    color: var(--muted);
}

.store-dashboard-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.store-dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.store-kpi-card {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 74px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: #fff;
    box-shadow: var(--shadow);
}

.store-kpi-card:hover {
    transform: translateY(-1px);
    border-color: var(--primary-line);
}

.store-kpi-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.84);
    font-size: 16px;
    font-weight: 800;
}

.store-kpi-card small {
    display: block;
    color: var(--muted);
    font-weight: 700;
    font-size: 12px;
}

.store-kpi-card strong {
    display: block;
    margin-top: 2px;
    color: var(--text);
    font-size: var(--font-heading);
    line-height: 1.1;
}

.store-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 14px;
    align-items: start;
}

.store-dashboard-main,
.store-dashboard-side {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.store-dashboard-panel {
    overflow: hidden;
}

.compact-panel-header {
    padding: 12px 14px;
}

.compact-panel-header h2 {
    font-size: var(--font-heading);
}

.store-dashboard-ticket-table th,
.store-dashboard-ticket-table td {
    padding-top: 8px;
    padding-bottom: 8px;
}

.bell-cell {
    width: 36px;
    text-align: center;
}

.ticket-bell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    font-size: 14px;
}

.ticket-row-unread td {
    background: #fffdf4;
}

.ticket-row-unread:hover td {
    background: #fff7e6;
}

.visit-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f3f1ff;
    border: 1px solid #ddd6fe;
    color: #5145a5;
    font-weight: 700;
    white-space: nowrap;
}

.muted-dash {
    color: var(--muted);
}

.store-update-feed,
.visit-list,
.store-help-list {
    display: grid;
    gap: 8px;
    padding: 12px;
}

.store-update-feed {
    max-height: 320px;
    overflow: auto;
}

.store-update-item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
    border: 1px solid #edf3f9;
    border-radius: 12px;
    background: #fbfdff;
}

.store-update-item:hover {
    background: var(--primary-soft);
    border-color: var(--primary-line);
}

.update-dot {
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 999px;
    background: var(--primary);
}

.store-update-item strong,
.store-update-item p,
.store-update-item small {
    display: block;
    min-width: 0;
}

.store-update-item strong {
    color: var(--text);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.store-update-item p {
    margin: 3px 0;
    color: var(--text);
    font-size: 13px;
    line-height: 1.35;
}

.store-update-item small {
    color: var(--muted);
    font-size: 12px;
}

.visit-panel {
    background: #fff;
}

.visit-list {
    max-height: 380px;
    overflow: auto;
}

.visit-item {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid #e8def8;
    border-radius: 12px;
    background: #fbf9ff;
}

.visit-item:hover {
    background: #f3f1ff;
    border-color: #ddd6fe;
}

.visit-date-box {
    display: grid;
    place-items: center;
    min-height: 54px;
    border-radius: 12px;
    background: #f3f1ff;
    border: 1px solid #ddd6fe;
    color: #5145a5;
}

.visit-date-box strong {
    font-size: 18px;
    line-height: 1;
}

.visit-date-box span {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.visit-content {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.visit-content strong,
.visit-content span,
.visit-content small {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.visit-content strong {
    color: var(--text);
    font-size: 13px;
}

.visit-content span,
.visit-content small {
    color: var(--muted);
    font-size: 12px;
}

.store-help-panel {
    background: linear-gradient(180deg, #ffffff 0%, #f8fcff 100%);
}

.store-help-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid #edf3f9;
    border-radius: 10px;
    background: #fff;
    font-weight: 700;
}

.store-help-list a:hover {
    background: var(--primary-soft);
    border-color: var(--primary-line);
    color: var(--primary-dark);
}

.store-help-list span {
    width: 26px;
    height: 26px;
    min-width: 26px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--primary-soft);
    color: var(--primary-dark);
    border: 1px solid var(--primary-line);
}

.store-empty-soft {
    padding: 14px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: #fbfdff;
    color: var(--muted);
    text-align: center;
}

@media (max-width: 1200px) {
    .store-dashboard-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .store-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {
    .store-dashboard-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .store-dashboard-actions,
    .store-dashboard-actions .btn {
        width: 100%;
    }

    .store-dashboard-kpis {
        grid-template-columns: 1fr;
    }

    .store-dashboard-ticket-table thead {
        display: none;
    }

    .store-dashboard-ticket-table,
    .store-dashboard-ticket-table tbody,
    .store-dashboard-ticket-table tr,
    .store-dashboard-ticket-table td {
        display: block;
        width: 100%;
    }

    .store-dashboard-ticket-table tr {
        margin: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: #fff;
        overflow: hidden;
    }

    .store-dashboard-ticket-table td {
        border-bottom: 1px solid #edf3f9;
        padding: 8px 10px;
    }

    .store-dashboard-ticket-table td:last-child {
        border-bottom: 0;
    }

    .store-dashboard-ticket-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
    }

    .bell-cell {
        text-align: left;
    }
}

/* Ticket workflow visual polish pack */
.ticket-single-page-panel {
    border-color: #cfe3f5;
}

.ticket-single-page-header {
    background: linear-gradient(135deg, #f5fbff 0%, #ffffff 78%);
    border-bottom: 1px solid #dbeaf7;
}

.ticket-top-stats {
    background: #f7fbff;
    padding-bottom: 14px;
    border-bottom: 1px solid #e2edf7;
}

.ticket-stat-card:nth-child(1) {
    background: linear-gradient(180deg, #f5fbff 0%, #ffffff 100%);
    border-color: #d4e8f8;
}

.ticket-stat-card:nth-child(2) {
    background: linear-gradient(180deg, #f6f8ff 0%, #ffffff 100%);
    border-color: #d9defa;
}

.ticket-stat-card:nth-child(3) {
    background: linear-gradient(180deg, #f3fbf7 0%, #ffffff 100%);
    border-color: #caefdc;
}

.ticket-stat-card:nth-child(4) {
    background: linear-gradient(180deg, #fff8ed 0%, #ffffff 100%);
    border-color: #fed7aa;
}

.ticket-stat-card.visit-stat-card {
    background: linear-gradient(180deg, #f4f1ff 0%, #ffffff 100%);
    border-color: #d8d0ff;
}

.ticket-card {
    box-shadow: 0 6px 18px rgba(36, 52, 71, .04);
}

.ticket-issue-card-colour {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border-color: #dbeaf7;
}

.ticket-store-card-colour {
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    border-color: #d9e8f5;
}

.ticket-status-card {
    background: linear-gradient(180deg, #eef7ff 0%, #ffffff 100%);
    border-color: #bfe0f8;
}

.ticket-reply-card-colour {
    background: linear-gradient(180deg, #effaf5 0%, #ffffff 100%);
    border-color: #bfead3;
}

.ticket-private-note-colour {
    background: linear-gradient(180deg, #fff7ea 0%, #ffffff 100%);
    border-color: #f9d6a4;
}

.ticket-attachments-card-colour {
    background: linear-gradient(180deg, #fafcff 0%, #ffffff 100%);
    border-color: #d9e8f5;
}

.ticket-feed-colour {
    background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
    border-color: #d0e3f4;
}

.ticket-issue-card-colour .ticket-card-title,
.ticket-store-card-colour .ticket-card-title,
.ticket-status-card .ticket-card-title,
.ticket-reply-card-colour .ticket-card-title,
.ticket-private-note-colour .ticket-card-title,
.ticket-attachments-card-colour .ticket-card-title,
.ticket-feed-colour .ticket-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ticket-issue-card-colour .ticket-card-title::before,
.ticket-store-card-colour .ticket-card-title::before,
.ticket-status-card .ticket-card-title::before,
.ticket-reply-card-colour .ticket-card-title::before,
.ticket-private-note-colour .ticket-card-title::before,
.ticket-attachments-card-colour .ticket-card-title::before,
.ticket-feed-colour .ticket-card-title::before {
    content: "";
    width: 10px;
    height: 10px;
    min-width: 10px;
    border-radius: 999px;
    display: inline-block;
}

.ticket-issue-card-colour .ticket-card-title::before { background: #475467; }
.ticket-store-card-colour .ticket-card-title::before { background: #2f80c9; }
.ticket-status-card .ticket-card-title::before { background: #1570ef; }
.ticket-reply-card-colour .ticket-card-title::before { background: #12b76a; }
.ticket-private-note-colour .ticket-card-title::before { background: #f79009; }
.ticket-attachments-card-colour .ticket-card-title::before { background: #7a5af8; }
.ticket-feed-colour .ticket-card-title::before { background: #0ea5e9; }

.ticket-status-card .ticket-card-actions .btn-primary {
    background: #2f80c9;
    border-color: #2f80c9;
}

.ticket-reply-card-colour .ticket-card-actions .btn-primary {
    background: #15975b;
    border-color: #15975b;
}

.ticket-private-note-colour .ticket-card-actions .btn-secondary {
    background: #fff7ea;
    border-color: #f9d6a4;
    color: #9a5700;
}

.ticket-description-panel,
.ticket-detail-item,
.ticket-file-row {
    background: rgba(255,255,255,.74);
}

.ticket-timeline-row {
    padding: 9px 10px;
    border: 1px solid #e6eef7;
    border-radius: 10px;
    background: #ffffff;
}

.ticket-timeline-row + .ticket-timeline-row {
    margin-top: 0;
}

.ticket-timeline-head strong {
    display: inline-flex;
    width: fit-content;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--primary-soft);
    border: 1px solid var(--primary-line);
    color: var(--primary-dark);
}

.ticket-file-row {
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.ticket-file-row:hover {
    transform: translateY(-1px);
}

@media (max-width: 900px) {
    .ticket-top-stats {
        padding-bottom: 12px;
    }
}

/* Dashboard table alignment standard */
.dashboard-ticket-scroll { width: 100%; overflow-x: auto; }
.dashboard-ticket-table { width: 100%; min-width: 920px; table-layout: fixed; }
.dashboard-ticket-table th,
.dashboard-ticket-table td { padding: 8px 10px; white-space: nowrap; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; }
.dashboard-ticket-table th { line-height: 1.2; }
.dashboard-ticket-table .ticket-col { width: 126px; }
.dashboard-ticket-table .subject-col { width: 220px; }
.dashboard-ticket-table .store-col { width: 190px; }
.dashboard-ticket-table .department-col { width: 180px; }
.dashboard-ticket-table .priority-col { width: 105px; }
.dashboard-ticket-table .status-col { width: 112px; }
.dashboard-ticket-table .created-col { width: 150px; }
.dashboard-ticket-table .subject-cell,
.dashboard-ticket-table .store-cell { overflow: hidden; text-overflow: ellipsis; }
.dashboard-ticket-table .category-badge { max-width: 160px; overflow: hidden; text-overflow: ellipsis; justify-content: center; }
.dashboard-ticket-table .badge { max-width: 96px; justify-content: center; }
@media (max-width: 800px) {
    .dashboard-ticket-table thead { display: none; }
    .dashboard-ticket-table, .dashboard-ticket-table tbody, .dashboard-ticket-table tr, .dashboard-ticket-table td { display: block; width: 100%; }
    .dashboard-ticket-table { min-width: 0; }
    .dashboard-ticket-table tr { margin: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: #fff; overflow: hidden; }
    .dashboard-ticket-table td { border-bottom: 1px solid #edf3f9; padding: 8px 10px; }
    .dashboard-ticket-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; font-weight: 700; }
}


/* Admin / area dashboard compact size alignment fix */
.admin-dashboard-page {
    display: grid;
    gap: 12px;
}

.admin-dashboard-page .admin-kpi-grid {
    gap: 10px;
    margin-bottom: 0;
}

.admin-dashboard-page .kpi-card {
    min-height: 70px;
    padding: 9px 11px;
    border-radius: 12px;
}

.admin-dashboard-page .kpi-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 10px;
}

.admin-dashboard-page .kpi-icon svg {
    width: 16px;
    height: 16px;
}

.admin-dashboard-page .kpi-content span,
.admin-dashboard-page .kpi-content small {
    font-size: 13px;
    line-height: 1.2;
}

.admin-dashboard-page .kpi-content strong {
    font-size: 19px;
    line-height: 1.1;
}

.admin-dashboard-page .admin-dashboard-grid {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 12px;
}

.admin-dashboard-page .content-panel,
.admin-dashboard-page .compact-panel {
    border-radius: 12px;
}

.admin-dashboard-page .panel-header {
    padding: 12px 14px;
}

.admin-dashboard-page .panel-header h2 {
    font-size: 20px;
    line-height: 1.2;
}

.admin-dashboard-page .panel-header p {
    font-size: 13px;
}

.admin-dashboard-page .panel-header .btn,
.admin-dashboard-page .mini-action,
.admin-dashboard-page .summary-row {
    font-size: 13px;
}

.admin-dashboard-page .dashboard-ticket-scroll {
    overflow-x: hidden;
}

.admin-dashboard-page .dashboard-ticket-table {
    min-width: 0;
    table-layout: fixed;
    font-size: 13px;
}

.admin-dashboard-page .dashboard-ticket-table th,
.admin-dashboard-page .dashboard-ticket-table td {
    padding: 8px 9px;
    font-size: 13px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-dashboard-page .dashboard-ticket-table .ticket-col { width: 128px; }
.admin-dashboard-page .dashboard-ticket-table .subject-col { width: 245px; }
.admin-dashboard-page .dashboard-ticket-table .store-col { width: 150px; }
.admin-dashboard-page .dashboard-ticket-table .department-col { width: 190px; }
.admin-dashboard-page .dashboard-ticket-table .priority-col { width: 88px; }
.admin-dashboard-page .dashboard-ticket-table .status-col { width: 88px; }
.admin-dashboard-page .dashboard-ticket-table .created-col { width: 118px; }

.admin-dashboard-page .dashboard-ticket-table .badge,
.admin-dashboard-page .dashboard-ticket-table .category-badge,
.admin-dashboard-page .dashboard-ticket-table .status-tag {
    min-height: 23px;
    max-width: 100%;
    padding: 3px 8px;
    font-size: 12px;
    justify-content: center;
}

.admin-dashboard-page .dashboard-ticket-table .category-badge {
    max-width: 174px;
}

.admin-dashboard-page .dashboard-ticket-table .badge-priority,
.admin-dashboard-page .dashboard-ticket-table .badge-status {
    max-width: 76px;
}

.admin-dashboard-page .dashboard-ticket-table td:nth-child(6),
.admin-dashboard-page .dashboard-ticket-table td:nth-child(7) {
    text-align: center;
}

.admin-dashboard-page .action-list,
.admin-dashboard-page .summary-list {
    padding: 10px;
    gap: 8px;
}

@media (max-width: 1320px) {
    .admin-dashboard-page .admin-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .admin-dashboard-page .dashboard-ticket-scroll {
        overflow-x: auto;
    }

    .admin-dashboard-page .dashboard-ticket-table {
        min-width: 920px;
    }
}

@media (max-width: 800px) {
    .admin-dashboard-page .admin-kpi-grid {
        grid-template-columns: 1fr;
    }

    .admin-dashboard-page .dashboard-ticket-table {
        min-width: 0;
    }
}

/* Technician schedule calendar pack */
.schedule-page {
    display: grid;
    gap: 12px;
}

.schedule-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: linear-gradient(135deg, #f5fbff 0%, #ffffff 72%);
    box-shadow: var(--shadow);
}

.schedule-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 10px;
    margin-bottom: 8px;
    border-radius: 999px;
    background: var(--primary-soft);
    border: 1px solid var(--primary-line);
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 700;
}

.schedule-hero h2 {
    margin: 0 0 4px;
    font-size: var(--font-heading);
    line-height: 1.2;
}

.schedule-hero p {
    margin: 0;
    color: var(--muted);
}

.schedule-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.schedule-filter {
    display: flex;
    align-items: end;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: var(--shadow);
}

.schedule-filter label {
    display: grid;
    gap: 5px;
    min-width: 260px;
}

.schedule-filter span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.schedule-filter select {
    min-height: 34px;
    border-radius: 9px;
    border: 1px solid var(--border);
    padding: 5px 9px;
    background: #fff;
    color: var(--text);
    font: inherit;
}

.schedule-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.schedule-kpi {
    min-height: 74px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow);
}

.schedule-kpi span,
.schedule-kpi small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.schedule-kpi strong {
    display: block;
    margin: 3px 0;
    color: var(--text);
    font-size: var(--font-heading);
    line-height: 1.1;
}

.schedule-kpi-blue { background: linear-gradient(135deg, #eef8ff, #ffffff); border-color: #cdeaff; }
.schedule-kpi-green { background: linear-gradient(135deg, #ecfdf3, #ffffff); border-color: #bbf7d0; }
.schedule-kpi-amber { background: linear-gradient(135deg, #fff8e8, #ffffff); border-color: #fde7b5; }
.schedule-kpi-purple { background: linear-gradient(135deg, #f3f1ff, #ffffff); border-color: #ddd6fe; }

.schedule-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 12px;
    align-items: start;
}

.schedule-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(150px, 1fr));
    gap: 10px;
    min-width: 0;
}

.schedule-day {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.schedule-day.is-today {
    border-color: var(--primary-line);
    box-shadow: 0 0 0 3px rgba(47,128,201,.10);
}

.schedule-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 54px;
    padding: 10px;
    background: #f7fbff;
    border-bottom: 1px solid #e2edf7;
}

.schedule-day-head strong,
.schedule-day-head span {
    display: block;
}

.schedule-day-head strong {
    color: var(--text);
    font-size: 14px;
}

.schedule-day-head span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.schedule-day-head em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    min-height: 26px;
    border-radius: 999px;
    background: var(--primary-soft);
    border: 1px solid var(--primary-line);
    color: var(--primary-dark);
    font-style: normal;
    font-size: 12px;
    font-weight: 800;
}

.schedule-job-list {
    display: grid;
    gap: 8px;
    padding: 10px;
    min-height: 210px;
    align-content: start;
}

.schedule-job {
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr);
    gap: 8px;
    padding: 9px;
    border: 1px solid #e6eef7;
    border-radius: 12px;
    background: #fbfdff;
    color: var(--text);
}

.schedule-job:hover {
    background: var(--primary-soft);
    border-color: var(--primary-line);
    transform: translateY(-1px);
}

.schedule-time {
    display: grid;
    place-items: center;
    min-height: 42px;
    border-radius: 10px;
    background: #f3f1ff;
    border: 1px solid #ddd6fe;
    color: #5145a5;
    font-size: 12px;
    font-weight: 800;
}

.schedule-job-main {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.schedule-job-main strong,
.schedule-job-main span,
.schedule-job-main small {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.schedule-job-main strong {
    font-size: 13px;
    color: var(--text);
}

.schedule-job-main span,
.schedule-job-main small {
    color: var(--muted);
    font-size: 12px;
}

.schedule-job-meta {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.schedule-job-meta .category-badge,
.schedule-job-meta .status-tag {
    min-height: 22px;
    max-width: 100%;
    padding: 3px 7px;
    font-size: 11px;
    justify-content: center;
}

.schedule-empty-day,
.schedule-empty-soft {
    padding: 12px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: #fbfdff;
    color: var(--muted);
    text-align: center;
    font-size: 13px;
}

.schedule-side {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.schedule-panel {
    overflow: hidden;
}

.schedule-panel .panel-header {
    padding: 12px 14px;
}

.schedule-panel .panel-header h2 {
    font-size: var(--font-heading);
}

.schedule-panel .panel-header p {
    font-size: 13px;
}

.schedule-mini-list {
    display: grid;
    gap: 8px;
    max-height: 410px;
    overflow: auto;
    padding: 12px;
}

.schedule-mini-item {
    display: grid;
    gap: 3px;
    padding: 10px;
    border: 1px solid #e6eef7;
    border-radius: 12px;
    background: #ffffff;
}

.schedule-mini-item:hover {
    background: var(--primary-soft);
    border-color: var(--primary-line);
}

.schedule-mini-item.unscheduled {
    background: #fffaf0;
    border-color: #fde7b5;
}

.schedule-mini-date {
    width: fit-content;
    min-height: 22px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f3f1ff;
    border: 1px solid #ddd6fe;
    color: #5145a5;
    font-size: 11px;
    font-weight: 800;
}

.schedule-mini-item strong,
.schedule-mini-item small {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.schedule-mini-item strong {
    color: var(--text);
    font-size: 13px;
}

.schedule-mini-item small {
    color: var(--muted);
    font-size: 12px;
}

.schedule-unscheduled-panel {
    background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%);
}

@media (max-width: 1400px) {
    .schedule-grid {
        grid-template-columns: 1fr;
    }

    .schedule-calendar {
        overflow-x: auto;
        padding-bottom: 3px;
    }

    .schedule-day {
        min-width: 180px;
    }
}

@media (max-width: 900px) {
    .schedule-hero,
    .schedule-filter {
        flex-direction: column;
        align-items: stretch;
    }

    .schedule-actions,
    .schedule-actions .btn,
    .schedule-filter label,
    .schedule-filter .btn {
        width: 100%;
    }

    .schedule-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .schedule-kpi-grid {
        grid-template-columns: 1fr;
    }
}

/* Technician schedule alignment fix pack */
.schedule-page .schedule-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.schedule-page .schedule-calendar {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: visible;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.schedule-page .schedule-day {
    min-width: 0;
}

.schedule-page .schedule-side {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.schedule-page .schedule-job {
    grid-template-columns: 46px minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
}

.schedule-page .schedule-job-meta {
    flex-wrap: wrap;
}

.schedule-page .schedule-job-meta .category-badge {
    max-width: 100%;
    width: auto;
}

.schedule-page .schedule-mini-list {
    max-height: 300px;
}

@media (max-width: 1200px) {
    .schedule-page .schedule-calendar {
        overflow-x: auto;
        grid-template-columns: repeat(7, minmax(170px, 1fr));
        padding-bottom: 4px;
    }

    .schedule-page .schedule-side {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .schedule-page .schedule-calendar {
        grid-template-columns: 1fr;
        overflow-x: visible;
    }

    .schedule-page .schedule-day {
        min-width: 0;
    }
}

/* Ticket email notification settings */
.notification-settings-card {
    overflow: hidden;
}

.notification-rules-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--line, #d8e7f5);
    border-radius: 14px;
    background: #ffffff;
}

.notification-rules-table {
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13px;
}

.notification-rules-table th,
.notification-rules-table td {
    padding: 11px 12px;
    border-bottom: 1px solid #e7eef7;
    text-align: center;
    vertical-align: middle;
}

.notification-rules-table th:first-child,
.notification-rules-table td:first-child {
    width: 270px;
    text-align: left;
}

.notification-rules-table thead th {
    background: #f3f8fd;
    color: #102033;
    font-weight: 700;
    white-space: nowrap;
}

.notification-rules-table tbody tr:hover {
    background: #f8fbff;
}

.notification-rules-table td:first-child strong {
    display: block;
    font-size: 13px;
    color: #102033;
    line-height: 1.25;
}

.notification-rules-table td:first-child span {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: #6b7890;
    text-transform: capitalize;
}

.notify-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.notify-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.notify-toggle span {
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: #e8eef6;
    border: 1px solid #d2deeb;
    position: relative;
    transition: 0.18s ease;
}

.notify-toggle span::after {
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    position: absolute;
    left: 3px;
    top: 2px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.16);
    transition: 0.18s ease;
}

.notify-toggle input:checked + span {
    background: #dff3ff;
    border-color: #87c9f4;
}

.notify-toggle input:checked + span::after {
    transform: translateX(16px);
    background: #1784d2;
}

.notification-help-grid {
    margin-top: 14px;
}

.soft-blue-card {
    background: linear-gradient(135deg, #f2f9ff, #ffffff);
}

.soft-amber-card {
    background: linear-gradient(135deg, #fff8e8, #ffffff);
}

.sticky-form-actions {
    margin-top: 14px;
}

@media (max-width: 760px) {
    .notification-rules-table {
        min-width: 780px;
        font-size: 12px;
    }

    .notification-rules-table th,
    .notification-rules-table td {
        padding: 9px 8px;
    }
}

/* Ticket email template settings */
.email-template-card {
    overflow: visible;
}

.email-template-list {
    display: grid;
    gap: 14px;
}

.email-template-row {
    border: 1px solid #d8e7f5;
    border-radius: 16px;
    background: linear-gradient(135deg, #f8fbff, #ffffff);
    overflow: hidden;
}

.email-template-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #e4edf7;
    background: #f3f8fd;
}

.email-template-row-head strong {
    display: block;
    font-size: 14px;
    color: #102033;
    line-height: 1.25;
}

.email-template-row-head span {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: #68758a;
    text-transform: capitalize;
}

.email-template-row .compact-form-grid {
    padding: 14px;
    display: grid;
    gap: 12px;
}

.email-template-row textarea {
    min-height: 132px;
    resize: vertical;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.55;
}

.template-active-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    color: #176a38;
    background: #ecfff4;
    border: 1px solid #b8f0cb;
    border-radius: 999px;
    padding: 7px 10px;
    white-space: nowrap;
}

.template-active-toggle input {
    width: 14px;
    height: 14px;
}

.email-template-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 14px 14px;
}

.btn-danger-soft {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #ffc7c7;
    background: #fff4f4;
    color: #b42318;
    font-weight: 700;
    border-radius: 10px;
    padding: 8px 12px;
    text-decoration: none;
}

.btn-danger-soft:hover {
    background: #ffecec;
}

.placeholder-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.placeholder-grid span {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: #ffffff;
    border: 1px solid #dce8f6;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 12px;
    color: #617086;
}

.placeholder-grid code {
    font-size: 12px;
    color: #0f5b94;
    font-weight: 700;
}

.email-template-helper-grid {
    margin-top: 14px;
}

.soft-green-card {
    background: linear-gradient(135deg, #f3fff7, #ffffff);
}

.email-preview-box {
    background: #ffffff;
    border: 1px solid #dbeaf6;
    border-radius: 14px;
    padding: 12px;
}

.email-preview-box strong {
    display: block;
    color: #102033;
    font-size: 12px;
    margin-bottom: 5px;
}

.email-preview-box p {
    margin: 0 0 12px;
    font-weight: 700;
    color: #0f5b94;
}

.email-preview-box pre {
    margin: 0;
    white-space: pre-wrap;
    font-family: Segoe UI, Tahoma, sans-serif;
    font-size: 12px;
    line-height: 1.55;
    color: #26364a;
}

.tight-header-row {
    margin-bottom: 10px;
}

@media (max-width: 820px) {
    .email-template-row-head,
    .email-template-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .placeholder-grid {
        grid-template-columns: 1fr;
    }
}

/* Ticket export and compact date filters */
.ticket-date-filter {
    min-width: 132px;
    height: 34px;
    border: 1px solid #d8e1ec;
    border-radius: 8px;
    padding: 0 9px;
    font-size: 12px;
    font-family: Segoe UI, Tahoma, sans-serif;
    background: #ffffff;
    color: #24364b;
}
.ticket-search-row .btn-success {
    background: #0f9f6e;
    border-color: #0f9f6e;
    color: #ffffff;
}
.ticket-search-row .btn-success:hover {
    background: #0b8159;
    border-color: #0b8159;
}
@media (max-width: 900px) {
    .ticket-date-filter {
        width: 100%;
    }
}

/* Audit Log Screen Module */
.audit-summary-grid .stat-card {
    min-height: 104px;
}

.audit-filter-card {
    margin-bottom: 14px;
}

.audit-filter-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.audit-filter-grid {
    grid-template-columns: minmax(220px, 1.3fr) repeat(6, minmax(130px, 1fr));
    gap: 10px;
    align-items: end;
}

.audit-filter-grid .form-group label {
    font-size: 11px;
    font-weight: 700;
    color: #526475;
    margin-bottom: 5px;
}

.audit-filter-grid input,
.audit-filter-grid select {
    min-height: 34px;
    font-size: 12px;
}

.audit-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 0;
}

.audit-log-list-card {
    overflow: hidden;
}

.audit-result-count {
    font-size: 12px;
    color: #607082;
    background: #f2f7fb;
    border: 1px solid #dbe7f1;
    border-radius: 999px;
    padding: 5px 10px;
    white-space: nowrap;
}

.audit-table-wrap {
    overflow-x: auto;
}

.audit-log-table {
    table-layout: fixed;
    width: 100%;
    min-width: 1020px;
}

.audit-log-table th,
.audit-log-table td {
    font-size: 12px;
    vertical-align: top;
}

.audit-date-col { width: 104px; }
.audit-user-col { width: 150px; }
.audit-action-col { width: 145px; }
.audit-module-col { width: 120px; }
.audit-record-col { width: 70px; text-align: center; }
.audit-ip-col { width: 110px; }

.audit-date-cell strong,
.audit-user-cell strong {
    display: block;
    font-size: 12px;
    color: #203344;
    line-height: 1.25;
}

.audit-date-cell span,
.audit-user-cell span {
    display: block;
    font-size: 11px;
    color: #6a7786;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-action-badge {
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #edf6ff;
    color: #1b5f92;
    border: 1px solid #cde6fb;
}

.audit-module-chip {
    display: inline-flex;
    max-width: 104px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f7f3ff;
    border: 1px solid #ded3ff;
    color: #5f4a93;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audit-description-cell {
    color: #2f4052;
    line-height: 1.35;
    word-break: break-word;
}

.audit-ip-cell {
    color: #637083;
    white-space: nowrap;
}

.empty-table-cell {
    text-align: center;
    padding: 22px !important;
    color: #607082;
    font-size: 12px;
}

.compact-pagination {
    padding-top: 12px;
}

@media (max-width: 1180px) {
    .audit-filter-grid {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }

    .audit-search-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .audit-filter-grid {
        grid-template-columns: 1fr;
    }

    .audit-filter-actions {
        justify-content: stretch;
    }

    .audit-filter-actions .btn-small {
        width: 100%;
        justify-content: center;
    }

    .audit-log-table {
        min-width: 0;
        table-layout: auto;
    }

    .audit-log-table thead {
        display: none;
    }

    .audit-log-table tr {
        display: block;
        border: 1px solid #dbe7f1;
        border-radius: 12px;
        margin-bottom: 10px;
        padding: 8px;
        background: #fff;
    }

    .audit-log-table td {
        display: grid;
        grid-template-columns: 112px 1fr;
        gap: 8px;
        border: 0 !important;
        padding: 6px 4px !important;
        font-size: 12px;
    }

    .audit-log-table td::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 700;
        color: #667789;
    }
}


/* User Management module styles restored */
.user-form label,
.permission-card label {
    display: block;
    color: #344054;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 4px;
}

.user-filter-card,
.user-list-card,
.user-form-card,
.permission-card {
    margin-bottom: 12px;
}

.user-filter-form,
.user-form {
    padding: 14px;
}

.user-filter-grid {
    grid-template-columns: 2fr 1fr 1fr;
    align-items: end;
}

.user-filter-grid input,
.user-filter-grid select,
.user-edit-grid input,
.user-edit-grid select,
.user-edit-grid textarea,
.permission-tools input,
.sme-modal textarea {
    min-height: 36px;
    font-size: 13px;
    border-radius: 8px;
}

.user-filter-actions,
.filter-actions,
.standard-form-actions,
.modal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.user-filter-actions {
    justify-content: flex-end;
    margin-top: 10px;
}

.btn-small,
.btn-primary.btn-small,
.btn-secondary.btn-small,
.btn-danger.btn-small {
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
}

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

.user-table-wrap {
    overflow-x: auto;
}

.user-table {
    table-layout: fixed;
    width: 100%;
    min-width: 980px;
    font-size: 12px;
}

.user-table th,
.user-table td {
    padding: 9px 10px !important;
    font-size: 12px !important;
    line-height: 1.3;
    vertical-align: middle;
}

.user-name-col { width: 250px; }
.user-role-col { width: 135px; }
.user-link-col { width: 210px; }
.user-dept-col { width: 140px; }
.user-status-col { width: 100px; }
.user-actions-col { width: 118px; text-align: right; }

.user-main-cell strong,
.user-main-cell span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-main-cell span,
.user-linked-cell {
    color: #5f6f82;
    font-size: 11px !important;
}

.role-badge,
.status-active,
.status-inactive {
    min-height: 24px;
    padding: 4px 8px;
    font-size: 11px !important;
    line-height: 1.1;
}

.status-active { background: var(--success-bg); color: var(--success); border-color: #bbf7d0; }
.status-inactive { background: #f2f4f7; color: #667085; border-color: #d0d5dd; }
.role-store { background: #eaf5ff; color: #175cd3; border-color: #cfe7fb; }
.role-technician { background: #fff7ed; color: #b54708; border-color: #fed7aa; }
.role-supplier { background: #f8f5ff; color: #6941c6; border-color: #ddd6fe; }
.role-area_manager { background: #ecfdf3; color: #067647; border-color: #bbf7d0; }

.table-actions,
.user-actions-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.symbol-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--primary-line);
    background: #fff;
    color: var(--primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
}

.symbol-btn:hover { background: var(--primary-soft); }
.symbol-btn.danger { border-color: #fecaca; color: var(--danger); }
.symbol-btn.success { border-color: #bbf7d0; color: var(--success); }
.inline-form { display: inline; margin: 0; }

.pagination-wrap.standard-pagination-footer,
.compact-pagination,
.store-pagination-wrap {
    padding: 12px 14px 18px;
    border-top: 1px solid var(--border);
    background: #f8fbff;
    overflow-x: auto;
}

.pagination-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.pagination-left,
.pagination-center {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pagination-summary {
    color: #607082;
    font-size: 12px;
    white-space: nowrap;
}

.pagination-summary strong { color: #223548; font-weight: 800; }

.pagination-btn,
.pagination-number,
.pagination-dots {
    min-width: 32px;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.pagination-number.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.pagination-btn.disabled { color: #98a2b3; background: #f8fafc; }
.pagination-dots { border: 0; background: transparent; min-width: auto; padding: 0 2px; }

.form-section {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
}

.form-section .form-grid {
    padding: 14px;
}

.soft-blue-section { background: #fbfdff; }
.soft-green-section { background: #f9fffb; }
.user-edit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-help { color: var(--muted); font-size: 12px; padding: 0 14px 14px; }
.standard-form-actions { justify-content: flex-end; }
.field-error { display: block; margin-top: 4px; color: var(--danger); font-size: 11px; }

.sme-modal {
    border: none;
    padding: 0;
    border-radius: 14px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, .24);
    width: min(460px, calc(100vw - 28px));
}

.sme-modal::backdrop { background: rgba(15, 23, 42, .35); }
.modal-card { padding: 18px; display: grid; gap: 10px; }
.modal-card h3 { font-size: 18px; margin: 0; }
.modal-card p { color: var(--muted); }
.modal-actions { justify-content: flex-end; }

.permission-header p { color: var(--muted); font-size: 12px; margin-top: 3px; }
.permission-tools {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 14px;
    border-bottom: 1px solid var(--border);
}
.permission-tools input { flex: 1 1 240px; }
.permission-group-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
}
.permission-group {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
.permission-group h3 {
    font-size: 14px;
    margin: 0;
    padding: 10px 12px;
    background: #f1f7fd;
    border-bottom: 1px solid var(--border);
}
.permission-list { display: grid; }
.permission-row {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 9px 12px;
    border-bottom: 1px solid #edf3f9;
    cursor: pointer;
}
.permission-row:last-child { border-bottom: 0; }
.permission-row input { width: 16px; height: 16px; min-height: auto; margin-top: 2px; }
.permission-row strong { display: block; font-size: 12px; color: #223548; }
.permission-row small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }

.empty-table-cell {
    text-align: center;
    padding: 24px !important;
    color: var(--muted);
}

@media (max-width: 1180px) {
    .dashboard-grid.five-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .user-edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .dashboard-grid.five-columns,
    .dashboard-grid.four-columns,
    .user-filter-grid,
    .user-edit-grid,
    .permission-group-grid { grid-template-columns: 1fr; }
    .user-filter-actions,
    .standard-form-actions { justify-content: stretch; }
    .user-filter-actions .btn-small,
    .standard-form-actions .btn-small { flex: 1 1 auto; }
    .pagination-nav { align-items: flex-start; flex-direction: column; }
    .pagination-center { justify-content: flex-start; }
}


/* SME critical stability restore: sidebar, icons, dashboard table, pagination */
.sidebar {
    width: 260px !important;
    max-width: 260px !important;
    min-width: 260px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.side-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    padding: 12px 10px 14px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 1 auto !important;
}

.nav-category {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 10px 0 5px !important;
    padding: 0 4px !important;
    color: #1d5cff !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
}

.nav-category:first-child { margin-top: 0 !important; }
.nav-category::before {
    content: '' !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: #1d5cff !important;
    flex: 0 0 auto !important;
}

.nav-category span { display: inline !important; font: inherit !important; }

.side-nav a.nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 42px !important;
    padding: 8px 10px !important;
    border-radius: 11px !important;
    color: #102033 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
    background: transparent !important;
}

.side-nav a.nav-link:hover,
.side-nav a.nav-link.active {
    background: #eaf5ff !important;
    border-color: #b9ddfb !important;
    color: #071f3d !important;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .10) !important;
}

.nav-text {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.nav-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    overflow: hidden !important;
    flex: 0 0 32px !important;
}

.nav-icon svg {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    overflow: visible !important;
}

.nav-icon svg path {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.admin-dashboard-page .dashboard-ticket-scroll { overflow-x: auto !important; }
.admin-dashboard-page .dashboard-ticket-table {
    width: 100% !important;
    min-width: 900px !important;
    table-layout: fixed !important;
    font-size: 12px !important;
}
.admin-dashboard-page .dashboard-ticket-table th,
.admin-dashboard-page .dashboard-ticket-table td {
    padding: 8px 9px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.admin-dashboard-page .panel-header h2 { font-size: 18px !important; }
.admin-dashboard-page .panel-header p { font-size: 12px !important; }
.admin-dashboard-page .dashboard-ticket-table .badge,
.admin-dashboard-page .dashboard-ticket-table .category-badge,
.admin-dashboard-page .dashboard-ticket-table .status-tag {
    min-height: 23px !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
}

.pagination-wrap.standard-pagination-footer,
.compact-pagination,
.store-pagination-wrap {
    padding: 14px 16px 22px !important;
    border-top: 1px solid var(--border) !important;
    background: #f8fbff !important;
    overflow-x: auto !important;
}

/* 2026-07-06 compact user management + route compatibility follow-up fix */
.compact-user-summary-grid {
    gap: 8px !important;
    margin-bottom: 10px !important;
}

.compact-user-summary-grid .stat-card {
    padding: 10px 12px !important;
    border-radius: 10px !important;
    min-height: 0 !important;
}

.compact-user-summary-grid .stat-card span {
    font-size: 11px !important;
    line-height: 1.2 !important;
}

.compact-user-summary-grid .stat-card strong {
    margin-top: 4px !important;
    font-size: 24px !important;
    line-height: 1.1 !important;
}

.compact-user-summary-grid .stat-card small {
    font-size: 11px !important;
    margin-top: 3px !important;
}

.compact-user-filter-card,
.compact-user-list-card {
    margin-bottom: 10px !important;
}

.compact-user-filter-form {
    padding: 12px 14px !important;
}

.user-filter-grid-compact {
    display: grid !important;
    grid-template-columns: minmax(260px, 2fr) 165px 165px auto !important;
    gap: 10px !important;
    align-items: end !important;
}

.user-filter-grid-compact .form-group {
    margin-bottom: 0 !important;
}

.compact-filter-action-group {
    min-width: 0 !important;
}

.compact-inline-filter-actions {
    margin-top: 0 !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
}

.compact-inline-filter-actions .btn-small {
    white-space: nowrap !important;
}

.compact-user-list-header {
    padding-bottom: 4px !important;
}

.compact-user-table {
    min-width: 920px !important;
}

.compact-user-table th,
.compact-user-table td {
    padding: 8px 9px !important;
    font-size: 12px !important;
}

.compact-user-table .user-name-col { width: 235px !important; }
.compact-user-table .user-role-col { width: 130px !important; }
.compact-user-table .user-link-col { width: 210px !important; }
.compact-user-table .user-dept-col { width: 135px !important; }
.compact-user-table .user-status-col { width: 96px !important; }
.compact-user-table .user-actions-col { width: 108px !important; }

.compact-user-table .symbol-btn {
    width: 26px !important;
    height: 26px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
}

@media (max-width: 1180px) {
    .user-filter-grid-compact {
        grid-template-columns: minmax(220px, 2fr) 150px 150px auto !important;
    }
}

@media (max-width: 980px) {
    .user-filter-grid-compact {
        grid-template-columns: 1fr !important;
    }

    .compact-inline-filter-actions {
        justify-content: stretch !important;
        flex-wrap: wrap !important;
    }

    .compact-inline-filter-actions .btn-small {
        flex: 1 1 auto !important;
    }
}


/* 2026-07-06 supplier + audit + user compact summary card fix */
.dashboard-grid.four-columns {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
}

.dashboard-grid.five-columns {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
}

.dashboard-grid.four-columns .stat-card,
.dashboard-grid.five-columns .stat-card {
    min-width: 0 !important;
}

.compact-audit-summary-grid {
    gap: 8px !important;
    margin-bottom: 10px !important;
}

.compact-audit-summary-grid .stat-card,
.audit-summary-grid .stat-card {
    padding: 10px 12px !important;
    border-radius: 10px !important;
    min-height: 0 !important;
}

.compact-audit-summary-grid .stat-card span,
.audit-summary-grid .stat-card span {
    font-size: 11px !important;
    line-height: 1.2 !important;
}

.compact-audit-summary-grid .stat-card strong,
.audit-summary-grid .stat-card strong {
    margin-top: 4px !important;
    font-size: 24px !important;
    line-height: 1.1 !important;
}

.compact-audit-summary-grid .stat-card small,
.audit-summary-grid .stat-card small {
    font-size: 11px !important;
    margin-top: 3px !important;
}

/* Suppliers compact summary cards */
.compact-supplier-summary-grid {
    gap: 8px !important;
    margin-bottom: 10px !important;
}

.compact-supplier-summary-grid .stat-card {
    padding: 10px 12px !important;
    border-radius: 10px !important;
    min-height: 0 !important;
}

.compact-supplier-summary-grid .stat-card span {
    font-size: 11px !important;
    line-height: 1.2 !important;
}

.compact-supplier-summary-grid .stat-card strong {
    margin-top: 4px !important;
    font-size: 24px !important;
    line-height: 1.1 !important;
}

.compact-supplier-summary-grid .stat-card small {
    font-size: 11px !important;
    margin-top: 3px !important;
}

/* User compact summary cards */
.compact-user-summary-grid {
    gap: 8px !important;
    margin-bottom: 10px !important;
}

.compact-user-summary-grid .stat-card {
    padding: 10px 12px !important;
    border-radius: 10px !important;
    min-height: 0 !important;
}

.compact-user-summary-grid .stat-card span {
    font-size: 11px !important;
    line-height: 1.2 !important;
}

.compact-user-summary-grid .stat-card strong {
    margin-top: 4px !important;
    font-size: 24px !important;
    line-height: 1.1 !important;
}

.compact-user-summary-grid .stat-card small {
    font-size: 11px !important;
    margin-top: 3px !important;
}

@media (max-width: 1280px) {
    .dashboard-grid.five-columns {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1024px) {
    .dashboard-grid.four-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .dashboard-grid.five-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    .dashboard-grid.four-columns,
    .dashboard-grid.five-columns {
        grid-template-columns: 1fr !important;
    }
}

/* 2026-07-06 restore approved SME pagination and block default huge SVG arrows */
.standard-pagination-footer,
.compact-pagination,
.store-pagination-wrap {
    padding: 14px 16px 22px !important;
    border-top: 1px solid var(--border) !important;
    background: #f8fbff !important;
    overflow-x: auto !important;
}

.standard-pagination-footer nav,
.compact-pagination nav,
.store-pagination-wrap nav,
.pagination-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.pagination-left,
.pagination-center {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.pagination-center {
    justify-content: flex-end !important;
}

.pagination-summary {
    color: #607082 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
}

.pagination-summary strong {
    color: #223548 !important;
    font-weight: 800 !important;
}

.pagination-btn,
.pagination-number,
.pagination-dots {
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    border: 1px solid var(--border) !important;
    background: #fff !important;
    color: var(--text) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

.pagination-number.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

.pagination-btn.disabled {
    color: #98a2b3 !important;
    background: #f8fafc !important;
}

.pagination-dots {
    border: 0 !important;
    background: transparent !important;
    min-width: auto !important;
    padding: 0 2px !important;
}

.pagination svg,
nav[role="navigation"] svg,
.compact-pagination svg,
.standard-pagination-footer svg {
    width: 14px !important;
    height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
}

/* Inventory Module - compact professional standard */
.compact-inventory-summary-grid {
    gap: 8px !important;
    margin-bottom: 10px !important;
}

.compact-inventory-summary-grid .stat-card {
    padding: 10px 12px !important;
    border-radius: 10px !important;
    min-height: 0 !important;
}

.compact-inventory-summary-grid .stat-card span {
    font-size: 11px !important;
    line-height: 1.2 !important;
}

.compact-inventory-summary-grid .stat-card strong {
    margin-top: 4px !important;
    font-size: 24px !important;
    line-height: 1.1 !important;
}

.compact-inventory-summary-grid .stat-card small {
    font-size: 11px !important;
    margin-top: 3px !important;
}

.compact-inventory-filter-card,
.compact-inventory-list-card,
.clean-inventory-form-card {
    margin-bottom: 10px !important;
}

.compact-inventory-filter-form,
.inventory-form {
    padding: 12px 14px !important;
}

.inventory-filter-grid-compact {
    display: grid !important;
    grid-template-columns: minmax(260px, 2fr) 155px 145px 135px auto !important;
    gap: 10px !important;
    align-items: end !important;
}

.inventory-filter-grid-compact .form-group {
    margin-bottom: 0 !important;
}

.compact-inventory-table {
    min-width: 1040px !important;
}

.compact-inventory-table th,
.compact-inventory-table td {
    padding: 8px 9px !important;
    font-size: 12px !important;
    vertical-align: middle !important;
}

.compact-inventory-table .inventory-item-col { width: 230px !important; }
.compact-inventory-table .inventory-category-col { width: 120px !important; }
.compact-inventory-table .inventory-model-col { width: 240px !important; }
.compact-inventory-table .inventory-stock-col { width: 110px !important; }
.compact-inventory-table .inventory-cost-col { width: 90px !important; }
.compact-inventory-table .inventory-status-col { width: 95px !important; }
.compact-inventory-table .inventory-actions-col { width: 145px !important; }

.inventory-main-cell strong,
.inventory-model-cell strong,
.inventory-number-cell strong {
    display: block !important;
    font-size: 12px !important;
    color: var(--text) !important;
}

.inventory-main-cell span,
.inventory-model-cell span,
.inventory-number-cell span {
    display: block !important;
    margin-top: 2px !important;
    font-size: 11px !important;
    color: var(--muted) !important;
    line-height: 1.25 !important;
}

.stock-low-text {
    color: #dc2626 !important;
}

.inventory-actions-cell {
    white-space: nowrap !important;
}

.inventory-actions-cell .symbol-btn {
    width: 26px !important;
    height: 26px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
}

.symbol-btn.warning {
    background: #fff7ed !important;
    border-color: #fed7aa !important;
    color: #c2410c !important;
}

.clean-inventory-form-card {
    padding: 0 !important;
    overflow: hidden !important;
}

.clean-form-layout.inventory-clean-form-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

.clean-form-section {
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    background: #fbfdff !important;
    padding: 14px !important;
}

.clean-form-section-title {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid var(--border) !important;
}

.clean-form-section-title > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 9px !important;
    background: var(--primary-soft) !important;
    color: var(--primary-dark) !important;
    font-weight: 800 !important;
    font-size: 12px !important;
}

.clean-form-section-title h3 {
    margin: 0 !important;
    font-size: 15px !important;
    color: var(--text) !important;
}

.clean-form-section-title p {
    margin: 3px 0 0 !important;
    font-size: 12px !important;
    color: var(--muted) !important;
}

.inventory-edit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.inventory-edit-grid .form-group-wide {
    grid-column: span 2 !important;
}

.clean-form-actions {
    padding: 12px 14px 14px !important;
    border-top: 1px solid var(--border) !important;
    background: #f8fbff !important;
}

.inventory-action-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px !important;
    border-bottom: 1px solid var(--border) !important;
    background: #f8fbff !important;
}

.inventory-action-header h2 {
    margin: 2px 0 !important;
    font-size: 18px !important;
}

.inventory-action-header p {
    margin: 0 !important;
    color: var(--muted) !important;
    font-size: 12px !important;
}

.inventory-stock-pill {
    display: inline-flex !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    background: #ecfdf3 !important;
    color: #067647 !important;
    border: 1px solid #bbf7d0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

.inventory-stock-pill.empty {
    background: #fff1f2 !important;
    color: #be123c !important;
    border-color: #fecdd3 !important;
}

@media (max-width: 1180px) {
    .inventory-filter-grid-compact {
        grid-template-columns: minmax(220px, 2fr) 145px 135px 130px auto !important;
    }

    .inventory-edit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 980px) {
    .inventory-filter-grid-compact,
    .inventory-edit-grid {
        grid-template-columns: 1fr !important;
    }

    .inventory-edit-grid .form-group-wide {
        grid-column: auto !important;
    }

    .inventory-action-header {
        align-items: flex-start !important;
        flex-direction: column !important;
    }
}

/* Ticket resolution inventory/material action */
.ticket-form-error-summary {
    margin: 0 0 10px;
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid #fecaca;
    background: #fff1f2;
    color: #9f1239;
    font-size: 12px;
    font-weight: 700;
}

.resolution-inventory-card {
    width: min(760px, calc(100vw - 28px));
    max-height: calc(100vh - 70px);
    overflow-y: auto;
}

.resolution-inventory-card h3 {
    margin: 0 0 5px;
    font-size: 18px;
    color: var(--text);
}

.resolution-inventory-card p {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 12px;
}

.resolution-inventory-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.resolution-inventory-grid .full-width-field {
    grid-column: 1 / -1;
}

.ticket-inventory-used-card {
    background: linear-gradient(135deg, #f5fbff, #ffffff);
    border-color: #bfdbfe;
}

.ticket-inventory-used-list {
    display: grid;
    gap: 8px;
}

.ticket-inventory-used-row {
    border: 1px solid var(--border);
    background: #ffffff;
    border-radius: 10px;
    padding: 9px 10px;
}

.ticket-inventory-used-row div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ticket-inventory-used-row strong {
    font-size: 12px;
    color: var(--text);
}

.ticket-inventory-used-row span,
.ticket-inventory-used-row small,
.ticket-inventory-used-row p {
    font-size: 11px;
    color: var(--muted);
}

.ticket-inventory-used-row p {
    margin: 5px 0 0;
    line-height: 1.45;
}

@media (max-width: 760px) {
    .resolution-inventory-grid {
        grid-template-columns: 1fr;
    }

    .ticket-inventory-used-row div {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* 2026-07-06 ticket resolution inventory modal layout fix */
.resolution-inventory-modal {
    width: min(980px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
    overflow: hidden !important;
}

.resolution-inventory-modal .resolution-inventory-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100vh - 52px) !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    box-sizing: border-box !important;
    padding: 16px 18px !important;
    gap: 8px !important;
}

.resolution-inventory-card h3 {
    font-size: 17px !important;
    line-height: 1.15 !important;
    margin: 0 0 2px !important;
}

.resolution-inventory-card p {
    font-size: 12px !important;
    line-height: 1.35 !important;
    margin: 0 0 6px !important;
    max-width: 880px !important;
}

.resolution-inventory-grid {
    display: grid !important;
    grid-template-columns: 1.25fr 1.25fr .72fr .82fr !important;
    gap: 8px 10px !important;
    align-items: end !important;
}

.resolution-inventory-grid .form-field,
.resolution-inventory-grid .full-width-field {
    grid-column: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.resolution-action-field {
    grid-column: span 2 !important;
}

.resolution-item-field {
    grid-column: span 2 !important;
}

.resolution-notes-field {
    grid-column: span 2 !important;
}

.resolution-inventory-grid .form-field span {
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin-bottom: 4px !important;
}

.resolution-inventory-grid input,
.resolution-inventory-grid select,
.resolution-inventory-grid textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    box-sizing: border-box !important;
}

.resolution-inventory-grid textarea {
    height: 62px !important;
    min-height: 62px !important;
    resize: vertical !important;
}

.resolution-inventory-card .modal-actions {
    margin-top: 2px !important;
    padding-top: 8px !important;
    border-top: 1px solid var(--border) !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.resolution-inventory-card .modal-actions .btn-small {
    min-height: 32px !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
}

@media (max-width: 980px) {
    .resolution-inventory-modal {
        width: min(720px, calc(100vw - 28px)) !important;
        max-width: calc(100vw - 28px) !important;
    }

    .resolution-inventory-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .resolution-action-field,
    .resolution-item-field,
    .resolution-notes-field {
        grid-column: 1 / -1 !important;
    }

    .resolution-inventory-modal .resolution-inventory-card {
        overflow-y: auto !important;
    }
}

@media (max-width: 640px) {
    .resolution-inventory-grid {
        grid-template-columns: 1fr !important;
    }

    .resolution-inventory-grid .form-field,
    .resolution-action-field,
    .resolution-item-field,
    .resolution-notes-field {
        grid-column: 1 / -1 !important;
    }
}

/* 2026-07-06 ticket lock + RM inventory filter fix */
.ticket-locked-notice {
    margin: 10px 12px 12px;
    padding: 10px 12px;
    border: 1px solid #fed7aa;
    border-radius: 12px;
    background: #fff7ed;
    color: #7c2d12;
}

.ticket-locked-notice div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ticket-locked-notice strong {
    font-size: 13px;
    font-weight: 800;
}

.ticket-locked-notice span {
    font-size: 12px;
    line-height: 1.35;
}

.ticket-locked-reopen-card {
    border-color: #fed7aa !important;
    background: #fffaf4 !important;
}

.compact-reopen-grid {
    grid-template-columns: minmax(180px, 1fr) !important;
}

@media (max-width: 720px) {
    .ticket-locked-notice div {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* 2026-07-06 RM ticket old equipment dropdown fix */
.resolution-old-equipment-field {
    grid-column: span 2;
}

.resolution-old-equipment-field select {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 900px) {
    .resolution-old-equipment-field {
        grid-column: 1 / -1;
    }
}

/* 2026-07-06 ticket equipment repair history + spare replacement fix */
.ticket-existing-equipment-field {
    background: #f8fbff;
    border: 1px solid #d9e8fb;
    border-radius: 12px;
    padding: 10px 12px;
}

.resolution-spare-equipment-field select,
.resolution-old-equipment-field select {
    min-width: 0 !important;
}

.ticket-equipment-history-card {
    border-color: #d8e8fb !important;
    background: #fbfdff !important;
}

.ticket-equipment-history-list {
    display: grid;
    gap: 8px;
}

.ticket-equipment-history-row {
    border: 1px solid #dbeafe;
    background: #ffffff;
    border-radius: 10px;
    padding: 9px 10px;
    display: grid;
    gap: 4px;
}

.ticket-equipment-history-row div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
}

.ticket-equipment-history-row strong {
    font-size: 12px;
    color: #102033;
}

.ticket-equipment-history-row span,
.ticket-equipment-history-row small,
.ticket-equipment-history-row p {
    font-size: 11px;
    color: #54657a;
    margin: 0;
}

.ticket-equipment-history-row span {
    text-transform: uppercase;
    font-weight: 700;
    color: #1d5f99;
}

@media (max-width: 900px) {
    .ticket-equipment-history-row div {
        display: grid;
        gap: 3px;
    }
}


/* 2026-07-06 ticket reported equipment auto-select tidy fix */
.resolution-inventory-modal .compact-equipment-note {
    display: block !important;
    margin: 0 0 4px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    color: var(--primary-dark) !important;
    white-space: normal !important;
}

.resolution-inventory-modal .field-help {
    max-width: 100% !important;
}

/* Equipment module compact UI additions - safe append */
.compact-equipment-summary-grid {
    gap: 8px !important;
    margin-bottom: 10px !important;
}
.compact-equipment-summary-grid .stat-card {
    padding: 10px 12px !important;
    border-radius: 10px !important;
    min-height: 0 !important;
}
.compact-equipment-summary-grid .stat-card span {
    font-size: 11px !important;
    line-height: 1.2 !important;
}
.compact-equipment-summary-grid .stat-card strong {
    margin-top: 4px !important;
    font-size: 24px !important;
    line-height: 1.1 !important;
}
.compact-equipment-summary-grid .stat-card small {
    font-size: 11px !important;
    margin-top: 3px !important;
}
.compact-equipment-filter-card,
.compact-equipment-list-card,
.equipment-form-card,
.equipment-history-header {
    margin-bottom: 10px !important;
}
.compact-equipment-filter-form,
.equipment-form {
    padding: 12px 14px !important;
}
.equipment-filter-grid-compact {
    display: grid !important;
    grid-template-columns: minmax(260px, 2fr) 230px 170px auto !important;
    gap: 10px !important;
    align-items: end !important;
}
.compact-equipment-table {
    min-width: 940px !important;
}
.compact-equipment-table th,
.compact-equipment-table td {
    padding: 8px 9px !important;
    font-size: 12px !important;
    vertical-align: top !important;
}
.equipment-main-cell strong,
.cell-subline {
    display: block;
}
.cell-subline,
.muted-text {
    color: var(--muted, #64748b);
    font-size: 11px;
    margin-top: 3px;
}
.equipment-form-shell {
    display: grid;
    gap: 12px;
}
.equipment-form-shell .property-form-section {
    padding: 14px !important;
    border: 1px solid var(--border, #dbeafe);
    border-radius: 12px;
    background: #fff;
}
@media (max-width: 1180px) {
    .equipment-filter-grid-compact {
        grid-template-columns: 1fr 1fr !important;
    }
}
@media (max-width: 900px) {
    .equipment-filter-grid-compact {
        grid-template-columns: 1fr !important;
    }
}


/* Append these styles to public/css/sme-opr-v2.css */
.dashboard-grid.four-columns {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.compact-report-summary-grid {
    gap: 8px !important;
    margin-bottom: 10px !important;
}

.compact-report-summary-grid .stat-card {
    padding: 10px 12px !important;
    border-radius: 10px !important;
    min-height: 0 !important;
}

.compact-report-summary-grid .stat-card span {
    font-size: 11px !important;
    line-height: 1.2 !important;
}

.compact-report-summary-grid .stat-card strong {
    margin-top: 4px !important;
    font-size: 24px !important;
    line-height: 1.1 !important;
}

.compact-report-summary-grid .stat-card small {
    font-size: 11px !important;
    margin-top: 3px !important;
}

.report-filter-card,
.compact-report-list-card {
    margin-bottom: 10px !important;
}

.compact-report-filter-form {
    padding: 12px 14px !important;
}

.report-filter-grid-compact {
    display: grid !important;
    grid-template-columns: minmax(260px, 2fr) 160px 160px auto !important;
    gap: 10px !important;
    align-items: end !important;
}

.report-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.report-module-card {
    display: block;
    padding: 16px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--border, #dbeafe);
    box-shadow: var(--shadow, 0 8px 20px rgba(15, 23, 42, .06));
    color: var(--text, #0f172a);
    text-decoration: none;
}

.report-module-card strong,
.report-module-card small {
    display: block;
}

.report-module-card small {
    margin-top: 4px;
    color: var(--muted, #64748b);
}

.report-icon {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
    background: #eff6ff;
    margin-bottom: 10px;
}

.compact-report-table {
    min-width: 940px !important;
}

.compact-report-table th,
.compact-report-table td {
    padding: 8px 9px !important;
    font-size: 12px !important;
    vertical-align: top !important;
}

.cell-subline {
    display: block;
    color: var(--muted, #64748b);
    font-size: 11px;
    margin-top: 3px;
}

@media (max-width: 1100px) {
    .report-filter-grid-compact,
    .report-card-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 800px) {
    .dashboard-grid.four-columns,
    .report-filter-grid-compact,
    .report-card-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Reports final cleanup - compact standard */
.reports-page .compact-report-summary-grid,
.compact-report-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}
.reports-page .compact-report-summary-grid .stat-card,
.compact-report-summary-grid .stat-card {
    padding: 10px 12px !important;
    border-radius: 10px !important;
    min-height: 0 !important;
}
.reports-page .compact-report-summary-grid .stat-card span,
.compact-report-summary-grid .stat-card span {font-size: 11px !important;line-height:1.2 !important;}
.reports-page .compact-report-summary-grid .stat-card strong,
.compact-report-summary-grid .stat-card strong {font-size:24px !important;line-height:1.1 !important;margin-top:4px !important;}
.reports-page .compact-report-summary-grid .stat-card small,
.compact-report-summary-grid .stat-card small {font-size:11px !important;margin-top:3px !important;}
.report-filter-card.clean-report-filter-card {padding: 12px 14px !important;margin-bottom: 12px !important;}
.clean-report-filter-form {padding: 0 !important;margin:0 !important;}
.clean-report-filter-grid {
    display:grid !important;
    grid-template-columns: minmax(280px, 2fr) 160px 160px auto !important;
    gap:10px !important;
    align-items:end !important;
}
.clean-report-filter-grid .form-group {margin:0 !important;}
.clean-report-filter-grid label {font-size:11px !important;font-weight:700 !important;color:var(--muted,#64748b) !important;margin-bottom:4px !important;}
.clean-report-filter-grid input,
.clean-report-filter-grid select {height:36px !important;font-size:13px !important;padding:7px 10px !important;border-radius:8px !important;}
.clean-report-actions {display:flex !important;gap:6px !important;justify-content:flex-end !important;align-items:center !important;white-space:nowrap !important;}
.clean-report-actions .btn-small {height:34px !important;padding:7px 12px !important;line-height:1 !important;}
.clean-report-card-grid,
.report-card-grid.clean-report-card-grid {
    display:grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap:12px !important;
    margin-top:12px !important;
}
.clean-report-card-grid .report-module-card,
.report-module-card.clean-report-card {
    display:grid !important;
    grid-template-columns: 36px 1fr auto !important;
    gap:10px !important;
    align-items:center !important;
    padding:14px !important;
    border-radius:12px !important;
    border:1px solid var(--border,#dbeafe) !important;
    background:#fff !important;
    box-shadow:var(--shadow,0 8px 20px rgba(15,23,42,.06)) !important;
    text-decoration:none !important;
    color:var(--text,#0f172a) !important;
}
.report-module-card .report-icon {width:36px !important;height:36px !important;display:grid !important;place-items:center !important;border-radius:10px !important;background:#eff6ff !important;margin:0 !important;}
.report-card-title {display:block !important;font-weight:700 !important;font-size:14px !important;margin-bottom:2px !important;}
.report-card-subtitle {display:block !important;color:var(--muted,#64748b) !important;font-size:12px !important;line-height:1.35 !important;}
.report-card-arrow {font-weight:700 !important;color:var(--primary,#2563eb) !important;}
.compact-report-list-card {padding:14px !important;margin-bottom:14px !important;}
.compact-report-table {min-width:940px !important;}
.compact-report-table th,.compact-report-table td {padding:8px 9px !important;font-size:12px !important;vertical-align:top !important;}
.cell-subline {display:block !important;color:var(--muted,#64748b) !important;font-size:11px !important;margin-top:3px !important;}
@media (max-width: 1180px) {.clean-report-card-grid,.report-card-grid.clean-report-card-grid {grid-template-columns:1fr !important;}.clean-report-filter-grid {grid-template-columns:1fr 1fr !important;}.clean-report-actions{justify-content:flex-start!important;}}
@media (max-width: 760px) {.compact-report-summary-grid,.reports-page .compact-report-summary-grid,.clean-report-filter-grid {grid-template-columns:1fr !important;}.clean-report-actions .btn-small{flex:1 1 auto!important;}.clean-report-actions{width:100%!important;}}
.sme-report-page{display:grid;gap:12px}.sme-report-stats{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:10px!important}.sme-report-stats .stat-card{padding:10px 12px!important;min-height:0!important;border-radius:10px!important}.sme-report-stats .stat-card span{font-size:11px!important;line-height:1.2!important}.sme-report-stats .stat-card strong{font-size:24px!important;line-height:1.1!important;margin-top:4px!important}.sme-report-stats .stat-card small{font-size:11px!important;margin-top:3px!important}.sme-report-filter{padding:12px 14px!important;margin:0!important}.sme-report-filter form{margin:0!important}.sme-report-filter-grid{display:grid!important;grid-template-columns:minmax(260px,2fr) 160px 160px auto!important;gap:10px!important;align-items:end!important}.sme-report-filter-grid .form-group{margin:0!important}.sme-report-filter-grid label{display:block!important;font-size:11px!important;font-weight:700!important;color:#64748b!important;margin:0 0 4px!important}.sme-report-filter-grid input{height:34px!important;border-radius:8px!important;font-size:13px!important;padding:7px 10px!important}.sme-report-actions{display:flex!important;gap:6px!important;align-items:center!important;justify-content:flex-end!important;white-space:nowrap!important}.sme-report-actions .btn-small{height:34px!important;padding:7px 12px!important;line-height:1!important}.sme-report-card-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}.sme-report-card{display:grid!important;grid-template-columns:38px 1fr auto!important;gap:10px!important;align-items:center!important;padding:14px!important;border:1px solid #dbeafe!important;border-radius:12px!important;background:#fff!important;text-decoration:none!important;color:#0f172a!important;box-shadow:0 8px 18px rgba(15,23,42,.05)!important}.sme-report-card-icon{width:36px!important;height:36px!important;display:grid!important;place-items:center!important;border-radius:10px!important;background:#eff6ff!important}.sme-report-card-title{display:block!important;font-size:14px!important;font-weight:700!important;margin-bottom:3px!important}.sme-report-card-text{display:block!important;font-size:12px!important;color:#64748b!important;line-height:1.35!important}.sme-report-card-arrow{font-size:20px!important;font-weight:700!important;color:#2563eb!important}.sme-report-list{padding:14px!important}.sme-report-table{min-width:960px!important}.sme-report-table th,.sme-report-table td{padding:8px 9px!important;font-size:12px!important;vertical-align:top!important}.sme-report-sub{display:block!important;color:#64748b!important;font-size:11px!important;margin-top:3px!important}.sme-report-badge{display:inline-flex!important;align-items:center!important;border-radius:999px!important;padding:3px 8px!important;background:#eff6ff!important;color:#1d4ed8!important;font-size:11px!important;font-weight:700!important}@media(max-width:1180px){.sme-report-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important}.sme-report-card-grid{grid-template-columns:1fr!important}.sme-report-filter-grid{grid-template-columns:1fr 1fr!important}.sme-report-actions{justify-content:flex-start!important}}@media(max-width:760px){.sme-report-stats,.sme-report-filter-grid{grid-template-columns:1fr!important}.sme-report-actions .btn-small{flex:1 1 auto!important}}

/* Ticket view final restore: keep all details visible and aligned */
.ticket-single-page-panel .ticket-layout-grid {
    display: grid !important;
    grid-template-columns: minmax(260px, .9fr) minmax(340px, 1.05fr) minmax(300px, .95fr) !important;
    gap: 14px !important;
    padding: 14px 16px 16px !important;
    align-items: start !important;
}
.ticket-single-page-panel .ticket-layout-left,
.ticket-single-page-panel .ticket-layout-middle,
.ticket-single-page-panel .ticket-layout-right {
    display: grid !important;
    gap: 14px !important;
    min-width: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.ticket-single-page-panel .ticket-card {
    display: block !important;
    min-width: 0 !important;
}
.ticket-single-page-panel .ticket-description-panel,
.ticket-single-page-panel .ticket-detail-list,
.ticket-single-page-panel .ticket-file-list,
.ticket-single-page-panel .ticket-timeline-list {
    display: block;
}
@media (max-width: 1320px) {
    .ticket-single-page-panel .ticket-layout-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .ticket-single-page-panel .ticket-layout-right {
        grid-column: 1 / -1;
    }
}
@media (max-width: 860px) {
    .ticket-single-page-panel .ticket-layout-grid {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
    }
    .ticket-single-page-panel .ticket-layout-right {
        grid-column: auto;
    }
}


/* Properties module hard fix 2026-07-09: list ref/type columns, compact filter buttons, clean view/edit spacing */
.properties-directory-panel {
    overflow: visible !important;
}

.properties-directory-topbar {
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--border) !important;
    background: #fff !important;
}

.properties-search-row {
    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) 132px 132px 145px auto auto auto !important;
    gap: 8px !important;
    align-items: center !important;
}

.properties-search-row input,
.properties-search-row select {
    height: 32px !important;
    min-height: 32px !important;
    padding: 5px 9px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
}

.properties-search-row .property-filter-btn,
.properties-search-row button.property-filter-btn,
.properties-search-row a.property-filter-btn {
    min-height: 28px !important;
    height: 28px !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    line-height: 18px !important;
    white-space: nowrap !important;
}

.properties-table-final-fix {
    width: 100% !important;
    table-layout: fixed !important;
    min-width: 1120px !important;
}

.properties-table-final-fix .properties-col-ref { width: 8%; }
.properties-table-final-fix .properties-col-type { width: 12%; }
.properties-table-final-fix .properties-col-property { width: 23%; }
.properties-table-final-fix .properties-col-tenant { width: 25%; }
.properties-table-final-fix .properties-col-compliance { width: 14%; }
.properties-table-final-fix .properties-col-status { width: 8%; }
.properties-table-final-fix .properties-col-actions { width: 10%; }

.properties-table-final-fix th,
.properties-table-final-fix td {
    padding: 9px 10px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    vertical-align: middle !important;
}

.property-ref-cell {
    white-space: nowrap !important;
}

.property-ref-highlight {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 24px !important;
    max-width: 100% !important;
    padding: 3px 9px !important;
    border-radius: 7px !important;
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    color: #1d4ed8 !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}

.property-view-ref-highlight {
    min-height: 28px !important;
    padding: 4px 11px !important;
    font-size: 14px !important;
}

.property-type-legal-cell strong,
.property-address-cell strong,
.property-tenant-cell strong {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-weight: 600 !important;
}

.property-type-legal-cell span,
.property-address-cell span,
.property-tenant-cell span,
.property-compliance-cell small,
.property-type-line {
    display: block !important;
    margin-top: 3px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.properties-table-final-fix .row-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    width: 100% !important;
    padding-right: 6px !important;
}

.properties-table-final-fix .table-actions-col {
    text-align: right !important;
    padding-right: 16px !important;
}

.property-view-card,
.property-info-card,
.property-tenants-card,
.property-notes-view-card,
.property-edit-card {
    background: #fff !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow) !important;
    margin-bottom: 14px !important;
    overflow: hidden !important;
}

.property-view-header,
.property-edit-header,
.compact-section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--border) !important;
    background: #f8fbff !important;
}

.property-view-header h2,
.property-edit-header h2,
.compact-section-header h2,
.property-card-title h3,
.property-standard-section-title h3 {
    margin: 0 !important;
    color: var(--text) !important;
    font-size: var(--font-heading) !important;
    line-height: 1.25 !important;
}

.property-view-header p,
.property-edit-header p,
.compact-section-header p,
.property-standard-section-title span {
    margin: 3px 0 0 !important;
    color: #64748b !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
}

.property-view-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 14px 16px !important;
}

.property-view-summary-grid article {
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    padding: 10px 11px !important;
    min-height: auto !important;
}

.property-view-summary-grid span,
.property-detail-list span,
.property-view-notes-grid span {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

.property-view-summary-grid strong,
.property-detail-list strong {
    display: block !important;
    margin-top: 3px !important;
    color: var(--text) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    overflow-wrap: anywhere !important;
}

.property-view-grid-fixed,
.property-view-two-column {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: start !important;
    margin-bottom: 14px !important;
}

.property-card-title {
    padding: 13px 15px 10px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: #fff !important;
}

.property-detail-list,
.property-clean-detail-list {
    padding: 12px 15px 14px !important;
}

.property-detail-list > div,
.property-clean-detail-list > div {
    display: grid !important;
    grid-template-columns: 145px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.property-detail-list > div:last-child,
.property-clean-detail-list > div:last-child {
    border-bottom: 0 !important;
}

.property-standard-section {
    padding: 14px 16px 4px !important;
    border-bottom: 1px solid #eef2f7 !important;
}

.property-standard-section:last-of-type {
    border-bottom: 0 !important;
}

.property-standard-section-title {
    margin-bottom: 10px !important;
}

.property-standard-grid,
.property-compliance-grid,
.property-rent-standard-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px 12px !important;
}

.property-wide-field {
    grid-column: span 2 !important;
}

.property-standard-notes-grid,
.property-view-notes-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.property-standard-form .form-group label {
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
}

.property-standard-form input,
.property-standard-form select,
.property-standard-form textarea {
    min-height: 34px !important;
    padding: 7px 9px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
}

.property-standard-form textarea {
    min-height: 74px !important;
    resize: vertical !important;
}

.property-form-footer-final,
.property-standard-footer {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 14px 18px 18px !important;
    border-top: 1px solid #e2e8f0 !important;
    background: #fff !important;
}

.property-edit-top-actions .btn-small,
.property-view-actions .btn-small,
.property-standard-footer .btn-small,
.property-form-footer-final .btn-small {
    min-height: 30px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
}

.property-view-section-fixed,
.property-notes-view-card {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
}

.property-view-table th,
.property-view-table td {
    font-size: 12px !important;
    padding: 9px 10px !important;
}

@media (max-width: 1180px) {
    .properties-search-row {
        grid-template-columns: 1fr 1fr 1fr !important;
    }

    .property-view-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .property-standard-grid,
    .property-compliance-grid,
    .property-rent-standard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .properties-search-row,
    .property-view-grid-fixed,
    .property-view-two-column,
    .property-view-summary-grid,
    .property-standard-grid,
    .property-compliance-grid,
    .property-rent-standard-grid,
    .property-standard-notes-grid,
    .property-view-notes-grid {
        grid-template-columns: 1fr !important;
    }

    .property-wide-field {
        grid-column: span 1 !important;
    }

    .property-view-header,
    .property-edit-header,
    .compact-section-header {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .property-view-actions,
    .property-edit-top-actions,
    .property-form-footer-final,
    .property-standard-footer,
    .properties-search-row .btn,
    .properties-search-row .btn-sm {
        width: 100% !important;
    }

    .property-view-actions .btn-small,
    .property-edit-top-actions .btn-small,
    .property-form-footer-final .btn-small,
    .property-standard-footer .btn-small,
    .properties-search-row .btn,
    .properties-search-row .btn-sm {
        width: 100% !important;
        justify-content: center !important;
    }

    .property-detail-list > div,
    .property-clean-detail-list > div {
        grid-template-columns: 1fr !important;
        gap: 2px !important;
    }

    .properties-table-final-fix {
        min-width: 0 !important;
    }
}

/* Properties module - store standard redesign 2026-07-09 */
.properties-store-panel {
    overflow: visible;
}

.properties-store-topbar {
    display: grid;
    gap: 10px;
}

.property-status-tabs {
    width: 100%;
}

.property-tab-all,
.property-tab-active {
    background: #eaf5ff;
    color: #155b91;
    border-color: #c2def7;
}

.property-tab-maintenance,
.property-tab-due {
    background: #fff4de;
    color: #a86a00;
    border-color: #f7d89a;
}

.property-tab-inactive {
    background: #f2f4f7;
    color: #667085;
    border-color: #d0d5dd;
}

.property-tab-all small,
.property-tab-active small {
    background: #d8ecff;
    color: #155b91;
}

.property-tab-maintenance small,
.property-tab-due small {
    background: #ffe3ad;
    color: #a86a00;
}

.property-tab-inactive small {
    background: #e4e7ec;
    color: #667085;
}

.properties-store-search-row {
    grid-template-columns: minmax(280px, 1fr) 132px 145px 155px auto auto;
    gap: 8px;
}

.properties-store-search-row .btn,
.properties-store-search-row .btn-sm {
    min-height: 31px;
    padding: 5px 10px;
    font-size: 13px;
    border-radius: 8px;
}

.properties-store-table {
    table-layout: fixed;
}

.properties-store-table .property-col-ref { width: 86px; }
.properties-store-table .property-col-type { width: 138px; }
.properties-store-table .property-col-property { width: 25%; }
.properties-store-table .property-col-tenant { width: 27%; }
.properties-store-table .property-col-compliance { width: 145px; }
.properties-store-table .property-col-status { width: 96px; }
.properties-store-table .property-col-actions { width: 104px; }

.properties-store-table th,
.properties-store-table td {
    padding: 7px 10px;
    font-size: 13px;
    line-height: 1.2;
    vertical-align: middle;
}

.property-ref-pill {
    font-weight: 800;
    color: var(--primary-dark);
    background: var(--primary-soft);
    border-color: var(--primary-line);
}

.property-type-cell strong,
.property-type-cell span,
.property-address-cell strong,
.property-address-cell span,
.property-tenant-cell strong,
.property-tenant-cell span,
.property-compliance-cell small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.property-type-cell strong,
.property-address-cell strong,
.property-tenant-cell strong {
    font-weight: 700;
    color: var(--text);
}

.property-type-cell span,
.property-address-cell span,
.property-tenant-cell span,
.property-compliance-cell small {
    margin-top: 2px;
    color: var(--muted);
    font-weight: 600;
    font-size: 12px;
}

.properties-store-table .property-compliance-tag,
.properties-store-table .status-tag {
    display: inline-flex;
    min-height: 25px;
    padding: 3px 9px;
    font-size: 12px;
    max-width: 100%;
}

.properties-store-table .table-actions-col {
    overflow: visible;
}

.properties-store-table .row-actions {
    justify-content: flex-start;
    flex-wrap: nowrap;
}

.row-action-icon.success {
    background: var(--success-bg);
    color: var(--success);
    border-color: #bbf7d0;
    cursor: pointer;
}

.row-action-icon.success:hover {
    background: #dcfae6;
}

.property-profile-panel .store-summary-strip strong {
    white-space: nowrap;
}

.property-profile-tabs > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.property-profile-tabs .store-tab-content {
    display: none;
}

#tab-details:checked ~ .tab-details-content,
#tab-tenants:checked ~ .tab-tenants-content,
#tab-compliance:checked ~ .tab-compliance-content,
#tab-notes:checked ~ .tab-notes-content {
    display: block;
}

#tab-details:checked ~ .store-tab-bar label[for="tab-details"],
#tab-tenants:checked ~ .store-tab-bar label[for="tab-tenants"],
#tab-compliance:checked ~ .store-tab-bar label[for="tab-compliance"],
#tab-notes:checked ~ .store-tab-bar label[for="tab-notes"] {
    background: var(--primary-soft);
    color: var(--primary-dark);
    border-color: var(--primary-line);
}

.property-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.property-detail-grid .field-span-2 {
    grid-column: 1 / -1;
}

.property-detail-grid .detail-card,
.property-notes-grid .detail-card {
    min-height: 58px;
    padding: 10px 12px;
}

.property-detail-grid .detail-card strong,
.property-notes-grid .detail-card strong {
    display: block;
    overflow-wrap: anywhere;
}

.property-tenant-table .tenant-main-cell strong,
.property-tenant-table .tenant-main-cell span,
.property-tenant-table .tenant-contact-cell span,
.property-tenant-table .tenant-small-text {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.property-tenant-table .tenant-main-cell em,
.property-tenant-table .tenant-small-text {
    color: var(--muted);
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
}

.property-ticket-list {
    display: grid;
    gap: 8px;
}

.property-ticket-list a {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    text-decoration: none;
}

.property-ticket-list a:hover {
    border-color: var(--primary-line);
    background: var(--primary-soft);
}

.property-ticket-list span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.property-ticket-list em {
    font-style: normal;
    color: var(--muted);
    font-weight: 700;
    font-size: 12px;
}

.property-notes-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.property-form-panel .panel-header,
.property-form-body {
    background: #fff;
}

.property-standard-store-form .field-span-2 { grid-column: span 2; }
.property-standard-store-form .field-span-5 { grid-column: span 5; }

.property-form-section-title {
    margin-top: 6px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel-soft);
    color: var(--primary-dark);
    font-size: var(--font-body);
    font-weight: 800;
    line-height: 1.2;
}

.property-standard-store-form .form-field span {
    color: var(--text);
    font-weight: 700;
}

.property-standard-store-form input,
.property-standard-store-form select {
    height: 36px;
    min-height: 36px;
}

.property-standard-store-form textarea {
    height: 74px;
    min-height: 74px;
}

.property-form-actions {
    justify-content: flex-end;
    padding-bottom: 2px;
}

@media (max-width: 1200px) {
    .properties-store-search-row {
        grid-template-columns: minmax(240px, 1fr) repeat(3, minmax(120px, 150px)) auto auto;
    }

    .property-summary-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .property-notes-grid {
        grid-template-columns: 1fr;
    }

    .property-standard-store-form .field-span-2,
    .property-standard-store-form .field-span-3,
    .property-standard-store-form .field-span-4,
    .property-standard-store-form .field-span-5 {
        grid-column: span 6;
    }
}

@media (max-width: 900px) {
    .properties-store-search-row {
        grid-template-columns: 1fr;
    }

    .properties-store-table {
        table-layout: auto;
    }

    .properties-store-table colgroup {
        display: none;
    }

    .property-profile-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .property-detail-grid,
    .property-summary-strip {
        grid-template-columns: 1fr;
    }

    .property-ticket-list a {
        grid-template-columns: 1fr;
    }

    .property-standard-store-form .field-span-2,
    .property-standard-store-form .field-span-3,
    .property-standard-store-form .field-span-4,
    .property-standard-store-form .field-span-5,
    .property-standard-store-form .field-span-12 {
        grid-column: 1 / -1;
    }

    .property-form-actions {
        justify-content: stretch;
    }
}

/* Properties module - action containment and multi-tenant option fix 2026-07-09 */
.properties-contained-panel {
    overflow: hidden !important;
}

.properties-table-contained {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    overflow-y: visible;
}

.properties-action-safe-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
}

.properties-action-safe-table .property-col-ref { width: 82px !important; }
.properties-action-safe-table .property-col-type { width: 118px !important; }
.properties-action-safe-table .property-col-property { width: 25% !important; }
.properties-action-safe-table .property-col-tenant { width: 31% !important; }
.properties-action-safe-table .property-col-compliance { width: 128px !important; }
.properties-action-safe-table .property-col-status { width: 92px !important; }
.properties-action-safe-table .property-col-actions { width: 84px !important; }

.properties-action-safe-table th,
.properties-action-safe-table td {
    padding: 7px 8px !important;
    min-width: 0 !important;
}

.properties-action-safe-table .property-actions-cell,
.properties-action-safe-table th.table-actions-col {
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
    text-align: center;
    padding-right: 10px !important;
    overflow: hidden !important;
}

.properties-action-safe-table .property-row-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    width: 100% !important;
    max-width: 70px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
}

.properties-action-safe-table .row-action-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

.row-action-icon.tenant {
    color: var(--success);
    background: var(--success-bg);
    border-color: #bbf7d0;
    text-decoration: none;
}

.row-action-icon.tenant:hover {
    background: #dcfae6;
    border-color: #86efac;
}

.properties-action-safe-table .property-ref-pill {
    max-width: 74px;
    padding: 4px 9px;
    font-weight: 800 !important;
}

.properties-action-safe-table .property-tenant-cell em {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.properties-action-safe-table .property-compliance-tag {
    max-width: 118px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.properties-store-search-row-fixed {
    grid-template-columns: minmax(260px, 1fr) 124px 130px 142px 82px 82px !important;
    gap: 8px !important;
}

.properties-store-search-row-fixed .property-filter-btn,
.properties-store-search-row-fixed .btn,
.properties-store-search-row-fixed .btn-sm {
    min-height: 31px !important;
    height: 31px !important;
    padding: 5px 10px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    line-height: 1 !important;
}

.property-add-tenant-header {
    height: 30px !important;
    min-height: 30px !important;
    padding: 5px 11px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
}

.property-profile-tabs .store-tab-bar label small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-left: 5px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 800;
}

.property-tenant-form-section,
.property-clean-form .property-tenant-form-section {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.property-tenant-form-section .panel-header {
    background: var(--panel-soft);
    border-bottom: 1px solid var(--border);
}

.property-tenant-grid input,
.property-tenant-grid select,
.property-text-grid textarea {
    font-size: var(--font-body);
}

@media (max-width: 1250px) {
    .properties-store-search-row-fixed {
        grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(112px, 1fr)) 78px 78px !important;
    }

    .properties-action-safe-table .property-col-type { width: 110px !important; }
    .properties-action-safe-table .property-col-compliance { width: 118px !important; }
    .properties-action-safe-table .property-col-status { width: 84px !important; }
}

@media (max-width: 980px) {
    .properties-table-contained {
        overflow-x: auto !important;
    }

    .properties-action-safe-table {
        min-width: 760px !important;
    }

    .properties-store-search-row-fixed {
        grid-template-columns: 1fr !important;
    }

    .properties-store-search-row-fixed .property-filter-btn,
    .properties-store-search-row-fixed .btn,
    .properties-store-search-row-fixed .btn-sm {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* Properties tenant add/edit standard form redesign 2026-07-09 */
.property-tenant-page-panel {
    overflow: hidden;
}

.property-tenant-page-header {
    background: #fff;
}

.property-tenant-page-header p {
    margin-top: 4px;
    color: var(--muted);
}

.property-tenant-property-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel-soft);
}

.property-tenant-property-strip strong,
.property-tenant-property-strip small {
    display: block;
    line-height: 1.3;
}

.property-tenant-property-strip strong {
    color: var(--text);
    font-weight: 800;
}

.property-tenant-property-strip small {
    margin-top: 2px;
    color: var(--muted);
    font-weight: 600;
}

.property-tenant-form-body {
    padding: 16px;
}

.property-tenant-error {
    margin-bottom: 12px;
}

.property-tenant-error span {
    margin-left: 6px;
    font-weight: 600;
}

.property-tenant-standard-form {
    margin-top: 10px;
    margin-bottom: 12px;
}

.property-tenant-standard-form .form-field {
    min-width: 0;
}

.property-tenant-standard-form input,
.property-tenant-standard-form select {
    width: 100%;
    height: 36px;
    min-height: 36px;
}

.property-tenant-standard-form textarea {
    width: 100%;
    min-height: 76px;
}

.property-primary-field {
    align-self: stretch;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
}

.property-primary-field > span {
    display: block;
    margin-bottom: 6px;
    min-height: 0 !important;
}

.tenant-check-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    min-height: 24px;
    margin: 0;
    color: var(--text);
    font-size: var(--font-body);
    line-height: 1.25;
}

.tenant-check-label input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    margin: 0;
    accent-color: var(--primary);
}

.tenant-check-label strong {
    font-weight: 700;
}

.property-primary-field small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.3;
}

.property-tenant-actions {
    justify-content: flex-end;
    margin-top: 8px;
    padding-bottom: 2px;
}

.property-tenant-actions .btn {
    min-height: 34px;
    padding: 7px 12px;
}

@media (max-width: 900px) {
    .property-tenant-property-strip {
        align-items: flex-start;
        margin: 0 12px;
    }

    .property-tenant-actions {
        justify-content: stretch;
    }

    .property-tenant-actions .btn {
        flex: 1;
    }
}

/* Technicians module - Store standard layout and route-safe actions 2026-07-09 */
.technician-store-panel,
.technician-form-page-panel,
.technician-profile-panel-standard {
    overflow: hidden;
}

.technician-store-topbar {
    gap: 10px;
}

.technician-type-tabs .store-tab {
    min-height: 36px;
    padding: 7px 12px;
}

.technician-static-tab {
    cursor: default;
}

.technician-search-row-fixed {
    grid-template-columns: minmax(260px, 1fr) 210px 150px 96px 92px;
    gap: 8px;
}

.technician-search-row-fixed input,
.technician-search-row-fixed select {
    min-height: 34px;
    height: 34px;
    font-size: 13px;
}

.technician-search-row-fixed .technician-filter-btn,
.technician-search-row-fixed .btn,
.technician-search-row-fixed .btn-sm {
    min-height: 34px;
    height: 34px;
    padding: 7px 12px;
    font-size: 13px;
    border-radius: 8px;
}

.technician-table-contained {
    width: 100%;
    overflow-x: auto;
    border-top: 1px solid var(--border);
}

.technician-standard-table-final {
    width: 100%;
    min-width: 980px;
    table-layout: fixed;
}

.technician-standard-table-final .technician-col-name { width: 28%; }
.technician-standard-table-final .technician-col-dept { width: 18%; }
.technician-standard-table-final .technician-col-jobs { width: 17%; }
.technician-standard-table-final .technician-col-upcoming { width: 11%; }
.technician-standard-table-final .technician-col-status { width: 11%; }
.technician-standard-table-final .technician-col-actions { width: 15%; }

.technician-standard-table-final th,
.technician-standard-table-final td {
    padding: 10px 12px;
    vertical-align: middle;
}

.technician-standard-table-final th {
    white-space: nowrap;
}

.technician-main-cell strong,
.technician-main-cell span,
.technician-jobs-cell strong,
.technician-jobs-cell span,
.technician-dept-cell span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.technician-main-cell strong,
.technician-jobs-cell strong {
    color: var(--text);
    font-weight: 700;
}

.technician-main-cell span,
.technician-jobs-cell span {
    color: var(--muted);
    font-size: 12px;
    margin-top: 2px;
}

.technician-dept-cell span {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 26px;
    padding: 5px 10px;
    border: 1px solid var(--primary-line);
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 700;
}

.technician-actions-cell,
.technician-standard-table-final th.table-actions-col {
    text-align: right;
    overflow: hidden;
}

.technician-row-actions {
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 6px;
    max-width: 100%;
}

.technician-row-actions .row-action-icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    font-size: 13px;
}

.technician-profile-header {
    border-bottom: 1px solid var(--border);
}

.technician-initial-pill {
    min-width: 52px;
    height: 34px;
    justify-content: center;
    font-weight: 800;
}

.technician-summary-strip-standard {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
}

.technician-tabs-standard .tab-content {
    display: none;
    padding: 14px 16px 16px;
}

.technician-tabs-standard #tab-details:checked ~ .store-tab-bar label[for="tab-details"],
.technician-tabs-standard #tab-jobs:checked ~ .store-tab-bar label[for="tab-jobs"] {
    background: var(--primary-soft);
    color: var(--primary-dark);
    border-color: var(--primary-line);
}

.technician-tabs-standard #tab-details:checked ~ .tab-details-content,
.technician-tabs-standard #tab-jobs:checked ~ .tab-jobs-content {
    display: block;
}

.technician-profile-grid-standard {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.technician-subtable-header-standard {
    padding: 0 0 12px;
    border-bottom: 0;
}

.technician-recent-table-wrap {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow-x: auto;
}

.technician-recent-ticket-table-standard {
    min-width: 780px;
}

.technician-recent-ticket-table-standard th,
.technician-recent-ticket-table-standard td {
    padding: 9px 11px;
}

.technician-form-page-header {
    align-items: center;
}

.technician-clean-form {
    padding: 0 16px 16px;
}

.technician-form-error {
    display: grid;
    gap: 4px;
    margin: 0 0 12px;
}

.technician-form-section {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
}

.technician-form-section:first-of-type {
    margin-top: 0;
}

.technician-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

.technician-clean-form .form-field label,
.technician-form-section .form-section-heading h3 {
    color: var(--text);
}

.technician-clean-form .form-field label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 13px;
}

.technician-clean-form input,
.technician-clean-form select {
    min-height: 38px;
    height: 38px;
    font-size: 13px;
    border-radius: 9px;
}

.technician-status-field {
    grid-column: span 2;
}

.technician-check-label {
    margin-top: 0;
    width: 100%;
}

.technician-form-actions-clean {
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 0 0;
    margin-top: 0;
}

.technician-form-actions-clean .btn,
.technician-form-actions-clean .btn-sm {
    min-height: 34px;
    padding: 7px 14px;
    font-size: 13px;
}

@media (max-width: 1180px) {
    .technician-search-row-fixed {
        grid-template-columns: 1fr 1fr 150px 96px 92px;
    }
}

@media (max-width: 900px) {
    .technician-search-row-fixed,
    .technician-form-grid,
    .technician-profile-grid-standard,
    .technician-summary-strip-standard {
        grid-template-columns: 1fr;
    }

    .technician-status-field {
        grid-column: auto;
    }

    .technician-standard-table-final {
        min-width: 820px;
    }
}

@media (max-width: 640px) {
    .technician-clean-form {
        padding: 0 12px 12px;
    }

    .technician-form-actions-clean {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .technician-form-actions-clean .btn,
    .technician-form-actions-clean .btn-sm {
        width: 100%;
    }
}

/* Technicians module - view/edit standard redesign fix 2026-07-09 */
.technician-profile-standard-v2,
.technician-form-standard-v2 {
    overflow: hidden;
}

.technician-profile-header-v2,
.technician-form-page-header-v2 {
    align-items: center;
}

.technician-profile-title-v2 h2,
.technician-form-page-header-v2 h2 {
    font-size: var(--font-heading);
    line-height: 1.25;
    margin: 0 0 4px;
}

.technician-profile-title-v2 p,
.technician-form-page-header-v2 p {
    font-size: var(--font-body);
    color: var(--muted);
    margin: 0;
}

.technician-profile-actions-v2 {
    flex-wrap: wrap;
    gap: 8px;
}

.technician-profile-actions-v2 .btn,
.technician-form-page-header-v2 .btn {
    min-height: 32px;
    padding: 7px 13px;
    font-size: 13px;
    border-radius: 9px;
}

.technician-profile-tabs-v2 > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.technician-profile-tabs-v2 .store-tab-bar {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--panel-soft);
}

.technician-tab-panel-v2 {
    padding: 14px 16px 16px !important;
    background: #fff;
}

.technician-detail-card-grid-v2 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.technician-detail-card-grid-v2 .detail-card {
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
}

.technician-detail-card-grid-v2 .detail-card span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 5px;
}

.technician-detail-card-grid-v2 .detail-card strong {
    display: block;
    color: var(--text);
    font-size: var(--font-body);
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.technician-detail-card-grid-v2 .detail-card .status-tag {
    display: inline-flex;
    margin-top: 0;
}

.technician-standard-form-v2 {
    padding: 14px 16px 16px;
    background: #fff;
}

.technician-form-grid-shell-v2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.technician-form-section-v2 {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
}

.technician-form-grid-v2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
    margin-top: 10px;
}

.technician-form-grid-v2 .field-span-2 {
    grid-column: span 2;
}

.technician-standard-form-v2 .form-field label {
    display: block;
    margin-bottom: 5px;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}

.technician-standard-form-v2 input,
.technician-standard-form-v2 select {
    width: 100%;
    height: 36px;
    min-height: 36px;
    border-radius: 9px;
    font-size: 13px;
}

.technician-check-label-v2 {
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel-soft);
}

.technician-check-label-v2 input {
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    margin: 0;
}

.technician-check-label-v2 span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.technician-check-label-v2 strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.technician-check-label-v2 small {
    font-size: 12px;
    color: var(--muted);
}

.technician-form-actions-v2 {
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
    padding: 12px 0 0;
    border-top: 1px solid var(--border);
}

.technician-form-actions-v2 .btn {
    min-height: 34px;
    padding: 7px 14px;
    font-size: 13px;
    border-radius: 9px;
}

@media (max-width: 1100px) {
    .technician-detail-card-grid-v2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .technician-profile-header-v2,
    .technician-form-page-header-v2 {
        align-items: flex-start;
    }

    .technician-profile-actions-v2,
    .technician-form-page-header-v2 .header-actions-row {
        width: 100%;
        justify-content: flex-start;
    }

    .technician-summary-strip-standard,
    .technician-detail-card-grid-v2,
    .technician-form-grid-v2 {
        grid-template-columns: 1fr;
    }

    .technician-form-grid-v2 .field-span-2 {
        grid-column: auto;
    }

    .technician-standard-form-v2,
    .technician-tab-panel-v2 {
        padding: 12px !important;
    }

    .technician-form-actions-v2 {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .technician-form-actions-v2 .btn {
        width: 100%;
    }
}

/* Inventory standard layout fix 2026-07-09 */
.standard-profile-panel,
.standard-form-panel {
    background: #ffffff;
    border: 1px solid #d8e6f5;
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

.standard-profile-header,
.inventory-standard-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid #dbe8f7;
    background: #f8fbff;
}

.standard-profile-header.compact {
    padding: 16px 20px;
}

.standard-profile-title {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.standard-profile-header h2,
.standard-form-panel h2,
.inventory-standard-list-header h2 {
    margin: 0;
    color: #102033;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
}

.standard-profile-header p,
.standard-form-panel p,
.inventory-standard-list-header p,
.standard-form-section-title p {
    margin: 4px 0 0;
    color: #66758a;
    font-size: 13px;
    line-height: 1.4;
}

.standard-avatar,
.inventory-avatar {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef6ff;
    border: 1px solid #cfe3fb;
    color: #0f5ea8;
    font-weight: 700;
    flex: 0 0 auto;
}

.standard-header-actions,
.standard-tab-actions,
.inventory-standard-search-actions,
.inventory-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.standard-summary-strip,
.inventory-summary-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid #dbe8f7;
    background: #ffffff;
}

.standard-summary-strip > div {
    border: 1px solid #d8e6f5;
    border-radius: 10px;
    padding: 10px 12px;
    background: #fbfdff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.standard-summary-strip span {
    color: #66758a;
    font-size: 13px;
    font-weight: 600;
}

.standard-summary-strip strong {
    color: #0f5ea8;
    font-size: 16px;
    font-weight: 700;
}

.standard-profile-tabs,
.inventory-profile-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-bottom: 1px solid #dbe8f7;
    background: #f8fbff;
}

.standard-tab {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid #d8e6f5;
    color: #102033;
    background: #ffffff;
    font-size: 13px;
    font-weight: 600;
}

.standard-tab.active {
    background: #e9f5ff;
    border-color: #c7e3ff;
    color: #0f5ea8;
}

.standard-tab-actions {
    margin-left: auto;
}

.standard-detail-grid,
.inventory-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 20px;
}

.standard-detail-card {
    border: 1px solid #d8e6f5;
    border-radius: 12px;
    background: #ffffff;
    padding: 16px;
}

.standard-detail-card h3,
.inventory-history-card h3,
.standard-form-section-title h3 {
    margin: 0 0 12px;
    color: #102033;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
}

.standard-detail-list {
    margin: 0;
    display: grid;
    gap: 10px;
}

.standard-detail-list div {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.standard-detail-list dt {
    color: #66758a;
    font-size: 13px;
    font-weight: 600;
}

.standard-detail-list dd {
    margin: 0;
    color: #102033;
    font-size: 13px;
    font-weight: 500;
    word-break: break-word;
}

.standard-note-panel,
.inventory-note-panel {
    margin: 0 20px 20px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #fffaf0;
    border: 1px solid #fde5b5;
    color: #374151;
    font-size: 13px;
}

.standard-note-panel p { margin: 6px 0 0; }

.inventory-standard-panel {
    overflow: hidden;
}

.inventory-standard-topbar {
    display: block;
    padding: 14px 16px;
}

.inventory-standard-tabs {
    margin-bottom: 12px;
}

.inventory-standard-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.inventory-standard-search-row {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 170px 145px 145px;
    gap: 10px;
}

.inventory-standard-search-row input,
.inventory-standard-search-row select,
.inventory-standard-form input,
.inventory-standard-form select,
.inventory-standard-form textarea {
    min-height: 36px;
    border: 1px solid #d8e6f5;
    border-radius: 9px;
    padding: 8px 10px;
    color: #102033;
    background: #ffffff;
    font-size: 13px;
    outline: none;
}

.inventory-standard-search-row input:focus,
.inventory-standard-search-row select:focus,
.inventory-standard-form input:focus,
.inventory-standard-form select:focus,
.inventory-standard-form textarea:focus {
    border-color: #8bc5ff;
    box-shadow: 0 0 0 3px rgba(50, 132, 204, 0.12);
}

.inventory-standard-list-header {
    padding: 14px 16px;
}

.inventory-standard-table-wrap {
    overflow-x: auto;
    border-top: 1px solid #dbe8f7;
}

.inventory-standard-table {
    width: 100%;
    table-layout: fixed;
}

.inventory-standard-table th,
.inventory-standard-table td {
    vertical-align: middle;
    font-size: 13px;
}

.inventory-col-item { width: 24%; }
.inventory-col-type { width: 12%; }
.inventory-col-model { width: 22%; }
.inventory-col-stock { width: 11%; }
.inventory-col-cost { width: 10%; }
.inventory-col-status { width: 10%; }
.inventory-col-actions { width: 21%; }

.inventory-item-cell,
.inventory-model-cell,
.inventory-stock-cell {
    min-width: 0;
}

.inventory-item-cell span,
.inventory-model-cell span,
.inventory-stock-cell span {
    display: block;
    margin-top: 3px;
    color: #66758a;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inventory-item-link {
    color: #0f5ea8;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inventory-type-pill,
.inventory-stock-badge,
.inventory-stock-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid #cfe3fb;
    background: #eef6ff;
    color: #0f5ea8;
    font-size: 12px;
    font-weight: 700;
}

.inventory-stock-badge.is-low,
.inventory-stock-pill.empty {
    border-color: #fecaca;
    background: #fff1f2;
    color: #b42318;
}

.btn-tiny {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.inventory-actions-cell {
    padding-right: 12px !important;
}

.inventory-row-actions {
    justify-content: flex-start;
    gap: 6px;
}

.inventory-form-panel {
    max-width: none;
}

.inventory-form-header {
    margin: -1px -1px 0;
}

.inventory-standard-form {
    padding: 18px 20px 20px;
}

.standard-form-section {
    border: 1px solid #d8e6f5;
    border-radius: 12px;
    padding: 16px;
    background: #ffffff;
    margin-bottom: 14px;
}

.inventory-standard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

.inventory-standard-grid .form-group-wide,
.inventory-standard-grid .full-width-field {
    grid-column: 1 / -1;
}

.inventory-standard-form .form-group label {
    display: block;
    margin-bottom: 5px;
    color: #102033;
    font-size: 13px;
    font-weight: 600;
}

.inventory-standard-form .field-error {
    display: block;
    margin-top: 4px;
    color: #b42318;
    font-size: 12px;
}

.standard-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
}

.inventory-history-panel {
    margin-top: 16px;
}

.inventory-history-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 20px;
}

.inventory-history-card {
    border: 1px solid #d8e6f5;
    border-radius: 12px;
    padding: 14px;
    background: #ffffff;
    min-width: 0;
}

.inventory-history-table {
    min-width: 100%;
}

@media (max-width: 1200px) {
    .inventory-standard-search-form { grid-template-columns: 1fr; }
    .inventory-standard-search-actions { justify-content: flex-start; }
    .inventory-standard-search-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .inventory-col-actions { width: 24%; }
}

@media (max-width: 820px) {
    .standard-profile-header,
    .standard-profile-title,
    .standard-header-actions,
    .standard-profile-tabs,
    .inventory-standard-search-actions {
        align-items: flex-start;
        flex-direction: column;
    }
    .standard-summary-strip,
    .standard-detail-grid,
    .inventory-history-grid,
    .inventory-standard-grid,
    .inventory-standard-search-row {
        grid-template-columns: 1fr;
    }
    .standard-detail-list div {
        grid-template-columns: 1fr;
        gap: 3px;
    }
    .standard-tab-actions { margin-left: 0; }
    .inventory-row-actions { justify-content: flex-start; }
}

/* iPad Registry standard layout - 2026-07-09 */
.ipad-standard-panel,
.ipad-profile-panel,
.ipad-form-panel {
    border: 1px solid #d8e6f5;
    border-radius: 14px;
    background: #ffffff;
    overflow: hidden;
}

.ipad-standard-topbar {
    padding: 16px;
    border-bottom: 1px solid #d8e6f5;
    background: #f8fbff;
}

.ipad-standard-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.ipad-standard-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.ipad-standard-search-row {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(210px, .32fr) minmax(150px, .22fr);
    gap: 10px;
    min-width: 0;
}

.ipad-standard-search-row input,
.ipad-standard-search-row select,
.ipad-standard-form input,
.ipad-standard-form select,
.ipad-standard-form textarea {
    width: 100%;
    border: 1px solid #d4e4f5;
    border-radius: 9px;
    background: #fff;
    color: #102033;
    font-size: 13px;
    min-height: 36px;
    padding: 8px 10px;
    box-sizing: border-box;
}

.ipad-standard-form textarea {
    resize: vertical;
    min-height: 92px;
}

.ipad-standard-search-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
}

.ipad-standard-list-header {
    padding: 14px 16px;
    border-bottom: 1px solid #d8e6f5;
}

.ipad-standard-table-wrap {
    overflow-x: hidden;
}

.ipad-standard-table {
    table-layout: fixed;
    width: 100%;
}

.ipad-standard-table th,
.ipad-standard-table td {
    padding: 9px 10px;
    vertical-align: middle;
}

.ipad-col-device { width: 20%; }
.ipad-col-store { width: 23%; }
.ipad-col-sim { width: 19%; }
.ipad-col-condition { width: 12%; }
.ipad-col-status { width: 10%; }
.ipad-col-tickets { width: 7%; }
.ipad-col-actions { width: 9%; }

.ipad-device-cell,
.ipad-store-cell,
.ipad-sim-cell {
    min-width: 0;
}

.ipad-device-cell strong,
.ipad-device-cell span,
.ipad-store-cell strong,
.ipad-store-cell span,
.ipad-sim-cell strong,
.ipad-sim-cell span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ipad-device-link {
    display: block;
    color: #0f5fa8;
    font-weight: 700;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ipad-device-link:hover {
    text-decoration: underline;
}

.ipad-device-cell span,
.ipad-store-cell span,
.ipad-sim-cell span {
    color: #66778e;
    font-size: 12px;
    margin-top: 2px;
}

.ipad-spare-pill {
    display: inline-flex !important;
    width: fit-content;
    max-width: 100%;
}

.ipad-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: nowrap;
}

.ipad-actions-cell .inline-form {
    display: inline-flex;
    margin: 0;
}

.ipad-profile-header {
    padding: 18px 20px;
}

.ipad-summary-strip {
    border-top: 1px solid #d8e6f5;
    border-bottom: 1px solid #d8e6f5;
}

.ipad-profile-body {
    padding: 18px 20px 20px;
}

.ipad-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.standard-notes-text {
    margin: 0;
    color: #43566f;
    font-size: 13px;
    line-height: 1.5;
}

.ipad-form-panel {
    padding: 0;
}

.ipad-form-shell {
    display: grid;
    gap: 16px;
    padding: 18px 20px 20px;
}

.ipad-form-section {
    border: 1px solid #d8e6f5;
    border-radius: 12px;
    padding: 16px;
    background: #ffffff;
}

.ipad-standard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

.ipad-form-actions {
    border-top: 1px solid #d8e6f5;
    padding-top: 14px;
    margin-top: 2px;
}

@media (max-width: 1200px) {
    .ipad-standard-search-form {
        grid-template-columns: 1fr;
    }
    .ipad-standard-search-actions {
        justify-content: flex-start;
    }
    .ipad-standard-search-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ipad-col-actions { width: 13%; }
}

@media (max-width: 820px) {
    .ipad-standard-search-row,
    .ipad-detail-grid,
    .ipad-standard-grid,
    .ipad-summary-strip {
        grid-template-columns: 1fr;
    }
    .ipad-standard-search-actions,
    .ipad-profile-header,
    .ipad-row-actions {
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .ipad-standard-table-wrap {
        overflow-x: auto;
    }
}

/* 2026-07-09 Suppliers standard Store-style layout pass */
.supplier-standard-directory-panel,
.supplier-profile-panel,
.supplier-linked-panel,
.supplier-ticket-panel,
.supplier-form-panel {
    overflow: hidden;
}

.supplier-search-row {
    grid-template-columns: minmax(360px, 1fr) minmax(150px, 190px) minmax(130px, 150px) auto auto auto;
    align-items: center;
}

.supplier-standard-counts {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.supplier-standard-table {
    table-layout: fixed;
    width: 100%;
}

.supplier-standard-table .supplier-name-col { width: 20%; }
.supplier-standard-table .supplier-contact-col { width: 27%; }
.supplier-standard-table .supplier-category-col { width: 15%; }
.supplier-standard-table .supplier-tickets-col { width: 10%; }
.supplier-standard-table .supplier-users-col { width: 9%; }
.supplier-standard-table .supplier-status-col { width: 10%; }
.supplier-standard-table .supplier-actions-col { width: 120px; }

.supplier-name-cell strong,
.supplier-contact-cell strong {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.supplier-name-cell span,
.supplier-contact-cell span,
.supplier-contact-cell small,
.supplier-metric-cell span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.supplier-category-cell .category-badge {
    max-width: 100%;
    display: inline-flex;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.supplier-metric-cell strong {
    display: block;
    font-size: 13px;
    line-height: 1.25;
}

.supplier-actions-cell .row-actions,
.supplier-profile-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: nowrap;
}

.supplier-profile-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.supplier-profile-header > div:nth-child(2) {
    min-width: 0;
    flex: 1;
}

.supplier-profile-header h2 {
    margin: 2px 0 4px;
    font-size: 22px;
    line-height: 1.2;
}

.supplier-profile-header p {
    margin: 0;
    color: var(--muted);
}

.supplier-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 16px;
}

.supplier-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.supplier-profile-tabs {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 12px 18px;
}

.supplier-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 18px;
}

.standard-info-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    padding: 16px;
}

.standard-info-card h3 {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.25;
}

.standard-detail-list {
    display: grid;
    gap: 10px;
    margin: 0;
}

.standard-detail-list div {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef3f8;
}

.standard-detail-list div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.standard-detail-list dt {
    color: var(--muted);
    font-size: 13px;
}

.standard-detail-list dd {
    margin: 0;
    font-size: 13px;
    color: var(--ink);
    min-width: 0;
    overflow-wrap: anywhere;
}

.standard-form-panel .standard-form-header,
.supplier-form-panel .standard-form-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.standard-form-header h2 {
    margin: 2px 0 4px;
    font-size: 22px;
    line-height: 1.2;
}

.standard-form-header p {
    margin: 0;
    color: var(--muted);
}

.standard-form-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.standard-form-body {
    padding: 18px 20px 6px;
    display: grid;
    gap: 16px;
}

.standard-form-section {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    padding: 16px;
}

.standard-form-section h3 {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.25;
}

.standard-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.standard-form-grid .form-span-2 {
    grid-column: 1 / -1;
}

.standard-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px 20px;
    border-top: 1px solid var(--border);
    background: #fbfdff;
}

.supplier-form-actions {
    margin-top: 0;
}

.supplier-users-table,
.supplier-ticket-table {
    table-layout: fixed;
}

@media (max-width: 1180px) {
    .supplier-search-row {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .supplier-standard-table .supplier-contact-col { width: 25%; }
    .supplier-standard-table .supplier-actions-col { width: 112px; }
}

@media (max-width: 860px) {
    .supplier-search-row,
    .supplier-profile-grid,
    .supplier-summary-strip,
    .standard-form-grid {
        grid-template-columns: 1fr;
    }
    .supplier-profile-header,
    .standard-form-panel .standard-form-header,
    .supplier-form-panel .standard-form-header {
        flex-direction: column;
        align-items: stretch;
    }
    .supplier-profile-actions,
    .standard-form-header-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .standard-detail-list div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}


/* 2026-07-09 Suppliers category/actions column width correction */
.supplier-standard-table .supplier-name-col { width: 18%; }
.supplier-standard-table .supplier-contact-col { width: 24%; }
.supplier-standard-table .supplier-category-col { width: 22%; }
.supplier-standard-table .supplier-tickets-col { width: 8%; }
.supplier-standard-table .supplier-users-col { width: 7%; }
.supplier-standard-table .supplier-status-col { width: 8%; }
.supplier-standard-table .supplier-actions-col { width: 150px; min-width: 150px; }
.supplier-standard-table .supplier-actions-cell { width: 150px; min-width: 150px; padding-right: 16px; }
.supplier-category-cell .category-badge {
    max-width: none;
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.2;
    justify-content: flex-start;
    text-align: left;
}
.supplier-actions-cell .row-actions {
    justify-content: flex-end;
    min-width: 132px;
}
@media (max-width: 1180px) {
    .supplier-standard-table .supplier-category-col { width: 20%; }
    .supplier-standard-table .supplier-actions-col,
    .supplier-standard-table .supplier-actions-cell { width: 144px; min-width: 144px; }
}

/* 2026-07-09 Suppliers final proper standard layout and actions fix */
.supplier-final-panel,
.supplier-final-profile-panel,
.supplier-final-sub-panel,
.supplier-form-panel {
    border: 1px solid #d7e6f5;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: none;
    overflow: hidden;
}

.supplier-final-search-row {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(150px, 220px) minmax(130px, 170px) auto;
    gap: 10px;
    align-items: center;
}

.supplier-final-search-row input,
.supplier-final-search-row select {
    min-height: 38px;
    height: 38px;
    border: 1px solid #d7e6f5;
    border-radius: 9px;
    padding: 8px 10px;
    font-size: 13px;
    color: #172033;
    background: #ffffff;
}

.supplier-final-filter-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.supplier-final-filter-actions .btn,
.supplier-final-profile-actions .btn,
.supplier-final-row-actions .btn,
.standard-form-header-actions .btn,
.supplier-form-actions .btn {
    min-height: 34px;
    height: 34px;
    border-radius: 9px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.supplier-final-row-actions .btn-xs {
    min-height: 30px;
    height: 30px;
    padding: 6px 9px;
    font-size: 12px;
    border-radius: 8px;
}

.supplier-final-list-header {
    gap: 14px;
    align-items: center;
    padding: 14px 18px;
    border-top: 1px solid #e5eef8;
    border-bottom: 1px solid #d7e6f5;
    background: #ffffff;
}

.supplier-final-list-header h2 {
    margin: 0 0 4px;
    font-size: 20px;
    line-height: 1.2;
}

.supplier-final-list-header p {
    margin: 0;
    font-size: 13px;
    color: #667085;
}

.supplier-final-table-wrap {
    width: 100%;
    overflow: hidden;
}

.supplier-final-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.supplier-final-table col.supplier-col-name { width: 16%; }
.supplier-final-table col.supplier-col-contact { width: 22%; }
.supplier-final-table col.supplier-col-category { width: 18%; }
.supplier-final-table col.supplier-col-tickets { width: 8%; }
.supplier-final-table col.supplier-col-users { width: 7%; }
.supplier-final-table col.supplier-col-status { width: 9%; }
.supplier-final-table col.supplier-col-actions { width: 20%; }

.supplier-final-table th,
.supplier-final-table td {
    padding: 10px 12px;
    font-size: 13px;
    vertical-align: middle;
    border-bottom: 1px solid #edf3f9;
}

.supplier-final-table th {
    background: #eef5fc;
    color: #172033;
    font-weight: 600;
}

.supplier-final-table .supplier-name-cell strong,
.supplier-final-table .supplier-contact-cell strong {
    font-size: 13px;
    font-weight: 600;
    color: #172033;
}

.supplier-final-table .supplier-contact-cell span,
.supplier-final-table .supplier-contact-cell small,
.supplier-final-table .supplier-metric-cell span {
    font-size: 12px;
    color: #667085;
}

.supplier-final-table .supplier-category-cell .category-badge {
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.2;
    text-align: left;
    justify-content: flex-start;
    padding: 5px 9px;
    border-radius: 999px;
}

.supplier-final-actions-head {
    text-align: right;
    padding-right: 18px !important;
}

.supplier-final-actions-cell {
    padding-right: 18px !important;
    overflow: visible;
}

.supplier-final-row-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
}

.supplier-final-row-actions form {
    margin: 0;
    display: inline-flex;
}

.supplier-final-row-actions .btn-danger {
    border: 1px solid #fecaca;
    background: #fff1f2;
    color: #b42318;
}

.supplier-final-row-actions .btn-primary {
    border: 1px solid #b9dcff;
    background: #2f80c8;
    color: #ffffff;
}

.supplier-final-profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid #d7e6f5;
    background: #ffffff;
}

.supplier-final-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.supplier-final-identity h2 {
    margin: 2px 0 4px;
    font-size: 21px;
    line-height: 1.2;
}

.supplier-final-identity p {
    margin: 0;
    color: #667085;
    font-size: 13px;
}

.supplier-final-profile-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
}

.supplier-final-profile-actions form {
    margin: 0;
}

.supplier-final-summary-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid #d7e6f5;
    background: #f8fbff;
}

.supplier-final-summary-strip article {
    border: 1px solid #d7e6f5;
    border-radius: 10px;
    background: #ffffff;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
}

.supplier-final-summary-strip span {
    color: #667085;
    font-size: 13px;
    font-weight: 600;
}

.supplier-final-summary-strip strong {
    color: #175a9d;
    font-size: 15px;
    font-weight: 700;
}

.supplier-final-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 18px;
    border-bottom: 1px solid #d7e6f5;
    background: #ffffff;
}

.supplier-final-tabs span {
    padding: 8px 13px;
    border: 1px solid #d7e6f5;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #172033;
    background: #ffffff;
}

.supplier-final-tabs span.active {
    color: #0f5f9f;
    background: #eaf5ff;
    border-color: #c8e2fa;
}

.supplier-final-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 18px;
}

.supplier-final-info-card {
    border: 1px solid #d7e6f5;
    border-radius: 12px;
    background: #ffffff;
    padding: 16px;
}

.supplier-final-info-card h3 {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.25;
}

.supplier-final-detail-list div {
    grid-template-columns: 145px minmax(0, 1fr);
    gap: 12px;
}

.supplier-final-sub-panel {
    margin-top: 14px;
}

.supplier-final-small-table {
    width: 100%;
    table-layout: fixed;
}

.supplier-form-panel {
    max-width: none;
}

.supplier-form-panel .standard-form-header {
    background: #ffffff;
    border-bottom: 1px solid #d7e6f5;
}

.supplier-form-panel .standard-form-body {
    padding: 18px 20px 8px;
}

.supplier-form-panel .standard-form-section {
    border-color: #d7e6f5;
    border-radius: 12px;
}

.supplier-form-panel input,
.supplier-form-panel select {
    height: 38px;
    min-height: 38px;
    border-radius: 9px;
    border: 1px solid #d7e6f5;
    padding: 8px 10px;
    font-size: 13px;
}

.supplier-form-panel label {
    font-size: 13px;
    font-weight: 500;
    color: #172033;
    margin-bottom: 5px;
}

.supplier-form-actions {
    padding: 14px 20px 20px;
    border-top: 1px solid #d7e6f5;
    background: #fbfdff;
}

@media (max-width: 1280px) {
    .supplier-final-search-row {
        grid-template-columns: 1fr 180px 150px;
    }
    .supplier-final-filter-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
    .supplier-final-table col.supplier-col-name { width: 16%; }
    .supplier-final-table col.supplier-col-contact { width: 21%; }
    .supplier-final-table col.supplier-col-category { width: 17%; }
    .supplier-final-table col.supplier-col-tickets { width: 8%; }
    .supplier-final-table col.supplier-col-users { width: 7%; }
    .supplier-final-table col.supplier-col-status { width: 9%; }
    .supplier-final-table col.supplier-col-actions { width: 22%; }
    .supplier-final-table th,
    .supplier-final-table td {
        padding-left: 9px;
        padding-right: 9px;
    }
    .supplier-final-row-actions .btn-xs {
        padding-left: 7px;
        padding-right: 7px;
    }
}

@media (max-width: 900px) {
    .supplier-final-search-row,
    .supplier-final-profile-grid,
    .supplier-final-summary-strip,
    .standard-form-grid {
        grid-template-columns: 1fr;
    }
    .supplier-final-profile-header,
    .supplier-form-panel .standard-form-header {
        flex-direction: column;
        align-items: stretch;
    }
    .supplier-final-profile-actions,
    .supplier-final-filter-actions,
    .standard-form-header-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .supplier-final-table-wrap {
        overflow-x: auto;
    }
    .supplier-final-table {
        min-width: 940px;
    }
}

/* 2026-07-09 Suppliers tabs/font/action alignment correction */
.supplier-final-panel,
.supplier-final-profile-panel,
.supplier-form-panel {
    font-size: 13px;
}

.supplier-final-list-header h2,
.supplier-inner-tab-header h2 {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 600;
}

.supplier-final-list-header p,
.supplier-inner-tab-header p,
.supplier-final-identity p,
.supplier-final-table th,
.supplier-final-table td,
.supplier-tab-table th,
.supplier-tab-table td,
.supplier-form-panel label,
.supplier-form-panel input,
.supplier-form-panel select {
    font-size: 13px;
}

.supplier-final-identity h2 {
    font-size: 18px;
    font-weight: 600;
}

.supplier-final-info-card h3,
.supplier-compact-info-card h3 {
    font-size: 14px;
    font-weight: 600;
}

.supplier-final-summary-strip span,
.supplier-final-summary-strip strong {
    font-size: 13px;
}

.supplier-final-summary-strip strong {
    font-weight: 600;
}

.supplier-real-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 18px;
    border-bottom: 1px solid #d7e6f5;
    background: #ffffff;
}

.supplier-real-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 13px;
    border: 1px solid #d7e6f5;
    border-radius: 999px;
    background: #ffffff;
    color: #172033;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
}

.supplier-real-tabs a.active {
    color: #0f5f9f;
    background: #eaf5ff;
    border-color: #c8e2fa;
}

.supplier-tab-panel {
    padding: 18px;
}

.supplier-tab-panel.supplier-final-profile-grid {
    padding: 18px;
}

.supplier-tab-table-panel {
    padding: 0;
}

.supplier-inner-tab-header {
    border-top: 0;
    padding: 14px 18px;
}

.supplier-tab-table th,
.supplier-tab-table td {
    padding: 10px 12px;
}

.supplier-compact-detail-list div {
    grid-template-columns: 135px minmax(0, 1fr);
}

.supplier-final-table col.supplier-col-name { width: 15%; }
.supplier-final-table col.supplier-col-contact { width: 21%; }
.supplier-final-table col.supplier-col-category { width: 19%; }
.supplier-final-table col.supplier-col-tickets { width: 8%; }
.supplier-final-table col.supplier-col-users { width: 7%; }
.supplier-final-table col.supplier-col-status { width: 8%; }
.supplier-final-table col.supplier-col-actions { width: 22%; min-width: 230px; }

.supplier-final-actions-head,
.supplier-final-table th.supplier-final-actions-head {
    text-align: center !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.supplier-final-actions-cell,
.supplier-final-table td.supplier-final-actions-cell {
    text-align: center !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    overflow: visible;
}

.supplier-final-row-actions {
    justify-content: center;
    gap: 6px;
}

.supplier-final-row-actions .btn-xs {
    min-width: 48px;
    height: 30px;
    min-height: 30px;
    padding: 6px 8px;
    font-size: 12px;
    font-weight: 600;
}

.supplier-final-row-actions .btn-danger {
    min-width: 82px;
}

.supplier-final-table .supplier-category-cell .category-badge {
    display: inline-flex;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: normal;
}

@media (max-width: 1280px) {
    .supplier-final-table col.supplier-col-name { width: 14%; }
    .supplier-final-table col.supplier-col-contact { width: 20%; }
    .supplier-final-table col.supplier-col-category { width: 18%; }
    .supplier-final-table col.supplier-col-tickets { width: 8%; }
    .supplier-final-table col.supplier-col-users { width: 7%; }
    .supplier-final-table col.supplier-col-status { width: 8%; }
    .supplier-final-table col.supplier-col-actions { width: 25%; min-width: 240px; }
}


/* 2026-07-10 Suppliers table heading and full ticket number correction */
.supplier-final-table thead.supplier-records-table-head th {
    font-weight: 700 !important;
    color: #172033;
}

.supplier-ticket-table {
    table-layout: fixed;
    width: 100%;
}

.supplier-ticket-table col.supplier-ticket-col-number { width: 18%; }
.supplier-ticket-table col.supplier-ticket-col-subject { width: 38%; }
.supplier-ticket-table col.supplier-ticket-col-priority { width: 14%; }
.supplier-ticket-table col.supplier-ticket-col-status { width: 15%; }
.supplier-ticket-table col.supplier-ticket-col-created { width: 15%; }

.supplier-ticket-table th {
    font-weight: 700 !important;
}

.supplier-ticket-table .supplier-ticket-number-cell,
.supplier-ticket-table .supplier-ticket-number-cell strong {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal !important;
    max-width: none !important;
}

@media (max-width: 1100px) {
    .supplier-ticket-table {
        min-width: 760px;
    }
    .supplier-ticket-table col.supplier-ticket-col-number { width: 155px; }
}

/* 2026-07-10 Suppliers visible header and ticket reference hard correction */
.supplier-final-table thead th,
.supplier-records-table-head th {
    font-weight: 700 !important;
}

.supplier-ticket-table {
    width: 100%;
    table-layout: fixed;
}

.supplier-ticket-table th,
.supplier-ticket-table td {
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.2;
    vertical-align: middle;
}

.supplier-ticket-table col.supplier-ticket-col-number {
    width: 190px !important;
    min-width: 190px !important;
}

.supplier-ticket-table col.supplier-ticket-col-subject { width: auto !important; }
.supplier-ticket-table col.supplier-ticket-col-priority { width: 150px !important; }
.supplier-ticket-table col.supplier-ticket-col-status { width: 150px !important; }
.supplier-ticket-table col.supplier-ticket-col-created { width: 150px !important; }

.supplier-ticket-table td.supplier-ticket-number-cell,
.supplier-ticket-table td.supplier-ticket-number-cell strong {
    display: table-cell;
    width: 190px !important;
    min-width: 190px !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: keep-all !important;
}

.supplier-ticket-table td.supplier-ticket-number-cell strong {
    display: inline !important;
}

@media (max-width: 900px) {
    .supplier-ticket-table {
        min-width: 820px;
    }
}

/* 2026-07-10 Suppliers page/records heading format alignment */
.supplier-final-list-header h2 {
    font-family: var(--font-main) !important;
    font-size: var(--font-heading) !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    margin: 0 0 3px !important;
    color: var(--text) !important;
}

.supplier-final-list-header p {
    font-family: var(--font-main) !important;
    font-size: var(--font-normal) !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
    color: var(--muted) !important;
    margin: 0 !important;
}

/* 2026-07-10 Suppliers view tabs bold correction */
.supplier-real-tabs a,
.supplier-real-tabs a:visited,
.supplier-real-tabs a.active {
    font-weight: 700 !important;
}


/* 2026-07-10 Supplier profile tabs matched exactly to Store profile standard */
.supplier-store-tab-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: 0 !important;
    background: #fbfdff !important;
    box-shadow: none !important;
}

.supplier-store-tab-bar a,
.supplier-store-tab-bar a:visited {
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 12px !important;
    margin: 0 !important;
    border: 1px solid var(--border) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--text) !important;
    font-family: var(--font-main) !important;
    font-size: var(--font-normal) !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.supplier-store-tab-bar a:hover,
.supplier-store-tab-bar a.active,
.supplier-store-tab-bar a.active:visited {
    border-color: var(--primary-line) !important;
    background: var(--primary-soft) !important;
    color: var(--primary-dark) !important;
}

@media (max-width: 700px) {
    .supplier-store-tab-bar {
        padding: 10px 12px !important;
    }
}


/* ==========================================================================
   Unified Users module - scoped layout rules restored after global CSS repair
   ========================================================================== */
.users-role-tabs{padding:12px 16px 0;display:flex;gap:8px;flex-wrap:wrap}
.users-role-tabs .store-filter-tab{font-weight:700}
.users-search-form{padding:12px 16px}
.users-search-row{display:grid;grid-template-columns:minmax(320px,1fr) 150px auto auto auto;gap:10px;align-items:center}
.users-list-header{padding:14px 16px}
.users-list-header h2{font-size:var(--font-title-size,20px);font-weight:700;margin:0}
.users-list-header p{margin:3px 0 0}
.users-unified-table{table-layout:fixed;width:100%}
.users-unified-table .uu-name{width:24%}.users-unified-table .uu-role{width:13%}.users-unified-table .uu-link{width:24%}.users-unified-table .uu-dept{width:15%}.users-unified-table .uu-status{width:10%}.users-unified-table .uu-actions{width:14%;text-align:center;white-space:nowrap}
.users-unified-table th{font-weight:700}
.users-unified-table td{vertical-align:middle}
.users-unified-table .cell-subtext{display:block;color:var(--text-muted,#66778d);font-size:inherit;line-height:1.35}
.users-unified-table .row-actions{justify-content:center;white-space:nowrap}
.users-unified-table .inline-action-form{display:inline-flex;margin:0}
.users-unified-table .row-action-icon.success{background:#e8fff1;border-color:#b7f4cc;color:#04713f}
.users-form-panel .standard-list-header{border-bottom:1px solid var(--border-color,#d9e6f4)}
.users-unified-form{padding:16px}
.users-unified-form .store-form-section{margin-bottom:16px}
.users-unified-form .store-form-section h3{font-size:var(--font-title-size,20px);font-weight:700;margin:0 0 12px}
.users-unified-form .store-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.users-unified-form .standard-form-actions{margin-top:4px;padding-top:14px;border-top:1px solid var(--border-color,#d9e6f4);display:flex;justify-content:flex-end;gap:8px}
@media(max-width:980px){.users-search-row{grid-template-columns:1fr 160px auto auto}.users-search-row .btn-primary:last-child{grid-column:auto}.users-unified-form .store-form-grid{grid-template-columns:1fr}}
@media(max-width:760px){.users-search-row{grid-template-columns:1fr}.users-unified-table,.users-unified-table thead,.users-unified-table tbody,.users-unified-table tr,.users-unified-table th,.users-unified-table td{display:block;width:100%!important}.users-unified-table thead{display:none}.users-unified-table tr{padding:12px 14px;border-bottom:1px solid var(--border-color,#d9e6f4)}.users-unified-table td{padding:6px 0;display:flex;justify-content:space-between;gap:12px;text-align:right}.users-unified-table td::before{content:attr(data-label);font-weight:700;color:#5f7086;text-align:left}.users-unified-table .uu-actions .row-actions{justify-content:flex-end}}

/* Users module standard layout correction - 2026-07-10 */
.users-standard-panel,
.users-form-panel,
.users-permission-panel {
    background: #fff;
    border: 1px solid var(--border-color, #d9e6f4);
    border-radius: 14px;
    overflow: hidden;
}
.users-role-tabs {
    padding: 12px 16px 10px !important;
    gap: 8px !important;
    border-bottom: 1px solid var(--border-color, #d9e6f4);
    background: #fff;
}
.users-role-tabs .store-filter-tab {
    min-height: 34px !important;
    padding: 7px 12px !important;
    border-radius: 18px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    gap: 6px !important;
    white-space: nowrap;
}
.users-role-tabs .store-filter-tab span {
    font-size: 12px !important;
    font-weight: 700 !important;
}
.users-search-form {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--border-color, #d9e6f4);
    background: #f8fbff;
}
.users-search-row input,
.users-search-row select {
    min-height: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
}
.users-search-row .btn {
    min-height: 34px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
}
.users-list-header,
.users-form-header,
.permission-header {
    padding: 14px 16px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    background: #fff;
}
.users-list-header h2,
.users-form-header h2,
.permission-header h2 {
    margin: 0 !important;
    font-family: inherit !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: var(--text, #172235) !important;
}
.users-list-header p,
.users-form-header p,
.permission-header p {
    margin: 4px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    color: var(--muted, #66778d) !important;
}
.users-page-chip {
    min-height: 32px !important;
    padding: 6px 11px !important;
    border-radius: 17px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    white-space: nowrap;
}
.users-unified-table .uu-name { width: 30% !important; }
.users-unified-table .uu-role { width: 12% !important; }
.users-unified-table .uu-link { width: 24% !important; }
.users-unified-table .uu-dept { width: 9% !important; }
.users-unified-table .uu-status { width: 10% !important; }
.users-unified-table .uu-actions { width: 15% !important; }
.users-unified-table th,
.users-unified-table td {
    padding: 9px 11px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
}
.users-unified-table td:first-child strong {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
}
.users-unified-table .cell-subtext {
    font-size: 12px !important;
    white-space: normal;
    overflow-wrap: anywhere;
}
.users-form-panel .standard-list-header {
    border-bottom: 1px solid var(--border-color, #d9e6f4) !important;
}
.users-unified-form {
    padding: 16px !important;
}
.users-unified-form .store-form-section {
    padding: 14px !important;
    margin: 0 0 14px !important;
    border: 1px solid var(--border-color, #d9e6f4) !important;
    border-radius: 12px !important;
    background: #fff !important;
}
.users-unified-form .store-form-section h3 {
    margin: 0 0 12px !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}
.users-unified-form label {
    display: block !important;
    margin: 0 0 5px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
.users-unified-form input,
.users-unified-form select {
    min-height: 38px !important;
    height: 38px !important;
    font-size: 13px !important;
}
.users-unified-form .field-help {
    margin: 12px 0 0 !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    background: #f6faff !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}
.users-permission-panel form { margin: 0 !important; }
.permission-header {
    border-bottom: 1px solid var(--border-color, #d9e6f4) !important;
}
.permission-header-actions {
    margin: 0 !important;
    justify-content: flex-end !important;
}
.permission-tools {
    display: grid !important;
    grid-template-columns: minmax(280px, 1fr) auto auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    background: #f8fbff !important;
    border-bottom: 1px solid var(--border-color, #d9e6f4) !important;
}
.permission-tools input {
    width: 100% !important;
    min-height: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    font-size: 13px !important;
}
.permission-group-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    padding: 16px !important;
}
.permission-group {
    border-radius: 10px !important;
}
.permission-group h3 {
    padding: 10px 12px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}
.permission-row {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    margin: 0 !important;
}
.permission-row input[type="checkbox"] {
    width: 17px !important;
    height: 17px !important;
    min-height: 17px !important;
    margin: 1px 0 0 !important;
    padding: 0 !important;
    align-self: start !important;
}
.permission-row span {
    display: block !important;
    min-width: 0 !important;
}
.permission-row strong {
    display: block !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    overflow-wrap: anywhere;
}
.permission-row small {
    display: block !important;
    margin: 3px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}
@media (max-width: 1050px) {
    .users-unified-table .uu-name { width: 27% !important; }
    .users-unified-table .uu-link { width: 23% !important; }
    .users-unified-table .uu-actions { width: 18% !important; }
    .permission-tools { grid-template-columns: 1fr auto auto !important; }
}
@media (max-width: 760px) {
    .users-role-tabs { flex-wrap: nowrap !important; overflow-x: auto !important; }
    .users-form-header,
    .permission-header { align-items: flex-start !important; flex-direction: column !important; }
    .permission-tools { grid-template-columns: 1fr !important; }
    .permission-tools .btn { width: 100% !important; }
    .permission-group-grid { grid-template-columns: 1fr !important; padding: 12px !important; }
}