/**
 * Admin Styles - B2B Spokar
 *
 * Breakpointy: 767px (mobile), 1023px (tablet), 1399px (desktop)
 * Uses CSS variables from main.css
 *
 * @package B2B_Spokar_Theme
 */

/* ==========================================================================
   DASHBOARD (main wrapper)
   ========================================================================== */

.dashboard {
    max-width: var(--max-w-2xl);
    margin: 0 auto;
    background: var(--white);
    padding-top: var(--spacing-lg);
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    min-height: 60px;
}

.dashboard-header h1 {
    font-size: var(--font-size-h1);
    font-weight: 600;
    color: var(--grey-800);
    margin: 0;
    text-transform: uppercase;
}

/* ==========================================================================
   DASHBOARD NAVIGATION
   ========================================================================== */

.dashboard-nav {
    display: flex;
    gap: var(--spacing-xs);
    background: var(--grey-100);
    padding: 8px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.dashboard-nav a {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 12px 20px;
    background: var(--white);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--grey-800);
    font-weight: 500;
    font-size: var(--font-size-small);
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.dashboard-nav a:hover {
    background: var(--white);
    border-color: var(--green);
    color: var(--grey-800);
}

.dashboard-nav a.active {
    background: var(--green);
    color: var(--grey-800);
    border-color: var(--green);
}

.dashboard-nav a .nav-icon {
    font-size: var(--font-size-base);
}

.dashboard-nav a.wp-admin-link {
    margin-left: auto;
    background: var(--grey-850);
    color: var(--white);
}

.dashboard-nav a.wp-admin-link:hover {
    background: var(--grey-900);
    border-color: var(--grey-900);
    color: var(--white);
}

/* ==========================================================================
   TEAM TABS
   ========================================================================== */

.team-tabs {
    display: flex;
    gap: var(--spacing-xs);
    background: var(--grey-100);
    border-radius: var(--radius-md);
    padding: 9px;
    margin-bottom: 20px;
}

.team-tab {
    padding: 12px 24px;
    background: var(--white);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--font-size-small);
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    color: var(--grey-600);
    transition: all 0.2s ease;
}

.team-tabs a:hover {
    text-decoration: none;
}

.team-tab:hover {
    background: var(--white);
    color: var(--grey-800);
    border: 1px solid var(--green);
}

.team-tab.active {
    background: var(--green);
    color: var(--grey-800);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   DASHBOARD WIDGET
   ========================================================================== */

.dashboard-widget {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--grey-300);
    margin-bottom: 20px;
}

.dashboard-widget:last-child {
    margin-bottom: 0;
}

.dashboard-widget .widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
}

.password-toggle-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: 400;
    color: var(--grey-600);
    cursor: pointer;
    user-select: none;
}

.dashboard-widget .widget-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--grey-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    text-transform: uppercase;
}

.dashboard-widget .widget-action {
    padding: 8px 16px;
    background: var(--grey-100);
    border-radius: var(--radius-md);
    color: var(--grey-800);
    text-decoration: none;
    font-size: var(--font-size-xs);
    font-weight: 500;
    transition: all 0.2s ease;
}

.dashboard-widget .widget-action:hover {
    background: var(--green);
}

.dashboard-widget .widget-footer {
    margin-top: 20px;
    text-align: right;
}

.dashboard-widget .widget-info {
    color: var(--grey-600);
    font-size: var(--font-size-small);
    margin-bottom: 16px;
}

/* Header actions */
.header-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* ==========================================================================
   SETTINGS SECTIONS
   ========================================================================== */

.settings-section {
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid var(--grey-300);
}

.settings-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.settings-section .section-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.settings-section .setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--grey-200);
}

.settings-section .setting-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.settings-section .setting-label {
    font-weight: 500;
}

.settings-section .setting-value {
    color: var(--grey-600);
}

.settings-section .setting-meta {
    display: block;
    font-size: var(--font-size-tiny);
    color: var(--grey-600);
    margin-top: 4px;
}

.settings-section .section-description {
    color: var(--grey-600);
    margin: 0 0 20px 0;
}

.settings-section .setting-row-warning {
    background: var(--color-warning-light);
    margin: 16px -24px -24px;
    padding: 16px 24px;
    border-radius: 0 0 12px 12px;
}

.settings-section .setting-row-warning .setting-label {
    color: var(--color-warning-dark);
}

/* Status Indicators */
.status-indicator {
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-tiny);
    font-weight: 600;
}

.status-indicator.success {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.status-indicator.warning {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.status-indicator.info {
    background: var(--color-info-light);
    color: var(--color-info-dark);
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

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

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--grey-300);
    transition: 0.3s;
    border-radius: 26px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: var(--white);
    transition: 0.3s;
    border-radius: 50%;
}

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

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

/* Loading Spinner */
.loading-spinner {
    text-align: center;
    padding: 20px;
    color: var(--grey-600);
}

/* Quick Links */
.quick-links {
    display: flex;
    gap: var(--spacing-ms);
    flex-wrap: wrap;
}

/* ==========================================================================
   STATISTICS GRID
   ========================================================================== */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-ml);
    margin-bottom: 24px;
}

.stat-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--grey-300);
}

.stat-card .stat-label {
    font-size: var(--font-size-xs);
    color: var(--grey-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.stat-card .stat-value {
    font-size: var(--font-size-h1);
    font-weight: 700;
    color: var(--grey-800);
    line-height: 1.2;
}

.stat-card .stat-icon {
    font-size: var(--font-size-h2);
    margin-bottom: 8px;
}

.stat-card .stat-change {
    font-size: var(--font-size-xs);
    font-weight: 600;
    margin-top: 8px;
}

.stat-card .stat-change.positive {
    color: var(--color-success);
}

.stat-card .stat-change.negative {
    color: var(--color-error);
}

.stat-card .stat-change.neutral {
    color: var(--grey-600);
}

.stat-card .stat-secondary {
    font-size: var(--font-size-xs);
    color: var(--grey-600);
    margin-top: 8px;
}

.stat-card .stat-link {
    display: block;
    font-size: var(--font-size-xs);
    margin-top: 8px;
    text-decoration: none;
}

.stat-card .stat-link.warning {
    color: var(--color-warning);
}

.stat-card.warning {
    border-color: var(--color-warning);
    background: var(--color-warning-light);
}

/* ==========================================================================
   TEAMS GRID
   ========================================================================== */

.teams-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-ml);
}

.team-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 20px;
    border: 1px solid var(--grey-300);
}

.team-card .team-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.team-card .team-name {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin: 0;
}

.team-card .team-rm {
    color: var(--grey-600);
    font-size: var(--font-size-small);
    margin-bottom: 16px;
}

.team-card .team-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-ms);
    padding-top: 16px;
    border-top: 1px solid var(--grey-300);
}

.team-card .team-stats.team-stats-full {
    margin-top: 0;
    padding-top: 12px;
    border-top: none;
}

.team-card .team-stat {
    text-align: center;
}

.team-card .team-stat.full-width {
    grid-column: span 2;
}

.team-card .team-stat-value {
    font-size: var(--font-size-h3);
    font-weight: 700;
    color: var(--color-primary);
}

.team-card .team-stat-label {
    font-size: var(--font-size-tiny);
    color: var(--grey-600);
    text-transform: uppercase;
}

.team-card .team-link {
    display: block;
    margin-top: 16px;
    text-align: center;
}

.team-card .team-info {
    font-size: var(--font-size-small);
    color: var(--grey-600);
    line-height: 1.5;
}

.team-card .team-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--grey-300);
}

/* ==========================================================================
   TEAM MEMBERS GRID (RM Dashboard - OZ list)
   ========================================================================== */

.team-members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-md);
}

.team-member-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 16px;
    border: 1px solid var(--grey-300);
}

.team-member-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.team-member-info {
    flex: 1;
    min-width: 0;
}

.team-member-name {
    font-weight: 600;
    font-size: var(--font-size-small);
    margin-bottom: 4px;
    color: var(--grey-800);
}

.team-member-phone,
.team-member-email,
.team-member-companies {
    font-size: var(--font-size-xs);
    color: var(--grey-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-member-phone a,
.team-member-email a {
    color: var(--grey-600);
    text-decoration: none;
}

.team-member-phone a:hover,
.team-member-email a:hover {
    color: var(--color-primary);
}

/* ==========================================================================
   TEAMS WIDGET (SA Dashboard - RM + OZ overview)
   ========================================================================== */

/* ==========================================================================
   DASHBOARD TWO COLUMN LAYOUT
   ========================================================================== */

.dashboard-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

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

.dashboard-column,
.dashboard-column-left,
.dashboard-column-right {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ml);
}

/* ==========================================================================
   WARNINGS LIST
   ========================================================================== */

.warnings-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.warnings-list li {
    display: flex;
    align-items: center;
    gap: var(--spacing-ms);
    padding: 12px 0;
    border-bottom: 1px solid var(--grey-300);
}

.warnings-list li:last-child {
    border-bottom: none;
}

.warnings-list .warning-icon {
    font-size: var(--font-size-base);
}

.warnings-list .warning-text {
    flex: 1;
}

/* ==========================================================================
   SETTINGS ROWS (inline in widgets)
   ========================================================================== */

.settings-rows .setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--grey-300);
}

.settings-rows .setting-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.settings-rows .setting-row:first-child {
    padding-top: 0;
}

.modal .settings-rows .setting-row {
    cursor: pointer;
    padding: 15px 10px;
}

.modal .settings-rows .setting-row:first-child {
    padding: 15px 5px;
    background: var(--grey-50);
}

.modal .settings-rows .setting-row:hover {
    background: var(--grey-100);
}

.settings-rows .setting-label {
    font-weight: 500;
}

.settings-rows .setting-value {
    color: var(--grey-600);
}

/* Table-style layout - left-aligned like a table */
.settings-rows-table .setting-row {
    display: grid;
    grid-template-columns: 125px 1fr;
    justify-content: start;
    gap: var(--spacing-ms);
}

.settings-rows-table .setting-label {
    text-align: left;
}

.settings-rows-table .setting-value {
    text-align: left;
}

.settings-rows-table .setting-row {
    padding: 5px 0;
    border: 0;
}

/* ==========================================================================
   QUICK ACTIONS
   ========================================================================== */

.quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-ms);
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.empty-state .empty-icon {
    display: block;
    font-size: var(--font-size-2xl);
    margin-bottom: 8px;
}

/* ==========================================================================
   DATA TABLES
   ========================================================================== */

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

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

.table th,
.table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--grey-300);
}

.table th {
    font-size: var(--font-size-tiny);
    font-weight: 600;
    color: var(--grey-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--grey-50);
}

.table tbody tr:hover {
    background: var(--grey-50);
}

.table .row-future {
    color: var(--color-error-dark);
}

/* Action Prices table */
#action-prices-table {
    min-width: 1100px;
    table-layout: fixed;
}

#action-prices-table th,
#action-prices-table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Order status badges */
.order-status {
    display: inline-block;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-2xs);
    font-weight: 500;
    text-transform: uppercase;
}

.order-status.status-pending {
    background: var(--grey-100);
    color: var(--grey-600);
}

/* Compact table variant */
.compact-table th,
.compact-table td {
    padding: 8px 10px;
    font-size: var(--font-size-xs);
}

.compact-table th {
    font-size: var(--font-size-2xs);
}

/* Buttons — defined in main.css */

/* ==========================================================================
   MODALS - Unified Modal System
   ========================================================================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

/* Active state - primary method */
.modal-overlay.active {
    display: flex;
}

/* Fallback for jQuery show() - sets display:block, we need flex for centering */
.modal-overlay[style*="display: block"],
.modal-overlay[style*="display:block"] {
    display: flex !important;
}

/* Contact-only mode: hide address fields in delivery address modal */
.contact-only-mode .form-group:has(#warehouse_title),
.contact-only-mode .form-group:has(#warehouse_street),
.contact-only-mode .form-group:has(#warehouse_country),
.contact-only-mode .form-group:has(#use_billing_address),
.contact-only-mode .form-row:has(#warehouse_postcode) { display: none !important; }

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden;
}

.modal {
    background: var(--white);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: var(--max-w-lg);
    max-height: 90vh;
    overflow-y: auto;
}

.modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--grey-300);
}

.modal .modal-title {
    font-size: var(--font-size-h4);
    font-weight: 600;
    margin: 0;
}

.modal-header .modal-close {
    background: none;
    border: none;
    font-size: var(--font-size-h2);
    cursor: pointer;
    color: var(--grey-500);
    padding: 0;
    line-height: 1;
}

.modal .modal-body {
    padding: 24px;
}

.modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-ms);
    padding: 20px 24px;
    border-top: 1px solid var(--grey-300);
    background: var(--grey-50);
    border-radius: 0 0 12px 12px;
}

.search-results-list {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.modal .search-result-image {
    width: 50px;
    height: 50px;
}

/* Pricing modals (plugin) - unified with theme modals */
#b2b-pricing-modal,
#b2b-bulk-edit-modal,
#b2b-edit-modal,
#b2b-long-term-modal,
#b2b-schedule-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
}

#b2b-pricing-modal.active,
#b2b-bulk-edit-modal.active,
#b2b-edit-modal.active,
#b2b-long-term-modal.active,
#b2b-schedule-modal.active {
    display: flex;
}

/* Fallback for jQuery fadeIn() which sets display:block */
#b2b-pricing-modal[style*="display: block"],
#b2b-bulk-edit-modal[style*="display: block"],
#b2b-edit-modal[style*="display: block"],
#b2b-long-term-modal[style*="display: block"],
#b2b-schedule-modal[style*="display: block"] {
    display: flex !important;
}

/* ==========================================================================
   FORMS — base in main.css, admin overrides here
   ========================================================================== */

.form-group label {
    font-weight: 500;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-small);
    height: 42px;
    box-sizing: border-box;
    transition: border-color var(--transition-base);
}

.form-control:focus,
.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.form-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.form-row-3.col-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* Input with toggle button */
.input-with-toggle {
    display: flex;
    gap: 0;
}

.input-with-toggle input {
    flex: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-with-toggle .toggle-btn {
    padding: 0 16px;
    background: var(--white);
    border: 1px solid var(--grey-300);
    border-left: none;
    border-radius: 0 8px 8px 0;
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.input-with-toggle .toggle-btn:hover {
    background: var(--color-primary);
    color: var(--white);
}

.input-with-toggle .toggle-btn.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Search input with clear button */
.search-input-wrapper {
    position: relative;
}

.search-input-wrapper input {
    padding-right: 30px;
}

.search-clear-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: var(--font-size-h4);
    color: var(--grey-500);
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
}

.search-clear-btn:hover {
    color: var(--grey-800);
}

/* Form actions row */
.form-actions-row {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-ms);
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--grey-300);
}

.checkbox-group {
    display: flex;
    align-items: center;
    align-content: center;
    gap: var(--spacing-sm);
}

.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.form-group.checkbox-group label {
    margin: 0;
}

/* ==========================================================================
   FILTERS
   ========================================================================== */

.filters {
    margin-bottom: 20px;
}

.filters form,
.filters-row {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-end;
    flex-wrap: nowrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-group label {
    font-size: var(--font-size-tiny);
    font-weight: 600;
    color: var(--grey-600);
    text-transform: uppercase;
}

.filter-group select,
.filter-group input[type="text"],
.filter-group input[type="date"] {
    padding: 10px 14px;
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-small);
    min-width: 160px;
}

.filter-group select:focus,
.filter-group input:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--grey-300);
}

.pagination-info {
    font-size: var(--font-size-small);
    color: var(--grey-600);
}

.pagination-buttons {
    display: flex;
    gap: var(--spacing-xs);
}

.pagination-btn {
    padding: 8px 14px;
    background: var(--grey-100);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--font-size-small);
    text-decoration: none;
    color: var(--grey-800);
    transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
    background: var(--color-primary);
    color: var(--white);
    text-decoration: none;
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-btn.active {
    background: var(--color-primary);
    color: var(--white);
    font-weight: 600;
}

/* ==========================================================================
   STATUS BADGES
   ========================================================================== */

.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: var(--font-size-tiny);
    font-weight: 500;
}

.status-badge.active {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.status-badge.inactive {
    background: var(--grey-100);
    color: var(--grey-600);
}

.status-badge.pending {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.status-badge.ifs {
    background: var(--color-info-light);
    color: var(--color-info-dark);
}

.status-badge.b2b {
    background: var(--color-purple-light);
    color: var(--color-purple);
}

/* Order status variants (used in view-order, dashboard tables) */
.status-badge.processing,
.order-status.status-processing {
    background: var(--color-info-light);
    color: var(--color-info-dark);
}

.status-badge.completed,
.order-status.status-completed {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.status-badge.on-hold,
.order-status.status-on-hold {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.status-badge.cancelled,
.status-badge.failed,
.status-badge.refunded,
.order-status.status-cancelled,
.order-status.status-failed,
.order-status.status-refunded {
    background: var(--color-error-light);
    color: var(--color-error-dark);
}

/* Generic status variants */
.status-badge.info {
    background: var(--color-info-light);
    color: var(--color-info-dark);
}

.status-badge.warning {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

/* ==========================================================================
   ALERTS
   ========================================================================== */

.alert-danger {
    background: var(--color-error-light);
    border: 1px solid var(--color-error-light);
    color: var(--color-error-dark);
    padding: 12px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.alert-warning {
    background: var(--color-warning-light);
    border: 1px solid var(--color-warning-light);
    color: var(--color-warning-dark);
    padding: 12px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

/* Order edit state classes (toggled by JS) */
.quantity-input.is-changed {
    border-color: var(--color-warning);
    background: var(--color-warning-light);
}

.table tr.is-removed {
    opacity: 0.4;
    text-decoration: line-through;
    pointer-events: none;
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.text-muted {
    color: var(--grey-600);
    font-size: var(--font-size-xs);
}

.hidden {
    display: none;
}

/* ==========================================================================
   CATEGORY TREE (Modal)
   ========================================================================== */

#category-tree ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#category-tree ul ul {
    padding-left: 20px;
}

#category-tree li {
    margin: 0;
}

#category-tree .category-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

#category-tree .category-item.expanded > .category-label .category-toggle {
    transform: rotate(90deg);
}

.category-radio {
    margin-right: 10px;
}

/* ==========================================================================
   REPORTS - Charts, Top Lists, Export
   ========================================================================== */

.dashboard-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-ml);
}

.chart-container {
    height: 300px;
}

.top-products-list,
.top-customers-list {
    padding-left: 20px;
    margin: 0;
}

.top-products-list li,
.top-customers-list li {
    padding: 10px 0;
    border-bottom: 1px solid var(--grey-300);
}

.top-products-list li:last-child,
.top-customers-list li:last-child {
    border-bottom: none;
}

.top-products-list li span,
.top-customers-list li span {
    float: right;
    color: var(--grey-600);
}

.export-buttons {
    display: flex;
    gap: var(--spacing-ms);
    flex-wrap: wrap;
}

.empty-state {
    text-align: center;
    color: var(--grey-600);
    padding: 20px;
}

/* ==========================================================================
   RESPONSIVE - Breakpoints: 767px, 1023px, 1399px
   ========================================================================== */

/* Tablet (1023px and below) */
@media (max-width: 1023px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .teams-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .dashboard-nav a {
        padding: 10px 16px;
        font-size: var(--font-size-xs);
    }

    .form-row-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile (767px and below) */
@media (max-width: 767px) {
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }

    .dashboard-nav {
        flex-direction: column;
    }

    .dashboard-nav a.wp-admin-link {
        margin-left: 0;
    }

    .team-tabs {
        flex-wrap: wrap;
    }

    .team-tab {
        padding: 10px 16px;
        font-size: var(--font-size-xs);
    }

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

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

    .header-actions {
        flex-direction: column;
        width: 100%;
    }

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

    .settings-section .setting-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .filters form,
    .filters-row {
        flex-wrap: wrap;
    }

    .filter-group {
        width: 100%;
    }

    .filter-group select,
    .filter-group input {
        width: 100%;
    }

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

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

    .form-actions-row {
        flex-direction: column;
    }

    .form-actions-row .btn {
        width: 100%;
    }

    .modal {
        margin: 16px;
        max-height: calc(100vh - 32px);
    }

}

/* ==========================================================================
   NOTICES
   ========================================================================== */

.notice {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

/* Section header flex alignment */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Section footer - right aligned */
.section-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

/* ==========================================================================
   AVATAR INITIALS
   ========================================================================== */

.avatar-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--white);
    font-size: var(--font-size-h4);
    font-weight: 700;
    border-radius: 50%;
}

/* ==========================================================================
   MESSAGES (Customer → OZ messaging)
   ========================================================================== */

.sent-messages {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--grey-300);
}

.sent-messages h3 {
    margin: 0 0 8px 0;
    font-size: var(--font-size-small);
    color: var(--grey-600);
}

.message-item,
a.message-item:hover,
a.message-item:focus,
a.message-item:active {
    padding: 12px;
    background: var(--white);
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    display: block;
}

.message-item.unread {
    border-left: 3px solid var(--color-primary);
    background: var(--color-primary-light);
}

.message-item.read {
    opacity: 0.75;
}

.message-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.message-date {
    color: var(--grey-600);
    font-size: var(--font-size-tiny);
}

.message-text {
    font-size: var(--font-size-small);
    line-height: 1.5;
    color: var(--grey-800);
}

/* ==========================================================================
   MESSAGING SYSTEM - Conversation bubbles, badges, button variants
   ========================================================================== */

/* Nav badge (unread count) */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--color-error);
    color: var(--white);
    font-size: var(--font-size-2xs);
    font-weight: 600;
    border-radius: 10px;
    line-height: 1;
}

/* Thread status badges (extend existing .status-badge) */
.status-badge.open {
    background: var(--color-info-light);
    color: var(--color-info-dark);
}

.status-badge.resolved {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

/* Conversation bubbles (thread detail view) */
.thread-messages {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ms);
    padding: 20px 0;
}

.thread-message {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    line-height: 1.5;
}

.thread-message--mine {
    align-self: flex-end;
    background: var(--color-primary-light);
    border-bottom-right-radius: 4px;
}

.thread-message--theirs {
    align-self: flex-start;
    background: var(--grey-100);
    border-bottom-left-radius: 4px;
}

.thread-message-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-ms);
    margin-bottom: 4px;
    font-size: var(--font-size-tiny);
    color: var(--grey-500);
}

.thread-message-meta strong {
    color: var(--grey-800);
    font-size: var(--font-size-xs);
}

.thread-message-body {
    font-size: var(--font-size-small);
    white-space: pre-line;
    word-wrap: break-word;
    color: var(--grey-800);
}

/* Responsive - conversation bubbles */
@media (max-width: 767px) {
    .thread-message {
        max-width: 95%;
    }
}

/* ==========================================================================
   MY ACCOUNT (merged from my-account.css)
   ========================================================================== */

/* ==========================================================================
   My Account Layout
   ========================================================================== */

/* When navigation is not present (non-admin users), use single column layout */
/* ==========================================================================
   Account Navigation
   ========================================================================== */

/* ==========================================================================
   Account Content
   ========================================================================== */

.woocommerce-MyAccount-content {
    background: var(--white);
    padding-top: var(--spacing-xl);
}

.woocommerce-MyAccount-content h2 {
    font-size: var(--font-size-h2);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--grey-300);
}

.woocommerce-MyAccount-content h3 {
    font-size: var(--font-size-h3);
    margin-bottom: var(--spacing-md);
}

/* ==========================================================================
   Dashboard
   ========================================================================== */

.my-account-dashboard {
    min-height: 400px;
}

/* ==========================================================================
   Orders Table
   ========================================================================== */

/* Order status colors */
/* ==========================================================================
   Messages
   ========================================================================== */

.woocommerce-message {
    padding: var(--spacing-md);
    background: var(--color-success-light);
    border: 1px solid var(--color-success-border);
    border-radius: var(--radius-sm);
    color: var(--color-success-dark);
    margin-bottom: var(--spacing-lg);
}

.woocommerce-message a {
    color: var(--color-success-dark);
    font-weight: 600;
}

.woocommerce-info {
    padding: var(--spacing-md);
    background: var(--color-info-light);
    border: 1px solid var(--color-info-border);
    border-radius: var(--radius-sm);
    color: var(--color-info-dark);
    margin-bottom: var(--spacing-lg);
}

.woocommerce-error {
    padding: var(--spacing-md);
    background: var(--color-error-light);
    border: 1px solid var(--color-error-border);
    border-radius: var(--radius-sm);
    color: var(--color-error-dark);
    margin-bottom: var(--spacing-lg);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 767px) {
    .woocommerce-MyAccount-content {
        padding: var(--spacing-md);
    }

    /* Make orders table scrollable */
}

/* ==========================================================================
   MY ACCOUNT EXTENSIONS (merged from my-account-extensions.css)
   ========================================================================== */


/* ========================================
   MY DISCOUNTS (Slevy a akce)
   ======================================== */

/* Global Discount */
/* Action Prices Grid */
.action-price {
    font-size: var(--font-size-h2);
    font-weight: 700;
    color: var(--color-error);
}

.original-price {
    font-size: var(--font-size-small);
    color: var(--grey-500);
    text-decoration: line-through;
}

.discount-badge {
    background: var(--color-error);
    color: var(--white);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--font-size-small);
}

/* ========================================
   MY SALES REP (Můj obchodní zástupce)
   ======================================== */

.sales-rep-card {
    background: var(--white);
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-md);
    overflow: hidden;
    max-width: 600px;
}

.sales-rep-header {
    background: var(--grey-100);
    padding: 20px;
    border-bottom: 1px solid var(--grey-300);
}

.sales-rep-header h3 {
    margin: 0;
    font-size: var(--font-size-h3);
    color: var(--grey-800);
}

.sales-rep-content {
    display: flex;
    gap: 30px;
    padding: 30px;
}

.sales-rep-avatar {
    flex-shrink: 0;
}

.sales-rep-avatar img,
.sales-rep-avatar .avatar-placeholder {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-wp-blue);
    color: var(--white);
    font-size: var(--font-size-2xl);
    font-weight: 700;
}

.sales-rep-info {
    flex: 1;
}

.sales-rep-name {
    margin: 0 0 20px 0;
    font-size: var(--font-size-h2);
    font-weight: 600;
    color: var(--grey-800);
}

.sales-rep-contact {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ms);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-base);
}

.contact-icon {
    font-size: var(--font-size-h3);
}

.contact-value {
    color: var(--color-wp-blue);
    text-decoration: none;
}

.contact-value:hover {
    text-decoration: underline;
}

/* ========================================
   DELIVERY ADDRESSES (Dodací místa)
   ======================================== */

/* ========================================
   MODAL
   ======================================== */

/* Form Fields */
.form-field {
    margin-bottom: 20px;
}

.form-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--grey-800);
}

.form-field input[type="text"],
.form-field input[type="tel"],
.form-field input[type="email"],
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-small);
}

.form-field textarea {
    resize: vertical;
}

.form-field .required {
    color: var(--color-error);
}

/* ========================================
   VAT STATUS BADGES (DPH Status)
   ======================================== */

/* Inline badge - compact version */
.vat-status-badge-inline {
    display: inline;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

/* Reliable VAT payer (Spolehlivý plátce) - GREEN */
.vat-status-badge-inline.vat-reliable {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

/* Unreliable VAT payer (Nespolehlivý plátce) - ORANGE/RED */
.vat-status-badge-inline.vat-unreliable {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

/* Non VAT payer (Není plátce DPH) - BLUE */
.vat-status-badge-inline.vat-non-payer {
    background: var(--color-info-light);
    color: var(--color-info-dark);
}

/* ARES verification status messages */
#ico-verification-status {
    margin-top: 10px;
    padding: 10px;
    border-radius: var(--radius-sm);
}

#ico-verification-status .success {
    color: var(--color-success-dark);
}

#ico-verification-status .error {
    color: var(--color-error-dark);
    background: var(--color-error-light);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
}

#ico-verification-status .loading {
    color: var(--color-primary-dark);
}

/* ========================================
   COMPANY FORM (Add Company)
   ======================================== */

.company-form {
    /* No max-width - let it fill container */
}

/* Form field container */
.company-form .form-field {
    margin-bottom: 24px;
}

/* Labels - above input, gray, smaller text */
.company-form .form-field label {
    display: block;
    margin-bottom: 8px;
    color: var(--grey-600);
    font-size: var(--font-size-xs);
    font-weight: 400;
}

/* Required asterisk - red */
.company-form .required {
    color: var(--color-error);
}

/* Inputs - large, full width, styled */
.company-form .form-control {
    width: 100%;
    padding: 12px 16px;
    font-size: var(--font-size-base);
    line-height: 1.5;
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-sm);
    background: var(--white);
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.company-form .form-control:focus {
    outline: none;
    border-color: var(--color-wp-blue);
    box-shadow: 0 0 0 1px var(--color-wp-blue);
}

.company-form .form-control::placeholder {
    color: var(--grey-500);
}

/* Select dropdown */
.company-form select.form-control {
    cursor: pointer;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%23666" d="M6 9L1 4h10z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

/* Field with link (IČO + ARES link) */
.company-form .field-with-link {
    position: relative;
}

.company-form .field-with-link input {
    padding-right: 350px; /* Space for the link */
}

.company-form .ares-link {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-wp-blue);
    text-decoration: underline;
    font-size: var(--font-size-small);
    cursor: pointer;
    padding: 0;
    white-space: nowrap;
}

.company-form .ares-link:hover {
    color: var(--color-wp-blue-dark);
}

/* Verification status */
.company-form .verification-status {
    margin-top: 8px;
    font-size: var(--font-size-small);
}

/* Grid for PSČ + Město */
.company-form .form-field-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--spacing-ml);
    margin-bottom: 24px;
}

/* Info field (for auto-assigned OZ) */

/* Form actions */
.company-form .form-actions {
    display: flex;
    gap: var(--spacing-ms);
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--grey-300);
}

/* Form messages */
.company-form .form-messages {
    margin: 20px 0;
}

.company-form .form-messages .success-message {
    padding: 12px 16px;
    background: var(--color-success-light);
    color: var(--color-success-dark);
    border: 1px solid var(--color-success-border);
    border-radius: var(--radius-sm);
}

.company-form .form-messages .error-message {
    padding: 12px 16px;
    background: var(--color-error-light);
    color: var(--color-error-dark);
    border: 1px solid var(--color-error-border);
    border-radius: var(--radius-sm);
}

/* ========================================
   ACTION PRICES TABLE STYLING
   ======================================== */

/* Better styling for inline table inputs */
#action-prices-table input[type="number"],
#action-prices-table input[type="date"],
#action-prices-table select {
    padding: 6px 10px;
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-small);
    font-family: inherit;
    transition: border-color 0.2s;
}

#action-prices-table input[type="number"]:focus,
#action-prices-table input[type="date"]:focus,
#action-prices-table select:focus {
    outline: none;
    border-color: var(--color-wp-blue);
}

#action-prices-table .action-price-value {
    width: 100px;
}

#action-prices-table select.action-price-type {
    width: 100%;
    cursor: pointer;
}

/* Row status colors */
#action-prices-table tr.pricing-active {
    background: var(--color-success-light);
}

#action-prices-table tr.pricing-expired {
    background: var(--color-error-light);
    opacity: 0.7;
}

#action-prices-table tr.pricing-future {
    background: var(--color-info-light);
}

/* ========================================
   MANAGE COMPANY PAGE
   ======================================== */

/* Breadcrumbs navigation */
.breadcrumbs-navigation {
    margin-bottom: 15px;
    font-size: var(--font-size-small);
    color: var(--grey-600);
}

.breadcrumbs-navigation a {
    color: var(--color-wp-blue);
    text-decoration: none;
}

.breadcrumbs-navigation .breadcrumb-separator {
    margin: 0 8px;
}

.breadcrumbs-navigation .breadcrumb-current {
    color: var(--grey-800);
    font-weight: 600;
}

.company-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 15px;
}

@media (max-width: 768px) {
    .company-details {
        grid-template-columns: 1fr;
        gap: var(--spacing-ml);
    }
}

/* Tax Information Column */
.company-tax-info .tax-row {
    margin-bottom: 10px;
}

.company-tax-info .tax-row strong {
    margin-right: 5px;
}

.company-tax-info .vat-status-row {
    margin-top: 15px;
}

/* Billing Address Column */
.company-billing-address .address-label {
    margin-bottom: 8px;
}

.company-billing-address .address-line {
    margin-bottom: 4px;
    color: var(--grey-800);
}


/* Map Link Column (legacy) */
/* Tab navigation */
.nav-tab-wrapper {
    margin-bottom: 0;
}

/* Tab content styling */
.tab-content {
    background: var(--white);
    padding: 20px;
    border: 1px solid var(--grey-300);
    border-top: none;
    display: none;
}

/* Show active tab */
.tab-content.active {
    display: block;
}

/* Global discount tab */
#tab-global-discount .company-form {
    max-width: 600px;
}

#tab-global-discount .form-control[type="number"] {
    max-width: 150px;
}

#tab-global-discount .form-field small {
    display: block;
    margin-top: 8px;
    color: var(--grey-600);
}

/* Action prices tab */
.tablenav.top {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: var(--spacing-ml);
    flex-wrap: wrap;
}

.tablenav.top .alignleft.actions,
.tablenav.top .alignright.actions {
    float: none;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.tablenav.top .alignleft.actions {
    margin: 0;
}

.tablenav.top .alignright.actions {
    margin: 0;
}

.selected-count-label {
    margin-left: 12px;
    display: none;
}

#filter-status-label,
#search-action-prices-label {
    margin: 0;
    font-weight: 600;
    color: var(--grey-800);
}

#filter-status {
    min-width: 150px;
    padding: 6px 32px 6px 10px;
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-small);
    cursor: pointer;
    appearance: none;
    background-color: var(--white);
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%23666" d="M6 9L1 4h10z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}

#search-action-prices {
    width: 250px;
    padding: 6px 10px;
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-small);
}

#search-action-prices:focus,
#filter-status:focus {
    outline: none;
    border-color: var(--color-wp-blue);
}

#clear-search {
    padding: 6px 10px;
    height: auto;
    min-height: 32px;
}

.dashicons.dashicons-no-alt {
    margin-top: 3px;
}

/* Action prices table columns */
#action-prices-table {
    table-layout: fixed;
}

#action-prices-table th.check-column {
    width: 30px;
}

/* Column 3: Hodnota */
#action-prices-table tr > :nth-child(3) {
    width: 75px;
}

/* Column 4: Typ */
#action-prices-table tr > :nth-child(4) {
    width: 75px;
}

/* Column 5: Platnost od */
#action-prices-table tr > :nth-child(5) {
    width: 110px;
}

/* Column 6: Platnost do */
#action-prices-table tr > :nth-child(6) {
    width: 110px;
}

/* Column 7: Akce */
#action-prices-table tr > :nth-child(7) {
    width: 85px;
}

/* Form elements inherit width from parent cell */
#action-prices-table input[type="number"],
#action-prices-table input[type="date"],
#action-prices-table select {
    width: inherit !important;
}

#action-prices-table .expand-toggle {
    cursor: pointer;
    margin-right: 8px;
}

#action-prices-table .variants-count {
    color: var(--grey-600);
    margin-left: 8px;
}

#action-prices-table .variant-row {
    display: none;
}

#action-prices-table .variant-row td:first-child {
    padding-left: 40px;
}

/* Product SKU styling */
#action-prices-table .product-sku {
    color: var(--grey-600);
    font-size: var(--font-size-xs);
    font-family: inherit;
}

.product-ean {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--grey-600);
}

#action-prices-table .variation-name {
    color: var(--grey-600);
    font-size: var(--font-size-small);
    font-family: inherit;
}

/* Category spacer */
.add-pricing-section .dashicons {
    margin-top: 3px;
}

/* Add pricing section */
.add-pricing-section {
    margin-top: 20px;
}

/* Modal styling */
.b2b-pricing-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
}

.b2b-pricing-modal .modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--grey-600);
    z-index: 1;
}

.b2b-pricing-modal .modal-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--white);
    border-radius: var(--radius-sm);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

#b2b-edit-modal .modal-container {
    max-width: 550px;
}

#edit-customer-modal .modal-container,
#create-customer-form {
    max-width: 500px;
}

#warehouse-modal .modal-container {
    max-width: 700px;
}

/* Modal content elements */
.modal-type-selector,
.modal-dates-selector {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.modal-type-selector .form-control[type="number"] {
    max-width: 150px;
}

.modal-dates-selector .form-field {
    margin-bottom: 0;
}

.modal-dates-selector label {
    font-size: var(--font-size-xs);
    font-weight: 400;
    color: var(--grey-600);
}

.modal-dates-selector small {
    display: block;
    margin-top: 8px;
    color: var(--grey-600);
}

/* Bulk edit modal */
#bulk-edit-type-fields,
#bulk-edit-dates-fields {
    display: none;
    margin-top: 12px;
    padding-left: 24px;
}

#bulk-edit-type-fields .radio-group {
    margin-bottom: 12px;
}

#bulk-edit-value {
    max-width: 150px;
}

/* Edit modal */
#edit-variation-row {
    display: none;
}

#delete-single-price {
    margin-right: auto;
}

/* Warehouses tab */
.warehouses-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-ml);
    margin-top: 20px;
}

.warehouse-card {
    background: var(--white);
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-sm);
    padding: 20px;
    flex: 1 1 calc(33.333% - 14px);
    min-width: 280px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

@media (max-width: 1024px) {
    .warehouse-card {
        flex: 1 1 calc(50% - 10px);
    }
}

@media (max-width: 768px) {
    .warehouse-card {
        flex: 1 1 100%;
    }
}

.warehouse-card-header h4 {
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-wp-blue);
    color: var(--color-wp-blue);
    font-size: var(--font-size-base);
}

.warehouse-card-body {
    flex-grow: 1;
    margin-bottom: 15px;
}

.warehouse-info-row {
    margin-bottom: 12px;
}

.warehouse-info-row strong {
    display: block;
    margin-bottom: 4px;
    color: var(--grey-600);
    font-size: var(--font-size-xs);
}

.warehouse-info-row div {
    color: var(--grey-800);
    line-height: 1.5;
}

.warehouse-info-row .contact-person {
    color: var(--grey-600);
    font-size: var(--font-size-xs);
}

/* Warehouse modal sections */
/* Customers tab */
.customers-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-ml);
    margin-top: 20px;
}

.customer-card {
    background: var(--white);
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-sm);
    padding: 20px;
    flex: 1 1 calc(33.333% - 14px);
    min-width: 280px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

@media (max-width: 1024px) {
    .customer-card {
        flex: 1 1 calc(50% - 10px);
    }
}

@media (max-width: 768px) {
    .customer-card {
        flex: 1 1 100%;
    }
}

.customer-card-header h4 {
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-wp-blue);
    color: var(--color-wp-blue);
    font-size: var(--font-size-base);
}

.customer-card-body {
    flex-grow: 1;
    margin-bottom: 15px;
}

.customer-info-row {
    margin-bottom: 12px;
}

.customer-info-row strong {
    display: block;
    margin-bottom: 4px;
    color: var(--grey-600);
    font-size: var(--font-size-xs);
}

.customer-info-row div {
    color: var(--grey-800);
    line-height: 1.5;
}

.customer-card-footer {
    display: flex;
    gap: var(--spacing-sm);
    padding-top: 15px;
    border-top: 1px solid var(--grey-300);
}

.customer-card-footer .btn {
    flex: 1;
    text-align: center;
    justify-content: center;
}

/* Switch to customer section */
#switch-to-customer-select {
    width: 100%;
    max-width: 400px;
    padding: 8px;
}

#switch-to-customer-btn {
    margin-left: 10px;
}

#switch-to-customer-btn .dashicons {
    margin-top: 3px;
}

/* Create customer form */
#create-customer-form {
    padding: 20px;
    background: var(--grey-50);
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-sm);
    margin: 20px 0;
}

#create-customer-form .form-row {
    margin-bottom: 15px;
}

#create-customer-form input {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-sm);
}

#create-customer-form .description {
    margin-top: 5px;
}

#create-customer-btn {
    width: 100%;
    padding: 10px;
}

/* Customer actions */
/* Submit section */
/* Customers table - specific styling */
#tab-customers .widefat.striped thead th:last-child {
    width: 150px;
}

/* Tables in tabs */
.tab-content .widefat.striped,
.tab-content .wp-list-table.widefat {
    width: 100%;
    margin: 20px 0;
    border: 1px solid var(--grey-300);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    /* Company form responsive */
    .company-form .form-field-grid {
        grid-template-columns: 1fr;
    }

    .company-form .field-with-link input {
        padding-right: 16px;
    }

    .company-form .ares-link {
        position: static;
        display: block;
        margin-top: 8px;
        transform: none;
        text-align: left;
    }

    .company-form .form-actions {
        flex-direction: column;
    }

    .company-form .form-actions .btn {
        width: 100%;
    }

    .sales-rep-content {
        flex-direction: column;
        align-items: center;
    }

}

/* ==========================================================================
   MANAGE COMPANY (merged from manage-company.css)
   ========================================================================== */


.manage-company-wrapper {
    margin: 0 auto;
}

.manage-company-header {
    margin-bottom: 20px;
}

/* Main tabs (different from modal tabs) */
.b2b-pricing-tabs .nav-tab-wrapper {
    border-bottom: 1px solid var(--grey-300);
    margin-bottom: 0 !important;
}

.b2b-pricing-tabs .nav-tab {
    cursor: pointer;
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    padding: 10px 15px;
    text-decoration: none;
    color: var(--color-wp-blue);
}

.b2b-pricing-tabs .nav-tab.nav-tab-active {
    background: var(--white);
    border-color: var(--grey-300);
    border-bottom-color: var(--white);
    color: var(--black);
}

/* ========================================
   TOAST NOTIFICATION
   ======================================== */

.b2b-toast-notification {
    position: fixed;
    top: 80px;
    right: 30px;
    min-width: 300px;
    max-width: 500px;
    padding: 16px 20px;
    background: var(--white);
    border-left: 4px solid var(--color-success);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-ms);
    z-index: 999999;
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

.b2b-toast-notification.success .dashicons-yes {
    color: var(--color-success);
    font-size: var(--font-size-h2);
    width: 24px;
    height: 24px;
}

.b2b-toast-notification.error {
    border-left-color: var(--color-error);
}

.b2b-toast-notification.error .dashicons {
    color: var(--color-error);
}

.b2b-toast-notification.warning {
    border-left-color: var(--color-warning);
}

.b2b-toast-notification.warning .dashicons {
    color: var(--color-warning);
    font-size: var(--font-size-h2);
    width: 24px;
    height: 24px;
}

.b2b-toast-notification.info {
    border-left-color: var(--color-info);
}

.b2b-toast-notification.info .dashicons {
    color: var(--color-info);
    font-size: var(--font-size-h2);
    width: 24px;
    height: 24px;
}

.b2b-toast-notification .toast-message {
    flex: 1;
    font-size: var(--font-size-small);
    font-weight: 500;
    color: var(--grey-800);
}

.b2b-toast-notification .toast-close {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--grey-500);
    transition: color 0.2s;
}

.b2b-toast-notification .toast-close:hover {
    color: var(--grey-800);
}

.b2b-toast-notification .toast-close .dashicons {
    font-size: var(--font-size-h3);
    width: 20px;
    height: 20px;
}

.b2b-toast-notification.hiding {
    animation: slideOutRight 0.3s ease-out forwards;
}

/* Note: Modal base, structure, search, and category tree styles
   are inherited from pricing-admin.css in the plugin */

/* ========================================
   CATEGORY VARIANT LIST
   ======================================== */

.category-products-container {
    margin-top: 20px;
    padding: 16px;
    background: var(--white);
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-sm);
}

.global-select-wrapper {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--color-wp-blue);
}

.global-select-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: var(--font-size-small);
}

.global-select-label input[type="checkbox"] {
    margin: 0 8px 0 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.product-variant-list {
    /* No max-height - let it expand naturally */
    overflow-y: auto;
}

.product-group {
    margin-bottom: 12px;
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-sm);
    background: var(--grey-50);
}

.product-header {
    display: flex;
    align-items: center;
    padding: 12px;
    background: var(--grey-100);
    border-bottom: 1px solid var(--grey-300);
    gap: var(--spacing-sm);
}

.product-header input[type="checkbox"] {
    margin: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.product-name {
    font-weight: 600;
    color: var(--grey-800);
    flex: 1;
    min-width: 0;
}

.product-sku {
    width: 120px;
    flex-shrink: 0;
    color: var(--grey-600);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    text-align: left;
}

.product-price {
    width: 100px;
    flex-shrink: 0;
    color: var(--grey-600);
    font-size: var(--font-size-xs);
    text-align: right;
}

.variant-count {
    color: var(--grey-600);
    font-size: var(--font-size-xs);
    flex-shrink: 0;
}

.toggle-variants {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--color-wp-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.toggle-variants:hover {
    color: var(--color-wp-blue-dark);
}

.toggle-variants .dashicons {
    font-size: var(--font-size-h3);
    width: 20px;
    height: 20px;
}

.variants-list {
    padding: 8px 12px;
    background: var(--white);
}

.variant-item {
    display: flex;
    align-items: center;
    padding: 8px;
    padding-left: 20px;
    margin-bottom: 4px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
    gap: var(--spacing-sm);
}

.variant-item:hover {
    background: var(--grey-50);
}

.variant-item input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.variant-name {
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-xs);
    color: var(--grey-600);
}

.variant-sku {
    width: 120px;
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    color: var(--grey-600);
    text-align: left;
}

.variant-price {
    width: 100px;
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    color: var(--grey-600);
    text-align: right;
}

/* Note: Default settings form, table enhancements, bulk actions toolbar,
   row status colors, checkbox column, edit/bulk edit modals, and
   collapse/expand functionality are inherited from pricing-admin.css */

/* Indeterminate checkbox styling - extended in manage-company */
input[type="checkbox"]:indeterminate {
    opacity: 0.7;
}

/* ========================================
   INLINE STYLE REPLACEMENTS
   ======================================== */

.company-form {
    /* No max-width - let it fill container */
}

.company-form .form-control {
    max-width: 150px;
}

.company-form small {
    display: block;
    margin-top: 8px;
    color: var(--grey-600);
}

#category-products-list,
#category-products-list-lt {
    display: none;
}

.info-notice {
    margin-top: 20px;
    padding: 20px;
    background: var(--grey-100);
    border-left: 4px solid var(--color-info);
}

#edit-customer-modal {
    display: none;
}

#edit-customer-modal .modal-container {
    max-width: 700px;
}

#edit-customer-modal .form-field-grid {
    grid-template-columns: 1fr 200px;
}

/* ========================================
   RESPONSIVE - Manage Company Specific
   ======================================== */

/* ========================================
   PRICING MODAL SEARCH LAYOUT
   ======================================== */

/* Make "Hledat produkty" label and input side-by-side on full width */
.pricing-search-field {
    display: flex;
    align-items: center;
    gap: var(--spacing-ms);
    width: 100%;
}

.pricing-search-field label {
    flex-shrink: 0;
    white-space: nowrap;
    font-weight: 600;
    margin: 0;
}

.pricing-search-field #pricing-search-input,
.pricing-search-field #lt-pricing-search-input {
    flex: 1;
    min-width: 0;
    max-width: none !important; /* Override .company-form .form-control max-width */
}

/* ========================================
   DEFAULT SETTINGS ROW LAYOUT
   ======================================== */

/* Put radio-group, value field, and date fields side-by-side */
.default-settings-row {
    display: flex;
    gap: var(--spacing-lg);
    align-items: flex-start;
}

/* Typ - auto width based on content */
.default-settings-row > .form-field:nth-child(1) {
    flex: 0 0 auto;
}

/* Hodnota - fixed reasonable width */
.default-settings-row > .form-field:nth-child(2) {
    flex: 0 0 200px;
}

/* Platnost - take remaining space */
.default-settings-row > .form-field:nth-child(3) {
    flex: 1;
    min-width: 0;
}

/* Date inputs should use same font as other text */
#modal-default-from,
#modal-default-to {
    font-family: inherit;
    font-size: inherit;
}

/* Date range selector with dash separator */
.modal-dates-selector {
    display: flex;
    align-items: center;
    gap: var(--spacing-ms);
}

.modal-dates-selector .date-separator {
    color: var(--grey-600);
    font-weight: 600;
    font-size: var(--font-size-base);
}

/* ========================================
   MODAL FOOTER BUTTONS
   ======================================== */

/* Ensure both Zrušit and Přidat produkty buttons are same height and aligned */
#b2b-pricing-modal .modal-footer .button-group .button,
#b2b-long-term-modal .modal-footer .button-group .button {
    padding: 10px 20px;
    height: auto;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .company-details {
        grid-template-columns: 1fr !important;
    }

    /* Stack default settings vertically on mobile */
    .default-settings-row {
        flex-direction: column;
    }
}

/* ========================================
   COMPANY TYPE & STATUS BADGES
   ======================================== */

.company-header-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-ms);
    flex-wrap: wrap;
}

.company-header-row h2 {
    margin: 0;
}

.company-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: var(--font-size-tiny);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.company-type-badge.corporate {
    background: var(--color-info-light);
    color: var(--color-info-dark);
    border: 1px solid var(--color-info-border);
}

.company-type-badge.wholesale {
    background: var(--color-success-light);
    color: var(--color-success-dark);
    border: 1px solid var(--color-success-border);
}

.company-type-badge.retail {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
    border: 1px solid var(--color-warning-border);
}

.company-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: var(--font-size-tiny);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.company-status-badge.pending {
    background: var(--color-warning-light);
    color: var(--color-warning);
    border: 1px solid var(--color-warning-border);
}

.company-status-badge.draft {
    background: var(--grey-150);
    color: var(--grey-700);
    border: 1px solid var(--grey-400);
}

.company-status-badge.publish {
    background: var(--color-success-light);
    color: var(--color-success-dark);
    border: 1px solid var(--color-success-border);
}

/* Company contact info in info box */
.company-contact-info {
    padding: 10px 0;
}

.company-contact-info .contact-label {
    margin-bottom: 8px;
}

.company-contact-info .contact-line {
    margin: 4px 0;
}

.company-contact-info a {
    color: var(--color-wp-blue);
    text-decoration: none;
}

.company-contact-info a:hover {
    text-decoration: underline;
}

/* ========================================
   COMPANY INFO BOX - 3 Column Layout
   ======================================== */

.company-info-box {
    background: var(--white);
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 20px;
}

.company-info-box > h2 {
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--grey-300);
    font-size: var(--font-size-h3);
}

/* ============================================
   Search combo / autocomplete dropdown
   Used in: transfer orders (store/wholesaler picker),
            IFS CSV search (wholesaler modal)
   ============================================ */

.combo-results,
.ifs-results-list {
    position: absolute;
    z-index: 100;
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--grey-300);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.combo-item,
.ifs-result-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: var(--font-size-small);
    border-bottom: 1px solid var(--grey-100);
}

.combo-item:hover,
.ifs-result-item:hover {
    background: var(--grey-50);
}

.combo-item:last-child,
.ifs-result-item:last-child {
    border-bottom: none;
}

.combo-empty {
    font-size: var(--font-size-small);
}

/* Parent needs position:relative for dropdown positioning */
.form-group:has(.combo-results),
.form-group:has(.ifs-results-list) {
    position: relative;
}