/* Modern Color Palette */
:root {
    --primary-color: #2c3e50;
    --primary-dark: #2c3e50;
    --primary-light: #dbeafe;
    --secondary-color: #64748b;
    --success-color: #059669;
    --warning-color: #d97706;
    --danger-color: #dc2626;
    --info-color: #0891b2;
    
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-accent: #f1f5f9;
    
    --border-color: #e2e8f0;
    --border-light: #f1f5f9;
    
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
}

/* Global Styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    line-height: 1.6;
}

/* Typography */
.font-heading {
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--text-primary);
}

.font-subheading {
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.font-text {
    font-weight: 400;
    color: var(--text-secondary);
}

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

/* Enhanced Navigation */
.navbar {
    position: relative;
    z-index: 1030;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-lg);
    padding: 1rem 0;
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;
    color: #ffffff !important;
    text-decoration: none;
}

.navbar .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    margin: 0 0.25rem;
}

.navbar .nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.navbar .nav-link.active {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-sm);
}

.navbar .nav-link {
    white-space: nowrap;
}

.navbar .nav-more-menu.dropdown-menu,
.navbar .dropdown-menu.nav-more-menu {
    z-index: 1040;
    min-width: 9.5rem;
    padding: 0.35rem 0;
    border: 1px solid #e2e8f0;
    border-radius: 0.55rem;
    background: #ffffff !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --bs-dropdown-bg: #ffffff;
    --bs-dropdown-link-color: #1e293b;
    --bs-dropdown-link-hover-color: #1e293b;
    --bs-dropdown-link-hover-bg: #f1f5f9;
    --bs-dropdown-link-active-color: #1e293b;
    --bs-dropdown-link-active-bg: #f1f5f9;
}

.navbar .nav-more-menu .dropdown-item {
    display: block;
    padding: 0.45rem 0.85rem;
    color: #1e293b !important;
    background: transparent !important;
    font-size: 0.88rem;
    font-weight: 500;
}

.navbar .nav-more-menu .dropdown-item:hover,
.navbar .nav-more-menu .dropdown-item:focus,
.navbar .nav-more-menu .dropdown-item.active {
    color: #1e293b !important;
    background: #f1f5f9 !important;
}

/* Modern Cards */
.section-card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
    border: 1px solid var(--border-light);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.section-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--info-color));
}

.section-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.section-card-centered {
    background: linear-gradient(135deg, var(--primary-light) 0%, #e0f2fe 100%);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    position: relative;
}

/* Enhanced Tables */
.table-main {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-primary);
    table-layout: fixed;
    width: 100%;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
}

.table-main thead th {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-bottom: 2px solid var(--primary-color);
    font-weight: 600;
    color: var(--text-primary);
    padding: 1rem 0.75rem;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.table-main tbody tr {
    background: var(--bg-primary);
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--border-light);
}

.table-main tbody tr:hover {
    background: var(--bg-accent);
    transform: scale(1.01);
    box-shadow: var(--shadow-sm);
}

.table-main td,
.table-main th {
    padding: 0.875rem 0.75rem;
    vertical-align: middle;
}

.table-main tr:last-child td {
    border-bottom: none;
}

.truncate-col {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 0;
}

/* Enhanced Buttons */
.btn {
    border-radius: var(--radius-md);
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-outline-secondary {
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    background: var(--bg-primary);
}

.btn-outline-secondary:hover {
    background: var(--bg-accent);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-1px);
}

/* Enhanced Badges */
.badge {
    border-radius: var(--radius-sm);
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    letter-spacing: 0.025em;
}

.bg-secondary {
    background: linear-gradient(135deg, var(--secondary-color) 0%, #475569 100%) !important;
}

.bg-success {
    background: linear-gradient(135deg, var(--success-color) 0%, #047857 100%) !important;
}

.bg-warning {
    background: linear-gradient(135deg, var(--warning-color) 0%, #b45309 100%) !important;
}

.bg-danger {
    background: linear-gradient(135deg, var(--danger-color) 0%, #b91c1c 100%) !important;
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius-lg);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    gap: 0.375rem;
}

.status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Links */
.tapprs-hover {
    transition: all 0.2s ease;
    position: relative;
}

.tapprs-hover:hover {
    color: var(--primary-color) !important;
    transform: translateX(2px);
}

.tapprs-hover::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width 0.2s ease;
}

.tapprs-hover:hover::after {
    width: 100%;
}

/* Form Controls */
.form-control,
.form-select {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    background: var(--bg-primary);
}

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

/* Icons */
.bi {
    font-size: 1rem;
}

/* Page Headers */
.page-header {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-accent) 100%);
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}

.page-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Responsive Mobile Tables */
@media (max-width: 768px) {
    .container-fluid {
        padding: 1rem;
    }
    
    .section-card {
        padding: 1rem;
    }
    
    .table-main thead {
        display: none;
    }
    
    .table-main,
    .table-main tbody,
    .table-main tr,
    .table-main td {
        display: block;
        width: 100%;
    }
    
    .table-main tr {
        margin-bottom: 1.5rem;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        padding: 1rem;
        background: var(--bg-primary);
        box-shadow: var(--shadow-sm);
    }
    
    .table-main tr:hover {
        transform: none;
        box-shadow: var(--shadow-md);
    }
    
    .table-main td {
        text-align: right;
        position: relative;
        padding: 0.75rem 0 !important;
        border: none !important;
        min-height: 2.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .table-main td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-primary);
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.05em;
        flex: 1;
        text-align: left;
    }
    
    .table-main td > * {
        flex-shrink: 0;
    }
}

/* Loading States */
.loading {
    position: relative;
    overflow: hidden;
}

.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Utility Classes */
.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

.shadow-md {
    box-shadow: var(--shadow-md) !important;
}

.shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

.rounded-modern {
    border-radius: var(--radius-lg) !important;
}

.text-gradient {
    background: linear-gradient(135deg, var(--primary-color), var(--info-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Footer */
.footer {
    background: var(--bg-primary);
    border-top: 1px solid var(--border-light);
    padding: 1.5rem 0;
    margin-top: 2rem;
}

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

.animate-fade-in {
    animation: fadeInUp 0.5s ease-out;
}

/* Shared flash / status messages */
.dock-flash {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 1rem 1.5rem 0;
    padding: 0.85rem 1rem;
    border: 1px solid transparent;
    border-radius: 0.65rem;
    box-shadow: var(--shadow-sm);
    font-size: 0.9rem;
    line-height: 1.4;
}

.dock-flash > .bi {
    flex: 0 0 auto;
    margin-top: 0.1rem;
    font-size: 1.05rem;
}

.dock-flash-message {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 550;
}

.dock-flash-close {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    margin: -0.2rem -0.25rem -0.2rem 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    opacity: 0.65;
    cursor: pointer;
}

.dock-flash-close:hover,
.dock-flash-close:focus {
    opacity: 1;
    background: rgba(15, 23, 42, 0.06);
}

.dock-flash-close .bi {
    font-size: 1.15rem;
    line-height: 1;
}

.dock-flash--success {
    color: #067647;
    background: #ecfdf3;
    border-color: #abefc6;
}

.dock-flash--success > .bi {
    color: #17b26a;
}

.dock-flash--error {
    color: #b42318;
    background: #fef3f2;
    border-color: #fecdca;
}

.dock-flash--error > .bi {
    color: #f04438;
}

@media (max-width: 767.98px) {
    .dock-flash {
        margin: 0.75rem 0.75rem 0;
    }
}

/* ===== Inventory page styles ===== */
:root {
  --inventory-ink: #172033;
  --inventory-muted: #667085;
  --inventory-border: #e4e7ec;
  --inventory-surface: #ffffff;
  --inventory-canvas: #f5f7fa;
  --inventory-navy: #153a5b;
  --inventory-blue: #2563eb;
  --inventory-orange: #e66a21;
  --inventory-green: #14804a;
  --inventory-red: #c4320a;
}

.inventory-page {
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: 2rem 1.5rem 3.5rem;
  color: var(--inventory-ink);
}

.inventory-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.5rem;
}
.inventory-heading h1 {
  margin: 0;
  color: var(--inventory-ink);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
}

.inventory-eyebrow,
.inventory-modal-eyebrow {
  margin: 0 0 0.35rem;
  color: var(--inventory-orange);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.inventory-intro {
  margin: 0.45rem 0 0;
  color: var(--inventory-muted);
  font-size: 0.95rem;
}

.inventory-heading-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}

.inventory-service-link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid #cfd6df;
  border-radius: 0.45rem;
  color: var(--inventory-ink);
  background: var(--inventory-surface);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.inventory-service-link i {
  font-size: 0.82rem;
  line-height: 1;
}
.inventory-service-link:hover,
.inventory-service-link:focus {
  color: var(--inventory-navy);
  background: #f8fafc;
  border-color: var(--inventory-navy);
  outline: none;
}

.inventory-link-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.3rem;
  border-radius: 99px;
  color: #fff;
  background: var(--inventory-red);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
}

.inventory-summary {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem 0.85rem;
  margin-bottom: 0.85rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--inventory-border);
  border-radius: 0.55rem;
  background: var(--inventory-surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.inventory-summary-card {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  min-width: 0;
  white-space: nowrap;
}

.inventory-summary-card strong {
  color: var(--inventory-ink);
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.inventory-summary-card span {
  color: var(--inventory-muted);
  font-size: 0.72rem;
  line-height: 1.2;
}

.inventory-summary-card + .inventory-summary-card {
  padding-left: 0.85rem;
  border-left: 1px solid var(--inventory-border);
}

.inventory-panel {
  overflow: visible;
  border: 1px solid var(--inventory-border);
  border-radius: 0.8rem;
  background: var(--inventory-surface);
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.04);
}

.inventory-panel-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--inventory-border);
  color: var(--inventory-ink);
  font-size: 0.9rem;
  font-weight: 700;
}

.inventory-filters {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem;
  border-bottom: 1px solid var(--inventory-border);
  background: #fbfcfd;
}
.inventory-filters input,
.inventory-filters select {
  min-height: 2.55rem;
  border: 1px solid #cfd6df;
  border-radius: 0.5rem;
  color: var(--inventory-ink);
  background: var(--inventory-surface);
  font-size: 0.84rem;
  outline: none;
}
.inventory-filters input:focus,
.inventory-filters select:focus {
  border-color: var(--inventory-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.inventory-filters input {
  width: 100%;
  padding: 0.55rem 0.75rem 0.55rem 2.35rem;
}
.inventory-filters select {
  min-width: 165px;
  padding: 0.55rem 2.1rem 0.55rem 0.75rem;
}

.inventory-search {
  position: relative;
  flex: 1 1 320px;
  max-width: 480px;
}
.inventory-search i {
  position: absolute;
  top: 50%;
  left: 0.85rem;
  color: #98a2b3;
  transform: translateY(-50%);
}

.inventory-filter-button,
.inventory-action-button,
.inventory-modal-submit,
.inventory-modal-cancel {
  min-height: 2.55rem;
  border-radius: 0.5rem;
  font-size: 0.82rem;
  font-weight: 650;
}

.inventory-filter-button,
.inventory-modal-submit {
  border: 1px solid var(--inventory-navy);
  padding: 0.55rem 0.95rem;
  color: #fff;
  background: var(--inventory-navy);
}
.inventory-filter-button:hover, .inventory-filter-button:focus,
.inventory-modal-submit:hover,
.inventory-modal-submit:focus {
  border-color: #0c2b45;
  background: #0c2b45;
}

.inventory-clear-link {
  padding: 0.5rem;
  color: var(--inventory-muted);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}
.inventory-clear-link:hover {
  color: var(--inventory-red);
}

.inventory-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
}

.inventory-table {
  width: 100%;
  min-width: 1020px;
  margin: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--inventory-surface);
  box-shadow: none;
}
.inventory-table thead th {
  padding: 0.55rem 0.7rem;
  border: 0;
  border-bottom: 1px solid var(--inventory-border);
  color: #667085;
  background: var(--inventory-surface);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.inventory-product-group + .inventory-product-group .inventory-product-row th {
  border-top: 1px solid #d8dee8;
}

.inventory-product-row th {
  padding: 0.55rem 0.7rem;
  border: 0;
  border-bottom: 1px solid #dce4ef;
  color: var(--inventory-navy);
  background: #f0f5fa;
  font-size: 0.8rem;
  font-weight: 700;
}

.inventory-product-count {
  display: inline-block;
  margin-left: 0.65rem;
  padding-left: 0.65rem;
  border-left: 1px solid #c7d2df;
  color: var(--inventory-muted);
  font-size: 0.7rem;
  font-weight: 550;
}

.inventory-product-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.inventory-product-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.inventory-sku-grade-form {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
}

.inventory-sku-grade-form label {
  margin: 0;
  color: var(--inventory-muted);
  font-size: 0.68rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.inventory-sku-grade-select {
  min-width: 11rem;
  min-height: 2rem;
  padding: 0.35rem 1.75rem 0.35rem 0.55rem;
  border: 1px solid #cfd6df;
  border-radius: 0.45rem;
  color: var(--inventory-ink);
  background: var(--inventory-surface);
  font-size: 0.72rem;
  font-weight: 600;
}

.inventory-sku-grade,
.inventory-condition-grade {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.22rem 0.5rem;
  border-radius: 99px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.inventory-sku-grade--a {
  color: #067647;
  background: #ecfdf3;
}

.inventory-sku-grade--b {
  color: #175cd3;
  background: #eff8ff;
}

.inventory-sku-grade--z {
  color: #b54708;
  background: #fff6ed;
}

.inventory-condition-grade--excellent {
  color: #067647;
  background: #ecfdf3;
}

.inventory-condition-grade--good {
  color: #175cd3;
  background: #eff8ff;
}

.inventory-condition-grade--average {
  color: #933f00;
  background: #fff7e8;
}

.inventory-condition-grade--bad {
  color: #b42318;
  background: #fef3f2;
}

.inventory-condition-grade--inline {
  margin-top: 0.25rem;
}

.inventory-item-row {
  transition: background-color 120ms ease;
}
.inventory-item-row:hover {
  background: #fafcff;
}
.inventory-item-row td {
  padding: 0.4rem 0.7rem;
  border: 0;
  border-bottom: 1px solid #edf0f4;
  color: #344054;
  font-size: 0.76rem;
  vertical-align: middle;
}
.inventory-item-row td:first-child {
  color: var(--inventory-ink);
}

.inventory-serial,
.inventory-purchase-price,
.inventory-purchase-date {
  display: block;
}

.inventory-serial {
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--inventory-navy);
  text-decoration: none;
}
a.inventory-serial:hover {
  text-decoration: underline;
}

.inventory-item-serial-link {
  display: block;
  color: var(--inventory-muted);
  font-size: 0.78rem;
  text-decoration: none;
}
.inventory-item-serial-link:hover {
  color: var(--inventory-navy);
  text-decoration: underline;
}

.inventory-table .inventory-purchase-price,
.inventory-table .inventory-purchase-date {
  display: block;
}
.inventory-table .inventory-purchase-date {
  margin-top: 0;
  margin-left: 0;
}
.inventory-table .inventory-col-purchase,
.inventory-table .inventory-col-bought {
  white-space: nowrap;
  width: 1%;
}
.inventory-table .inventory-col-bought .inventory-purchase-date {
  color: #667085;
  font-size: 0.72rem;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}

.inventory-purchase-price {
  color: var(--inventory-ink);
  font-size: 0.76rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.inventory-purchase-date {
  margin-top: 0.18rem;
  color: #98a2b3;
  font-size: 0.68rem;
  font-weight: 500;
}

.inventory-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.45rem;
  border-radius: 99px;
  color: #475467;
  background: #f2f4f7;
  font-size: 0.68rem;
  font-weight: 650;
  white-space: nowrap;
}
.inventory-status > span {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: #98a2b3;
}
.inventory-status--available {
  color: #067647;
  background: #ecfdf3;
}
.inventory-status--available > span {
  background: #17b26a;
}
.inventory-status--rented, .inventory-status--reserved {
  color: #934f00;
  background: #fff7e8;
}
.inventory-status--rented > span, .inventory-status--reserved > span {
  background: #f79009;
}
.inventory-status--maintenance {
  color: #b42318;
  background: #fef3f2;
}
.inventory-status--maintenance > span {
  background: #f04438;
}

.inventory-sale-badge {
  display: block;
  width: fit-content;
  margin-top: 0.35rem;
  padding: 0.2rem 0.45rem;
  border-radius: 0.3rem;
  color: #067647;
  background: #ecfdf3;
  font-size: 0.65rem;
  font-weight: 650;
  white-space: nowrap;
}
.inventory-table .inventory-sale-badge {
  display: inline-flex;
  align-items: center;
  margin-top: 0;
  margin-left: 0;
  vertical-align: middle;
}
.inventory-table .inventory-col-sale {
  white-space: nowrap;
  width: 1%;
}

.inventory-activity {
  display: flex;
  max-width: 340px;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}
.inventory-activity-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.4rem;
}
.inventory-activity-when {
  color: var(--inventory-muted);
  font-size: 0.7rem;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}
.inventory-activity-when a {
  color: var(--inventory-navy);
  font-weight: 650;
  text-decoration: none;
}
.inventory-activity-when a:hover {
  text-decoration: underline;
}
.inventory-activity-price {
  color: #067647;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.inventory-activity-note {
  overflow: hidden;
  color: #667085;
  font-size: 0.72rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inventory-activity-head .inventory-condition-grade--inline {
  margin-top: 0;
}

.inventory-request {
  align-self: flex-start;
  padding: 0.15rem 0.38rem;
  border-radius: 0.3rem;
  font-size: 0.62rem !important;
  text-transform: uppercase;
}
.inventory-request--inspection {
  color: #344054 !important;
  background: #f2f4f7;
}
.inventory-request--service {
  color: #175cd3 !important;
  background: #eff8ff;
}
.inventory-request--remove {
  color: #b42318 !important;
  background: #fef3f2;
}
.inventory-request--sold {
  color: #067647 !important;
  background: #ecfdf3;
}

.inventory-empty {
  color: #98a2b3;
  font-size: 0.73rem;
}

.inventory-actions-heading,
.inventory-actions {
  text-align: right !important;
}

.inventory-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  border: 1px solid #cfd6df;
  padding: 0.28rem 0.55rem;
  color: #344054;
  background: #fff;
  font-size: 0.74rem;
}
.inventory-action-button:hover, .inventory-action-button:focus {
  border-color: #98a2b3;
  color: var(--inventory-ink);
  background: #f8fafc;
}
.inventory-action-button--compact {
  min-height: 1.85rem;
  padding: 0.2rem 0.5rem 0.2rem 0.4rem;
  border-radius: 0.4rem;
  font-size: 0.7rem;
  font-weight: 650;
  line-height: 1;
}
.inventory-action-button--compact i {
  font-size: 0.78rem;
  color: #667085;
}
.inventory-action-button--compact::after {
  margin-left: 0.1rem;
}

.inventory-actions .dropdown-menu {
  min-width: 210px;
  padding: 0.4rem;
  border-color: var(--inventory-border);
  border-radius: 0.55rem;
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14);
  z-index: 1080;
}
.inventory-actions .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.58rem 0.65rem;
  border-radius: 0.35rem;
  color: #344054;
  font-size: 0.78rem;
}
.inventory-actions .dropdown-item:hover, .inventory-actions .dropdown-item:focus {
  color: var(--inventory-navy);
  background: #f0f5fa;
}
.inventory-actions .dropdown-item i {
  width: 1rem;
  color: #667085;
}
.inventory-actions .inventory-remove-trigger {
  color: var(--inventory-red);
}
.inventory-actions .inventory-sale-trigger {
  color: #067647;
}
.inventory-actions .inventory-remove-sale-action {
  color: #b54708;
}

.inventory-no-results {
  padding: 4rem 1rem !important;
  color: var(--inventory-muted) !important;
  text-align: center;
}
.inventory-no-results i,
.inventory-no-results strong,
.inventory-no-results span {
  display: block;
}
.inventory-no-results i {
  margin-bottom: 0.6rem;
  font-size: 1.5rem;
}
.inventory-no-results strong {
  color: var(--inventory-ink);
}
.inventory-no-results span {
  margin-top: 0.3rem;
  font-size: 0.8rem;
}

.inventory-pagination {
  display: flex;
  justify-content: center;
  padding: 1rem;
  border-top: 1px solid var(--inventory-border);
}
.inventory-pagination .pagination {
  margin: 0;
}
.inventory-pagination .page-link {
  color: var(--inventory-navy);
  font-size: 0.78rem;
}
.inventory-pagination .page-item.active .page-link {
  border-color: var(--inventory-navy);
  background: var(--inventory-navy);
}

.inventory-flash {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 1rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 0.65rem;
  font-size: 0.84rem;
  line-height: 1.45;
}
.inventory-flash > i:first-child {
  flex: 0 0 auto;
  margin-top: 0.1rem;
  font-size: 1rem;
}
.inventory-flash > span {
  flex: 1 1 auto;
  min-width: 0;
}
.inventory-flash--success {
  color: #067647;
  border-color: #abefc6;
  background: #ecfdf3;
}
.inventory-flash--error {
  color: #854d0e;
  border-color: #fde68a;
  border-left: 3px solid #f59e0b;
  background: #fffbeb;
}

.inventory-flash-close {
  display: grid;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  border: 0;
  border-radius: 0.35rem;
  color: inherit;
  background: transparent;
  opacity: 0.7;
}
.inventory-flash-close:hover, .inventory-flash-close:focus {
  opacity: 1;
  background: rgba(16, 24, 40, 0.06);
}

.inventory-alert {
  margin-bottom: 1rem;
}
.inventory-alert ul {
  margin: 0.4rem 0 0;
}

.inventory-history-table,
.inventory-removal-table {
  min-width: 1120px;
}

.inventory-unavailable-table {
  min-width: 0;
  table-layout: fixed;
  width: 100%;
}

.inventory-unavailable-table.inventory-table {
  min-width: 0;
}

.inventory-unavailable-table .inventory-col-item {
  width: 36ch;
  max-width: 36ch;
  font-size: 0.78rem;
  font-weight: 650;
}

.inventory-unavailable-table .inventory-col-price {
  width: 7.25rem;
  white-space: nowrap;
}

.inventory-unavailable-table .inventory-col-dates {
  width: 5.75rem;
  white-space: nowrap;
}

.inventory-unavailable-table .inventory-col-dates .inventory-purchase-date,
.inventory-unavailable-table .inventory-col-dates .inventory-empty {
  display: block;
  font-size: 0.72rem;
  line-height: 1.35;
}

.inventory-unavailable-table .inventory-col-dates .inventory-date-removed {
  margin-top: 0.15rem;
}

.inventory-unavailable-table .inventory-col-activity {
  width: auto;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

.inventory-unavailable-table .inventory-col-item,
.inventory-unavailable-table .inventory-col-price,
.inventory-unavailable-table .inventory-col-dates {
  padding-left: 0.45rem;
  padding-right: 0.45rem;
}

.inventory-unavailable-table thead .inventory-col-price,
.inventory-unavailable-table thead .inventory-col-dates {
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  letter-spacing: 0.04em;
}

.inventory-unavailable-table .inventory-col-price .inventory-purchase-price {
  font-size: 0.74rem;
}

.inventory-unavailable-table .inventory-col-activity .inventory-activity {
  max-width: 100%;
}

.inventory-unavailable-table .inventory-col-activity .inventory-activity-note {
  display: block;
  margin-top: 0.2rem;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  word-wrap: break-word;
  text-overflow: unset;
}

.inventory-unavailable-table .inventory-col-activity .inventory-activity-when {
  white-space: normal;
}

.inventory-unavailable-table .inventory-unavailable-item-name {
  display: block;
  color: var(--inventory-navy);
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.inventory-unavailable-table .inventory-unavailable-item-name:hover {
  text-decoration: underline;
}

.inventory-unavailable-table .inventory-col-item .inventory-purchase-date {
  margin-top: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  font-size: 0.68rem;
}

.inventory-note-cell {
  min-width: 230px;
  max-width: 420px;
  line-height: 1.5;
  white-space: normal;
}

.inventory-history-status {
  display: block;
  margin-top: 0.35rem;
  color: var(--inventory-muted);
  font-size: 0.67rem;
  font-weight: 650;
}
.inventory-history-status--approved {
  color: var(--inventory-green);
}
.inventory-history-status--rejected {
  color: #b42318;
}

.inventory-removal-warning {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid #fedf89;
  border-radius: 0.65rem;
  color: #7a2e0e;
  background: #fffaeb;
}
.inventory-removal-warning i {
  flex: 0 0 auto;
  font-size: 1.1rem;
}
.inventory-removal-warning strong,
.inventory-removal-warning span {
  display: block;
}
.inventory-removal-warning strong {
  font-size: 0.82rem;
}
.inventory-removal-warning span {
  margin-top: 0.15rem;
  color: #934f00;
  font-size: 0.73rem;
}

.inventory-approval-form {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto;
  gap: 0.4rem;
  min-width: 250px;
}
.inventory-approval-form label {
  grid-column: 1/-1;
  color: var(--inventory-muted);
  font-size: 0.67rem;
  font-weight: 650;
}
.inventory-approval-form input {
  min-height: 2.25rem;
  border: 1px solid #cfd6df;
  border-radius: 0.45rem;
  padding: 0.4rem 0.55rem;
  color: var(--inventory-ink);
  background: #fff;
  font-size: 0.75rem;
}

.inventory-approve-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2rem;
  border: 1px solid #067647;
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  color: #fff;
  background: #067647;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.inventory-approve-button:hover, .inventory-approve-button:focus {
  border-color: #05603a;
  background: #05603a;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(6, 118, 71, 0.2);
}

.inventory-request-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.inventory-reject-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2rem;
  border: 1px solid #b42318;
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  color: #b42318;
  background: #fff7f6;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.inventory-reject-button:hover, .inventory-reject-button:focus {
  border-color: #912018;
  color: #fff;
  background: #b42318;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(180, 35, 24, 0.16);
}

.inventory-approve-button i,
.inventory-reject-button i {
  font-size: 0.9rem;
}

.inventory-action-label {
  display: inline-block;
}

@media (max-width: 767.98px) {
  .inventory-request-actions {
    justify-content: flex-start;
  }

  .inventory-approve-button,
  .inventory-reject-button {
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    min-height: 2rem;
    padding: 0;
    gap: 0;
  }

  .inventory-action-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

.inventory-modal-submit--danger {
  border-color: #b42318;
  background: #b42318;
}
.inventory-modal-submit--danger:hover,
.inventory-modal-submit--danger:focus {
  border-color: #912018;
  background: #912018;
}

.inventory-modal {
  overflow: hidden;
  border: 0;
  border-radius: 0.8rem;
  box-shadow: 0 24px 70px rgba(16, 24, 40, 0.22);
}
.inventory-modal .modal-header,
.inventory-modal .modal-footer {
  padding: 1rem 1.25rem;
  border-color: var(--inventory-border);
}
.inventory-modal .modal-body {
  padding: 1.2rem 1.25rem;
}
.inventory-modal .modal-title {
  color: var(--inventory-ink);
  font-size: 1.15rem;
  font-weight: 700;
}

.inventory-modal-eyebrow {
  max-width: 390px;
  overflow: hidden;
  color: var(--inventory-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-modal-help {
  margin: 0 0 1rem;
  padding: 0.7rem 0.8rem;
  border-left: 3px solid #84adcf;
  color: #475467;
  background: #f0f5fa;
  font-size: 0.78rem;
}

.inventory-form-field {
  margin-top: 0.9rem;
}
.inventory-form-field label,
.inventory-form-field small {
  display: block;
}
.inventory-form-field label {
  margin-bottom: 0.4rem;
  color: #344054;
  font-size: 0.78rem;
  font-weight: 650;
}
.inventory-form-field input,
.inventory-form-field textarea {
  width: 100%;
  border: 1px solid #cfd6df;
  border-radius: 0.5rem;
  color: var(--inventory-ink);
  background: #fff;
  font-size: 0.84rem;
  outline: none;
}
.inventory-form-field input:focus,
.inventory-form-field textarea:focus {
  border-color: var(--inventory-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.inventory-form-field input {
  min-height: 2.55rem;
  padding: 0.55rem 0.7rem;
}
.inventory-form-field textarea {
  min-height: 7rem;
  padding: 0.7rem;
  resize: vertical;
}
.inventory-form-field small {
  margin-top: 0.3rem;
  color: #98a2b3;
  font-size: 0.67rem;
  text-align: right;
}

.inventory-note-mode-label {
  display: block;
  margin-bottom: 0.35rem;
  color: #344054;
  font-size: 0.78rem;
  font-weight: 650;
}

.inventory-note-mode {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.1rem;
}

.inventory-note-mode label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  color: #475467;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.inventory-price-input {
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #cfd6df;
  border-radius: 0.5rem;
  background: #fff;
}
.inventory-price-input:focus-within {
  border-color: var(--inventory-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.inventory-price-input > span {
  align-self: stretch;
  display: grid;
  padding: 0 0.7rem;
  place-items: center;
  border-right: 1px solid #e4e7ec;
  color: #475467;
  background: #f9fafb;
  font-size: 0.85rem;
  font-weight: 650;
}
.inventory-price-input input {
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
}

.inventory-modal-cancel {
  border: 1px solid #cfd6df;
  padding: 0.55rem 0.95rem;
  color: #475467;
  background: #fff;
}

@media (max-width: 991.98px) {
  .inventory-summary {
    gap: 0.3rem 0.7rem;
    margin-bottom: 0.75rem;
    padding: 0.4rem 0.65rem;
  }
  .inventory-summary-card strong {
    font-size: 0.9rem;
  }
  .inventory-summary-card span {
    font-size: 0.68rem;
  }
  .inventory-summary-card + .inventory-summary-card {
    padding-left: 0.7rem;
  }
}
@media (max-width: 767.98px) {
  .inventory-page {
    padding: 1.25rem 0.75rem 2.5rem;
  }
  .inventory-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }
  .inventory-heading-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .inventory-service-link {
    width: auto;
  }
  .inventory-filters {
    align-items: stretch;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.7rem 0.75rem;
  }
  .inventory-filters > div,
  .inventory-filters .inventory-search,
  .inventory-filters select,
  .inventory-filters .inventory-filter-button {
    width: 100%;
    max-width: none;
  }
  .inventory-filters .inventory-search {
    flex: 0 0 auto;
  }
  .inventory-filters input,
  .inventory-filters select,
  .inventory-filters .inventory-filter-button {
    min-height: 2.35rem;
  }
  .inventory-clear-link {
    text-align: center;
  }
  .inventory-table-wrap {
    overflow: visible;
  }
  .inventory-table {
    min-width: 0;
  }
  .inventory-table thead {
    display: none;
  }
  .inventory-product-group,
  .inventory-product-row,
  .inventory-item-row,
  .inventory-item-row td {
    display: block;
    width: 100%;
  }
  .inventory-product-row th {
    display: block;
    padding: 0.55rem 0.7rem;
  }
  .inventory-item-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.28rem 0.4rem;
    padding: 0.7rem 0.75rem 0.75rem;
    border-bottom: 1px solid var(--inventory-border);
  }
  .inventory-item-row td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    text-align: left !important;
  }
  .inventory-item-row td::before {
    display: none;
  }
  .inventory-item-row td[data-label="Serial"] {
    order: 1;
    flex: 0 1 auto;
    min-width: 0;
  }
  .inventory-item-row td[data-label="Serial"] .inventory-serial {
    font-size: 0.92rem;
  }
  .inventory-item-row td[data-label="Status"] {
    order: 2;
    flex: 0 0 auto;
  }
  .inventory-item-row td[data-label="Condition"] {
    order: 3;
    flex: 0 0 auto;
  }
  .inventory-item-row td[data-label="Condition"]:has(.inventory-empty) {
    display: none;
  }
  .inventory-item-row td[data-label="Actions"] {
    order: 4;
    flex: 0 0 auto;
    margin-left: auto;
  }
  .inventory-item-row td[data-label="Last activity"] {
    order: 5;
    flex: 1 1 100%;
  }
  .inventory-item-row td[data-label="Bought"] {
    order: 6;
    flex: 0 0 auto;
  }
  .inventory-item-row td[data-label="Bought"]::after {
    content: "·";
    margin-left: 0.4rem;
    color: #c0c7d1;
  }
  .inventory-item-row td[data-label="Purchase"] {
    order: 6;
    flex: 0 0 auto;
  }
  .inventory-item-row td[data-label="For sale"] {
    order: 6;
    flex: 0 0 auto;
  }
  .inventory-item-row td[data-label="For sale"]:has(.inventory-empty) {
    display: none;
  }
  .inventory-item-row td[data-label="For sale"]:not(:has(.inventory-empty))::before {
    content: "·";
    margin-right: 0.4rem;
    color: #c0c7d1;
  }
  .inventory-table .inventory-purchase-price {
    display: inline;
    font-size: 0.78rem;
  }
  .inventory-table .inventory-purchase-date {
    display: inline;
    margin: 0;
    color: #667085;
    font-size: 0.76rem;
    font-weight: 550;
  }
  .inventory-table .inventory-col-purchase,
  .inventory-table .inventory-col-bought,
  .inventory-table .inventory-col-sale {
    width: auto;
    white-space: nowrap;
  }
  .inventory-table .inventory-status {
    width: fit-content;
    max-width: 100%;
    padding: 0.16rem 0.42rem;
    font-size: 0.66rem;
  }
  .inventory-table .inventory-sale-badge {
    display: inline-flex;
    margin: 0;
  }
  .inventory-activity {
    max-width: none;
    gap: 0.1rem;
  }
  .inventory-activity-head {
    gap: 0.2rem 0.35rem;
  }
  .inventory-activity-when {
    font-size: 0.68rem;
  }
  .inventory-activity-note {
    color: #98a2b3;
    font-size: 0.7rem;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .inventory-actions {
    text-align: right !important;
  }
  .inventory-actions .dropdown {
    width: auto;
  }
  .inventory-action-button,
  .inventory-action-button--compact {
    width: auto;
    min-height: 1.85rem;
  }
}
@media (max-width: 479.98px) {
  .inventory-summary {
    gap: 0.25rem 0.55rem;
    margin-bottom: 0.65rem;
    padding: 0.35rem 0.55rem;
  }
  .inventory-summary-card strong {
    font-size: 0.85rem;
  }
  .inventory-summary-card span {
    font-size: 0.62rem;
  }
  .inventory-summary-card + .inventory-summary-card {
    padding-left: 0.55rem;
  }
}
@media print {
  .inventory-heading,
  .inventory-summary,
  .inventory-filters,
  .inventory-actions-heading,
  .inventory-actions,
  .inventory-pagination {
    display: none !important;
  }
  .inventory-page {
    padding: 0;
  }
  .inventory-panel {
    border: 0;
    box-shadow: none;
  }
  .inventory-table {
    min-width: 0;
  }
}

/* Inventory unit show */
.inventory-show-page .inventory-heading-actions {
  align-items: center;
}
.inventory-show-page .inventory-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
}
.inventory-show-page .inventory-intro a {
  color: var(--inventory-navy);
  font-weight: 650;
  text-decoration: none;
}
.inventory-show-page .inventory-intro a:hover {
  text-decoration: underline;
}
.inventory-show-details {
  padding: 0.65rem 1rem 0.75rem;
  margin-bottom: 1rem;
}
.inventory-show-meta {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem 1rem;
  align-items: start;
}
.inventory-show-meta-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
  min-width: 0;
}
.inventory-show-meta-item .inventory-purchase-date {
  display: block;
  margin-top: 0;
  color: #667085;
  font-size: 0.78rem;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}
.inventory-show-meta-item .inventory-purchase-price {
  display: block;
  font-size: 0.84rem;
}
.inventory-show-meta-item .inventory-sale-badge {
  display: inline-flex;
  margin-top: 0;
}
.inventory-show-label {
  color: var(--inventory-muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.inventory-show-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
}
.inventory-show-count {
  color: var(--inventory-muted);
  font-size: 0.78rem;
  font-weight: 600;
}
.inventory-show-activity {
  padding: 0.55rem 1rem;
  border-top: 1px solid var(--inventory-border);
}
.inventory-show-activity--latest {
  border-top: 0;
}
.inventory-show-activity--sale + .inventory-show-activity--latest {
  border-top: 1px solid var(--inventory-border);
}
.inventory-show-activity-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.inventory-show-activity-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.45rem;
}
.inventory-show-activity-head .inventory-history-status {
  display: inline;
  margin-top: 0;
  font-size: 0.72rem;
}
.inventory-show-activity-head .inventory-sale-badge {
  margin-top: 0;
}
.inventory-show-activity-head .inventory-condition-grade--inline {
  margin-top: 0;
}
.inventory-show-activity-when {
  color: var(--inventory-muted);
  font-size: 0.74rem;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}
.inventory-show-activity-price {
  color: #067647;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.inventory-show-activity-when a {
  color: var(--inventory-navy);
  font-weight: 650;
  text-decoration: none;
}
.inventory-show-activity-when a:hover {
  text-decoration: underline;
}
.inventory-show-activity-note {
  margin: 0;
  color: #344054;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.35;
}
.inventory-show-activity-item .inventory-condition-grade--inline {
  align-self: flex-start;
  margin-top: 0;
}
.inventory-show-empty {
  padding: 0.85rem 1rem;
}
.inventory-show-more-activities {
  border-top: 1px solid var(--inventory-border);
}
.inventory-show-more-activities > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.5rem 1rem;
  color: var(--inventory-navy);
  font-size: 0.78rem;
  font-weight: 650;
}
.inventory-show-more-activities > summary::-webkit-details-marker {
  display: none;
}
.inventory-show-more-activities > summary::before {
  content: "▸ ";
  color: var(--inventory-muted);
}
.inventory-show-more-activities[open] > summary::before {
  content: "▾ ";
}
.inventory-show-more-button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.55rem 1rem;
  border: 0;
  border-top: 1px solid var(--inventory-border);
  border-radius: 0 0 0.75rem 0.75rem;
  color: var(--inventory-navy);
  background: transparent;
  font-size: 0.78rem;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}
.inventory-show-more-button:hover,
.inventory-show-more-button:focus {
  color: var(--inventory-ink);
  background: #f8fafc;
}
.inventory-show-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.inventory-show-activity-list > .inventory-show-activity--latest {
  border-top: 0;
}
.inventory-show-revenue {
  margin-top: 1rem;
}
.inventory-show-revenue-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  padding: 0.65rem 0.85rem 0.8rem;
}
.inventory-show-revenue-card {
  padding: 0.65rem 0.8rem 0.7rem;
  border: 1px solid var(--inventory-border);
  border-radius: 0.55rem;
  background: var(--inventory-canvas);
}
.inventory-show-revenue-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.5rem;
}
.inventory-show-revenue-card h2 {
  margin: 0;
  color: var(--inventory-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
}
.inventory-show-revenue-title-short,
.inventory-show-revenue-label-short {
  display: none;
}
.inventory-show-revenue-value {
  margin: 0;
  color: var(--inventory-ink);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.inventory-show-revenue-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.3rem 0.65rem;
  margin: 0;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(16, 24, 40, 0.06);
}
.inventory-show-revenue-meta dt {
  margin: 0;
  color: var(--inventory-muted);
  font-size: 0.62rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.inventory-show-revenue-meta dd {
  margin: 0.08rem 0 0;
  color: var(--inventory-ink);
  font-size: 0.82rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.inventory-show-revenue-card.rpt-heat--good {
  background: #ecfdf3;
  border-color: #abefc6;
}
.inventory-show-revenue-card.rpt-heat--warn {
  background: #fffaeb;
  border-color: #fedf89;
}
.inventory-show-revenue-card.rpt-heat--bad {
  background: #fef3f2;
  border-color: #fecdca;
}
@media (max-width: 767.98px) {
  .inventory-show-revenue-grid {
    grid-template-columns: 1fr;
    gap: 0.45rem;
    padding: 0.5rem 0.65rem 0.65rem;
  }
  .inventory-show-revenue .inventory-panel-title {
    padding: 0.55rem 0.75rem;
    font-size: 0.82rem;
  }
  .inventory-show-revenue-card {
    padding: 0.5rem 0.65rem 0.55rem;
    border-radius: 0.5rem;
  }
  .inventory-show-revenue-top {
    gap: 0.65rem;
    margin-bottom: 0.4rem;
  }
  .inventory-show-revenue-card h2 {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
  }
  .inventory-show-revenue-title-full,
  .inventory-show-revenue-label-full {
    display: none;
  }
  .inventory-show-revenue-title-short,
  .inventory-show-revenue-label-short {
    display: inline;
  }
  .inventory-show-revenue-value {
    font-size: 1.05rem;
  }
  .inventory-show-revenue-meta {
    gap: 0.2rem 0.35rem;
    padding-top: 0.4rem;
  }
  .inventory-show-revenue-meta dt {
    font-size: 0.56rem;
  }
  .inventory-show-revenue-meta dd {
    margin-top: 0.05rem;
    font-size: 0.74rem;
  }
  .inventory-show-details {
    padding: 0.55rem 0.75rem 0.65rem;
  }
  .inventory-show-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.28rem 0.4rem;
  }
  .inventory-show-meta-item {
    flex-direction: row;
    align-items: center;
    gap: 0;
  }
  .inventory-show-meta-item .inventory-show-label {
    display: none;
  }
  .inventory-show-meta-item[data-label="Status"] {
    order: 1;
    flex: 0 0 auto;
  }
  .inventory-show-meta-item[data-label="Condition"] {
    order: 2;
    flex: 0 0 auto;
  }
  .inventory-show-meta-item[data-label="Condition"]:has(.inventory-empty) {
    display: none;
  }
  .inventory-show-meta-item[data-label="Bought"] {
    order: 3;
    flex: 0 0 auto;
  }
  .inventory-show-meta-item[data-label="Bought"]::after {
    content: "·";
    margin-left: 0.4rem;
    color: #c0c7d1;
  }
  .inventory-show-meta-item[data-label="Purchase"] {
    order: 3;
    flex: 0 0 auto;
  }
  .inventory-show-meta-item[data-label="For sale"] {
    order: 3;
    flex: 0 0 auto;
  }
  .inventory-show-meta-item[data-label="For sale"]:has(.inventory-empty) {
    display: none;
  }
  .inventory-show-meta-item[data-label="For sale"]:not(:has(.inventory-empty))::before {
    content: "·";
    margin-right: 0.4rem;
    color: #c0c7d1;
  }
  .inventory-show-meta-item .inventory-purchase-price,
  .inventory-show-meta-item .inventory-purchase-date {
    display: inline;
    font-size: 0.78rem;
  }
  .inventory-show-meta-item .inventory-status {
    padding: 0.16rem 0.42rem;
    font-size: 0.66rem;
  }
  .inventory-show-page .inventory-heading {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }
  .inventory-show-page .inventory-heading-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;
  }
  .inventory-show-page .inventory-heading-actions .inventory-service-link {
    order: 1;
  }
  .inventory-show-page .inventory-heading-actions .dropdown {
    order: 2;
    width: auto;
    margin-left: auto;
  }
  .inventory-show-page .inventory-heading-actions .inventory-action-button {
    width: auto;
  }
}


/* ===== Feedback page styles ===== */
.feedback-page {
    width: min(1280px, 100%);
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
    color: var(--text-primary);
}

.feedback-heading {
    margin-bottom: 1.25rem;
}

.feedback-heading h1 {
    margin: 0;
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.feedback-eyebrow {
    margin: 0 0 0.3rem;
    color: #e66a21;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.feedback-intro {
    margin: 0.4rem 0 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.feedback-panel {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 0.8rem;
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

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

.feedback-table {
    width: 100%;
    min-width: 900px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.feedback-table thead th {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    background: #fbfcfd;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: left;
    text-transform: uppercase;
}

.feedback-row td {
    padding: 0.4rem 1rem;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
    font-size: 0.82rem;
    vertical-align: top;
}

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

.feedback-row:hover td {
    background: #fafcff;
}

.feedback-id {
    display: block;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

.feedback-id:hover {
    color: #153a5b;
}

.feedback-date {
    display: block;
    margin-top: 0.1rem;
    color: var(--text-muted);
    font-size: 0.72rem;
}

.feedback-table thead th:nth-child(2),
.feedback-nps-cell {
    width: 1%;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.feedback-table thead th:nth-child(3),
.feedback-row td[data-label="Ratings"] {
    width: 1%;
    padding-left: 0.55rem;
    padding-right: 0.75rem;
    white-space: nowrap;
    vertical-align: top;
}

.feedback-nps {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.65rem;
    height: 1.65rem;
    padding: 0 0.3rem;
    border-radius: 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.feedback-nps--promoter {
    color: #067647;
    background: #ecfdf3;
}

.feedback-nps--passive {
    color: #b54708;
    background: #fffaeb;
}

.feedback-nps--detractor {
    color: #b42318;
    background: #fef3f2;
}

.feedback-testimonial-flag {
    display: block;
    margin-top: 0.25rem;
    padding: 0;
    border-radius: 0;
    color: #9a3412;
    background: transparent;
    font-size: 0.58rem;
    font-weight: 650;
    line-height: 1.2;
}

.feedback-ratings {
    display: grid;
    gap: 0.15rem;
    width: max-content;
    max-width: 100%;
}

.feedback-ratings span {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.4rem;
    align-items: baseline;
    color: var(--text-primary);
    font-size: 0.78rem;
}

.feedback-ratings em {
    color: var(--text-muted);
    font-style: normal;
    font-size: 0.68rem;
    font-weight: 650;
    text-transform: uppercase;
}

.feedback-notes {
    display: grid;
    gap: 0.25rem;
    max-width: 380px;
}

.feedback-note-text {
    margin: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.78rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

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

.feedback-actions,
.feedback-actions-heading {
    text-align: right;
}

.feedback-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.85rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid #cfd6df;
    border-radius: 0.45rem;
    color: #344054;
    background: #fff;
    font-size: 0.75rem;
    font-weight: 650;
    text-decoration: none;
}

.feedback-action:hover {
    border-color: #98a2b3;
    color: var(--text-primary);
    background: #f8fafc;
}

.feedback-action--warn {
    border-color: #fdb022;
    color: #93370d;
    background: #fffaeb;
}

.feedback-action--warn:hover {
    border-color: #f79009;
    color: #7a2e0e;
    background: #fef0c7;
}

.feedback-empty-state {
    padding: 3.5rem 1rem !important;
    color: var(--text-muted);
    text-align: center;
}

.feedback-empty-state strong,
.feedback-empty-state span {
    display: block;
}

.feedback-empty-state strong {
    color: var(--text-primary);
}

.feedback-empty-state span {
    margin-top: 0.3rem;
    font-size: 0.8rem;
}

.feedback-pagination {
    display: flex;
    justify-content: center;
    padding: 0.9rem 1rem;
    border-top: 1px solid var(--border-color);
}

.feedback-pagination .pagination {
    margin: 0;
}

.feedback-pagination .page-link {
    color: #153a5b;
    font-size: 0.78rem;
}

.feedback-pagination .page-item.active .page-link {
    border-color: #153a5b;
    background: #153a5b;
}

@media (max-width: 767.98px) {
    .feedback-page {
        padding: 1rem 0.75rem 2rem;
    }

    .feedback-heading {
        margin-bottom: 0.85rem;
    }

    .feedback-intro {
        font-size: 0.84rem;
    }

    .feedback-table-wrap {
        overflow: visible;
    }

    .feedback-table {
        min-width: 0;
    }

    .feedback-table thead {
        display: none;
    }

    .feedback-row {
        display: block;
        width: 100%;
        padding: 0.7rem 0.85rem 0.8rem;
        border-bottom: 1px solid var(--border-color);
        box-shadow: none;
    }

    .feedback-row td {
        display: block;
        width: 100%;
        padding: 0;
        border: 0;
        text-align: left !important;
    }

    .feedback-row td::before {
        display: none;
    }

    .feedback-row td[data-label="Feedback"] {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: baseline;
        width: auto;
        gap: 0.25rem 0.55rem;
        margin: 0 0.55rem 0.35rem 0;
        vertical-align: middle;
    }

    .feedback-row td[data-label="Feedback"] .feedback-id {
        display: inline;
        font-size: 0.92rem;
    }

    .feedback-row td[data-label="Feedback"] .feedback-date {
        display: inline;
        margin: 0;
    }

    .feedback-row td[data-label="NPS"],
    .feedback-row td.feedback-nps-cell {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        width: auto;
        gap: 0.15rem;
        margin: 0 0.55rem 0.4rem 0;
        text-align: left;
        vertical-align: middle;
    }

    .feedback-row td[data-label="NPS"] .feedback-testimonial-flag {
        margin-top: 0;
    }

    .feedback-row td[data-label="Ratings"] {
        width: auto;
        margin-bottom: 0.35rem;
        padding-left: 0;
        padding-right: 0;
        white-space: normal;
    }

    .feedback-row td[data-label="Ratings"] .feedback-ratings {
        display: flex;
        flex-wrap: wrap;
        width: auto;
        gap: 0.25rem 0.75rem;
    }

    .feedback-row td[data-label="Ratings"] .feedback-ratings span {
        display: inline-flex;
        align-items: baseline;
        gap: 0.3rem;
        grid-template-columns: none;
        font-size: 0.78rem;
    }

    .feedback-row td[data-label="Notes"] {
        margin-bottom: 0.45rem;
    }

    .feedback-row td[data-label="Notes"]:has(.feedback-empty) {
        display: none;
    }

    .feedback-notes {
        max-width: none;
        gap: 0.2rem;
    }

    .feedback-note-text {
        -webkit-line-clamp: 2;
    }

    .feedback-row td[data-label="Action"] {
        margin-top: 0.1rem;
    }

    .feedback-action {
        width: auto;
        min-width: 5.5rem;
    }
}

/* Feedback show */
.feedback-show {
    width: min(920px, 100%);
    margin: 0 auto;
    padding: 1.5rem 1.25rem 2.5rem;
    color: var(--text-primary);
}

.feedback-show-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 0.9rem;
}

.feedback-show-heading h1 {
    margin: 0.35rem 0 0;
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.feedback-show-intro {
    margin: 0.3rem 0 0;
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.feedback-show-intro a {
    color: #153a5b;
    font-weight: 650;
    text-decoration: none;
}

.feedback-show-intro a:hover {
    text-decoration: underline;
}

.feedback-show-panel {
    padding: 1rem 1.1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.feedback-show-scoreline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1.1rem;
    margin-bottom: 0.95rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border-light);
}

.feedback-show-ratings {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
}

.feedback-show-ratings span {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    color: var(--text-primary);
    font-size: 0.84rem;
}

.feedback-show-ratings em {
    color: var(--text-muted);
    font-style: normal;
    font-size: 0.68rem;
    font-weight: 650;
    text-transform: uppercase;
}

.feedback-show-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1.1rem;
    margin: 0;
}

.feedback-show-fields--full {
    grid-column: 1 / -1;
}

.feedback-show-fields dt {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.feedback-show-fields dd {
    margin: 0.2rem 0 0;
    color: var(--text-primary);
    font-size: 0.88rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.feedback-show-ticket {
    margin-top: 0.85rem;
}

.feedback-show-ticket-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.feedback-show-ticket-head h2 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
}

.feedback-show-ticket-form {
    margin-top: 0.95rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-light);
}

.feedback-priority {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 650;
    background: #f2f4f7;
    color: #344054;
}

.feedback-priority--critical {
    color: #b42318;
    background: #fef3f2;
}

.feedback-priority--high {
    color: #b54708;
    background: #fffaeb;
}

.feedback-priority--medium {
    color: #175cd3;
    background: #eff8ff;
}

.feedback-priority--low {
    color: #667085;
    background: #f2f4f7;
}

@media (max-width: 767.98px) {
    .feedback-show {
        padding: 1rem 0.75rem 2rem;
    }

    .feedback-show-heading {
        flex-direction: column;
        gap: 0.55rem;
        margin-bottom: 0.75rem;
    }

    .feedback-show-heading .feedback-action {
        align-self: flex-start;
    }

    .feedback-show-panel {
        padding: 0.85rem;
    }

    .feedback-show-scoreline {
        gap: 0.5rem 0.75rem;
        margin-bottom: 0.75rem;
        padding-bottom: 0.7rem;
    }

    .feedback-show-fields {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .feedback-show-ticket-head {
        flex-wrap: wrap;
    }
}

/* ===== Customers page styles ===== */
.customers-page {
    width: 100%;
    margin: 0;
    padding: 2rem 1.5rem 3rem;
    color: var(--text-primary);
}

.customers-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}

.customers-heading h1 {
    margin: 0;
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.customers-intro {
    margin: 0.4rem 0 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.customers-panel {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 0.8rem;
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.customers-filters {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    background: #fbfcfd;
}

.customers-search {
    position: relative;
    flex: 1 1 320px;
    max-width: 520px;
}

.customers-search i {
    position: absolute;
    top: 50%;
    left: 0.85rem;
    color: #98a2b3;
    transform: translateY(-50%);
}

.customers-search input {
    width: 100%;
    min-height: 2.55rem;
    padding: 0.55rem 0.75rem 0.55rem 2.35rem;
    border: 1px solid #cfd6df;
    border-radius: 0.5rem;
    color: var(--text-primary);
    background: #fff;
    font-size: 0.84rem;
    outline: none;
}

.customers-search input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.customers-filter-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.55rem;
    padding: 0.55rem 1rem;
    border: 1px solid #153a5b;
    border-radius: 0.5rem;
    color: #fff;
    background: #153a5b;
    font-size: 0.84rem;
    font-weight: 650;
    cursor: pointer;
}

.customers-filter-button:hover {
    background: #0f2d47;
}

.customers-clear-link {
    color: var(--text-secondary);
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
}

.customers-clear-link:hover {
    color: #153a5b;
}

.customers-status-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: #fff;
}

.customers-status-filter {
    display: inline-flex;
    align-items: center;
    min-height: 1.85rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid #d0d5dd;
    border-radius: 0.45rem;
    color: #344054;
    background: #fff;
    font-size: 0.75rem;
    font-weight: 650;
    text-decoration: none;
}

.customers-status-filter:hover {
    border-color: #98a2b3;
    color: #153a5b;
}

.customers-status-filter.is-active {
    border-color: #153a5b;
    color: #fff;
    background: #153a5b;
}

.customer-signup-closed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid #fecdca;
    border-radius: 0.55rem;
    background: #fef3f2;
}

.customer-signup-closed p {
    margin: 0;
    font-size: 0.86rem;
}

.customer-signup-close {
    margin-top: 1.25rem;
    padding: 1rem;
    border: 1px solid #fecd89;
    border-radius: 0.55rem;
    background: #fffaeb;
}

.customer-signup-close__title {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #b54708;
}

.customer-signup-close__guide {
    margin: 0.65rem 0;
    padding-left: 1.15rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
}

.customer-signup-close__guide li + li {
    margin-top: 0.45rem;
}

.customer-signup-close__guide strong {
    color: var(--text-primary);
}

.customer-signup-close__form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 0.75rem;
    max-width: 28rem;
}

.customer-signup-close__fields {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
}

.customer-signup-close__fields .form-label {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    font-weight: 650;
}

.customer-signup-close__fields .form-label:first-child {
    margin-top: 0;
}

.customer-signup-close__original {
    margin-top: 0.25rem;
    padding: 0.75rem;
    border: 1px solid #fecd89;
    border-radius: 0.45rem;
    background: #fffaf0;
}

.customer-signup-close__original.is-hidden {
    display: none !important;
}

.customer-signup-withdraw {
    margin-top: 1.25rem;
    padding: 1rem;
    border: 1px solid #d0d5dd;
    border-radius: 0.55rem;
    background: #f8fafc;
}

.customer-signup-withdraw__title {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 700;
}

.customers-heading-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

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

.customers-table {
    width: 100%;
    min-width: 820px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.customers-table--compact {
    min-width: 560px;
}

.customers-table--index {
    min-width: 780px;
}

.customers-mobile-break {
    display: none;
}

.customers-table thead th {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    background: #fbfcfd;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: left;
    text-transform: uppercase;
}

.customers-actions-heading {
    text-align: right;
}

.customers-row td {
    padding: 0.55rem 1rem;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
    font-size: 0.82rem;
    vertical-align: middle;
}

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

.customers-row:hover td {
    background: #fafcff;
}

.customers-name {
    display: block;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

.customers-name:hover {
    color: #153a5b;
}

.customers-meta {
    display: block;
    margin-top: 0.15rem;
    color: var(--text-muted);
    font-size: 0.72rem;
}

.customers-meta--inline {
    display: inline;
    margin-top: 0;
    font-size: 0.82rem;
    color: #64748b;
}

.customers-joined {
    color: #334155;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.customers-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: #f2f4f7;
    color: #344054;
    font-size: 0.72rem;
    font-weight: 650;
    white-space: nowrap;
}

.customers-status > span {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: currentColor;
}

.customers-status--approved,
.customers-status--completed,
.customers-status--closed,
.customers-status--rented {
    color: #067647;
    background: #ecfdf3;
}

.customers-status--pending,
.customers-status--pending-approval,
.customers-status--awaiting-payment,
.customers-status--reserved,
.customers-status--incomplete {
    color: #b54708;
    background: #fffaeb;
}

.customers-status--rejected,
.customers-status--cancelled,
.customers-status--blocked,
.customers-status--disinterested,
.customers-status--duplicate,
.customers-status--withdrawn {
    color: #b42318;
    background: #fef3f2;
}

.customers-status[class*="customers-status--banned"] {
    color: #b42318;
    background: #fef3f2;
}

.customers-status--active,
.customers-status--delivered,
.customers-status--in-progress {
    color: #175cd3;
    background: #eff8ff;
}

.customers-activated {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 650;
}

.customers-activated--yes {
    color: #067647;
    background: #ecfdf3;
}

.customers-activated--no {
    color: #667085;
    background: #f2f4f7;
}

.customers-activated--warn {
    color: #b54708;
    background: #fffaeb;
}

button.customers-activated--action {
    border: 0;
    cursor: pointer;
    font: inherit;
    line-height: inherit;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

button.customers-activated--action:hover,
button.customers-activated--action:focus {
    filter: brightness(0.96);
}

.customers-actions {
    text-align: right;
    white-space: nowrap;
}

.customers-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 1.85rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid #153a5b;
    border-radius: 0.45rem;
    color: #fff;
    background: #153a5b;
    font-size: 0.75rem;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
}

.customers-action:hover {
    color: #fff;
    background: #0f2d47;
}

.customers-action--secondary {
    border-color: #cfd6df;
    color: #344054;
    background: #fff;
}

.customers-action--secondary:hover {
    border-color: #98a2b3;
    color: var(--text-primary);
    background: #f8fafc;
}

.customers-action--warn {
    border-color: #fdb022;
    color: #93370d;
    background: #fffaeb;
}

.customers-action--warn:hover {
    border-color: #f79009;
    color: #7a2e0e;
    background: #fef0c7;
}

.customers-action--danger {
    border-color: #fda29b;
    color: #b42318;
    background: #fef3f2;
    min-width: 2.1rem;
    padding: 0.35rem 0.55rem;
}

.customers-action--danger:hover {
    border-color: #f04438;
    color: #912018;
    background: #fee4e2;
}

.customers-empty-state {
    padding: 3.5rem 1rem !important;
    color: var(--text-muted);
    text-align: center;
}

.customers-empty-state strong,
.customers-empty-state span {
    display: block;
}

.customers-empty-state strong {
    color: var(--text-primary);
}

.customers-empty-state span {
    margin-top: 0.3rem;
    font-size: 0.8rem;
}

.customers-empty-inline {
    margin: 0;
    padding: 1.5rem 0 0.25rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.customers-pagination {
    display: flex;
    justify-content: center;
    padding: 0.9rem 1rem;
    border-top: 1px solid var(--border-color);
}

.customers-pagination .pagination {
    margin: 0;
}

.customers-pagination .page-link {
    color: #153a5b;
    font-size: 0.78rem;
}

.customers-pagination .page-item.active .page-link {
    border-color: #153a5b;
    background: #153a5b;
}

/* Customer show */
.customer-show {
    display: grid;
    gap: 0.75rem;
}

.customer-profile {
    display: grid;
    gap: 0.9rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--border-color);
    border-radius: 0.8rem;
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.customer-profile-main {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.customer-photo-trigger {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0.6rem;
    background: #f2f4f7;
    cursor: pointer;
    overflow: hidden;
}

.customer-photo-trigger img {
    display: block;
    width: 104px;
    height: 104px;
    object-fit: contain;
    border-radius: 0.6rem;
    border: 1px solid var(--border-color);
}

.customer-photo-trigger--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 104px;
    border: 1px dashed #cfd6df;
    border-radius: 0.6rem;
    color: #98a2b3;
    background: #f8fafc;
    font-size: 0.85rem;
    cursor: default;
}

.customer-profile-identity h1 {
    margin: 0;
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.customer-profile-idrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.55rem;
    margin-top: 0.3rem;
}

.customer-profile-cid {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 650;
}

.customer-profile-contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    margin-top: 0.45rem;
    color: var(--text-secondary);
    font-size: 0.84rem;
}

.customer-profile-contacts span {
    overflow-wrap: anywhere;
}

.customer-profile-contacts i {
    margin-right: 0.35rem;
    color: #98a2b3;
}

.customer-profile-docs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.customer-profile-docs a {
    color: #153a5b;
    font-size: 0.78rem;
    font-weight: 650;
    text-decoration: none;
}

.customer-profile-docs a:hover {
    text-decoration: underline;
}

.customer-profile-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.6rem 1.25rem;
    margin: 0;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border-light);
}

.customer-profile-meta dt {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.customer-profile-meta > div {
    min-width: 0;
}

.customer-profile-meta dd {
    margin: 0.2rem 0 0;
    color: var(--text-primary);
    font-size: 0.84rem;
    overflow-wrap: anywhere;
}

.customer-profile-social {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.customer-profile-social a {
    color: #153a5b;
    text-decoration: none;
}

.customer-profile-social a:hover {
    text-decoration: underline;
}

.customer-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.customer-tabs-panel {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 0.8rem;
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.customer-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0.55rem 0.75rem 0;
    border-bottom: 1px solid var(--border-color) !important;
    background: #fbfcfd;
}

.customer-tabs .nav-link {
    margin-bottom: -1px;
    padding: 0.65rem 0.9rem;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0;
    color: var(--text-secondary);
    background: transparent !important;
    font-size: 0.82rem;
    font-weight: 650;
}

.customer-tabs .nav-link:hover {
    color: #153a5b;
}

.customer-tabs .nav-link.active {
    color: #153a5b;
    border-bottom-color: #153a5b !important;
}

.customer-tab-content {
    padding: 0.9rem 1rem 1.1rem;
}

.customer-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.customer-section-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 700;
}

.customer-section-header--inset {
    padding: 0.9rem 1rem 0;
    margin-bottom: 0;
}

.customer-ai-assist {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

.customer-ai-assist__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.customer-ai-result {
    margin-top: 0.75rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 0.55rem;
    background: #fff;
}

.customer-ai-result h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.45rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
}

.customer-ai-result__summary {
    margin: 0 0 0.55rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.45;
}

.customer-ai-result__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.55rem;
    margin: 0 0 0.65rem;
}

.customer-ai-result__meta dt {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 650;
    color: var(--text-muted, #667085);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.customer-ai-result__meta dd {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    color: var(--text-primary);
    text-transform: capitalize;
}

.customer-ai-result__list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.customer-ai-result__list li + li {
    margin-top: 0.35rem;
}

.customer-ai-result__note {
    margin-top: 0.65rem;
}

.customer-ai-result__note strong {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.72rem;
    color: var(--text-muted, #667085);
}

.customer-ai-result__note pre {
    margin: 0;
    padding: 0.55rem 0.65rem;
    border-radius: 0.4rem;
    background: #f8fafc;
    border: 1px solid var(--border-light);
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 0.78rem;
    color: var(--text-primary);
}

.customer-ai-risk {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.customer-ai-risk--low {
    color: #067647;
    background: #ecfdf3;
}

.customer-ai-risk--medium {
    color: #b54708;
    background: #fffaeb;
}

.customer-ai-risk--high {
    color: #b42318;
    background: #fef3f2;
}

.customer-ai-factor {
    display: inline-block;
    margin-right: 0.25rem;
    font-size: 0.68rem;
    font-weight: 650;
    text-transform: capitalize;
}

.customer-ai-factor--raises_risk {
    color: #b42318;
}

.customer-ai-factor--lowers_risk {
    color: #067647;
}

.customer-ai-factor--neutral {
    color: #667085;
}


/* Signup check */
.customer-signup-check__actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.customer-signup-check__subtitle {
    margin: 0.85rem 0 0.45rem;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 700;
}

.customer-signup-check .customer-ai-result__summary {
    color: var(--text-primary);
}

.customer-signup-check__note pre {
    background: #fffbeb;
    border-color: #f5e6b8;
}

/* Verification flow stepper */

.customer-verify-flow {
    margin-top: 0.5rem;
}

.customer-verify-stepper {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    overflow-x: auto;
    padding: 0.35rem 0 0.85rem;
    margin-bottom: 0.35rem;
}

.customer-verify-stepper__step {
    appearance: none;
    border: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    min-width: 3.4rem;
    padding: 0.2rem 0.35rem;
    color: #667085;
    cursor: pointer;
}

.customer-verify-stepper__step:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.customer-verify-stepper__index {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 650;
    border: 1px solid var(--border-color, #d0d5dd);
    background: #fff;
}

.customer-verify-stepper__label {
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.customer-verify-stepper__connector {
    flex: 1 1 0.75rem;
    min-width: 0.55rem;
    height: 2px;
    background: #e4e7ec;
    margin: 0 0.1rem 1.1rem;
}

.customer-verify-stepper__connector.is-done {
    background: #98a2b3;
}

.customer-verify-stepper__step.is-done .customer-verify-stepper__index {
    background: #ecfdf3;
    border-color: #abefc6;
    color: #067647;
}

.customer-verify-stepper__step.is-done .customer-verify-stepper__label {
    color: #067647;
}

.customer-verify-stepper__step.is-current .customer-verify-stepper__index {
    border-color: #b54708;
    background: #fffaeb;
    color: #b54708;
}

.customer-verify-stepper__step.is-current .customer-verify-stepper__label {
    color: #b54708;
}

.customer-verify-panel {
    display: none;
    border: 1px solid var(--border-color, #d0d5dd);
    border-radius: 0.55rem;
    background: #fff;
    padding: 0.9rem 1rem;
}

.customer-verify-panel.is-active {
    display: block;
}

.customer-verify-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.65rem;
}

.customer-verify-panel__head strong {
    font-size: 0.95rem;
}

.customer-verify-panel .customer-checklist-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.customer-verify-panel .customer-checklist-actions .customers-action {
    flex: 0 0 auto;
}

.proof-rotate-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
}

.proof-rotate-controls {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
}

.proof-rotate-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 12rem;
    overflow: hidden;
}

.proof-rotate-wrap .js-rotatable {
    transform-origin: center center;
    transition: transform 0.18s ease;
    max-height: 70vh;
}

.proof-rotate-wrap.is-sideways .proof-rotate-stage {
    min-height: 18rem;
}

.proof-rotate-wrap--compact .proof-rotate-stage {
    min-height: 8rem;
}

.proof-rotate-wrap--zoom .proof-rotate-stage {
    min-height: 16rem;
}

@media (max-width: 720px) {
    .customer-verify-stepper {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.35rem;
        overflow: visible;
        padding-bottom: 0.35rem;
    }

    .customer-verify-stepper__connector {
        display: none;
    }

    .customer-verify-stepper__step {
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.65rem;
        min-width: 0;
        width: 100%;
        padding: 0.45rem 0.55rem;
        border: 1px solid var(--border-color, #d0d5dd);
        border-radius: 0.45rem;
        background: #fff;
        text-align: left;
    }

    .customer-verify-stepper__step.is-current {
        border-color: #b54708;
        background: #fffaeb;
    }

    .customer-verify-stepper__step.is-done {
        border-color: #abefc6;
        background: #f6fef9;
    }

    .customer-verify-stepper__step.is-locked {
        opacity: 0.5;
    }

    .customer-verify-stepper__label {
        font-size: 0.85rem;
    }

    .customer-verify-panel .customer-checklist-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .customer-verify-panel .customer-checklist-actions .customers-action {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

.customer-checklist {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    border: 1px solid var(--border-color);
    border-radius: 0.55rem;
    background: #fff;
    overflow: hidden;
}

.customer-checklist > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.45rem 0.7rem;
    border-bottom: 1px solid var(--border-light);
    background: #fff;
}

.customer-checklist > li:last-child {
    border-bottom: 0;
}

.customer-checklist > li.is-done {
    background: #f6fef9;
}

.customer-checklist > li.is-disabled {
    opacity: 0.5;
}

.customer-checklist strong {
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 650;
}

.customer-checklist-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
}

.customer-checklist-actions form {
    display: inline;
    margin: 0;
}

.customer-checklist-actions .customers-action {
    min-height: 1.7rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem;
}

.customer-card-list {
    display: grid;
    gap: 0.65rem;
}

.customer-info-card {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.55rem;
    background: #fff;
}

.customer-info-card h3 {
    margin: 0 0 0.25rem;
    font-size: 0.88rem;
    font-weight: 700;
}

.customer-info-card h3 .customers-meta {
    display: inline;
    margin-top: 0;
    font-weight: 500;
}

.customer-info-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.4;
}

.customer-info-card-side {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    align-self: flex-start;
    gap: 0.4rem;
    flex-shrink: 0;
}

.customer-info-card-side form {
    display: inline;
    margin: 0;
}

.customer-info-card-side .customers-action {
    padding: 0.28rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 0.35rem;
    line-height: 1.2;
    white-space: nowrap;
}

.customer-info-card-side .customers-action--danger {
    min-width: 0;
    padding: 0.28rem 0.65rem;
}

.customer-note-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border-color);
    border-radius: 0.55rem;
    background: #fff;
    overflow: hidden;
}

.customer-note-list > li {
    display: grid;
    grid-template-columns: 7.5rem 6.5rem minmax(0, 1fr);
    gap: 0.65rem;
    align-items: start;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-light);
}

.customer-note-list > li:last-child {
    border-bottom: 0;
}

.customer-note-date {
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.5;
    white-space: nowrap;
}

.customer-note-author {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.customer-note-body {
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.customer-note-body p {
    margin: 0.2rem 0 0;
}

.customer-note-body p:first-child {
    margin-top: 0;
}

.customer-note-body small {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.customer-note-body a {
    color: #153a5b;
    font-weight: 650;
    text-decoration: none;
}

.customer-note-body a:hover {
    text-decoration: underline;
}

.customer-history-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 991.98px) {
    .customer-history-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .customers-page {
        padding: 1.25rem 0.75rem 2.5rem;
    }

.customers-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}

    .customers-heading h1 {
        text-align: center;
    }

    .customers-intro {
        text-align: center;
        font-size: 0.84rem;
    }

    .customers-filters {
        flex-wrap: wrap;
        padding: 0.75rem 0.85rem;
        gap: 0.5rem;
    }

    .customers-status-filters {
        padding: 0.65rem 0.85rem;
    }

    .customers-search {
        flex: 1 1 100%;
        max-width: none;
    }

    .customers-filter-button {
        flex: 1 1 0;
    }

    .customers-clear-link {
        display: inline-flex;
        align-items: center;
        min-height: 2.55rem;
        padding: 0 0.35rem;
    }

    .customers-table-wrap {
        overflow: visible;
    }

    .customers-table,
    .customers-table--compact,
    .customers-table--index {
        display: block;
        min-width: 0;
    }

    .customers-table thead {
        display: none;
    }

    .customers-table tbody {
        display: block;
    }

    .customers-row {
        display: block;
        padding: 0.7rem 0.85rem 0.8rem;
        border-bottom: 1px solid var(--border-color);
    }

    .customers-row:hover td {
        background: transparent;
    }

    .customers-row td {
        display: block;
        width: 100%;
        padding: 0;
        border: 0;
        text-align: left !important;
    }

    .customers-row td::before {
        display: none;
    }

    .customers-actions {
        white-space: normal;
    }

    .customers-action {
        width: 100%;
    }

    /* Customer index: 2 info rows + actions */
    .customers-table--index .customers-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        column-gap: 0.55rem;
        row-gap: 0.3rem;
    }

    .customers-table--index .customers-row td {
        display: block;
        width: auto;
        margin: 0;
    }

    .customers-table--index .customers-row td.customers-mobile-break {
        flex: 0 0 100%;
        width: 100%;
        height: 0;
        padding: 0;
        margin: 0;
        border: 0;
        overflow: hidden;
    }

    .customers-table--index .customers-row td[data-label="Customer"] {
        flex: 1 1 0;
        min-width: 0;
        text-align: left;
    }

    .customers-table--index .customers-row td[data-label="Joined"] {
        flex: 0 0 auto;
        text-align: right;
    }

    .customers-table--index .customers-row td[data-label="Customer"] .customers-name {
        display: inline;
        font-size: 0.88rem;
    }

    .customers-table--index .customers-row td[data-label="Customer"] .customers-meta {
        display: inline;
        margin: 0 0 0 0.4rem;
        font-size: 0.72rem;
    }

    .customers-table--index .customers-row td[data-label="Joined"] .customers-joined {
        font-size: 0.8rem;
        color: #64748b;
        font-weight: 500;
    }

    .customers-table--index .customers-row td[data-label="Status"],
    .customers-table--index .customers-row td[data-label="Email"],
    .customers-table--index .customers-row td[data-label="IP"] {
        flex: 0 0 auto;
        width: auto;
    }

    .customers-table--index .customers-row td[data-label="IP"] {
        margin-left: auto;
        text-align: right;
    }

    .customers-table--index .customers-row td[data-label="IP"] .customers-meta--inline {
        font-size: 0.8rem;
    }

    .customers-table--index .customers-row td[data-label="Action"] {
        flex: 0 0 100%;
        width: 100%;
        display: flex;
        gap: 0.5rem;
        margin-top: 0.2rem;
    }

    .customers-table--index .customers-row td[data-label="Action"] .customers-action {
        flex: 1 1 0;
        width: auto;
    }

    .customers-table--index tbody > tr:not(.customers-row) {
        display: block;
    }

    .customers-table--index .customers-empty-state {
        display: block;
        width: 100%;
        padding: 2rem 0.85rem !important;
    }

    /* Order / payment history: compact cards */
    .customers-table--orders .customers-row,
    .customers-table--payments .customers-row {
        padding: 0.65rem 0.85rem 0.7rem;
    }

    .customers-table--orders .customers-row td,
    .customers-table--payments .customers-row td {
        display: inline-block;
        width: auto;
        padding: 0;
        border: 0;
        vertical-align: middle;
    }

    .customers-table--orders .customers-row td::before,
    .customers-table--payments .customers-row td::before {
        display: none;
    }

    .customers-table--orders td[data-label="Order"],
    .customers-table--payments td[data-label="Txn"] {
        margin-right: 0.45rem;
    }

    .customers-table--orders td[data-label="Order"] .customers-name,
    .customers-table--payments td[data-label="Txn"] .customers-name {
        display: inline;
        font-size: 0.88rem;
    }

    .customers-table--orders td[data-label="Status"] {
        margin-right: 0.45rem;
    }

    .customers-table--orders td[data-label="Amount"],
    .customers-table--payments td[data-label="Amount"] {
        margin-right: 0.55rem;
        color: var(--text-primary);
        font-size: 0.84rem;
        font-weight: 650;
    }

    .customers-table--orders td[data-label="Date"],
    .customers-table--payments td[data-label="Date"],
    .customers-table--payments td[data-label="Type"] {
        margin-right: 0.55rem;
        color: var(--text-muted);
        font-size: 0.75rem;
    }

    .customers-table--orders td[data-label="Action"] {
        display: block;
        width: 100%;
        margin-top: 0.45rem;
        text-align: left;
    }

    .customers-table--orders td[data-label="Action"] .customers-action {
        width: auto;
        min-width: 5.5rem;
    }

    .customer-history-grid .customer-section-header--inset {
        padding: 0.7rem 0.85rem 0;
    }

    .customer-profile {
        padding: 0.85rem;
    }

    .customer-profile-main {
        gap: 0.75rem;
    }

    .customer-photo-trigger img {
        width: 84px;
        height: 84px;
    }

    .customer-tab-content {
        padding: 0.75rem 0.7rem 0.9rem;
    }

    .customer-checklist > li {
        gap: 0.45rem;
        padding: 0.4rem 0.6rem;
    }

    .customer-checklist-actions {
        justify-content: flex-end;
    }

    .customer-info-card {
        flex-direction: column;
    }

    .customer-note-list > li {
        grid-template-columns: 7rem 5.5rem minmax(0, 1fr);
        gap: 0.4rem;
    }

    .customer-info-card-side {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .customer-section-header {
        flex-wrap: wrap;
    }
}

/* ===== Invoice styles ===== */
.invoice-doc {
    width: min(860px, 100%);
    margin: 1.5rem auto 2.5rem;
    padding: 2.25rem 2.5rem;
    border: 0.5px solid #e8ecf0;
    border-radius: 0.8rem;
    background: #fff;
    box-shadow: none;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.45;
}

.invoice-print-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.25rem;
}

.invoice-print-bar button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.25rem;
    padding: 0.4rem 0.9rem;
    border: 0.5px solid #d0d5dd;
    border-radius: 0.45rem;
    color: #667085;
    background: #fff;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
}

.invoice-print-bar button:hover {
    border-color: #98a2b3;
    background: #f8fafc;
}

.invoice-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    padding-bottom: 1rem;
    border-bottom: 0.5px solid #d0d5dd;
}

.invoice-brand {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.invoice-title h1 {
    margin: 0;
    color: #64748b;
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.invoice-title p {
    margin: 0.15rem 0 0;
    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 400;
}

.invoice-company {
    text-align: right;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 400;
}

.invoice-company strong {
    display: block;
    margin-bottom: 0.25rem;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 500;
}

.invoice-company p {
    margin: 0;
}

.invoice-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.8rem 1.5rem;
    margin: 1.25rem 0 1.5rem;
}

.invoice-meta-wide {
    grid-column: 1 / -1;
}

.invoice-meta dt {
    margin: 0;
    color: #94a3b8;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.invoice-meta dd {
    margin: 0.15rem 0 0;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.invoice-table {
    width: 100%;
    border-collapse: collapse;
}

.invoice-table th,
.invoice-table td {
    padding: 0.45rem 0.55rem;
    border-bottom: 0;
    color: #64748b;
    text-align: left;
    vertical-align: top;
    font-weight: 400;
}

.invoice-table thead th {
    border-bottom: 0.5px solid #d0d5dd;
    color: #94a3b8;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.invoice-num {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.invoice-taxrate {
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 400;
}

.invoice-total-label {
    text-align: right !important;
    color: #94a3b8;
    font-weight: 400;
}

.invoice-table tfoot td {
    border-bottom: 0;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.invoice-table tfoot tr:first-child td {
    border-top: 0.5px solid #d0d5dd;
}

.invoice-grand-total td {
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 500;
}

.invoice-footer {
    margin-top: 1.75rem;
    padding-top: 0.85rem;
    border-top: 0.5px solid #eef1f4;
    color: #94a3b8;
    font-size: 0.7rem;
    font-weight: 400;
    text-align: center;
}

.invoice-footer p {
    margin: 0 0 0.25rem;
}

@media (max-width: 767.98px) {
    .invoice-doc {
        margin: 0.75rem auto 1.5rem;
        padding: 1.25rem 1rem;
    }

    .invoice-header {
        flex-direction: column;
        gap: 1rem;
    }

    .invoice-company {
        text-align: left;
    }
}

@media print {
    body {
        background: #fff !important;
        color: #666 !important;
        -webkit-print-color-adjust: economy;
        print-color-adjust: economy;
    }

    .invoice-doc {
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        color: #666 !important;
        font-weight: 300;
    }

    .invoice-print-bar {
        display: none !important;
    }

    .invoice-header,
    .invoice-table thead th {
        border-bottom-color: #ccc !important;
        border-bottom-width: 0.4px !important;
    }

    .invoice-table tfoot tr:first-child td,
    .invoice-footer {
        border-top-color: #ccc !important;
        border-top-width: 0.4px !important;
    }

    .invoice-table th,
    .invoice-table td {
        border-bottom: 0 !important;
        color: #666 !important;
        font-weight: 300;
    }

    .invoice-table thead th {
        border-bottom-color: #ccc !important;
        border-bottom-width: 0.4px !important;
        border-bottom-style: solid !important;
    }

    .invoice-table tfoot td {
        border-bottom-width: 0 !important;
    }

    .invoice-title h1,
    .invoice-company strong,
    .invoice-meta dd,
    .invoice-grand-total td {
        color: #555 !important;
        font-weight: 400 !important;
    }

    .invoice-title p,
    .invoice-company,
    .invoice-meta dt,
    .invoice-taxrate,
    .invoice-total-label,
    .invoice-footer,
    .invoice-table thead th {
        color: #888 !important;
        font-weight: 300 !important;
    }
}

/* ===== Shared form pages ===== */
.dock-form-page {
    width: min(980px, 100%);
    margin: 0 auto;
    padding: 1.5rem 1.25rem 2.5rem;
    color: var(--text-primary);
}

.dock-form-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.dock-form-heading h1 {
    margin: 0;
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.dock-form-intro {
    margin: 0.3rem 0 0;
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.dock-form-intro a {
    color: #153a5b;
    font-weight: 650;
    text-decoration: none;
}

.dock-form-intro a:hover {
    text-decoration: underline;
}

.dock-form-muted {
    color: var(--text-muted);
    font-weight: 500;
}

.dock-form-heading-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.dock-form-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.dock-form-back:hover {
    color: #153a5b;
}

.dock-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(220px, 0.9fr);
    gap: 0.85rem;
    align-items: start;
}

.dock-form-layout--edit {
    grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.5fr);
}

.dock-form-panel {
    padding: 1rem 1.1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.dock-form-aside {
    padding: 0.95rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: #fbfcfd;
}

.dock-form-aside h2,
.dock-form-section-title {
    margin: 0 0 0.75rem;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 700;
}

.dock-guide-list {
    margin: 0;
    display: grid;
    gap: 0.75rem;
}

.dock-guide-list dt {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dock-guide-list dd {
    margin: 0.2rem 0 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.4;
}

.dock-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 0.85rem;
}

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

.dock-field {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
    align-content: start;
}

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

.dock-field label {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.dock-field .form-control,
.dock-field .form-select {
    min-height: 2.4rem;
    border-color: #d0d5dd;
    border-radius: 0.45rem;
    color: var(--text-primary);
    font-size: 0.88rem;
}

.dock-field .form-control:focus,
.dock-field .form-select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.dock-field textarea.form-control {
    min-height: 0;
}

.dock-input-prefix {
    display: flex;
    align-items: stretch;
    border: 1px solid #d0d5dd;
    border-radius: 0.45rem;
    overflow: hidden;
    background: #fff;
}

.dock-input-prefix span {
    display: grid;
    place-items: center;
    padding: 0 0.7rem;
    color: var(--text-muted);
    background: #f8fafc;
    border-right: 1px solid #e4e7ec;
    font-size: 0.85rem;
    font-weight: 650;
}

.dock-input-prefix .form-control {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.dock-input-prefix:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.dock-readonly {
    min-height: 2.4rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e4e7ec;
    border-radius: 0.45rem;
    background: #f8fafc;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.4;
}

.dock-field-hint {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.dock-field-link {
    color: #153a5b;
    font-size: 0.75rem;
    font-weight: 650;
    text-decoration: none;
}

.dock-field-link:hover {
    text-decoration: underline;
}

.dock-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-light);
}

.dock-form-actions--mobile {
    display: none;
}

.dock-form-submit,
.dock-form-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
    padding: 0.45rem 0.95rem;
    border-radius: 0.45rem;
    font-size: 0.84rem;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
}

.dock-form-submit {
    border: 1px solid #153a5b;
    color: #fff;
    background: #153a5b;
}

.dock-form-submit:hover {
    color: #fff;
    background: #0f2d47;
}

.dock-form-cancel {
    border: 1px solid #cfd6df;
    color: #344054;
    background: #fff;
}

.dock-form-cancel:hover {
    border-color: #98a2b3;
    color: var(--text-primary);
    background: #f8fafc;
}

.dock-edit-photo {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.dock-edit-photo img,
.dock-edit-photo-empty {
    width: 100%;
    max-width: 180px;
    height: 180px;
    border: 1px solid var(--border-color);
    border-radius: 0.65rem;
    background: #f2f4f7;
}

.dock-edit-photo img {
    object-fit: contain;
}

.dock-edit-photo-empty {
    display: grid;
    place-items: center;
    color: #98a2b3;
    font-size: 2.5rem;
}

.dock-form-meta-panel {
    margin-top: 0.85rem;
}

.dock-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    margin: 0;
}

.dock-meta-grid dt {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dock-meta-grid dd {
    margin: 0.2rem 0 0;
    color: var(--text-primary);
    font-size: 0.84rem;
}

@media (max-width: 991.98px) {
    .dock-form-layout,
    .dock-form-layout--edit {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 767.98px) {
    .dock-form-page {
        padding: 0.85rem 0.85rem 1.75rem;
    }

    .dock-form-heading {
        flex-direction: column;
        gap: 0.4rem;
        margin-bottom: 0.75rem;
    }

    .dock-form-heading h1 {
        font-size: 1.15rem;
    }

    .dock-form-intro {
        margin-top: 0.15rem;
        font-size: 0.82rem;
        line-height: 1.35;
    }

    .dock-form-layout {
        gap: 0.65rem;
    }

    .dock-form-panel,
    .dock-form-aside {
        padding: 0.8rem 0.85rem;
        border-radius: 0.65rem;
    }

    .dock-form-aside h2,
    .dock-form-section-title {
        margin-bottom: 0.55rem;
    }

    .dock-guide-list {
        gap: 0.55rem;
    }

    .dock-form-heading-actions {
        width: 100%;
    }

    .dock-form-heading-actions .dock-form-submit,
    .dock-form-heading-actions .dock-form-cancel {
        flex: 1 1 auto;
    }

    .dock-form-grid {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    .dock-field {
        gap: 0.2rem;
    }

    .dock-field .form-control,
    .dock-field .form-select,
    .dock-readonly {
        min-height: 2.25rem;
        font-size: 0.86rem;
    }

    .dock-form-actions {
        margin-top: 0.75rem;
        padding-top: 0.7rem;
        gap: 0.45rem;
    }

    .dock-form-submit,
    .dock-form-cancel {
        min-height: 2.25rem;
        padding: 0.4rem 0.85rem;
        font-size: 0.82rem;
    }

    .dock-form-actions--mobile {
        display: flex;
        margin-top: 0.75rem;
    }

    .dock-form-actions--mobile .dock-form-submit,
    .dock-form-actions--mobile .dock-form-cancel {
        flex: 1 1 auto;
    }

    .dock-meta-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.55rem 0.75rem;
    }

    .dock-edit-photo {
        gap: 0.6rem;
        margin-bottom: 0.7rem;
    }

    .dock-edit-photo img,
    .dock-edit-photo-empty {
        max-width: 120px;
        height: 120px;
    }
}

/* ==========================================================================
   Orders — index, show, edit, modals
   ========================================================================== */

.orders-page {
    width: 100%;
    margin: 0;
    padding: 2rem 1.5rem 3rem;
    color: var(--text-primary);
}

.orders-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.orders-heading h1 {
    margin: 0;
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.orders-day-nav {
    display: inline-flex;
    gap: 0.45rem;
    flex-shrink: 0;
}

.orders-day-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.15rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    color: var(--text-primary);
    background: var(--bg-primary);
    font-size: 0.8rem;
    font-weight: 650;
    text-decoration: none;
}

.orders-day-nav a:hover {
    border-color: #153a5b;
    color: #153a5b;
}

.orders-panel {
    margin-bottom: 1rem;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 0.8rem;
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.orders-panel-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    background: #fbfcfd;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.orders-panel-title i {
    font-size: 0.95rem;
    line-height: 1;
}

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

.orders-table {
    width: 100%;
    min-width: 760px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.orders-table--day {
    min-width: 720px;
}

.orders-table--open {
    min-width: 720px;
}

.orders-mobile-break {
    display: none;
}

.orders-table--items {
    min-width: 900px;
}

.orders-table thead th {
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid var(--border-color);
    color: #64748b;
    background: #fbfcfd;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.orders-row td {
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid var(--border-light);
    color: #475569;
    font-size: 0.82rem;
    vertical-align: middle;
}

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

.orders-row:hover td {
    background: #fafcff;
}

.orders-id {
    color: #475569;
    font-weight: 600;
    text-decoration: none;
}

.orders-id:hover {
    color: #153a5b;
}

.orders-customer {
    color: #334155;
    font-weight: 500;
    text-decoration: none;
}

.orders-customer:hover {
    color: #153a5b;
}

.orders-meta {
    color: #64748b;
    font-size: 0.82rem;
}

.orders-amount {
    color: #334155;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.orders-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.45rem;
    max-width: 280px;
}

.orders-items span {
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.4;
}

.orders-items span:not(:last-child)::after {
    content: "·";
    margin-left: 0.4rem;
    color: var(--text-muted);
}

.orders-empty {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1.5rem 1rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.orders-empty strong {
    color: var(--text-primary);
    font-size: 0.92rem;
}

.orders-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.1rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid #153a5b;
    border-radius: 0.45rem;
    color: #fff;
    background: #153a5b;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.orders-action:hover {
    color: #fff;
    background: #0f2d47;
    border-color: #0f2d47;
}

.orders-action--secondary {
    color: var(--text-primary);
    background: #fff;
    border-color: #cfd6df;
}

.orders-action--secondary:hover {
    color: #153a5b;
    background: #f8fafc;
    border-color: #153a5b;
}

.orders-action--danger {
    color: #b42318;
    background: #fff;
    border-color: #fda29b;
}

.orders-action--danger:hover {
    color: #912018;
    background: #fef3f2;
    border-color: #f04438;
}

.orders-action--success {
    color: #fff;
    background: #067647;
    border-color: #067647;
}

.orders-action--success:hover {
    color: #fff;
    background: #05603a;
    border-color: #05603a;
}

.orders-action--payment {
    color: #fff;
    background: #0e7490;
    border-color: #0e7490;
}

.orders-action--payment:hover {
    color: #fff;
    background: #0f766e;
    border-color: #0f766e;
}

input.orders-action {
    appearance: none;
    -webkit-appearance: none;
}

/* Order show */

.order-show-heading {
    margin-bottom: 1.15rem;
}

.order-show-heading__main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.75rem;
    margin-bottom: 0.65rem;
}

.order-show-heading__main h1 {
    margin: 0;
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.order-show-heading__main h1 i {
    margin-right: 0.25rem;
    color: var(--text-muted);
    font-size: 0.95em;
}

.order-show-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.7rem;
}

.order-show-actions__form {
    display: inline;
    margin: 0;
}

.order-show-heading__customer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.85rem;
    color: var(--text-secondary);
    font-size: 0.86rem;
}

.order-show-heading__customer a {
    color: var(--text-primary);
    font-weight: 700;
    text-decoration: none;
}

.order-show-heading__customer a:hover {
    color: #153a5b;
}

.order-show-panel {
    margin-bottom: 1rem;
    padding: 0.95rem 1rem 1.05rem;
    border: 1px solid var(--border-color);
    border-radius: 0.8rem;
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.order-show-panel__title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.85rem;
    color: var(--text-primary);
    font-size: 0.92rem;
    font-weight: 700;
}

.order-show-panel__title i {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.order-show-panel__icon-flip {
    display: inline-flex;
    transform: scaleX(-1);
}

.order-show-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem 1.25rem;
    align-items: start;
}

.order-show-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
    row-gap: 0.85rem;
    margin: 0;
}

.order-show-meta > div {
    min-width: 0;
}

.order-show-meta__full {
    grid-column: 1 / -1;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-color);
}

.order-show-meta > div:nth-child(4),
.order-show-meta > div:nth-child(5) {
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-color);
}

.order-show-meta dt {
    margin: 0 0 0.3rem;
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.order-show-meta dt i,
.order-show-meta dt .order-show-panel__icon-flip {
    margin-right: 0.25rem;
    font-weight: 400;
    color: var(--text-secondary);
}

.order-show-meta dd {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.order-show-meta dd .order-show-meta__sub,
.order-show-meta dd .text-muted {
    display: inline-block;
    margin-top: 0.15rem;
    color: var(--text-muted) !important;
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.45;
}

.order-show-meta--readonly {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.order-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    width: 140px;
}

.order-photo__img {
    width: 140px;
    height: 140px;
    object-fit: contain;
    border: 1px solid var(--border-color);
    border-radius: 0.55rem;
    background: #f8fafc;
}

.order-photo__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    border: 1px dashed #cfd6df;
    border-radius: 0.55rem;
    color: #98a2b3;
    background: #f8fafc;
    font-size: 0.9rem;
}

.order-photo__label {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.orders-table__total-row td {
    padding: 0.45rem 0.85rem;
    border-bottom: 1px solid var(--border-light);
    background: #fbfcfd;
    font-size: 0.82rem;
    vertical-align: middle;
}

.orders-table__total-row:last-child td {
    border-bottom: 0;
}

.order-show .orders-table--items .orders-row td .form-select-sm {
    max-width: 140px;
    min-height: 2rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.78rem;
}

.order-show .orders-table--items .orders-row td .orders-action {
    min-height: 1.9rem;
    padding: 0.28rem 0.6rem;
    font-size: 0.72rem;
}

.order-show .orders-table--items .orders-row td form {
    display: inline;
    margin: 0;
}

.order-show-logistics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.order-show-logistics .order-show-panel {
    margin-bottom: 0;
    padding: 0.75rem 0.85rem 0.85rem;
}

.order-show-logistics .order-show-panel__title {
    margin-bottom: 0.6rem;
    font-size: 0.85rem;
}

.order-show-logistics__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 0.55rem;
}

.order-show-logistics__grid .dock-field {
    gap: 0.18rem;
}

.order-show-logistics__grid .dock-field label,
.order-show-logistics__grid .dock-field .form-label {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.order-show-logistics__grid .form-control,
.order-show-logistics__grid .form-select {
    min-height: 2.05rem;
    padding: 0.28rem 0.5rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.order-show-logistics__grid textarea.form-control {
    min-height: 0;
}

.order-show-logistics__datetime {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}

.order-show-logistics__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.6rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--border-light);
}

.order-show-logistics__actions .orders-action {
    min-height: 1.95rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem;
}

.order-show-verification {
    margin-top: 0.75rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--border-light);
}

.order-show-verification__header {
    margin-bottom: 0.55rem;
}

.order-show-verification__title {
    margin: 0 0 0.2rem;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 700;
}

.order-show-verification__help {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.4;
}

.order-show-verification__list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.order-show-verification__item {
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border-light);
    border-radius: 0.5rem;
    background: var(--bg-secondary, #f8f9fb);
}

.order-show-verification__item-label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.55rem;
    margin-bottom: 0.45rem;
}

.order-show-verification__item-label strong {
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 650;
}

.order-show-verification__item-label span {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.order-show-verification__fields {
    display: grid;
    grid-template-columns: minmax(9rem, 12rem) 1fr;
    gap: 0.45rem 0.55rem;
}

.order-show-verification__fields .dock-field--full {
    grid-column: 1 / -1;
}

.order-show-verification__fields .form-label {
    margin-bottom: 0.2rem;
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.order-show-logistics .order-show-meta--readonly {
    gap: 0.5rem 0.75rem;
}

.order-show-logistics .order-show-meta--readonly dt {
    margin-bottom: 0.25rem;
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.order-show-logistics .order-show-meta--readonly dd {
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.45;
}

.order-show-logistics .order-show-meta--readonly dd .text-muted {
    color: var(--text-muted) !important;
    font-size: 0.82rem;
}

.orders-edit-page .dock-form-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.55rem;
}

.orders-edit-page .dock-form-intro .customers-status {
    margin-left: 0.15rem;
}

/* Modals */

.dock-modal {
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: 0 12px 40px rgba(16, 24, 40, 0.14);
}

.dock-modal .modal-header {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.dock-modal .modal-title {
    color: var(--text-primary);
    font-size: 0.98rem;
    font-weight: 700;
}

.dock-modal .modal-body {
    padding: 1rem;
}

.dock-modal .modal-body p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.45;
}

.dock-modal .modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--border-color);
}

.dock-modal .modal-footer form {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
    margin: 0;
    width: 100%;
}

@media (max-width: 991.98px) {
    .order-show-summary {
        grid-template-columns: 1fr;
    }

    .order-photo {
        order: -1;
        width: 120px;
    }

    .order-photo__img,
    .order-photo__placeholder {
        width: 120px;
        height: 120px;
    }

    .order-show-logistics {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .orders-page {
        padding: 1.25rem 0.75rem 2.5rem;
    }

    .orders-heading {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .orders-heading h1 {
        text-align: center;
    }

    .orders-day-nav {
        width: 100%;
    }

    .orders-day-nav a {
        flex: 1 1 0;
    }

    .orders-panel-title {
        padding: 0.65rem 0.85rem;
    }

    .orders-table-wrap {
        overflow: visible;
    }

    .orders-table,
    .orders-table--day,
    .orders-table--open,
    .orders-table--items {
        display: block;
        min-width: 0;
    }

    .orders-table thead {
        display: none;
    }

    .orders-table tbody {
        display: block;
    }

    .orders-row {
        display: block;
        padding: 0.7rem 0.85rem 0.8rem;
        border-bottom: 1px solid var(--border-color);
    }

    .orders-row:hover td {
        background: transparent;
    }

    .orders-row td {
        display: block;
        width: 100%;
        padding: 0;
        border: 0;
    }

    .orders-row td::before {
        display: none;
    }

    /* Compact index cards: independent rows (no shared grid columns) */
    .orders-table--day .orders-row,
    .orders-table--open .orders-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        column-gap: 0.55rem;
        row-gap: 0.25rem;
    }

    .orders-table--day .orders-row td,
    .orders-table--open .orders-row td {
        display: block;
        width: auto;
        margin: 0;
    }

    .orders-table--day .orders-row td.orders-mobile-break,
    .orders-table--open .orders-row td.orders-mobile-break {
        flex: 0 0 100%;
        width: 100%;
        height: 0;
        padding: 0;
        margin: 0;
        border: 0;
        overflow: hidden;
    }

    .orders-table--day .orders-row td[data-label="Order"],
    .orders-table--open .orders-row td[data-label="Order"],
    .orders-table--day .orders-row td[data-label="Status"],
    .orders-table--open .orders-row td[data-label="Status"],
    .orders-table--day .orders-row td[data-label="Amount"],
    .orders-table--open .orders-row td[data-label="Amount"] {
        flex: 1 1 0;
        min-width: 0;
    }

    .orders-table--day .orders-row td[data-label="Order"],
    .orders-table--open .orders-row td[data-label="Order"] {
        text-align: left;
    }

    .orders-table--day .orders-row td[data-label="Status"],
    .orders-table--open .orders-row td[data-label="Status"] {
        text-align: center;
    }

    .orders-table--day .orders-row td[data-label="Amount"],
    .orders-table--open .orders-row td[data-label="Amount"] {
        text-align: right;
    }

    .orders-table--day .orders-row td[data-label="Items"],
    .orders-table--open .orders-row td[data-label="Items"] {
        flex: 0 0 100%;
        width: 100%;
        margin-top: 0.05rem;
    }

    .orders-table--day .orders-row td[data-label="Order"] .orders-id,
    .orders-table--open .orders-row td[data-label="Order"] .orders-id {
        font-size: 0.88rem;
    }

    .orders-table--day .orders-row td[data-label="Phone"] .orders-meta,
    .orders-table--open .orders-row td[data-label="Phone"] .orders-meta {
        font-size: 0.8rem;
    }

    .orders-items {
        max-width: none;
    }

    /* Order show heading / actions */
    .order-show-heading__main {
        margin-bottom: 0.55rem;
    }

    .order-show-actions {
        gap: 0.4rem;
    }

    .order-show-actions .orders-action,
    .order-show-actions__form {
        flex: 1 1 calc(50% - 0.2rem);
    }

    .order-show-actions__form .orders-action {
        width: 100%;
    }

    .order-show-panel {
        padding: 0.85rem 0.8rem 0.95rem;
        border-radius: 0.7rem;
    }

    .order-show-meta {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .order-show-meta--readonly {
        grid-template-columns: 1fr 1fr;
        gap: 0.65rem 0.75rem;
    }

    .order-show-meta--readonly .dock-field--full {
        grid-column: 1 / -1;
    }

    .order-photo {
        width: 100%;
        align-items: flex-start;
    }

    /* Items: compact card per row */
    .orders-table--items .orders-row {
        padding: 0.75rem 0.85rem 0.85rem;
    }

    .orders-table--items .orders-row td[data-label="Item"] {
        margin-bottom: 0.35rem;
        color: var(--text-primary);
        font-size: 0.9rem;
        font-weight: 700;
    }

    .orders-table--items .orders-row td[data-label="Serial"] {
        margin-bottom: 0.45rem;
    }

    .orders-table--items .orders-row td[data-label="Serial"] .form-select-sm {
        max-width: none;
        width: 100%;
    }

    .orders-table--items .orders-row td[data-label="Start date"],
    .orders-table--items .orders-row td[data-label="Return date"],
    .orders-table--items .orders-row td[data-label="Days"],
    .orders-table--items .orders-row td[data-label="Rent/day"],
    .orders-table--items .orders-row td[data-label="Cost"],
    .orders-table--items .orders-row td[data-label="Status"] {
        display: inline-block;
        width: auto;
        margin: 0 0.75rem 0.35rem 0;
        vertical-align: top;
        font-size: 0.78rem;
    }

    .orders-table--items .orders-row td[data-label="Start date"]::before,
    .orders-table--items .orders-row td[data-label="Return date"]::before,
    .orders-table--items .orders-row td[data-label="Days"]::before,
    .orders-table--items .orders-row td[data-label="Rent/day"]::before,
    .orders-table--items .orders-row td[data-label="Cost"]::before,
    .orders-table--items .orders-row td[data-label="Status"]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.1rem;
        color: var(--text-muted);
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .orders-table--items .orders-row td[data-label="Action"] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        margin-top: 0.45rem;
    }

    .orders-table--items .orders-row td[data-label="Action"] form,
    .orders-table--items .orders-row td[data-label="Action"] .orders-action {
        flex: 1 1 calc(50% - 0.2rem);
    }

    .orders-table--items .orders-row td[data-label="Action"] .orders-action {
        width: 100%;
    }

    .orders-table__total-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        padding: 0.55rem 0.85rem;
        border-bottom: 1px solid var(--border-light);
        background: #fbfcfd;
    }

    .orders-table__total-row td {
        display: block;
        width: auto;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .orders-table__total-row td[data-label=""] {
        color: var(--text-secondary);
        font-size: 0.8rem;
    }

    .orders-table__total-row td[colspan="3"],
    .orders-table__total-row td[data-label="Item Amount"],
    .orders-table__total-row td[data-label="Delivery Fee"],
    .orders-table__total-row td[data-label="Coupon Discount"],
    .orders-table__total-row td[data-label="Total Amount"] {
        text-align: right;
        font-weight: 650;
    }

    .order-show-logistics {
        gap: 0.6rem;
    }

    .order-show-logistics .order-show-panel {
        padding: 0.7rem 0.75rem 0.8rem;
    }

    .order-show-logistics__grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem 0.5rem;
    }

    .order-show-logistics__grid .dock-field--full,
    .order-show-logistics__grid .dock-field:has(.order-show-logistics__datetime) {
        grid-column: 1 / -1;
    }

    .order-show-logistics__datetime {
        grid-template-columns: 1fr 1fr;
    }

    .order-show-logistics__actions {
        justify-content: stretch;
    }

    .order-show-logistics__actions .orders-action {
        width: 100%;
    }

    .order-show-verification__fields {
        grid-template-columns: 1fr;
    }

    .order-show-logistics .order-show-meta--readonly {
        grid-template-columns: 1fr 1fr;
        gap: 0.45rem 0.6rem;
    }

    /* Mobile-friendly modals */
    .modal-dialog {
        margin: 0.75rem;
        max-width: calc(100% - 1.5rem);
    }

    .dock-modal .modal-header,
    .dock-modal .modal-body,
    .dock-modal .modal-footer {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .dock-modal .modal-footer,
    .dock-modal .modal-footer form {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .dock-modal .modal-footer .orders-action {
        width: 100%;
    }

    .orders-edit-page .dock-form-heading-actions {
        flex-wrap: wrap;
    }

    .orders-edit-page .dock-form-heading-actions .dock-form-cancel,
    .orders-edit-page .dock-form-heading-actions .dock-form-submit {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* Order edit — compact single panel */
.orders-edit-page {
    width: min(720px, 100%);
}

.orders-edit-panel {
    padding: 0.7rem 0.85rem 0.85rem;
}

.orders-edit-block + .orders-edit-block {
    margin-top: 0.75rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--border-light);
}

.orders-edit-block .dock-form-section-title {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.orders-edit-block__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.orders-edit-block__head .dock-form-section-title {
    margin: 0;
}

.orders-edit-days {
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 650;
    white-space: nowrap;
}

.orders-edit-days.is-warn {
    color: #b54708;
}

.orders-edit-grid--dates {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem 0.5rem;
}

.orders-edit-grid--ship {
    grid-template-columns: minmax(0, 1fr) 5.5rem;
    gap: 0.45rem 0.5rem;
}

.orders-edit-grid--amounts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem 0.5rem;
}

.orders-edit-page .dock-field {
    gap: 0.18rem;
}

.orders-edit-page .dock-field label {
    font-size: 0.62rem;
}

.orders-edit-page .dock-field .form-control,
.orders-edit-page .dock-field .form-select,
.orders-edit-page .dock-field .form-control-sm,
.orders-edit-page .dock-field .form-select-sm {
    min-height: 2.05rem;
    padding: 0.28rem 0.5rem;
    font-size: 0.8rem;
}

.orders-edit-page .dock-input-prefix--sm span {
    padding: 0 0.45rem;
    font-size: 0.75rem;
}

.orders-edit-page .dock-input-prefix--sm .form-control {
    min-height: 2.05rem;
}

.orders-edit-page #items_amount.is-changed,
.orders-edit-page #final_amount.is-changed {
    color: #175cd3;
    font-weight: 700;
}

.orders-edit-amount-hint {
    margin: 0.45rem 0 0;
    color: #175cd3;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
}

@media (max-width: 767.98px) {
    .orders-edit-grid--dates {
        grid-template-columns: 1fr 1fr;
    }

    .orders-edit-grid--ship {
        grid-template-columns: minmax(0, 1fr) 4.75rem;
    }

    .orders-edit-grid--amounts {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0.4rem;
    }

    .orders-edit-page .dock-form-heading {
        flex-direction: column;
        gap: 0.65rem;
    }

    .orders-edit-page .dock-form-heading-actions {
        width: 100%;
    }
}

/* Create address — compact form */
.address-create-page {
    width: min(560px, 100%);
}

.address-create-page .dock-form-panel {
    padding: 0.85rem 0.95rem;
}

.address-create-page .dock-form-grid {
    gap: 0.65rem 0.75rem;
}

.address-create-page textarea.form-control {
    min-height: 4.5rem;
    resize: vertical;
}

.address-create-page .dock-field-hint {
    margin: 0.15rem 0 0;
}

@media (max-width: 767.98px) {
    .address-create-page .dock-form-heading {
        flex-direction: column;
        gap: 0.65rem;
    }

    .address-create-page .dock-form-heading-actions {
        width: 100%;
    }

    .address-create-page .dock-form-heading-actions .dock-form-cancel,
    .address-create-page .dock-form-heading-actions .dock-form-submit {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* ==========================================================================
   Logistics — deliveries & pickups (mobile-first)
   ========================================================================== */

.logistics-page {
    width: 100%;
    margin: 0;
    padding: 1.25rem 0.75rem 2.5rem;
    color: var(--text-primary);
}

.logistics-heading {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.logistics-heading h1 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.logistics-intro {
    margin: 0.3rem 0 0;
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.logistics-day-nav {
    display: flex;
    gap: 0.45rem;
}

.logistics-day-nav a {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.15rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    color: var(--text-primary);
    background: var(--bg-primary);
    font-size: 0.8rem;
    font-weight: 650;
    text-decoration: none;
}

.logistics-day-nav a:hover {
    border-color: #153a5b;
    color: #153a5b;
}

.logistics-panel {
    margin-bottom: 0.85rem;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.logistics-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    background: #fbfcfd;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.logistics-panel-title i {
    margin-right: 0.25rem;
    color: var(--text-muted);
}

.logistics-icon-flip {
    display: inline-flex;
    transform: scaleX(-1);
}

.logistics-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    color: #153a5b;
    background: #e8eef4;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0;
}

.logistics-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.logistics-card {
    padding: 0.7rem 0.85rem 0.75rem;
    border-bottom: 1px solid var(--border-light);
}

.logistics-card:last-child {
    border-bottom: 0;
}

.logistics-card__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.55rem;
    margin-bottom: 0.25rem;
}

.logistics-order {
    color: var(--text-primary);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
}

.logistics-order:hover {
    color: #153a5b;
}

.logistics-time {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 650;
}

.logistics-assignee {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    color: #067647;
    background: #ecfdf3;
    font-size: 0.68rem;
    font-weight: 650;
    white-space: nowrap;
}

.logistics-assignee--open {
    color: #b54708;
    background: #fffaeb;
}

.logistics-card__customer {
    margin-bottom: 0.2rem;
    color: var(--text-primary);
    font-size: 0.84rem;
    font-weight: 650;
}

.logistics-card__address {
    display: flex;
    gap: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.4;
}

.logistics-card__address i {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.logistics-card__address span {
    overflow-wrap: anywhere;
}

.logistics-card__notes {
    margin-top: 0.45rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--border-light);
}

.logistics-card__notes p {
    margin: 0 0 0.25rem;
    color: var(--text-secondary);
    font-size: 0.76rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.logistics-card__notes p:last-child {
    margin-bottom: 0;
}

.logistics-card__notes span {
    display: inline-block;
    margin-right: 0.3rem;
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.logistics-empty {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1.1rem 0.85rem;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.logistics-empty strong {
    color: var(--text-primary);
    font-size: 0.88rem;
}

.logistics-empty--page {
    padding: 1.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--bg-primary);
    text-align: center;
}

@media (min-width: 768px) {
    .logistics-page {
        padding: 2rem 1.5rem 3rem;
    }

    .logistics-heading {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: 1.25rem;
    }

    .logistics-heading h1 {
        font-size: clamp(1.25rem, 2vw, 1.5rem);
    }

    .logistics-day-nav {
        flex: 0 0 auto;
    }

    .logistics-day-nav a {
        flex: 0 0 auto;
    }

    .logistics-card {
        padding: 0.75rem 1rem 0.8rem;
    }

    .logistics-card__top {
        gap: 0.45rem 0.75rem;
    }

    .logistics-card__customer {
        display: inline;
        margin-right: 0.65rem;
    }

    .logistics-card__address {
        display: inline-flex;
        max-width: 100%;
    }
}

/* Logistics — per-person color coding + denser cards */
.logistics-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid var(--border-light);
    background: #fdfdfe;
}

.logistics-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
    padding: 0.14rem 0.5rem;
    border-radius: 999px;
    color: #475467;
    background: #f2f4f7;
    font-size: 0.68rem;
    font-weight: 650;
    white-space: nowrap;
}

.logistics-legend .logistics-chip {
    margin-left: 0;
}

.logistics-chip em {
    font-style: normal;
    font-weight: 700;
    opacity: 0.75;
}

.logistics-chip--person {
    color: hsl(var(--phue, 215), 70%, 30%);
    background: hsl(var(--phue, 215), 75%, 94%);
}

.logistics-chip--open { color: #b54708; background: #fffaeb; }
.logistics-chip--customer { color: #475467; background: #f2f4f7; }

.logistics-card {
    padding: 0.55rem 0.85rem 0.6rem;
    border-left: 3px solid transparent;
}

.logistics-card--person { border-left-color: hsl(var(--phue, 215), 70%, 55%); }
.logistics-card--open { border-left-color: #fdb022; }
.logistics-card--customer { border-left-color: #98a2b3; }

.logistics-card__top {
    margin-bottom: 0.2rem;
}

.logistics-card__top .logistics-card__customer {
    margin: 0;
}

.logistics-card__address {
    font-size: 0.76rem;
}

.logistics-card__notes {
    margin-top: 0.35rem;
    padding-top: 0.3rem;
}

@media (min-width: 768px) {
    .logistics-legend {
        padding: 0.55rem 1rem;
    }

    .logistics-card {
        padding: 0.55rem 1rem 0.6rem;
    }
}

/* ==========================================================================
   Active order inventory — mobile-first
   ========================================================================== */

.aoi-page {
    width: 100%;
    margin: 0;
    padding: 1.25rem 0.75rem 2.5rem;
    color: var(--text-primary);
}

.aoi-heading {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.aoi-heading h1 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.aoi-intro {
    margin: 0.3rem 0 0;
    color: var(--text-secondary);
    font-size: 0.86rem;
}

.aoi-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.aoi-summary__pill {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 650;
}

.aoi-summary__pill--rented {
    color: #067647;
    background: #ecfdf3;
}

.aoi-summary__pill--reserved {
    color: #b54708;
    background: #fffaeb;
}

.aoi-panel {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.aoi-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.aoi-group {
    border-bottom: 1px solid var(--border-color);
}

.aoi-group:last-child {
    border-bottom: 0;
}

.aoi-group__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    background: #f8fafc;
}

.aoi-group__count {
    color: var(--text-muted);
    font-size: 0.78em;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.aoi-group__lines {
    list-style: none;
    margin: 0;
    padding: 0;
}

.aoi-card {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem 0.45rem;
    padding: 0.28rem 0.55rem 0.28rem 0.65rem;
    border-bottom: 1px solid var(--border-light);
    border-left: 3px solid transparent;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.aoi-group__lines .aoi-card:last-child {
    border-bottom: 0;
}

.aoi-card--rented {
    border-left-color: #12b76a;
}

.aoi-card--reserved {
    border-left-color: #fdb022;
}

.aoi-card__status,
.aoi-card__order,
.aoi-card__serial,
.aoi-card__window {
    margin: 0;
    flex-shrink: 0;
}

.aoi-card__serial {
    margin-left: auto;
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aoi-product {
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.aoi-serial {
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.aoi-order {
    color: #153a5b;
    font-size: 0.7rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.aoi-order:hover {
    text-decoration: underline;
}

.aoi-card__window {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.15rem 0.25rem;
    color: var(--text-muted);
    font-size: 0.66rem;
    line-height: 1.2;
    white-space: nowrap;
}

.aoi-card__arrow {
    margin: 0 0.05rem;
    color: #c0c6d0;
    font-weight: 600;
}

.aoi-card .customers-status {
    padding: 0.05rem 0.35rem;
    font-size: 0.62rem;
}

.aoi-empty {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1.5rem 1rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
}

.aoi-empty strong {
    color: var(--text-primary);
    font-size: 0.92rem;
}

@media (min-width: 768px) {
    .aoi-page {
        padding: 2rem 1.5rem 3rem;
    }

    .aoi-heading {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: 1.25rem;
    }

    .aoi-heading h1 {
        font-size: clamp(1.25rem, 2vw, 1.5rem);
    }

    .aoi-group__head {
        padding: 0.65rem 1rem 0.4rem;
    }

    .aoi-product {
        font-size: 0.88rem;
    }

    .aoi-card {
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(4.5rem, 0.55fr) minmax(5.5rem, 0.7fr) minmax(0, 0.9fr);
        align-items: center;
        gap: 0.75rem 1rem;
        padding: 0.4rem 1rem 0.4rem 1.05rem;
        overflow: visible;
    }

    .aoi-card__serial {
        margin-left: 0;
        overflow: visible;
        text-overflow: unset;
        white-space: normal;
    }

    .aoi-card__window {
        font-size: 0.74rem;
    }

    .aoi-order {
        font-size: 0.78rem;
    }

    .aoi-serial {
        font-size: 0.78rem;
    }

    .aoi-card .customers-status {
        padding: 0.12rem 0.45rem;
        font-size: 0.7rem;
    }
}

/* ==========================================================================
   Transactions — mobile-first index
   ========================================================================== */

.trx-page {
    width: 100%;
    margin: 0;
    padding: 1.25rem 0.75rem 2.5rem;
    color: var(--text-primary);
}

.trx-heading {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.trx-heading h1 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.trx-intro {
    margin: 0.3rem 0 0;
    color: var(--text-secondary);
    font-size: 0.86rem;
}

.trx-create {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.trx-create__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 calc(33.33% - 0.3rem);
    min-height: 2.15rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 0.45rem;
    color: var(--text-primary);
    background: #fff;
    font-size: 0.78rem;
    font-weight: 650;
    text-decoration: none;
}

.trx-create__btn--expense {
    color: #b42318;
    border-color: #fecdca;
    background: #fef3f2;
}

.trx-create__btn--transfer {
    color: #175cd3;
    border-color: #b2ddff;
    background: #eff8ff;
}

.trx-create__btn--purchase {
    color: #067647;
    border-color: #a6f4c5;
    background: #ecfdf3;
}

.trx-top {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.trx-panel {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.trx-panel-title {
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    background: #fbfcfd;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.trx-panel-title--inline {
    padding: 0;
    border: 0;
    background: transparent;
}

.trx-balances {
    list-style: none;
    margin: 0;
    padding: 0.35rem 0;
}

.trx-balances li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0.85rem;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.82rem;
}

.trx-balances li:last-child {
    border-bottom: 0;
}

.trx-balances span {
    color: var(--text-secondary);
}

.trx-balances strong {
    color: var(--text-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.trx-receivables-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 650;
    text-decoration: none;
}

.trx-receivables-link span:last-child {
    color: #153a5b;
    font-size: 0.78rem;
}

.trx-receivables-link:hover {
    background: #fafcff;
}

.trx-ledger-head {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--border-color);
    background: #fbfcfd;
}

.trx-ledger-date {
    margin: 0.2rem 0 0;
    color: var(--text-secondary);
    font-size: 0.86rem;
}

.trx-day-nav {
    display: flex;
    gap: 0.4rem;
}

.trx-day-nav a {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.05rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 0.45rem;
    color: var(--text-primary);
    background: #fff;
    font-size: 0.78rem;
    font-weight: 650;
    text-decoration: none;
}

.trx-day-nav a:hover {
    border-color: #153a5b;
    color: #153a5b;
}

.trx-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--border-color);
    background: #fff;
}

.trx-search {
    position: relative;
    flex: 1 1 14rem;
    min-width: 0;
}

.trx-search i {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    color: #98a2b3;
    transform: translateY(-50%);
    pointer-events: none;
}

.trx-search input {
    width: 100%;
    min-height: 2.15rem;
    padding: 0.4rem 0.7rem 0.4rem 2.15rem;
    border: 1px solid #cfd6df;
    border-radius: 0.45rem;
    color: var(--text-primary);
    background: #fff;
    font-size: 0.82rem;
    outline: none;
}

.trx-search input:focus {
    border-color: #153a5b;
    box-shadow: 0 0 0 3px rgba(21, 58, 91, 0.1);
}

.trx-filter-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.15rem;
    padding: 0.35rem 0.9rem;
    border: 1px solid #153a5b;
    border-radius: 0.45rem;
    color: #fff;
    background: #153a5b;
    font-size: 0.78rem;
    font-weight: 650;
    cursor: pointer;
}

.trx-filter-button:hover {
    background: #0f2d47;
}

.trx-clear-link {
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
}

.trx-clear-link:hover {
    color: #153a5b;
}

.trx-pagination {
    display: flex;
    justify-content: center;
    padding: 0.85rem;
    border-top: 1px solid var(--border-color);
}

.trx-pagination .pagination {
    margin: 0;
}

.trx-pagination .page-link {
    color: #153a5b;
    font-size: 0.78rem;
}

.trx-pagination .page-item.active .page-link {
    border-color: #153a5b;
    background: #153a5b;
}

.trx-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.trx-card {
    padding: 0.65rem 0.85rem 0.7rem;
    border-bottom: 1px solid var(--border-light);
    border-left: 3px solid #c0c6d0;
}

.trx-card:last-child {
    border-bottom: 0;
}

.trx-card--income { border-left-color: #12b76a; }
.trx-card--expense { border-left-color: #f04438; }
.trx-card--purchase { border-left-color: #2e90fa; }
.trx-card--transfer { border-left-color: #9b8afb; }

.trx-card__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-bottom: 0.25rem;
}

.trx-card__id {
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 700;
}

.trx-card__id a {
    color: #153a5b;
    text-decoration: none;
}

.trx-card__id a:hover {
    text-decoration: underline;
}

.trx-type {
    display: inline-flex;
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
    font-size: 0.65rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.trx-type--income { color: #067647; background: #ecfdf3; }
.trx-type--expense { color: #b42318; background: #fef3f2; }
.trx-type--purchase { color: #175cd3; background: #eff8ff; }
.trx-type--transfer { color: #6941c6; background: #f9f5ff; }

.trx-amount {
    margin-left: auto;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.trx-card__mid {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.85rem;
    margin-bottom: 0.25rem;
}

.trx-card__cats {
    color: var(--text-secondary);
    font-size: 0.76rem;
}

.trx-card__flow {
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.trx-card__flow a {
    color: #153a5b;
    font-weight: 650;
    text-decoration: none;
}

.trx-card__flow a:hover {
    text-decoration: underline;
}

.trx-card__arrow {
    color: #c0c6d0;
}

.trx-card__footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.35rem 0.65rem;
}

.trx-card__meta {
    grid-column: 1;
    min-width: 0;
    color: var(--text-muted);
    font-size: 0.7rem;
}

.trx-card__notes {
    grid-column: 1 / -1;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.trx-repeat {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    align-self: center;
}

.trx-repeat:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

.trx-card__actions {
    grid-column: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    justify-self: end;
    flex-shrink: 0;
}

.trx-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border: 1px solid #fecdca;
    border-radius: 0.4rem;
    color: #b42318;
    background: #fef3f2;
    cursor: pointer;
}

.trx-delete:hover {
    background: #fee4e2;
}

.trx-empty {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1.35rem 0.85rem;
    color: var(--text-muted);
    font-size: 0.84rem;
    text-align: center;
}

.trx-empty strong {
    color: var(--text-primary);
    font-size: 0.9rem;
}

.trx-delete-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.75rem;
    margin: 0 0 0.75rem;
}

.trx-delete-meta dt {
    margin: 0 0 0.1rem;
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.trx-delete-meta dd {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.trx-delete-warn {
    margin: 0;
    color: #b42318;
    font-size: 0.8rem;
    font-weight: 600;
}

@media (min-width: 768px) {
    .trx-page {
        padding: 2rem 1.5rem 3rem;
    }

    .trx-heading {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: 1.25rem;
    }

    .trx-heading h1 {
        font-size: clamp(1.25rem, 2vw, 1.5rem);
    }

    .trx-create__btn {
        flex: 0 0 auto;
        min-width: 6.5rem;
    }

    .trx-top {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .trx-ledger-head {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        padding: 0.75rem 1rem;
    }

    .trx-filters {
        padding: 0.75rem 1rem;
    }

    .trx-day-nav a {
        flex: 0 0 auto;
    }

    .trx-card {
        padding: 0.6rem 1rem 0.65rem;
    }

    .trx-card__notes {
        grid-column: 1 / -1;
    }
}

/* Large screens: single row per transaction */
@media (min-width: 992px) {
    .trx-card {
        display: grid;
        grid-template-columns: 4.5rem 5.5rem minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr) max-content max-content max-content 2rem;
        align-items: center;
        column-gap: 0.85rem;
        padding: 0.5rem 1rem;
        min-width: 0;
    }

    .trx-card__top,
    .trx-card__mid,
    .trx-card__footer {
        display: contents;
    }

    .trx-card__actions {
        display: contents;
    }

    .trx-card__id { grid-column: 1; grid-row: 1; }
    .trx-type { grid-column: 2; grid-row: 1; justify-self: start; }

    .trx-card__cats {
        grid-column: 3;
        grid-row: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .trx-card__flow {
        grid-column: 4;
        grid-row: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .trx-card__notes {
        grid-column: 5;
        grid-row: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .trx-card__meta {
        grid-column: 6;
        grid-row: 1;
        white-space: nowrap;
    }

    .trx-amount {
        grid-column: 7;
        grid-row: 1;
        margin-left: 0;
        text-align: right;
    }

    .trx-repeat {
        grid-column: 8;
        grid-row: 1;
        justify-self: end;
    }

    .trx-delete {
        grid-column: 9;
        grid-row: 1;
        margin-left: 0;
    }
}

/* ==========================================================================
   Receivables — mobile-first
   ========================================================================== */

.recv-page {
    width: min(640px, 100%);
}

.recv-page .trx-intro strong {
    color: var(--text-primary);
    font-weight: 700;
}

.recv-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    background: #fbfcfd;
}

.recv-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 2rem;
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: 0.4rem;
    color: var(--text-secondary);
    background: #fff;
    font-size: 0.72rem;
    font-weight: 650;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
}

.recv-filter:hover {
    border-color: #153a5b;
    color: #153a5b;
}

.recv-filter.is-active {
    border-color: #153a5b;
    color: #fff;
    background: #153a5b;
}

.recv-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.recv-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "name bal"
        "cid bal";
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.1rem;
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid var(--border-light);
}

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

.recv-customer {
    grid-area: name;
    color: var(--text-primary);
    font-size: 0.86rem;
    font-weight: 650;
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.recv-customer:hover {
    color: #153a5b;
}

.recv-cid {
    grid-area: cid;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 600;
}

.recv-balance {
    grid-area: bal;
    font-size: 0.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}

.recv-balance--due {
    color: #b42318;
}

.recv-balance--credit {
    color: #067647;
}

@media (min-width: 768px) {
    .recv-row {
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas: "name cid bal";
        column-gap: 1rem;
        padding: 0.45rem 1rem;
    }

    .recv-cid {
        justify-self: end;
    }

    .recv-filter {
        flex: 0 0 auto;
        padding: 0.3rem 0.75rem;
    }
}

/* Transaction create forms — checkboxes + narrow transfer */
.dock-form-page--narrow {
    width: min(560px, 100%);
}

.dock-check-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1rem;
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-light);
}

.dock-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.dock-check input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: #153a5b;
}

@media (max-width: 767.98px) {
    .dock-form-page .dock-form-heading {
        flex-direction: column;
        gap: 0.65rem;
    }

    .dock-check-row {
        flex-direction: column;
        gap: 0.55rem;
    }

    .dock-form-actions .dock-form-submit,
    .dock-form-actions .dock-form-cancel {
        flex: 1 1 auto;
    }
}

/* Transaction create forms — compact (expense / purchase / transfer) */
.trx-create-page {
    width: min(720px, 100%);
}

.trx-create-page--narrow {
    width: min(520px, 100%);
}

.trx-create-page .dock-form-panel {
    padding: 0.75rem 0.85rem;
}

.trx-create-grid {
    gap: 0.45rem 0.5rem;
}

.trx-create-page .dock-field {
    gap: 0.15rem;
}

.trx-create-page .dock-field label {
    font-size: 0.62rem;
}

.trx-create-page .dock-field .form-control,
.trx-create-page .dock-field .form-select,
.trx-create-page .dock-field .form-control-sm,
.trx-create-page .dock-field .form-select-sm {
    min-height: 2.05rem;
    padding: 0.28rem 0.5rem;
    font-size: 0.8rem;
}

.trx-create-page .dock-input-prefix--sm span {
    padding: 0 0.45rem;
    font-size: 0.75rem;
}

.trx-create-page .dock-check-row {
    margin-top: 0.6rem;
    padding-top: 0.55rem;
    gap: 0.45rem 0.85rem;
}

.trx-create-page .dock-check {
    font-size: 0.76rem;
}

.trx-create-page .dock-form-actions {
    margin-top: 0.65rem;
    padding-top: 0.6rem;
}

.trx-create-guide summary {
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 700;
    list-style: none;
}

.trx-create-guide summary::-webkit-details-marker {
    display: none;
}

.trx-create-guide summary::after {
    content: " ▾";
    color: var(--text-muted);
    font-weight: 500;
}

.trx-create-guide details[open] summary::after {
    content: " ▴";
}

.trx-create-guide .dock-guide-list {
    margin-top: 0.65rem;
    gap: 0.5rem;
}

.trx-create-guide .dock-field-hint {
    margin: 0.55rem 0 0;
}

.trx-expense-guide-chip {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--link-color, #0d6efd);
    font: inherit;
    line-height: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.trx-expense-guide-chip:hover {
    color: var(--text-primary);
}

.trx-expense-tax {
    margin-top: 0.6rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--border-subtle, #e8eaed);
}

.trx-expense-tax summary {
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.76rem;
    font-weight: 700;
    list-style: none;
}

.trx-expense-tax summary::-webkit-details-marker {
    display: none;
}

.trx-expense-tax[open] summary {
    margin-bottom: 0.45rem;
}

@media (max-width: 767.98px) {
    .trx-create-page .dock-form-grid,
    .trx-create-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem 0.45rem;
    }

    .trx-create-page .dock-field--full {
        grid-column: 1 / -1;
    }

    .trx-create-page .dock-form-intro {
        display: none;
    }

    .trx-create-page .dock-check-row {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .trx-create-guide {
        padding: 0.65rem 0.75rem;
    }
}

@media (min-width: 768px) {
    .trx-create-guide summary::after {
        display: none;
    }

    .trx-create-guide .dock-guide-list {
        margin-top: 0.5rem;
    }
}

/* Receivables — denser single-row list */
.recv-page {
    width: min(560px, 100%);
}

.recv-heading {
    margin-bottom: 0.75rem;
    gap: 0.5rem;
}

.recv-filters {
    gap: 0.3rem;
    padding: 0.5rem 0.65rem;
}

.recv-filter {
    min-height: 1.85rem;
    padding: 0.25rem 0.45rem;
    font-size: 0.68rem;
}

.recv-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.4rem 0.75rem;
}

.recv-customer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.45rem;
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 650;
    text-decoration: none;
}

.recv-customer:hover {
    color: #153a5b;
}

.recv-cid {
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 600;
    white-space: nowrap;
}

.recv-balance {
    flex-shrink: 0;
    font-size: 0.84rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .recv-row {
        padding: 0.35rem 0.85rem;
    }

    .recv-filter {
        flex: 0 0 auto;
        padding: 0.25rem 0.65rem;
    }
}

/* ==========================================================================
   Attendance — leave tracker (mobile-first)
   ========================================================================== */

.att-page {
    width: 100%;
    margin: 0;
    padding: 1.25rem 0.75rem 2.5rem;
    color: var(--text-primary);
}

.att-heading {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.att-heading h1 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.att-intro {
    margin: 0.3rem 0 0;
    color: var(--text-secondary);
    font-size: 0.86rem;
}

.att-heading .dock-form-submit {
    align-self: stretch;
    text-align: center;
}

.att-panel {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.att-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.att-card {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem 0.75rem;
    border-bottom: 1px solid var(--border-light);
    border-left: 3px solid #c0c6d0;
}

.att-card:last-child {
    border-bottom: 0;
}

.att-card--pending { border-left-color: #fdb022; }
.att-card--approved { border-left-color: #2e90fa; }
.att-card--closed { border-left-color: #12b76a; }
.att-card--cancelled { border-left-color: #98a2b3; }

.att-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.att-card__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.55rem;
}

.att-id {
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 700;
}

.att-employee {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.att-card__window {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.3rem;
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 600;
}

.att-card__arrow {
    color: #c0c6d0;
}

.att-days {
    color: #175cd3;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.att-card__reason {
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.att-raised {
    color: var(--text-muted);
    font-size: 0.68rem;
}

.att-actions {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    margin-left: auto;
}

.att-actions form {
    display: contents;
    margin: 0;
}

.att-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.9rem;
    padding: 0.28rem 0.6rem;
    border: 1px solid #cfd6df;
    border-radius: 0.4rem;
    color: var(--text-primary);
    background: #fff;
    font-size: 0.72rem;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.att-action--secondary:hover {
    border-color: #153a5b;
    color: #153a5b;
}

.att-action--success {
    color: #fff;
    border-color: #067647;
    background: #067647;
}

.att-action--success:hover {
    background: #05603a;
    border-color: #05603a;
    color: #fff;
}

.att-action--danger {
    color: #b42318;
    border-color: #fecdca;
    background: #fef3f2;
}

.att-action--danger:hover {
    background: #fee4e2;
}

.att-empty {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1.5rem 1rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
}

.att-empty strong {
    color: var(--text-primary);
    font-size: 0.92rem;
}

.att-pagination {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.att-pagination .pagination {
    margin: 0;
    gap: 0.25rem;
}

.att-pagination .page-link {
    border-radius: 0.4rem;
    font-size: 0.8rem;
}

@media (min-width: 768px) {
    .att-page {
        padding: 2rem 1.5rem 3rem;
    }

    .att-heading {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: 1.25rem;
    }

    .att-heading h1 {
        font-size: clamp(1.25rem, 2vw, 1.5rem);
    }

    .att-heading .dock-form-submit {
        align-self: auto;
        flex: 0 0 auto;
    }

    .att-card {
        gap: 1rem;
        padding: 0.65rem 1rem 0.7rem;
    }

    .att-card__line {
        gap: 0.35rem 0.75rem;
    }

    .att-employee {
        max-width: 280px;
    }

    .att-actions {
        flex-direction: row;
        align-items: center;
    }
}

/* Attendance leave calculator, balance and employee report */
.att-form-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem 0.75rem;
    margin-bottom: 0.65rem;
    padding: 0.5rem 0.6rem;
    border-radius: 0.45rem;
    color: var(--text-secondary);
    background: #f8fafc;
    font-size: 0.72rem;
}

.att-form-note strong {
    color: #175cd3;
    font-size: 0.76rem;
}

.att-form-note strong.is-error {
    color: #b42318;
}

.att-balance-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    margin-top: 0.65rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.65rem;
    background: #fbfcfd;
}

.att-balance-panel--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 480px) {
    .att-balance-panel--four {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.att-balance-panel > div {
    display: grid;
    gap: 0.1rem;
}

.att-balance-panel span {
    color: var(--text-muted);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.att-balance-panel strong {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.att-balance-panel .is-negative strong {
    color: #b42318;
}

.att-balance-panel p {
    grid-column: 1 / -1;
    margin: 0.2rem 0 0;
    padding-top: 0.4rem;
    border-top: 1px solid var(--border-light);
    color: var(--text-muted);
    font-size: 0.66rem;
}

.att-report {
    margin-bottom: 0.85rem;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.att-report__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.att-report__title {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    background: #fbfcfd;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.att-report__grid {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) repeat(3, 3.25rem);
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--border-light);
}

.att-report__grid--balance {
    grid-template-columns: 7.25rem repeat(6, 3.15rem);
    width: max-content;
    min-width: 100%;
    gap: 0.35rem;
    padding-right: 1rem;
}

.att-report__grid--groups {
    padding-top: 0.35rem;
    padding-bottom: 0.15rem;
    border-bottom: 0;
    color: var(--text-muted);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.att-report__grid--groups .att-report__group {
    text-align: center;
    padding-bottom: 0.15rem;
    border-bottom: 1px solid var(--border-color);
}

.att-report__grid--groups .att-report__group--prior {
    grid-column: span 3;
}

.att-report__grid--groups .att-report__group--month {
    grid-column: span 2;
}

.att-report__grid--groups > :last-child {
    text-align: right;
}

.att-report__grid:last-child {
    border-bottom: 0;
}

.att-report__scroll > .att-report__grid:last-child {
    border-bottom: 1px solid var(--border-light);
}

.att-report__grid > :not(:first-child) {
    text-align: right;
}

.att-report__grid--header {
    color: var(--text-muted);
    background: #fdfdfe;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.att-report__employee {
    min-width: 0;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.att-report__grid strong {
    color: var(--text-primary);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
}

.att-report__grid strong.is-negative {
    color: #b42318;
}

.att-report__note {
    margin: 0;
    padding: 0.45rem 0.75rem 0.55rem;
    color: var(--text-muted);
    font-size: 0.64rem;
    line-height: 1.35;
    background: #fbfcfd;
}

.att-adjust {
    margin-top: 0.75rem;
}

.att-adjust__form {
    display: grid;
    gap: 0.55rem;
    padding: 0.65rem 0.75rem;
    grid-template-columns: 1fr;
}

.att-adjust__field {
    display: grid;
    gap: 0.2rem;
}

.att-adjust__field label {
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 600;
}

.att-adjust__field select,
.att-adjust__field input {
    width: 100%;
    min-height: 2rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.4rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.8rem;
}

.att-adjust__form .dock-form-submit {
    justify-self: start;
}

.att-list--adjustments {
    margin: 0;
    padding: 0 0.5rem 0.65rem;
    list-style: none;
}

.att-card--adjustment {
    border-left-color: #7a5af8;
}

.att-card--lop {
    border-left-color: #12b76a;
}

.att-card--encashment {
    border-left-color: #f79009;
}

.customers-status--adjustment,
.customers-status--lop {
    color: #027a48;
}

.customers-status--adjustment > span,
.customers-status--lop > span {
    background: #12b76a;
}

.customers-status--encashment {
    color: #b54708;
}

.customers-status--encashment > span {
    background: #f79009;
}

@media (min-width: 768px) {
    .att-report {
        margin-bottom: 1rem;
    }

    .att-report__grid {
        grid-template-columns: minmax(180px, 1fr) repeat(3, 5rem);
        padding: 0.42rem 1rem;
    }

    .att-report__grid--balance {
        grid-template-columns: minmax(9rem, 1.1fr) repeat(6, minmax(3.75rem, 4.75rem));
        width: 100%;
        min-width: 0;
        padding-right: 1rem;
    }

    .att-report__note {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .att-adjust__form {
        grid-template-columns: minmax(9rem, 1.1fr) minmax(8rem, 0.95fr) 5.5rem minmax(9rem, 1.2fr) auto;
        align-items: end;
        padding: 0.75rem 1rem;
    }

    .att-list--adjustments {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Leave request date + time grid */
.att-leave-grid {
    grid-template-columns: 1fr 1fr;
}

.att-reason-field {
    margin-top: 0.55rem;
}

.att-leave-grid .dock-field-hint {
    margin: 0.2rem 0 0;
    color: var(--text-muted);
    font-size: 0.66rem;
}

.att-leave-grid input:disabled,
.att-leave-grid select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: #f2f4f7;
}

@media (min-width: 576px) {
    .att-leave-grid {
        grid-template-columns: 1.2fr 0.8fr 1.2fr 0.8fr;
    }
}

/* Employees: list, badges, show page and delete modal */
.emp-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 1rem 0.85rem 2.5rem;
}

.emp-heading {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 0.85rem;
}

.emp-heading h1 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.emp-intro {
    margin: 0.1rem 0 0;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.emp-heading .dock-form-submit {
    align-self: flex-start;
}

.emp-panel {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.emp-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.emp-card {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem 0.75rem;
    border-bottom: 1px solid var(--border-light);
}

.emp-card:last-child {
    border-bottom: 0;
}

.emp-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.emp-card__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.55rem;
}

.emp-id {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.emp-name {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.84rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.emp-email {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.emp-salary {
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
}

.emp-joined {
    color: var(--text-muted);
    font-size: 0.68rem;
}

.emp-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.14rem 0.5rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: #475467;
    background: #f2f4f7;
}

.emp-badge--l1 { color: #6941c6; background: #f4ebff; }
.emp-badge--l2 { color: #175cd3; background: #eff8ff; }
.emp-badge--l3 { color: #067647; background: #ecfdf3; }
.emp-badge--l4 { color: #b54708; background: #fffaeb; }
.emp-badge--l5 { color: #475467; background: #f2f4f7; }

.emp-actions {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    margin-left: auto;
}

.emp-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 1.9rem;
    padding: 0.28rem 0.6rem;
    border: 1px solid #cfd6df;
    border-radius: 0.4rem;
    color: var(--text-primary);
    background: #fff;
    font-size: 0.72rem;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.emp-action:hover {
    border-color: #153a5b;
    color: #153a5b;
}

.emp-action--secondary {
    color: var(--text-secondary);
}

.emp-action--danger {
    color: #b42318;
    border-color: #fecdca;
    background: #fef3f2;
}

.emp-action--danger:hover {
    border-color: #b42318;
    color: #b42318;
    background: #fee4e2;
}

.emp-noaccess {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.emp-empty {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1.5rem 1rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
}

.emp-empty strong {
    color: var(--text-primary);
    font-size: 0.92rem;
}

/* Employee show page */
.emp-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem 1rem;
    margin: 0;
}

.emp-meta div {
    display: grid;
    gap: 0.12rem;
}

.emp-meta dt {
    color: var(--text-muted);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.emp-meta dd {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.82rem;
}

.emp-show__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-light);
}

.emp-show__actions .dock-form-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* Employee delete modal */
.emp-delete-modal .modal-body p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.emp-delete-modal__identity {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid #fecdca;
    border-radius: 0.55rem;
    background: #fef3f2;
}

.emp-delete-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    color: #b42318;
    background: #fee4e2;
    font-size: 1rem;
}

.emp-delete-modal__identity div {
    display: grid;
    gap: 0.05rem;
    min-width: 0;
}

.emp-delete-modal__identity strong {
    color: var(--text-primary);
    font-size: 0.84rem;
}

.emp-delete-modal__identity span:not(.emp-delete-modal__icon) {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 576px) {
    .emp-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .emp-page {
        padding: 2rem 1.5rem 3rem;
    }

    .emp-heading {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: 1.25rem;
    }

    .emp-heading h1 {
        font-size: clamp(1.25rem, 2vw, 1.5rem);
    }

    .emp-heading .dock-form-submit {
        align-self: auto;
    }

    .emp-card {
        gap: 1rem;
        padding: 0.65rem 1rem 0.7rem;
    }

    .emp-actions {
        flex-direction: row;
        align-items: center;
    }
}

/* Personal account / profile (read-only) */
.account-page .dock-form-heading {
    margin-bottom: 0.85rem;
}

.account-section-title {
    margin: 0 0 0.75rem;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.account-section-title--flush {
    margin-bottom: 0.15rem;
}

.account-panel-spaced {
    margin-top: 0.65rem;
}

.account-leaves-panel {
    display: grid;
    gap: 0.7rem;
}

.account-leaves-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
}

.account-leaves-intro {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.3;
}

.account-leaves-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.1rem;
    padding: 0.35rem 0.85rem;
    font-size: 0.82rem;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.account-leaves-body {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 0.55rem;
    background: var(--bg-primary);
}

.account-leaves-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    background: #fbfcfd;
}

.account-leaves-stat {
    display: grid;
    gap: 0.08rem;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--border-light);
}

.account-leaves-stat:nth-child(odd) {
    border-right: 1px solid var(--border-light);
}

.account-leaves-stat:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.account-leaves-stat span {
    color: var(--text-muted);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.account-leaves-stat strong {
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.account-leaves-stat--balance {
    background: rgba(23, 92, 211, 0.05);
}

.account-leaves-stat--balance strong {
    color: #175cd3;
}

.account-leaves-stats.is-negative .account-leaves-stat--balance {
    background: rgba(180, 35, 24, 0.05);
}

.account-leaves-stats.is-negative .account-leaves-stat--balance strong {
    color: #b42318;
}

.account-leaves-history {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.45rem 0.65rem;
    border-top: 1px solid var(--border-color);
    color: #175cd3;
    background: #fbfcfd;
    font-size: 0.74rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.account-leaves-history i {
    font-size: 0.75rem;
    opacity: 0.75;
    transition: transform 0.15s ease;
}

.account-leaves-history:hover {
    color: #0f4aa8;
    background: #f3f6f9;
}

.account-leaves-history:hover i {
    transform: translateX(2px);
    opacity: 1;
}

@media (min-width: 576px) {
    .account-leaves-head {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .account-leaves-cta {
        width: auto;
        flex-shrink: 0;
    }

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

    .account-leaves-stat {
        padding: 0.5rem 0.65rem;
        border-bottom: 0;
        border-right: 1px solid var(--border-light);
    }

    .account-leaves-stat:nth-child(odd) {
        border-right: 1px solid var(--border-light);
    }

    .account-leaves-stat:last-child {
        border-right: 0;
    }

    .account-leaves-stat strong {
        font-size: 0.92rem;
    }

    .account-leaves-history {
        padding: 0.5rem 0.65rem;
    }
}

/* Reports / analytics pages */
.rpt-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.1rem 0.9rem 2.75rem;
}

.rpt-page--wide {
    max-width: 100%;
}

.rpt-page--revcost {
    max-width: 820px;
}

.rpt-revcost-legend {
    margin-bottom: 0.85rem;
}

.rpt-revcost-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.rpt-revcost-count {
    flex-shrink: 0;
    min-width: 1.4rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    color: var(--text-muted);
    background: #eef2f6;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
}

.rpt-table--revcost {
    width: 100%;
}

.rpt-table--revcost th,
.rpt-table--revcost td {
    padding: 0.55rem 0.75rem;
    vertical-align: middle;
}

.rpt-table--revcost th.rpt-revcost-col--name,
.rpt-table--revcost td.rpt-revcost-col--name,
.rpt-table--revcost th.rpt-revcost-col--cat,
.rpt-table--revcost td.rpt-revcost-col--cat {
    text-align: left;
}

.rpt-table--revcost .rpt-revcost-col--name {
    min-width: 8rem;
    max-width: 16rem;
    color: var(--text-primary);
    font-weight: 650;
}

.rpt-table--revcost .rpt-revcost-col--cat {
    min-width: 7rem;
    color: var(--text-secondary);
}

.rpt-table--revcost tbody tr:hover td {
    background: #f8fafc;
}

.rpt-revcost-ratio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.4rem;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.rpt-revcost-ratio.rpt-heat--good,
.rpt-revcost-ratio.rpt-heat--warn,
.rpt-revcost-ratio.rpt-heat--bad {
    border: 1px solid transparent;
}

.rpt-revcost-ratio.rpt-heat--good {
    border-color: #abefc6;
}

.rpt-revcost-ratio.rpt-heat--warn {
    border-color: #fedf89;
}

.rpt-revcost-ratio.rpt-heat--bad {
    border-color: #fecdca;
}

.rpt-heading {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 1rem;
}

.rpt-heading h1 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.rpt-intro {
    margin: 0.1rem 0 0;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.rpt-heading__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.rpt-panel {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 0.9rem;
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.rpt-panel--spaced {
    margin-top: 0.75rem;
}

.rpt-panel--weekly {
    margin-bottom: 0.85rem;
    border-radius: 0.55rem;
    box-shadow: none;
}

.rpt-panel--weekly .rpt-panel__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0.55rem;
}

.rpt-panel__title-note {
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.rpt-table--weekly {
    width: auto;
    min-width: 100%;
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.rpt-table--weekly th,
.rpt-table--weekly td {
    padding: 0.22rem 0.4rem;
    white-space: nowrap;
}

.rpt-table--weekly thead th {
    padding: 0.28rem 0.4rem;
    font-size: 0.6rem;
    letter-spacing: 0.04em;
}

.rpt-table--weekly td:not(:first-child),
.rpt-table--weekly th:not(:first-child) {
    text-align: right;
}

.rpt-panel__title {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    background: linear-gradient(180deg, #fbfcfd 0%, #f8fafc 100%);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rpt-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.rpt-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 0.76rem;
}

.rpt-table--dense {
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
}

.rpt-table--inv-perf {
    table-layout: fixed;
    width: 48rem;
    min-width: 100%;
}

.rpt-table--inv-perf col:nth-child(1) {
    width: 2.75rem;
}

.rpt-table--inv-perf col:nth-child(2) {
    width: 6rem;
}

.rpt-table--inv-perf col:nth-child(n+3):nth-child(-n+14) {
    width: 2.1rem;
}

.rpt-table--inv-perf col:nth-child(n+15) {
    width: 2.35rem;
}

.rpt-table--inv-perf .rpt-sticky {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 0;
    max-width: 2.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
    font-weight: 650;
    color: var(--text-secondary);
    background: var(--bg-primary, #fff);
}

.rpt-table--inv-perf .rpt-sticky--2 {
    left: 2.75rem;
    max-width: 6rem;
    box-shadow: 2px 0 4px rgba(16, 24, 40, 0.06);
}

.rpt-table--inv-perf thead th.rpt-sticky {
    z-index: 3;
    background: #f8fafc;
}

.rpt-table--inv-perf thead th.rpt-sticky--2 {
    z-index: 3;
}

.rpt-table--inv-perf tr.rpt-heat--good .rpt-sticky {
    background: #ecfdf3;
}

.rpt-table--inv-perf tr.rpt-heat--warn .rpt-sticky {
    background: #fffaeb;
}

.rpt-table--inv-perf tr.rpt-heat--bad .rpt-sticky {
    background: #fef3f2;
}

.rpt-table--inv-perf th,
.rpt-table--inv-perf td {
    padding: 0.32rem 0.35rem;
}

.rpt-table th,
.rpt-table td {
    padding: 0.52rem 0.62rem;
    border-bottom: 1px solid var(--border-light);
    text-align: right;
    white-space: nowrap;
    vertical-align: middle;
}

.rpt-table th:first-child,
.rpt-table td:first-child,
.rpt-table th:nth-child(2),
.rpt-table td:nth-child(2),
.rpt-table th:nth-child(3),
.rpt-table td.rpt-cell--name {
    text-align: left;
}

.rpt-table thead th {
    position: static;
    color: var(--text-muted);
    background: #f8fafc;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.rpt-table tbody tr:nth-child(even) td {
    background: #fcfcfd;
}

.rpt-table tbody tr:hover td {
    background: #f8fbff;
}

.rpt-table tbody tr:last-child td {
    border-bottom: 0;
}

.rpt-row--current td {
    background: #fff7e6 !important;
    color: var(--text-primary);
    font-weight: 600;
}

.rpt-sticky {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #f8fafc;
    font-weight: 650;
    color: var(--text-secondary);
}

.rpt-sticky--2 {
    left: 3.25rem;
}

.rpt-sticky--3 {
    left: 6.5rem;
}

.rpt-cell--name {
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rpt-empty-cell {
    padding: 1.25rem !important;
    color: var(--text-muted);
    text-align: center !important;
}

.rpt-footnote {
    margin: 0;
    padding: 0.45rem 0.85rem 0.65rem;
    color: var(--text-muted);
    font-size: 0.66rem;
}

.rpt-directory {
    display: grid;
    gap: 0.8rem;
    margin-top: 0.95rem;
}

.rpt-directory__group {
    padding: 1rem 1rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 0.9rem;
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.rpt-directory__group h2 {
    margin: 0 0 0.75rem;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.rpt-directory__group ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rpt-directory__group li + li {
    margin-top: 0.35rem;
}

.rpt-directory__group a {
    color: var(--primary-color, #2c3e50);
    font-size: 0.92rem;
    text-decoration: none;
}

.rpt-directory__group a:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

.rpt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.55rem;
}

.rpt-panel .rpt-legend {
    margin: 0;
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid var(--border-light);
}

.rpt-legend__item {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 650;
    white-space: nowrap;
}

/* Heat map tones — stronger separation for inventory intelligence */
.rpt-heat--good,
tr.rpt-heat--good td {
    color: #027a48;
    background: #d1fadf;
}

.rpt-heat--warn,
tr.rpt-heat--warn td {
    color: #93370d;
    background: #fef0c7;
}

.rpt-heat--bad,
tr.rpt-heat--bad td {
    color: #912018;
    background: #fee4e2;
}

.rpt-legend__item.rpt-heat--good,
.rpt-legend__item.rpt-heat--warn,
.rpt-legend__item.rpt-heat--bad {
    border: 1px solid transparent;
}

.rpt-legend__item.rpt-heat--good {
    border-color: #6ce9a6;
}

.rpt-legend__item.rpt-heat--warn {
    border-color: #fec84b;
}

.rpt-legend__item.rpt-heat--bad {
    border-color: #fda29b;
}

/* Inventory intelligence layout */
.inv-intel__pulse {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    margin-bottom: 0.9rem;
}

.inv-intel__kpi {
    display: grid;
    gap: 0.12rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 0.7rem;
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.inv-intel__kpi span {
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.inv-intel__kpi strong {
    color: var(--text-primary);
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.inv-intel__kpi em {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-style: normal;
}

.inv-intel__sku-split {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    list-style: none;
    margin: 0.15rem 0 0;
    padding: 0;
}

.inv-intel__sku-split li {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}

.inv-intel__sku-split .inv-intel__sku-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 0.25rem;
    font-size: 0.62rem;
    font-weight: 700;
}

.inv-intel__sku-code--a { color: #027a48; background: #dcfae6; }
.inv-intel__sku-code--b { color: #175cd3; background: #eff8ff; }
.inv-intel__sku-code--z { color: #b42318; background: #fee4e2; }
.inv-intel__sku-code--other { color: #667085; background: #f2f4f7; }

.inv-intel__sku-split strong {
    font-size: 0.78rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.inv-intel__kpi.is-good > strong { color: #027a48; }
.inv-intel__kpi.is-avg > strong { color: #93370d; }
.inv-intel__kpi.is-bad > strong { color: #912018; }

.inv-intel__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.inv-intel__card {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.inv-intel__card header {
    padding: 0.65rem 0.8rem 0.5rem;
    border-bottom: 1px solid var(--border-light);
}

.inv-intel__card h2 {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
}

.inv-intel__card header p {
    margin: 0.2rem 0 0;
    color: var(--text-muted);
    font-size: 0.66rem;
    line-height: 1.35;
}

.inv-intel__card--buy header {
    background: #ecfdf3;
}

.inv-intel__card--buy h2 { color: #027a48; }

.inv-intel__card--watch header {
    background: #fffaeb;
}

.inv-intel__card--watch h2 { color: #93370d; }

.inv-intel__card--watch ul {
    max-height: 28rem;
    overflow-y: auto;
}

.inv-intel__card--exit header {
    background: #fef3f2;
}

.inv-intel__card--exit h2 { color: #912018; }

.inv-intel__card ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.inv-intel__card li {
    display: grid;
    gap: 0.1rem;
    padding: 0.45rem 0.8rem;
    border-bottom: 1px solid var(--border-light);
}

.inv-intel__card li:last-child {
    border-bottom: 0;
}

.inv-intel__name {
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 650;
}

.inv-intel__meta {
    color: var(--text-muted);
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
}

.inv-intel__empty {
    margin: 0;
    padding: 0.75rem 0.8rem;
    color: var(--text-muted);
    font-size: 0.72rem;
}

.rpt-table--inv-score {
    min-width: 52rem;
}

.rpt-legend__hint {
    color: var(--text-muted);
    font-size: 0.62rem;
}

.rpt-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.inv-intel__dot {
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.inv-intel__dot--good { background: #12b76a; }
.inv-intel__dot--avg { background: #f79009; }
.inv-intel__dot--poor { background: #f04438; }

.inv-intel__new {
    display: inline-block;
    margin-left: 0.25rem;
    padding: 0.05rem 0.28rem;
    border-radius: 0.25rem;
    color: #175cd3;
    background: #eff8ff;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
}

.competition-table {
    min-width: 28rem;
}

.competition-table td:first-child,
.competition-table th:first-child {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.competition-table a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 650;
}

.competition-table a:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

.competition-more {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0 0.15rem;
}

.competition-more__meta {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.inv-intel__verdict {
    display: inline-block;
    min-width: 2.6rem;
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
    line-height: 1.2;
}

.inv-intel__verdict--good {
    color: #027a48;
    background: #dcfae6;
}

.inv-intel__verdict--warn {
    color: #b54708;
    background: #fef0c7;
}

.inv-intel__verdict--bad {
    color: #b42318;
    background: #fee4e2;
}

.inv-intel__row--sold td {
    color: var(--text-muted);
}

.inv-intel__row--sold .rpt-sticky {
    color: var(--text-muted);
}

.rpt-table--inv-score .rpt-sticky {
    position: sticky;
    left: 0;
    z-index: 1;
    max-width: 4.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--bg-primary, #fff);
}

.rpt-table--inv-score .rpt-sticky--2 {
    left: 4.5rem;
    max-width: 9rem;
    box-shadow: 2px 0 4px rgba(16, 24, 40, 0.06);
}

.rpt-table--inv-score thead th.rpt-sticky,
.rpt-table--inv-score thead th.rpt-sticky--2 {
    z-index: 3;
    background: #f8fafc;
}

.rpt-table--inv-score tbody tr:nth-child(even) td {
    background: #fcfcfd;
}

.rpt-table--inv-score tbody tr:nth-child(even) .rpt-sticky {
    background: #fcfcfd;
}

.rpt-table--inv-score tbody tr:hover td,
.rpt-table--inv-score tbody tr:hover .rpt-sticky {
    background: #f8fafc;
}

@media (min-width: 720px) {
    .inv-intel__pulse {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inv-intel__actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .inv-intel__pulse {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.rpt-heat--income {
    color: #b54708;
    background: #fffaeb;
}

.rpt-heat--expense {
    color: #b42318;
    background: #fef3f2;
}

.rpt-heat--invest {
    color: #475467;
    background: #f2f4f7;
}

.rpt-heat--salary {
    color: #067647;
    background: #ecfdf3;
}

.rpt-heat--finance {
    color: #b54708;
    background: #fffaeb;
}

.rpt-directory {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    margin-top: 0.85rem;
}

.rpt-directory__group {
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.rpt-directory__group h2 {
    margin: 0 0 0.45rem;
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.rpt-directory__group ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rpt-directory__group li + li {
    border-top: 1px solid var(--border-light);
}

.rpt-directory__group a {
    display: block;
    padding: 0.45rem 0;
    color: #175cd3;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
}

.rpt-directory__group a:hover {
    color: #0f4a9c;
}

@media (min-width: 768px) {
    .rpt-page {
        padding: 2rem 1.5rem 3rem;
    }

    .rpt-heading {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: 1.15rem;
    }

    .rpt-heading h1 {
        font-size: clamp(1.25rem, 2vw, 1.5rem);
    }

    .rpt-directory {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.85rem;
    }

    .rpt-table th,
    .rpt-table td {
        padding: 0.42rem 0.55rem;
    }
}

/* Tickets: list, badges, show, quick update */
.tkt-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 1rem 0.85rem 2.5rem;
}

.tkt-heading {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 0.85rem;
}

.tkt-heading h1 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.tkt-intro {
    margin: 0.1rem 0 0;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.tkt-heading .dock-form-submit {
    align-self: flex-start;
}

.tkt-panel {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.tkt-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tkt-card {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem 0.75rem;
    border-bottom: 1px solid var(--border-light);
    border-left: 3px solid #c0c6d0;
}

.tkt-card:last-child {
    border-bottom: 0;
}

.tkt-card--open { border-left-color: #f04438; }
.tkt-card--in-progress { border-left-color: #fdb022; }
.tkt-card--resolved { border-left-color: #12b76a; }
.tkt-card--closed { border-left-color: #98a2b3; }

.tkt-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.tkt-card__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.45rem;
}

.tkt-id {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.tkt-title {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tkt-title:hover {
    color: #175cd3;
}

.tkt-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-secondary);
    font-size: 0.74rem;
}

.tkt-card__meta a {
    color: #175cd3;
    text-decoration: none;
}

.tkt-raised {
    color: var(--text-muted);
    font-size: 0.68rem;
}

.tkt-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.tkt-badge--status-open { color: #b42318; background: #fef3f2; }
.tkt-badge--status-in-progress { color: #b54708; background: #fffaeb; }
.tkt-badge--status-resolved { color: #067647; background: #ecfdf3; }
.tkt-badge--status-closed { color: #475467; background: #f2f4f7; }

.tkt-badge--priority-critical { color: #b42318; background: #fef3f2; }
.tkt-badge--priority-high { color: #b54708; background: #fffaeb; }
.tkt-badge--priority-medium { color: #175cd3; background: #eff8ff; }
.tkt-badge--priority-low { color: #475467; background: #f2f4f7; }

.tkt-actions {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    margin-left: auto;
}

.tkt-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 1.9rem;
    padding: 0.28rem 0.6rem;
    border: 1px solid #cfd6df;
    border-radius: 0.4rem;
    color: var(--text-primary);
    background: #fff;
    font-size: 0.72rem;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.tkt-action:hover {
    border-color: #153a5b;
    color: #153a5b;
}

.tkt-action--secondary {
    color: var(--text-secondary);
}

.tkt-empty {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1.5rem 1rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
}

.tkt-empty strong {
    color: var(--text-primary);
    font-size: 0.92rem;
}

.tkt-pagination {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.tkt-pagination .pagination {
    margin: 0;
    gap: 0.25rem;
}

.tkt-pagination .page-link {
    border-radius: 0.4rem;
    font-size: 0.8rem;
}

.tkt-context {
    display: grid;
    gap: 0.15rem;
    margin-bottom: 0.65rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid #b2ddff;
    border-radius: 0.55rem;
    background: #eff8ff;
}

.tkt-context strong {
    color: #175cd3;
    font-size: 0.78rem;
}

.tkt-context span {
    color: var(--text-secondary);
    font-size: 0.72rem;
}

.tkt-show__heading-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.tkt-show__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.tkt-show__block {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-light);
}

.tkt-show__label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--text-muted);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tkt-show__block p {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.84rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.tkt-show__links {
    margin-top: 0.85rem;
}

.tkt-quick {
    margin-top: 0.65rem;
}

.tkt-quick__title {
    margin: 0 0 0.75rem;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .tkt-page {
        padding: 2rem 1.5rem 3rem;
    }

    .tkt-heading {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: 1.25rem;
    }

    .tkt-heading h1 {
        font-size: clamp(1.25rem, 2vw, 1.5rem);
    }

    .tkt-heading .dock-form-submit {
        align-self: auto;
    }

    .tkt-card {
        gap: 1rem;
        padding: 0.65rem 1rem 0.7rem;
    }

    .tkt-actions {
        flex-direction: row;
        align-items: center;
    }
}

/* Rental KPI dashboard */
.dash-section {
    margin-bottom: 1.15rem;
}

.dash-section__title {
    margin: 0 0 0.32rem;
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dash-section__hint {
    margin: 0 0 0.7rem;
    color: var(--text-muted);
    font-size: 0.72rem;
}

.dash-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
}

.dash-card {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    padding: 0.78rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 0.9rem;
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.dash-card--link {
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dash-card--link:hover {
    border-color: #98a2b3;
    box-shadow: var(--shadow-md, 0 4px 12px rgba(16, 24, 40, 0.08));
}

.dash-card__label {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.dash-card__value {
    color: var(--text-primary);
    font-size: 1.42rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.12;
}

.dash-card__value-note {
    margin-left: 0.15rem;
    color: var(--text-muted);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0;
}

.dash-card__value-note--units {
    margin-left: 0.45rem;
}

.dash-card__meta {
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.35;
}

.dash-fleet-panel {
    margin-top: 0.65rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 0.65rem;
    background: #fbfcfd;
}

.dash-fleet-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.35rem;
}

.dash-fleet-panel__intro {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.dash-fleet-panel__title {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.dash-fleet-panel__link {
    color: var(--inventory-navy, #153a5b);
    font-size: 0.72rem;
    font-weight: 650;
    text-decoration: none;
}

.dash-fleet-panel__link:hover {
    text-decoration: underline;
}

.dash-fleet-panel__hint {
    margin: 0 0 0.55rem;
    color: var(--text-muted);
    font-size: 0.68rem;
}

.dash-fleet-panel__total {
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.4;
    text-align: right;
}

.dash-fleet-panel__table-wrap {
    overflow-x: auto;
}

.dash-fleet-panel__table {
    display: grid;
    gap: 0.2rem;
    min-width: 38rem;
}

.dash-fleet-panel__row {
    display: grid;
    grid-template-columns: 2rem minmax(7rem, 1.15fr) 6.75rem 3.25rem 6.75rem 3.25rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0;
    font-size: 0.78rem;
}

.dash-fleet-panel__table--rev {
    min-width: 52rem;
}

.dash-fleet-panel__table--rev .dash-fleet-panel__row {
    grid-template-columns: 2rem minmax(7rem, 1.1fr) 6.25rem 3rem 6.25rem 3rem 6.5rem 4.5rem;
}

.dash-fleet-panel__amount--recovery.is-good { color: #067647; }
.dash-fleet-panel__amount--recovery.is-avg { color: #b54708; }
.dash-fleet-panel__amount--recovery.is-bad { color: #b42318; }

.dash-fleet-panel__row--head {
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-muted);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dash-fleet-panel__row--head span:nth-child(n+3) {
    text-align: right;
}

.dash-fleet-panel__amount--rev {
    color: var(--text-primary);
    font-weight: 700;
}

.inv-intel__sku-panel {
    margin: 0 0 1rem;
}

.inv-intel__brand-panel {
    margin: 0 0 1rem;
}

.dash-fleet-panel__table--brand {
    min-width: 28rem;
}

.dash-fleet-panel__table--brand .dash-fleet-panel__row {
    grid-template-columns: minmax(8rem, 1.4fr) 7rem 7rem 4.5rem;
}

.dash-fleet-panel__table--brand .dash-fleet-panel__row--head span:nth-child(n+2),
.dash-fleet-panel__table--brand .dash-fleet-panel__amount {
    text-align: right;
}

.dash-fleet-panel__code {
    display: grid;
    width: 1.65rem;
    height: 1.65rem;
    place-items: center;
    border-radius: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.dash-fleet-panel__code--a {
    color: #067647;
    background: #ecfdf3;
}

.dash-fleet-panel__code--b {
    color: #175cd3;
    background: #eff8ff;
}

.dash-fleet-panel__code--z {
    color: #b54708;
    background: #fff6ed;
}

.dash-fleet-panel__code--none {
    color: #667085;
    background: #f2f4f7;
}

.dash-fleet-panel__name {
    color: var(--text-secondary);
    min-width: 0;
}

.dash-fleet-panel__amount {
    color: var(--text-primary);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.dash-fleet-panel__units {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.dash-fleet-panel__amount--sale {
    color: #067647;
}

@media (max-width: 639px) {
    .dash-fleet-panel__head {
        flex-direction: column;
    }

    .dash-fleet-panel__total {
        text-align: left;
    }
}

.dash-card--placeholder {
    border-style: dashed;
    background: #fafafa;
    box-shadow: none;
}

.dash-card--placeholder .dash-card__value {
    color: #d0d5dd;
}

.sale-share {
    display: grid;
    gap: 1.25rem;
}

.sale-share__grid {
    display: grid;
    gap: 1rem;
}

@media (min-width: 900px) {
    .sale-share__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sale-share__card--downloads {
        grid-column: 1 / -1;
    }
}

.sale-share__card,
.sale-share__caption {
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    background: #fff;
}

.sale-share__card h2,
.sale-share__caption h2 {
    margin: 0 0 0.45rem;
    color: var(--text, #111827);
    font-size: 1rem;
    font-weight: 700;
}

.sale-share__card p {
    margin: 0 0 0.85rem;
    color: var(--text-muted, #6b7280);
    font-size: 0.88rem;
    line-height: 1.45;
}

.sale-share__preview {
    display: block;
    width: 100%;
    margin-top: 1rem;
    border-radius: 6px;
    border: 1px solid var(--border, #e5e7eb);
}

.sale-share__preview--portrait {
    max-width: 220px;
}

.sale-share__preview--instagram {
    max-width: 200px;
}

.sale-share__preview--x {
    max-width: 280px;
}

.sale-share__downloads {
    display: grid;
    gap: 1rem;
}

@media (min-width: 640px) {
    .sale-share__downloads {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.sale-share__download h3 {
    margin: 0 0 0.35rem;
    color: var(--text, #111827);
    font-size: 0.92rem;
    font-weight: 700;
}

.sale-share__download p {
    margin: 0 0 0.85rem;
    color: var(--text-muted, #6b7280);
    font-size: 0.88rem;
    line-height: 1.45;
}

.sale-share__caption-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.sale-share__textarea {
    display: block;
    width: 100%;
    min-height: 7.5rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    background: #fafafa;
    color: var(--text, #111827);
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.45;
    resize: vertical;
}

.sale-share__clipboard-buffer {
    position: fixed;
    top: 0;
    left: -9999px;
}

@media (min-width: 640px) {
    .dash-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .dash-grid--customers {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

@media (min-width: 900px) {
    .dash-grid,
    .dash-grid--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Site footer */
.site-footer {
    background: #29455d;
    color: #f7f5f3;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -2px 8px rgba(44, 62, 80, 0.08);
}

.site-footer__logo {
    max-width: 120px;
}

.site-footer__legal {
    background: #827f7e;
    color: #fff;
    border-radius: 0 0 8px 8px;
}

.site-footer__legal-text {
    color: #fff;
}

/* Customer verify */
.verify-preview-img {
    max-height: 340px;
    object-fit: contain;
    cursor: zoom-in;
}

.verify-preview-img--id {
    max-height: 180px;
}

.verify-zoom-img {
    max-height: 70vh;
    object-fit: contain;
}

.verify-submit-btn {
    background-color: #b49a7a;
    color: #fff;
}

.verify-submit-btn:hover,
.verify-submit-btn:focus {
    background-color: #a08868;
    color: #fff;
}

.verify-doc-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 180px;
    padding: 1rem 0.75rem;
}

.verify-doc-card__icon {
    font-size: 2rem;
    color: #667085;
}

.verify-doc-card__name {
    margin: 0;
    max-width: 100%;
    overflow: hidden;
    color: #344054;
    font-size: 0.78rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Active-order products pagination */
.pagination-custom .page-link {
    padding: 0.75rem 1rem;
    font-size: 1.1rem;
}

/* Theme demo swatches */
.theme-swatch--light-gray { background-color: #f8f9fa; }
.theme-swatch--medium-gray { background-color: #6c757d; }
.theme-swatch--dark-gray { background-color: #343a40; }
.theme-swatch--light-beige { background-color: #f4f1eb; }
.theme-swatch--beige { background-color: #e8e2d5; }
.theme-swatch--brand-blue { background-color: #3b82c7; }
.theme-swatch--brand-orange { background-color: #ff6b35; }

/* Bank account page */
.bank-page {
    width: 100%;
    max-width: 28rem;
    margin: 0 auto;
    padding: 1rem 0.75rem 2.25rem;
    color: var(--text-primary);
}

.bank-page a[x-apple-data-detectors],
.bank-page a[href^="tel"] {
    color: inherit !important;
    text-decoration: none !important;
    font-weight: inherit !important;
    font-style: inherit !important;
}

.bank-heading {
    margin-bottom: 0.85rem;
}

.bank-heading h1 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.bank-intro {
    margin: 0.25rem 0 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
}

.bank-panel {
    margin-bottom: 0.7rem;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.bank-panel__head {
    padding: 0.65rem 0.9rem 0.55rem;
}

.bank-block__title {
    margin: 0;
    color: #667085;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bank-panel--upi .bank-panel__head {
    padding-bottom: 0.15rem;
}

.bank-qr {
    margin: 0 0 0.15rem;
    padding: 0.15rem 0.9rem 0.55rem;
    text-align: center;
}

.bank-qr__trigger {
    appearance: none;
    display: inline-block;
    margin: 0;
    padding: 0.45rem;
    border: 1px solid var(--border-color);
    border-radius: 0.65rem;
    background: #fff;
    cursor: zoom-in;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bank-qr__trigger:hover,
.bank-qr__trigger:focus-visible {
    border-color: #c5ccd6;
    box-shadow: var(--shadow-sm);
    outline: none;
}

.bank-qr__trigger img,
.bank-qr img {
    display: block;
    max-width: 148px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    border: 0;
    background: #fff;
}

.bank-qr figcaption {
    margin-top: 0.4rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.3;
}

.bank-rows {
    display: flex;
    flex-direction: column;
}

.bank-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.9rem;
    border-top: 1px solid var(--border-light);
}

.bank-panel--upi > .bank-row {
    border-top: 1px solid var(--border-light);
}

.bank-row__body {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-width: 0;
    flex: 1;
}

.bank-row__label {
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.bank-row__value {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.bank-row__value--mono {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.bank-row__value--muted {
    color: var(--text-secondary);
    font-weight: 550;
    font-size: 0.84rem;
}

.bank-row--meta {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.bank-row--meta .bank-row__value {
    font-size: 0.84rem;
    font-weight: 600;
}

.bank-copy {
    appearance: none;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 2.1rem;
    min-height: 2.1rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: 0.45rem;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bank-copy i {
    font-size: 0.92rem;
    line-height: 1;
}

.bank-copy__label {
    display: none;
}

.bank-copy:hover,
.bank-copy:focus-visible {
    border-color: #c5ccd6;
    background: #fff;
    color: var(--text-primary);
    outline: none;
}

.bank-copy.is-copied {
    color: #067647;
    border-color: #abefc6;
    background: #ecfdf3;
}

.bank-note {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0;
    padding: 0.7rem 0.9rem 0.85rem;
    border-top: 1px solid var(--border-light);
    background: #faf8f6;
    color: #6b5b4f;
    font-size: 0.76rem;
    font-weight: 550;
    line-height: 1.45;
}

.bank-note i {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: #9c8b7a;
    font-size: 0.9rem;
}

.bank-qr-modal-dialog {
    margin: 0.5rem;
    max-width: calc(100vw - 1rem);
}

.bank-qr-modal-dialog .modal-content {
    max-height: calc(100dvh - 1rem);
}

.bank-qr-modal-body {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-secondary);
    overflow: auto;
}

.bank-qr-modal-body img {
    display: block;
    max-width: 100%;
    max-height: calc(100dvh - 6.5rem);
    width: auto;
    height: auto;
    object-fit: contain;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background: #fff;
}

@supports not (height: 100dvh) {
    .bank-qr-modal-dialog .modal-content {
        max-height: calc(100vh - 1rem);
    }

    .bank-qr-modal-body img {
        max-height: calc(100vh - 6.5rem);
    }
}

@media (min-width: 768px) {
    .bank-page {
        max-width: 32rem;
        padding: 1.75rem 1.5rem 3rem;
    }

    .bank-heading h1 {
        font-size: clamp(1.25rem, 2vw, 1.5rem);
    }

    .bank-panel__head,
    .bank-row,
    .bank-note {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }

    .bank-qr {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }

    .bank-qr__trigger img,
    .bank-qr img {
        max-width: 168px;
    }

    .bank-copy {
        min-width: auto;
        padding: 0.35rem 0.65rem;
    }

    .bank-copy__label {
        display: inline;
    }
}

/* Control hub */
.ctrl-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
}

.ctrl-card {
    display: grid;
    gap: 0.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ctrl-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 2px 10px rgba(23, 92, 211, 0.08);
    color: inherit;
}

.ctrl-card__eyebrow {
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ctrl-card__title {
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 700;
}

.ctrl-card__text {
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .ctrl-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================================
   Mobile-first chrome — bottom tabs, compact header, sleek buttons
   ========================================================================== */

html {
    overflow-x: hidden;
}

body.dock-has-mobile-nav {
    padding-bottom: calc(3.85rem + env(safe-area-inset-bottom, 0px));
}

body.dock-has-mobile-nav .dock-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: 0.35rem 0;
    padding-top: max(0.35rem, env(safe-area-inset-top, 0px));
}

body.dock-has-mobile-nav .dock-topbar .container {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
}

body.dock-has-mobile-nav .navbar-brand {
    font-size: 1.1rem;
    padding-top: 0;
    padding-bottom: 0;
}

body.dock-has-mobile-nav .navbar-brand img {
    width: auto;
    height: 28px;
}

body.dock-has-mobile-nav .navbar-toggler,
body.dock-has-mobile-nav .navbar-collapse {
    display: none !important;
}

body.dock-has-mobile-nav .site-footer--app,
body.dock-has-mobile-nav .footer {
    display: none;
}

@media (max-width: 991.98px) {
    #wrap.container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        padding-bottom: 0.5rem;
    }
}

.dock-bottom-nav {
    display: flex;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1056;
    align-items: stretch;
    justify-content: space-around;
    min-height: 3.55rem;
    padding: 0.2rem 0.15rem calc(0.28rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #e4e7ec;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -8px 24px rgba(16, 24, 40, 0.08);
    backdrop-filter: blur(12px);
}

.dock-bottom-nav__item {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    min-width: 0;
    min-height: 3.1rem;
    margin: 0 0.1rem;
    padding: 0.28rem 0.15rem;
    border: 0;
    border-radius: 0.7rem;
    background: transparent;
    color: #667085;
    font-family: inherit;
    font-size: 0.62rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    cursor: pointer;
}

.dock-bottom-nav__item i {
    font-size: 1.15rem;
    line-height: 1;
}

.dock-bottom-nav__item span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dock-bottom-nav__item.is-active {
    color: #153a5b;
    background: #eef4fa;
}

.offcanvas.offcanvas-bottom.dock-more-sheet {
    z-index: 1055;
    height: auto !important;
    max-height: calc(100dvh - 3.55rem - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    bottom: calc(3.55rem + env(safe-area-inset-bottom, 0px)) !important;
}

@supports not (height: 100dvh) {
    .offcanvas.offcanvas-bottom.dock-more-sheet {
        max-height: calc(100vh - 3.55rem - env(safe-area-inset-bottom, 0px));
    }
}

.dock-more-sheet .offcanvas-header {
    flex-shrink: 0;
    padding: 0.85rem 1rem 0.35rem;
}

.dock-more-sheet .offcanvas-title {
    font-size: 1rem;
    font-weight: 700;
}

.dock-more-sheet .offcanvas-body {
    flex-grow: 0;
    padding: 0.35rem 0.85rem 1rem;
    overflow-y: visible;
}

.dock-more-sheet__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.dock-more-sheet__link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    min-height: 2.55rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid #e4e7ec;
    border-radius: 999px;
    background: #fff;
    color: #344054;
    font-size: 0.82rem;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    font-family: inherit;
}

.dock-more-sheet__link i {
    color: #667085;
    font-size: 1rem;
}

.dock-more-sheet__link.is-active {
    border-color: #153a5b;
    background: #eef4fa;
    color: #153a5b;
}

.dock-more-sheet__link--logout {
    color: #b42318;
    border-color: #fecdca;
    background: #fef3f2;
}

.dock-more-sheet__link--logout i {
    color: #f04438;
}

@media (max-width: 767.98px) {
    .btn:not(.btn-close):not(.navbar-toggler) {
        min-height: 2.2rem;
        padding: 0.35rem 0.9rem;
        border-radius: 999px;
        font-size: 0.8rem;
        font-weight: 600;
        box-shadow: none;
        transform: none !important;
    }

    .btn-sm:not(.btn-close) {
        min-height: 1.95rem;
        padding: 0.25rem 0.75rem;
        font-size: 0.74rem;
    }

    .btn-lg {
        min-height: 2.45rem;
        padding: 0.45rem 1.05rem;
        font-size: 0.88rem;
    }

    .customers-action,
    .orders-action,
    .feedback-action,
    .customers-filter-button,
    .inventory-filter-button,
    .inventory-action-button,
    .inventory-action-button--compact,
    .inventory-approve-button,
    .inventory-reject-button,
    .inventory-show-more-button,
    .dock-form-submit,
    .dock-form-cancel,
    .bank-copy,
    .verify-submit-btn,
    .trx-create__btn,
    button.customers-activated--action {
        border-radius: 999px;
        box-shadow: none;
        transform: none !important;
    }

    .customers-action {
        width: auto;
        min-height: 2.05rem;
        padding: 0.28rem 0.8rem;
        font-size: 0.74rem;
    }

    .orders-action {
        min-height: 2.05rem;
        padding: 0.3rem 0.8rem;
        font-size: 0.76rem;
    }

    .customers-filter-button,
    .inventory-filter-button {
        min-height: 2.2rem;
        padding: 0.35rem 0.95rem;
        font-size: 0.8rem;
        font-weight: 650;
    }

    .dock-flash-close {
        border-radius: 999px;
    }
}

@media (min-width: 992px) {
    body.dock-has-mobile-nav {
        padding-bottom: 0;
    }

    body.dock-has-mobile-nav .dock-topbar {
        position: relative;
        padding: 1rem 0;
    }

    body.dock-has-mobile-nav .navbar-brand {
        font-size: 1.5rem;
    }

    body.dock-has-mobile-nav .navbar-brand img {
        width: 141px;
        height: 45px;
    }

    body.dock-has-mobile-nav .navbar-toggler {
        display: none !important;
    }

    body.dock-has-mobile-nav .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }

    body.dock-has-mobile-nav .site-footer--app,
    body.dock-has-mobile-nav .footer {
        display: block;
    }

    .dock-bottom-nav,
    .dock-more-sheet {
        display: none !important;
    }
}

@media print {
    .dock-bottom-nav,
    .dock-more-sheet {
        display: none !important;
    }

    body.dock-has-mobile-nav {
        padding-bottom: 0;
    }
}