/* 
  EduFlow SaaS Educational ERP - Settings & Configuration Module Stylesheet
  -----------------------------------------------------------------------
*/

/* Import app and design system styles */
@import url("app.css");

/* --- Main workspace grid --- */
.settings-workspace-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
}

.settings-screen-element {
  display: none;
  width: 100%;
  animation: fadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.settings-screen-element.active {
  display: block;
}

/* --- Settings categories dashboard grid --- */
.settings-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.settings-category-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.settings-category-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.settings-category-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background-color: rgba(97, 61, 223, 0.08);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Brand color picker swatches --- */
.brand-picker-swatch-group {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-4);
}

.brand-picker-color-block {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-border-hover);
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.brand-picker-color-block:hover {
  transform: scale(1.08);
}

/* Simulated brand header preview */
.simulated-branding-preview-header {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background-color: var(--color-bg);
  box-shadow: var(--shadow-sm);
}

.branding-preview-bar {
  height: 40px;
  border-radius: var(--radius-sm);
  padding: 0 var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  font-weight: 700;
  font-size: 0.8125rem;
  transition: background-color var(--transition-normal);
}

/* --- Custom Field Drag-builder block --- */
.custom-fields-builder-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 2px dashed var(--color-border-hover);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  min-height: 200px;
  background-color: var(--color-bg);
}

.custom-field-item-row {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: grab;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.custom-field-item-row:active {
  cursor: grabbing;
  transform: scale(0.98);
}

.custom-field-drag-handle {
  color: var(--color-text-tertiary);
  margin-right: 12px;
  display: flex;
  align-items: center;
}

/* --- Module management toggle blocks --- */
.module-manage-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.module-manage-row:last-child {
  border-bottom: none;
}

/* Dependency connection layout indicator */
.module-dependency-alert {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-warning);
  background-color: var(--color-warning-bg);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Disabled state sidebar locking */
.erp-sidebar .accordion-item.sidebar-item-disabled {
  opacity: 0.45;
}

.erp-sidebar .accordion-item.sidebar-item-disabled a {
  cursor: not-allowed;
}

/* --- Audit Rollback indicators --- */
.audit-rollback-btn {
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  font-size: 0.6875rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface-hover);
  color: var(--color-text-primary);
  transition: all var(--transition-fast);
}

.audit-rollback-btn:hover {
  background-color: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

/* --- CSS Media Print Rules --- */
@media print {
  body * {
    visibility: hidden;
  }
  .printable-document-area, .printable-document-area * {
    visibility: visible;
  }
  .printable-document-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    box-shadow: none;
    border: none;
    padding: 0;
    margin: 0;
  }
  .layout-portal-header, .erp-sidebar, .erp-header, .layout-portal-controls, .btn, .builder-sidebar {
    display: none !important;
  }
}

/* --- Dark Theme variables overrides --- */
[data-theme="dark"] .custom-fields-builder-area {
  background-color: #181236;
  border-color: #251D4B;
}

[data-theme="dark"] .custom-field-item-row {
  background-color: #140E2E;
  border-color: #251D4B;
}

[data-theme="dark"] .module-dependency-alert {
  background-color: rgba(245, 158, 11, 0.15);
  color: #FDE68A;
}

[data-theme="dark"] .audit-rollback-btn {
  background-color: #181236;
  border-color: #251D4B;
  color: #F0EDF9;
}

[data-theme="dark"] .audit-rollback-btn:hover {
  background-color: var(--color-primary);
  color: white;
}