/* =====================================================
   Components V2 — All reusable UI component styles
   Depends on: theme-v2.css (CSS variables)
   ===================================================== */

/* ─────────────────────────────────────────
   1. Cards
───────────────────────────────────────────*/
.v2-card {
  background: var(--v2-white);
  border-radius: var(--v2-radius-lg);
  box-shadow: var(--v2-shadow-sm);
  border: 1px solid var(--v2-gray-100);
  overflow: hidden;
}

.v2-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--v2-space-4) var(--v2-space-6);
  border-bottom: 1px solid var(--v2-gray-100);
  background: var(--v2-white);
}

.v2-card-title {
  font-size: var(--v2-font-size-md);
  font-weight: var(--v2-font-weight-semibold);
  color: var(--v2-gray-800);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--v2-space-3);
}

.v2-card-title-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--v2-radius-md);
  background: var(--v2-primary-light);
  color: var(--v2-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.v2-card-body {
  padding: var(--v2-space-6);
}

.v2-card-footer {
  padding: var(--v2-space-4) var(--v2-space-6);
  border-top: 1px solid var(--v2-gray-100);
  background: var(--v2-gray-50);
  display: flex;
  align-items: center;
  gap: var(--v2-space-3);
}

/* Card variants */
.v2-card.v2-card-flat {
  box-shadow: none;
  border: 1px solid var(--v2-gray-200);
}

.v2-card.v2-card-elevated {
  box-shadow: var(--v2-shadow-md);
}

/* ─────────────────────────────────────────
   2. Page Header (Hero)
───────────────────────────────────────────*/
.v2-page-header {
  background: var(--v2-white);
  border-radius: var(--v2-radius-lg);
  padding: var(--v2-space-5) var(--v2-space-6);
  margin-bottom: var(--v2-space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v2-space-4);
  border: 1px solid var(--v2-gray-100);
  box-shadow: var(--v2-shadow-xs);
  flex-wrap: wrap;
}

.v2-page-header-info {
  display: flex;
  flex-direction: column;
  gap: var(--v2-space-1);
}

.v2-page-header-title {
  font-size: var(--v2-font-size-xl);
  font-weight: var(--v2-font-weight-bold);
  color: var(--v2-gray-900);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--v2-space-3);
}

.v2-page-header-title-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--v2-radius-lg);
  background: var(--v2-primary-light);
  color: var(--v2-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.v2-page-header-subtitle {
  font-size: var(--v2-font-size-sm);
  color: var(--v2-gray-400);
  margin: 0;
}

.v2-page-header-actions {
  display: flex;
  align-items: center;
  gap: var(--v2-space-2);
  flex-wrap: wrap;
}

/* ─────────────────────────────────────────
   3. KPI Strip
───────────────────────────────────────────*/
.v2-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--v2-space-4);
  margin-bottom: var(--v2-space-5);
}

.v2-kpi-card {
  background: var(--v2-white);
  border-radius: var(--v2-radius-lg);
  padding: var(--v2-space-5);
  border: 1px solid var(--v2-gray-100);
  box-shadow: var(--v2-shadow-xs);
  display: flex;
  align-items: center;
  gap: var(--v2-space-4);
  transition: box-shadow var(--v2-transition-fast), transform var(--v2-transition-fast);
}

.v2-kpi-card:hover {
  box-shadow: var(--v2-shadow-md);
  transform: translateY(-1px);
}

.v2-kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--v2-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.v2-kpi-icon.primary   { background: var(--v2-primary-light);   color: var(--v2-primary); }
.v2-kpi-icon.secondary { background: var(--v2-secondary-light); color: var(--v2-secondary); }
.v2-kpi-icon.success   { background: var(--v2-success-light);   color: var(--v2-success); }
.v2-kpi-icon.warning   { background: var(--v2-warning-light);   color: var(--v2-warning); }
.v2-kpi-icon.danger    { background: var(--v2-danger-light);    color: var(--v2-danger); }
.v2-kpi-icon.info      { background: var(--v2-info-light);      color: var(--v2-info); }
.v2-kpi-icon.accent    { background: var(--v2-accent-light);    color: var(--v2-accent); }

.v2-kpi-body { flex: 1; min-width: 0; }

.v2-kpi-value {
  font-size: var(--v2-font-size-2xl);
  font-weight: var(--v2-font-weight-bold);
  color: var(--v2-gray-900);
  line-height: 1.1;
}

.v2-kpi-label {
  font-size: var(--v2-font-size-xs);
  color: var(--v2-gray-400);
  margin-top: var(--v2-space-1);
  font-weight: var(--v2-font-weight-medium);
}

.v2-kpi-trend {
  font-size: var(--v2-font-size-xs);
  font-weight: var(--v2-font-weight-semibold);
  margin-top: var(--v2-space-1);
}
.v2-kpi-trend.up   { color: var(--v2-success); }
.v2-kpi-trend.down { color: var(--v2-danger); }

/* ─────────────────────────────────────────
   4. Filter Bar
───────────────────────────────────────────*/
.v2-filter-bar {
  background: var(--v2-white);
  border-radius: var(--v2-radius-lg);
  border: 1px solid var(--v2-gray-100);
  box-shadow: var(--v2-shadow-xs);
  margin-bottom: var(--v2-space-5);
  overflow: hidden;
}

.v2-filter-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--v2-space-4) var(--v2-space-5);
  cursor: pointer;
  transition: background var(--v2-transition-fast);
  user-select: none;
}

.v2-filter-bar-header:hover {
  background: var(--v2-gray-50);
}

.v2-filter-bar-title {
  font-size: var(--v2-font-size-sm);
  font-weight: var(--v2-font-weight-semibold);
  color: var(--v2-gray-600);
  display: flex;
  align-items: center;
  gap: var(--v2-space-2);
}

.v2-filter-bar-toggle {
  color: var(--v2-gray-400);
  font-size: var(--v2-font-size-xs);
  transition: transform var(--v2-transition-fast);
}

.v2-filter-bar.expanded .v2-filter-bar-toggle {
  transform: rotate(180deg);
}

.v2-filter-bar-body {
  padding: var(--v2-space-4) var(--v2-space-5) var(--v2-space-5);
  border-top: 1px solid var(--v2-gray-100);
  display: none;
}

.v2-filter-bar.expanded .v2-filter-bar-body {
  display: block;
}

.v2-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--v2-space-4);
  align-items: end;
}

.v2-filter-actions {
  display: flex;
  gap: var(--v2-space-2);
  align-items: flex-end;
  justify-content: flex-start;
  padding-top: var(--v2-space-4);
  border-top: 1px solid var(--v2-gray-100);
  margin-top: var(--v2-space-4);
  flex-wrap: wrap;
}

/* ─────────────────────────────────────────
   5. Form Controls (V2 style)
───────────────────────────────────────────*/
.v2-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--v2-space-2);
}

.v2-label {
  font-size: var(--v2-font-size-xs);
  font-weight: var(--v2-font-weight-semibold);
  color: var(--v2-gray-600);
  letter-spacing: 0.02em;
}

.v2-label.required::after {
  content: " *";
  color: var(--v2-danger);
}

.v2-input,
.v2-select,
.v2-textarea {
  width: 100%;
  padding: 0.45rem var(--v2-space-4);
  font-size: var(--v2-font-size-sm);
  font-family: var(--v2-font-family);
  color: var(--v2-gray-800);
  background: var(--v2-white);
  border: 1.5px solid var(--v2-gray-200);
  border-radius: var(--v2-radius-md);
  transition: border-color var(--v2-transition-fast), box-shadow var(--v2-transition-fast);
  outline: none;
  direction: rtl;
  text-align: right;
}

.v2-input:hover,
.v2-select:hover,
.v2-textarea:hover {
  border-color: var(--v2-gray-300);
}

.v2-input:focus,
.v2-select:focus,
.v2-textarea:focus {
  border-color: var(--v2-primary);
  box-shadow: 0 0 0 3px rgba(29,78,216,0.12);
}

.v2-input.error,
.v2-select.error,
.v2-textarea.error {
  border-color: var(--v2-danger);
}

.v2-input-group {
  display: flex;
  align-items: stretch;
}

.v2-input-group .v2-input {
  border-radius: 0 var(--v2-radius-md) var(--v2-radius-md) 0;
  flex: 1;
}

.v2-input-group-addon {
  display: flex;
  align-items: center;
  padding: 0 var(--v2-space-3);
  background: var(--v2-gray-100);
  border: 1.5px solid var(--v2-gray-200);
  border-left: none;
  border-radius: var(--v2-radius-md) 0 0 var(--v2-radius-md);
  color: var(--v2-gray-500);
  font-size: var(--v2-font-size-sm);
}

.v2-form-hint {
  font-size: var(--v2-font-size-xs);
  color: var(--v2-gray-400);
}

.v2-form-error {
  font-size: var(--v2-font-size-xs);
  color: var(--v2-danger);
}

/* ─────────────────────────────────────────
   6. Buttons
───────────────────────────────────────────*/
.v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--v2-space-2);
  padding: 0.45rem var(--v2-space-5);
  font-size: var(--v2-font-size-sm);
  font-family: var(--v2-font-family);
  font-weight: var(--v2-font-weight-semibold);
  border-radius: var(--v2-radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--v2-transition-fast);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.5;
}

.v2-btn:focus { outline: none; }
.v2-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Solid variants */
.v2-btn-primary {
  background: var(--v2-primary);
  color: white;
  border-color: var(--v2-primary);
}
.v2-btn-primary:hover:not(:disabled) {
  background: var(--v2-primary-hover);
  border-color: var(--v2-primary-hover);
  box-shadow: 0 4px 12px rgba(29,78,216,0.3);
  color: white;
}

.v2-btn-secondary {
  background: var(--v2-secondary);
  color: white;
  border-color: var(--v2-secondary);
}
.v2-btn-secondary:hover:not(:disabled) {
  background: var(--v2-secondary-dark);
  color: white;
}

.v2-btn-success {
  background: var(--v2-success);
  color: white;
  border-color: var(--v2-success);
}
.v2-btn-success:hover:not(:disabled) {
  background: #15803d;
  color: white;
}

.v2-btn-danger {
  background: var(--v2-danger);
  color: white;
  border-color: var(--v2-danger);
}
.v2-btn-danger:hover:not(:disabled) {
  background: #b91c1c;
  color: white;
}

.v2-btn-warning {
  background: var(--v2-warning);
  color: white;
  border-color: var(--v2-warning);
}

/* Outline variants */
.v2-btn-outline-primary {
  background: transparent;
  color: var(--v2-primary);
  border-color: var(--v2-primary);
}
.v2-btn-outline-primary:hover:not(:disabled) {
  background: var(--v2-primary-light);
}

.v2-btn-outline-secondary {
  background: transparent;
  color: var(--v2-gray-600);
  border-color: var(--v2-gray-300);
}
.v2-btn-outline-secondary:hover:not(:disabled) {
  background: var(--v2-gray-100);
  color: var(--v2-gray-800);
}

.v2-btn-ghost {
  background: transparent;
  color: var(--v2-gray-600);
  border-color: transparent;
}
.v2-btn-ghost:hover:not(:disabled) {
  background: var(--v2-gray-100);
  color: var(--v2-gray-800);
}

/* Sizes */
.v2-btn-sm {
  padding: 0.3rem var(--v2-space-3);
  font-size: var(--v2-font-size-xs);
  border-radius: var(--v2-radius-sm);
}
.v2-btn-lg {
  padding: 0.65rem var(--v2-space-8);
  font-size: var(--v2-font-size-md);
  border-radius: var(--v2-radius-lg);
}

.v2-btn-icon {
  padding: 0.45rem;
  border-radius: var(--v2-radius-md);
  width: 34px;
  height: 34px;
}

.v2-btn-icon.v2-btn-sm {
  width: 28px;
  height: 28px;
  padding: 0.3rem;
}

/* ─────────────────────────────────────────
   7. Badges / Status Chips
───────────────────────────────────────────*/
.v2-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-space-1);
  padding: 2px var(--v2-space-3);
  border-radius: var(--v2-radius-full);
  font-size: var(--v2-font-size-xs);
  font-weight: var(--v2-font-weight-semibold);
  white-space: nowrap;
  line-height: 1.6;
}

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

.v2-badge-primary   { background: var(--v2-primary-light);   color: var(--v2-primary); }
.v2-badge-secondary { background: var(--v2-secondary-light); color: var(--v2-secondary-dark); }
.v2-badge-success   { background: var(--v2-success-light);   color: var(--v2-success); }
.v2-badge-warning   { background: var(--v2-warning-light);   color: var(--v2-warning); }
.v2-badge-danger    { background: var(--v2-danger-light);    color: var(--v2-danger); }
.v2-badge-info      { background: var(--v2-info-light);      color: var(--v2-info); }
.v2-badge-neutral   { background: var(--v2-gray-100);        color: var(--v2-gray-600); }
.v2-badge-accent    { background: var(--v2-accent-light);    color: var(--v2-accent); }

/* No dot variant */
.v2-badge.no-dot::before { display: none; }

/* ─────────────────────────────────────────
   8. Tables
───────────────────────────────────────────*/
.v2-table-wrapper {
  background: var(--v2-white);
  border-radius: var(--v2-radius-lg);
  border: 1px solid var(--v2-gray-100);
  box-shadow: var(--v2-shadow-xs);
  overflow: hidden;
}

.v2-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--v2-space-4) var(--v2-space-5);
  border-bottom: 1px solid var(--v2-gray-100);
  gap: var(--v2-space-3);
  flex-wrap: wrap;
}

.v2-table-toolbar-title {
  font-size: var(--v2-font-size-sm);
  font-weight: var(--v2-font-weight-semibold);
  color: var(--v2-gray-700);
  display: flex;
  align-items: center;
  gap: var(--v2-space-2);
}

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

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

.v2-table thead {
  background: var(--v2-gray-50);
  border-bottom: 2px solid var(--v2-gray-200);
}

.v2-table thead th {
  padding: var(--v2-space-3) var(--v2-space-4);
  font-weight: var(--v2-font-weight-semibold);
  color: var(--v2-gray-500);
  font-size: var(--v2-font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-align: right;
}

.v2-table tbody tr {
  border-bottom: 1px solid var(--v2-gray-100);
  transition: background var(--v2-transition-fast);
}

.v2-table tbody tr:last-child {
  border-bottom: none;
}

.v2-table tbody tr:nth-child(even) {
  background: var(--v2-gray-50);
}

.v2-table tbody tr:hover {
  background: var(--v2-primary-light);
}

.v2-table tbody td {
  padding: var(--v2-space-3) var(--v2-space-4);
  color: var(--v2-gray-700);
  text-align: right;
  vertical-align: middle;
}

/* Row actions column */
.v2-table-actions {
  display: flex;
  align-items: center;
  gap: var(--v2-space-1);
  justify-content: flex-start;
}

/* Table footer with pagination info */
.v2-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--v2-space-4) var(--v2-space-5);
  border-top: 1px solid var(--v2-gray-100);
  background: var(--v2-gray-50);
  flex-wrap: wrap;
  gap: var(--v2-space-3);
}

.v2-table-count {
  font-size: var(--v2-font-size-xs);
  color: var(--v2-gray-500);
}

/* ─────────────────────────────────────────
   9. Tabs (Segmented / Underline)
───────────────────────────────────────────*/
/* Underline tabs */
.v2-tabs {
  display: flex;
  border-bottom: 2px solid var(--v2-gray-200);
  margin-bottom: var(--v2-space-5);
  gap: 0;
  overflow-x: auto;
}

.v2-tab-item {
  padding: var(--v2-space-3) var(--v2-space-5);
  font-size: var(--v2-font-size-sm);
  font-weight: var(--v2-font-weight-medium);
  color: var(--v2-gray-500);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color var(--v2-transition-fast), border-color var(--v2-transition-fast);
  user-select: none;
}

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

.v2-tab-item.active {
  color: var(--v2-primary);
  border-bottom-color: var(--v2-primary);
  font-weight: var(--v2-font-weight-semibold);
}

/* Segmented control */
.v2-segmented {
  display: inline-flex;
  background: var(--v2-gray-100);
  border-radius: var(--v2-radius-lg);
  padding: 3px;
  gap: 2px;
}

.v2-segmented-item {
  padding: 0.35rem var(--v2-space-4);
  font-size: var(--v2-font-size-sm);
  font-weight: var(--v2-font-weight-medium);
  color: var(--v2-gray-500);
  border-radius: var(--v2-radius-md);
  cursor: pointer;
  transition: all var(--v2-transition-fast);
  white-space: nowrap;
  user-select: none;
  border: none;
  background: transparent;
}

.v2-segmented-item:hover {
  color: var(--v2-gray-700);
}

.v2-segmented-item.active {
  background: var(--v2-white);
  color: var(--v2-primary);
  font-weight: var(--v2-font-weight-semibold);
  box-shadow: var(--v2-shadow-sm);
}

/* ─────────────────────────────────────────
   10. Stepper
───────────────────────────────────────────*/
.v2-stepper {
  display: flex;
  align-items: flex-start;
  gap: 0;
  overflow-x: auto;
  padding: var(--v2-space-2) 0;
}

.v2-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  min-width: 80px;
}

.v2-step::before {
  content: '';
  position: absolute;
  top: 14px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--v2-gray-200);
  z-index: 0;
}

.v2-step:first-child::before { display: none; }

.v2-step-node {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--v2-gray-200);
  color: var(--v2-gray-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--v2-font-size-xs);
  font-weight: var(--v2-font-weight-bold);
  z-index: 1;
  position: relative;
  transition: all var(--v2-transition-base);
  border: 2px solid var(--v2-gray-200);
}

.v2-step.completed .v2-step-node {
  background: var(--v2-success);
  border-color: var(--v2-success);
  color: white;
}

.v2-step.completed::before {
  background: var(--v2-success);
}

.v2-step.active .v2-step-node {
  background: var(--v2-primary);
  border-color: var(--v2-primary);
  color: white;
  box-shadow: 0 0 0 4px var(--v2-primary-light);
}

.v2-step-label {
  font-size: var(--v2-font-size-xs);
  color: var(--v2-gray-400);
  margin-top: var(--v2-space-2);
  text-align: center;
  line-height: 1.3;
}

.v2-step.active .v2-step-label   { color: var(--v2-primary); font-weight: var(--v2-font-weight-semibold); }
.v2-step.completed .v2-step-label { color: var(--v2-success); }

/* ─────────────────────────────────────────
   11. Modal
───────────────────────────────────────────*/
.v2-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(3px);
  z-index: var(--v2-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--v2-space-4);
}

.v2-modal {
  background: var(--v2-white);
  border-radius: var(--v2-radius-xl);
  box-shadow: var(--v2-shadow-xl);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  direction: rtl;
  animation: v2-modal-in 0.2s ease;
}

@keyframes v2-modal-in {
  from { transform: scale(0.95); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.v2-modal-lg { max-width: 900px; }
.v2-modal-sm { max-width: 440px; }
.v2-modal-xl { max-width: 1200px; }

.v2-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--v2-space-5) var(--v2-space-6);
  border-bottom: 1px solid var(--v2-gray-100);
}

.v2-modal-title {
  font-size: var(--v2-font-size-lg);
  font-weight: var(--v2-font-weight-semibold);
  color: var(--v2-gray-900);
  margin: 0;
}

.v2-modal-close {
  background: var(--v2-gray-100);
  border: none;
  color: var(--v2-gray-500);
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: var(--v2-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--v2-transition-fast);
  font-size: 0.9rem;
}

.v2-modal-close:hover {
  background: var(--v2-gray-200);
  color: var(--v2-gray-800);
}

.v2-modal-body {
  padding: var(--v2-space-6);
  overflow-y: auto;
  flex: 1;
}

.v2-modal-footer {
  padding: var(--v2-space-4) var(--v2-space-6);
  border-top: 1px solid var(--v2-gray-100);
  display: flex;
  align-items: center;
  gap: var(--v2-space-3);
  justify-content: flex-start;
}

/* ─────────────────────────────────────────
   12. Empty State
───────────────────────────────────────────*/
.v2-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--v2-space-12) var(--v2-space-8);
  text-align: center;
  color: var(--v2-gray-400);
}

.v2-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: var(--v2-radius-xl);
  background: var(--v2-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--v2-gray-300);
  margin-bottom: var(--v2-space-5);
}

.v2-empty-title {
  font-size: var(--v2-font-size-md);
  font-weight: var(--v2-font-weight-semibold);
  color: var(--v2-gray-600);
  margin-bottom: var(--v2-space-2);
}

.v2-empty-subtitle {
  font-size: var(--v2-font-size-sm);
  color: var(--v2-gray-400);
  max-width: 340px;
  line-height: 1.6;
}

/* ─────────────────────────────────────────
   13. Loading Skeleton
───────────────────────────────────────────*/
@keyframes v2-shimmer {
  0%   { background-position: -800px 0; }
  100% { background-position: 800px 0; }
}

.v2-skeleton {
  background: linear-gradient(90deg,
    var(--v2-gray-200) 0px,
    var(--v2-gray-100) 40px,
    var(--v2-gray-200) 80px
  );
  background-size: 800px;
  animation: v2-shimmer 1.4s linear infinite;
  border-radius: var(--v2-radius-md);
}

.v2-skeleton-text {
  height: 14px;
  border-radius: var(--v2-radius-sm);
  margin-bottom: var(--v2-space-2);
}

.v2-skeleton-title {
  height: 22px;
  width: 60%;
  border-radius: var(--v2-radius-sm);
  margin-bottom: var(--v2-space-4);
}

.v2-skeleton-rect {
  border-radius: var(--v2-radius-md);
}

/* ─────────────────────────────────────────
   14. Alerts
───────────────────────────────────────────*/
.v2-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--v2-space-3);
  padding: var(--v2-space-4) var(--v2-space-5);
  border-radius: var(--v2-radius-lg);
  font-size: var(--v2-font-size-sm);
  margin-bottom: var(--v2-space-4);
  border-right: 4px solid transparent;
}

.v2-alert-icon { font-size: 1rem; margin-top: 1px; }
.v2-alert-content { flex: 1; }
.v2-alert-title { font-weight: var(--v2-font-weight-semibold); margin-bottom: var(--v2-space-1); }

.v2-alert-success { background: var(--v2-success-light); color: var(--v2-success);  border-right-color: var(--v2-success); }
.v2-alert-warning { background: var(--v2-warning-light); color: var(--v2-warning);  border-right-color: var(--v2-warning); }
.v2-alert-danger  { background: var(--v2-danger-light);  color: var(--v2-danger);   border-right-color: var(--v2-danger); }
.v2-alert-info    { background: var(--v2-info-light);    color: var(--v2-info);     border-right-color: var(--v2-info); }

/* ─────────────────────────────────────────
   17. Table row state classes
───────────────────────────────────────────*/
.v2-table tbody tr.v2-row-alert {
  background: var(--v2-danger-light) !important;
}

.v2-table tbody tr.v2-row-alert:hover {
  background: #fecaca !important;
}

.v2-table tbody tr.v2-row-success {
  background: var(--v2-success-light) !important;
}

.v2-table tbody tr.v2-row-warning {
  background: var(--v2-warning-light) !important;
}
.v2-divider {
  height: 1px;
  background: var(--v2-gray-200);
  margin: var(--v2-space-5) 0;
}

.v2-divider-label {
  display: flex;
  align-items: center;
  gap: var(--v2-space-4);
  color: var(--v2-gray-400);
  font-size: var(--v2-font-size-xs);
  margin: var(--v2-space-5) 0;
}

.v2-divider-label::before,
.v2-divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--v2-gray-200);
}

/* ─────────────────────────────────────────
   16. Dropdown menus
───────────────────────────────────────────*/
.v2-dropdown-menu {
  background: var(--v2-white);
  border: 1px solid var(--v2-gray-200);
  border-radius: var(--v2-radius-lg);
  box-shadow: var(--v2-shadow-lg);
  padding: var(--v2-space-2) 0;
  min-width: 200px;
  direction: rtl;
}

.v2-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--v2-space-3);
  padding: var(--v2-space-3) var(--v2-space-4);
  font-size: var(--v2-font-size-sm);
  color: var(--v2-gray-700);
  cursor: pointer;
  transition: background var(--v2-transition-fast);
  text-decoration: none;
}

.v2-dropdown-item:hover {
  background: var(--v2-gray-50);
  color: var(--v2-gray-900);
}

.v2-dropdown-item.danger { color: var(--v2-danger); }
.v2-dropdown-item.danger:hover { background: var(--v2-danger-light); }

.v2-dropdown-divider {
  height: 1px;
  background: var(--v2-gray-200);
  margin: var(--v2-space-2) 0;
}

/* Required public V2 aliases and focused ERP surfaces */
.page-header-v2,
.v2-page-surface .page-header-v2 {
  background: var(--v2-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--v2-shadow-xs);
  padding: var(--v2-space-5) var(--v2-space-6);
  margin-bottom: var(--v2-space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v2-space-4);
  flex-wrap: wrap;
}

.page-header-v2__title {
  margin: 0;
  color: var(--text);
  font-size: var(--v2-font-size-xl);
  font-weight: var(--v2-font-weight-bold);
  display: flex;
  align-items: center;
  gap: var(--v2-space-3);
}

.page-header-v2__description {
  color: var(--muted);
  font-size: var(--v2-font-size-sm);
  margin: var(--v2-space-1) 0 0;
}

.page-header-v2__actions {
  display: flex;
  align-items: center;
  gap: var(--v2-space-2);
  flex-wrap: wrap;
  margin-right: auto;
}

.filterbar-v2,
.card-v2 {
  background: var(--v2-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--v2-shadow-xs);
}

.filterbar-v2 {
  padding: var(--v2-space-4);
  margin-bottom: var(--v2-space-5);
}

.card-v2 {
  padding: var(--v2-space-5);
}

.kpi-strip-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--v2-space-4);
  margin-bottom: var(--v2-space-5);
}

.table-v2 {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--v2-white);
}

.table-v2 thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--v2-gray-50);
  color: var(--v2-gray-600);
  font-weight: var(--v2-font-weight-bold);
  border-bottom: 1px solid var(--border);
  text-align: right;
  white-space: nowrap;
}

.table-v2 th,
.table-v2 td {
  padding: .7rem .85rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--v2-gray-100);
}

.table-v2 tbody tr:nth-child(even) { background: var(--v2-gray-50); }
.table-v2 tbody tr:hover { background: var(--v2-primary-light); }

.modal-v2 .modal-dialog { max-width: 1200px; }
.modal-v2 .modal-content {
  border: 0;
  border-radius: var(--v2-radius-lg);
  box-shadow: var(--v2-shadow-xl);
  overflow: hidden;
}
.modal-v2 .modal-header,
.modal-v2 .modal-footer {
  background: var(--v2-white);
  border-color: var(--border);
  position: sticky;
  z-index: 3;
}
.modal-v2 .modal-header { top: 0; }
.modal-v2 .modal-footer { bottom: 0; }
.modal-v2 .modal-body { max-height: calc(90vh - 140px); overflow-y: auto; }

.btn-soft-primary,
.btn-soft-success,
.btn-soft-warning,
.btn-soft-danger,
.btn-soft-secondary,
.btn-soft-info {
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-weight: var(--v2-font-weight-semibold);
}
.btn-soft-primary { color: var(--v2-primary); background: var(--v2-primary-light); border-color: #bfdbfe; }
.btn-soft-success { color: var(--v2-success); background: var(--v2-success-light); border-color: #bbf7d0; }
.btn-soft-warning { color: var(--v2-warning); background: var(--v2-warning-light); border-color: #fde68a; }
.btn-soft-danger { color: var(--v2-danger); background: var(--v2-danger-light); border-color: #fecaca; }
.btn-soft-secondary { color: var(--v2-gray-600); background: var(--v2-gray-100); border-color: var(--border); }
.btn-soft-info { color: var(--v2-info); background: var(--v2-info-light); border-color: #bae6fd; }

.badge-soft-primary,
.badge-soft-success,
.badge-soft-warning,
.badge-soft-danger,
.badge-soft-secondary,
.badge-soft-info {
  display: inline-flex;
  align-items: center;
  border-radius: var(--v2-radius-full);
  padding: .2rem .55rem;
  font-weight: var(--v2-font-weight-semibold);
  font-size: var(--v2-font-size-xs);
}
.badge-soft-primary { color: var(--v2-primary); background: var(--v2-primary-light); }
.badge-soft-success { color: var(--v2-success); background: var(--v2-success-light); }
.badge-soft-warning { color: var(--v2-warning); background: var(--v2-warning-light); }
.badge-soft-danger { color: var(--v2-danger); background: var(--v2-danger-light); }
.badge-soft-secondary { color: var(--v2-gray-600); background: var(--v2-gray-100); }
.badge-soft-info { color: var(--v2-info); background: var(--v2-info-light); }

.skeleton-v2 {
  background: linear-gradient(90deg, var(--v2-gray-200), var(--v2-gray-100), var(--v2-gray-200));
  background-size: 200% 100%;
  border-radius: var(--radius);
  animation: v2-shimmer 1.4s linear infinite;
}

.settings-grid-v2 {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--v2-space-5);
  align-items: start;
}

.settings-nav-v2 {
  position: sticky;
  top: var(--v2-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--v2-space-2);
}

.settings-nav-v2 .nav-link,
.settings-nav-v2 button {
  width: 100%;
  text-align: right;
  border: 1px solid var(--border);
  background: var(--v2-white);
  color: var(--v2-gray-700);
  border-radius: var(--radius);
  padding: .75rem .9rem;
  display: flex;
  align-items: center;
  gap: .55rem;
}

.settings-nav-v2 .active,
.settings-nav-v2 button.active {
  background: var(--v2-primary-light);
  color: var(--v2-primary);
  border-color: #bfdbfe;
  font-weight: var(--v2-font-weight-bold);
}

.settings-card-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--v2-space-4);
}

.settings-tile-v2 {
  min-height: 118px;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--v2-space-3);
  transition: transform var(--v2-transition-fast), box-shadow var(--v2-transition-fast), border-color var(--v2-transition-fast);
}

.settings-tile-v2:hover,
.settings-tile-v2:focus {
  color: var(--v2-primary);
  text-decoration: none;
  transform: translateY(-2px);
  border-color: #bfdbfe;
  box-shadow: var(--shadow);
}

.settings-tile-v2 i {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--v2-primary);
  background: var(--v2-primary-light);
  border-radius: var(--radius);
}

.chart-grid-v2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--v2-space-5);
}

.chart-card-v2__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--v2-space-3);
  margin-bottom: var(--v2-space-4);
}

.chart-card-v2__title {
  margin: 0;
  color: var(--text);
  font-size: var(--v2-font-size-md);
  font-weight: var(--v2-font-weight-bold);
}

.chart-card-v2__description {
  margin: .2rem 0 0;
  color: var(--muted);
  font-size: var(--v2-font-size-xs);
}

.chart-card-v2__body {
  min-height: 280px;
  overflow: hidden;
}

.excel-import-v2 {
  direction: rtl;
  text-align: right;
}

.excel-import-v2 > .row {
  gap: var(--v2-space-3) 0;
}

.excel-import-v2 header,
.excel-import-v2 .header {
  background: var(--v2-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--v2-shadow-xs);
  padding: var(--v2-space-5);
  margin: var(--v2-space-3) 0;
  min-height: 72px;
}

.excel-import-v2 header > span,
.excel-import-v2 .header > span {
  display: inline-flex;
  align-items: center;
  color: var(--text);
  font-weight: var(--v2-font-weight-bold);
  font-size: var(--v2-font-size-lg);
  margin-left: var(--v2-space-3);
}

.excel-import-v2 header > span::before,
.excel-import-v2 .header > span::before {
  content: "\f1c3";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: var(--v2-success);
  margin-left: var(--v2-space-2);
}

.excel-import-v2 .float-md-left {
  float: left !important;
  display: inline-flex;
  gap: var(--v2-space-2);
  flex-wrap: wrap;
}

.excel-import-v2 .float-md-left .btn-primary {
  background: var(--v2-primary);
  border-color: var(--v2-primary);
  border-radius: var(--radius);
}

.excel-import-v2 .float-md-left .btn-warning {
  background: var(--v2-warning-light);
  border-color: #fde68a;
  color: var(--v2-warning);
  border-radius: var(--radius);
  font-weight: var(--v2-font-weight-semibold);
}

.excel-import-v2 input[type="file"],
.excel-import-v2 input.form-control {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .55rem .75rem;
  background: var(--v2-white);
}

.excel-import-v2 .divTable,
.excel-import-v2 .col-12:not(:first-child) {
  min-width: 0;
}

.excel-import-v2 .divTable,
.excel-import-v2 .table-responsive {
  background: var(--v2-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--v2-shadow-xs);
  overflow: auto;
}

.excel-import-v2 table.table {
  margin-bottom: 0;
}

.excel-import-v2 table.table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--v2-gray-50);
  color: var(--v2-gray-600);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.excel-import-v2 table.table tbody tr:nth-child(even) {
  background: var(--v2-gray-50);
}

.excel-import-v2 table.table tbody tr:hover {
  background: var(--v2-primary-light);
}

.excel-import-v2 span[style*="color:red"] {
  display: inline-flex;
  align-items: center;
  color: var(--v2-warning) !important;
  background: var(--v2-warning-light);
  border: 1px solid #fde68a;
  border-radius: var(--radius);
  padding: .75rem 1rem;
  font-size: var(--v2-font-size-sm) !important;
  font-weight: var(--v2-font-weight-semibold);
}

.pms-report-v2 .tasks-container,
.pms-report-v2 .task-list,
.pms-report-v2 .card {
  background: var(--v2-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--v2-shadow-xs);
}

.pms-report-v2 .main-container {
  background: var(--bg);
  padding: var(--v2-space-4);
}

.pms-report-v2 .card-header {
  background: var(--v2-white);
  border-bottom: 1px solid var(--border);
}

.pms-report-v2 .form-control {
  border-radius: var(--radius);
  border-color: var(--border);
}

.pms-report-v2 .tasks-header {
  border-bottom: 1px solid var(--border);
  padding: var(--v2-space-5);
  display: flex;
  align-items: center;
  gap: var(--v2-space-4);
  flex-wrap: wrap;
}

.pms-report-v2 .tasks-header h3 {
  margin: 0;
  color: var(--text);
  font-weight: var(--v2-font-weight-bold);
}

.pms-report-v2 .chat-search-box {
  flex: 1 1 260px;
}

.pms-report-v2 .custom-table thead th,
.pms-report-v2 .table thead th {
  position: sticky;
  top: 0;
  background: var(--v2-gray-50);
  z-index: 2;
  white-space: nowrap;
}

.pms-report-v2 .custom-table tbody tr:nth-child(even) {
  background: var(--v2-gray-50);
}

.pms-report-v2 .custom-table tbody tr:hover {
  background: var(--v2-primary-light);
}

.pms-dashboard-v2 .main-container {
  background: var(--bg);
}

.pms-dashboard-v2 .info-tiles,
.pms-dashboard-v2 .card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--v2-shadow-xs);
}

.pms-dashboard-v2 .row.gutters {
  margin-bottom: var(--v2-space-5);
}

.pms-dashboard-v2 .chartist,
.pms-dashboard-v2 [id*="chart"],
.pms-dashboard-v2 .apexcharts-canvas,
.pms-reports-shell .chartist,
.pms-reports-shell .apexcharts-canvas,
.pms-reports-shell [id*="chart"] {
  min-height: 280px;
  border-radius: var(--radius);
}

.pms-dashboard-v2 .ct-grid,
.pms-reports-shell .ct-grid {
  stroke: var(--v2-gray-200);
  stroke-dasharray: 4px;
}

.pms-dashboard-v2 .ct-series-a .ct-line,
.pms-dashboard-v2 .ct-series-a .ct-bar,
.pms-reports-shell .ct-series-a .ct-line,
.pms-reports-shell .ct-series-a .ct-bar {
  stroke: var(--v2-primary);
}

.pms-dashboard-v2 .ct-series-b .ct-line,
.pms-dashboard-v2 .ct-series-b .ct-bar,
.pms-reports-shell .ct-series-b .ct-line,
.pms-reports-shell .ct-series-b .ct-bar {
  stroke: var(--v2-secondary);
}

.pms-dashboard-v2 .ct-area,
.pms-reports-shell .ct-area {
  fill-opacity: .16;
}

.daily-report-v2 .call-container,
.daily-report-v2 .task-list {
  background: var(--v2-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--v2-shadow-xs);
}

.daily-report-v2 .table thead th {
  position: sticky;
  top: 0;
  background: var(--v2-gray-50);
}

.pms-v2-dashboard {
  direction: rtl;
  text-align: right;
}

.pms-v2-dashboard .pms-chart-area {
  background: var(--v2-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--v2-shadow-xs);
  padding: var(--v2-space-4);
}

.pms-v2-dashboard .pms-chart-label {
  color: var(--muted) !important;
}

.pms-v2-dashboard .pms-chart-label i {
  color: var(--v2-secondary) !important;
}

.pms-v2-dashboard .pms-rpt-panel,
.pms-v2-dashboard .pms-rpt-card,
.pms-v2-dashboard .pms-reports-shell {
  border-radius: var(--radius);
}

.settings-center-pro {
  direction: rtl;
  text-align: right;
  color: var(--text);
  background: var(--bg);
  min-height: calc(100vh - 80px);
  padding: var(--v2-space-5);
}

.settings-hero-pro {
  min-height: 170px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(29, 78, 216, .10), rgba(13, 148, 136, .12)),
    var(--v2-white);
  box-shadow: var(--shadow);
  padding: var(--v2-space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v2-space-5);
  margin-bottom: var(--v2-space-5);
}

.settings-eyebrow-pro {
  display: inline-flex;
  color: var(--v2-secondary);
  font-weight: var(--v2-font-weight-bold);
  font-size: var(--v2-font-size-xs);
  margin-bottom: var(--v2-space-2);
}

.settings-hero-pro h1 {
  margin: 0;
  color: var(--text);
  font-size: 2rem;
  font-weight: 800;
}

.settings-hero-pro p {
  margin: var(--v2-space-2) 0 0;
  color: var(--muted);
  max-width: 720px;
}

.settings-hero-actions-pro {
  display: flex;
  gap: var(--v2-space-2);
  flex-wrap: wrap;
}

.settings-overview-pro {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--v2-space-4);
  margin-bottom: var(--v2-space-5);
}

.settings-overview-card-pro {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--v2-white);
  box-shadow: var(--v2-shadow-xs);
  padding: var(--v2-space-5);
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: var(--v2-space-3);
  color: var(--text);
  text-align: right;
  cursor: pointer;
}

.settings-overview-card-pro i {
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  background: var(--v2-primary-light);
  color: var(--v2-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.settings-overview-card-pro strong {
  color: var(--v2-secondary);
  font-size: var(--v2-font-size-xl);
}

.settings-overview-card-pro.active {
  border-color: #bfdbfe;
  box-shadow: var(--shadow);
}

.settings-workspace-pro {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--v2-space-5);
  align-items: start;
}

.settings-rail-pro,
.settings-panel-pro,
.system-settings-summary-pro,
.system-settings-main-pro {
  background: var(--v2-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--v2-shadow-xs);
}

.settings-rail-pro {
  padding: var(--v2-space-4);
  position: sticky;
  top: var(--v2-space-4);
}

.settings-rail-title-pro {
  display: flex;
  align-items: center;
  gap: var(--v2-space-2);
  padding: var(--v2-space-3);
  margin-bottom: var(--v2-space-3);
  color: var(--v2-gray-700);
  font-weight: var(--v2-font-weight-bold);
}

.settings-rail-item-pro,
.settings-rail-scroll-pro .settings-rail-item-pro {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--v2-gray-700);
  border-radius: var(--radius);
  padding: .75rem .85rem;
  margin-bottom: .35rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  text-align: right;
  cursor: pointer;
}

.settings-rail-item-pro:hover {
  background: var(--v2-gray-50);
}

.settings-rail-item-pro.active {
  background: var(--v2-primary-light);
  color: var(--v2-primary);
  border-color: #bfdbfe;
  font-weight: var(--v2-font-weight-bold);
}

.settings-rail-scroll-pro {
  max-height: 68vh;
  overflow-y: auto;
  padding-left: .25rem;
}

.settings-panel-pro {
  min-width: 0;
  overflow: hidden;
}

.settings-panel-header-pro {
  padding: var(--v2-space-5);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--v2-space-3);
}

.settings-panel-header-pro span:first-child,
.settings-section-title-pro span {
  display: block;
  color: var(--v2-secondary);
  font-size: var(--v2-font-size-xs);
  font-weight: var(--v2-font-weight-bold);
  margin-bottom: var(--v2-space-1);
}

.settings-panel-header-pro h2,
.settings-section-title-pro h2 {
  margin: 0;
  color: var(--text);
  font-size: var(--v2-font-size-xl);
  font-weight: 800;
}

.settings-panel-body-pro {
  padding: var(--v2-space-5);
  min-height: 520px;
}

.settings-center-pro .task-section,
.settings-center-pro .tasks-container,
.settings-center-pro .card,
.settings-center-pro .labels-container {
  border-radius: var(--radius) !important;
  border-color: var(--border) !important;
}

.settings-center-pro .labels-container,
.settings-center-pro .filters-block {
  display: none;
}

.settings-center-pro .row.no-gutters > [class*="col-xl-2"],
.settings-center-pro .row.no-gutters > [class*="col-lg-2"],
.settings-center-pro .row.no-gutters > [class*="col-md-3"] {
  display: none !important;
}

.settings-center-pro .row.no-gutters > [class*="col-xl-10"],
.settings-center-pro .row.no-gutters > [class*="col-lg-10"],
.settings-center-pro .row.no-gutters > [class*="col-md-9"] {
  flex: 0 0 100%;
  max-width: 100%;
}

.system-settings-layout-pro {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--v2-space-5);
  align-items: start;
}

.system-settings-summary-pro {
  padding: var(--v2-space-4);
  display: grid;
  gap: var(--v2-space-3);
}

.system-summary-card-pro {
  padding: var(--v2-space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--v2-gray-50);
  display: grid;
  gap: var(--v2-space-2);
}

.system-summary-card-pro i {
  color: var(--v2-primary);
  font-size: 1.25rem;
}

.system-summary-card-pro span {
  color: var(--muted);
}

.system-summary-card-pro strong {
  color: var(--text);
}

.system-settings-main-pro {
  padding: var(--v2-space-5);
}

.settings-section-title-pro {
  margin-bottom: var(--v2-space-4);
}

.settings-lane-pro {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--v2-space-4);
  margin-bottom: var(--v2-space-6);
}

.settings-action-card-pro {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--v2-white);
  color: var(--text);
  text-decoration: none;
  padding: var(--v2-space-5);
  min-height: 140px;
  display: flex;
  flex-direction: column;
  gap: var(--v2-space-2);
  transition: transform var(--v2-transition-fast), box-shadow var(--v2-transition-fast), border-color var(--v2-transition-fast);
}

.settings-action-card-pro:hover,
.settings-action-card-pro:focus {
  color: var(--v2-primary);
  text-decoration: none;
  transform: translateY(-2px);
  border-color: #bfdbfe;
  box-shadow: var(--shadow);
}

.settings-action-card-pro i {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: var(--v2-primary);
  background: var(--v2-primary-light);
}

.settings-action-card-pro span {
  font-weight: var(--v2-font-weight-bold);
}

.settings-action-card-pro small {
  color: var(--muted);
}

.settings-mini-grid-pro {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--v2-space-3);
}

.settings-mini-grid-pro a {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--v2-gray-700);
  background: var(--v2-gray-50);
  padding: .85rem 1rem;
  text-decoration: none;
}

.settings-mini-grid-pro a:hover {
  color: var(--v2-primary);
  border-color: #bfdbfe;
}

@media (max-width: 991px) {
  .settings-hero-pro,
  .settings-workspace-pro,
  .system-settings-layout-pro {
    grid-template-columns: 1fr;
  }

  .settings-hero-pro {
    flex-direction: column;
    align-items: stretch;
  }

  .settings-overview-pro {
    grid-template-columns: 1fr;
  }

  .settings-rail-pro {
    position: static;
  }
}

@media (max-width: 991px) {
  .settings-grid-v2,
  .chart-grid-v2 {
    grid-template-columns: 1fr;
  }

  .settings-nav-v2 {
    position: static;
  }
}