/* Settings Dashboard Styles - Modern Design */

/* Page Layout */
.settings-container { padding:1.5rem 1.75rem 2.5rem; max-width:1600px; margin:0 auto; animation: setFadeIn .55s ease-out; }

.settings-header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:1.25rem; margin:0 0 1.75rem; padding:1.4rem 1.6rem 1.25rem; background:linear-gradient(145deg,var(--card) 0%,var(--surface-secondary) 100%); border:1px solid var(--card-border); border-radius:var(--radius-xl); position:relative; overflow:hidden; }
.settings-header::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 115% -10%, var(--accent) 0%, transparent 70%); opacity:.2; pointer-events:none; }
.settings-header::after { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--primary),var(--accent)); opacity:.8; }

.settings-header h1 {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

/* Settings Navigation */
.settings-nav {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
  padding: 0.5rem;
  background: hsl(var(--surface-secondary));
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

.settings-nav-item {
  padding: 1rem 1.5rem;
  border: none;
  background: transparent;
  color: hsl(var(--foreground-secondary));
  font-size: var(--font-size-sm);
  font-weight: 500;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.settings-nav-item:hover {
  background: hsl(var(--surface-tertiary));
  color: hsl(var(--foreground));
}

.settings-nav-item.active {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

/* Grid Layout */
.settings-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:1.4rem; margin:0 0 2.25rem; }

/* Widget Base */
.settings-widget { background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-xl); padding:1.55rem 1.65rem 1.6rem; box-shadow:0 2px 4px -2px rgba(0,0,0,.08),0 4px 16px -6px rgba(0,0,0,.18); position:relative; overflow:hidden; transition:background .45s ease, box-shadow .55s ease, transform .55s cubic-bezier(.4,.14,.3,1), border-color .45s ease; }
.settings-widget::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--primary),var(--accent)); opacity:.75; }
.settings-widget:hover { transform:translateY(-6px); box-shadow:0 10px 26px -10px rgba(0,0,0,.45),0 4px 14px -6px rgba(0,0,0,.25); border-color:var(--border-hover,var(--primary)); }

/* Widget Headers */
.widget-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
}

.widget-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: hsl(var(--foreground));
  margin: 0;
}

.widget-subtitle {
  font-size: var(--font-size-sm);
  color: hsl(var(--foreground-secondary));
  margin: 0.5rem 0 0 0;
}

/* Account Settings Widget */
.account-settings-widget {
  grid-column: span 6;
}

.profile-section {
  margin-bottom: 2rem;
}

.profile-avatar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.avatar-image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
  color: hsl(var(--primary-foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  position: relative;
  overflow: hidden;
}

.avatar-upload {
  position: absolute;
  inset: 0;
  background: hsl(var(--overlay) / 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast);
  cursor: pointer;
}

.avatar-image:hover .avatar-upload {
  opacity: 1;
}

.avatar-info {
  flex: 1;
}

.user-name {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: hsl(var(--foreground));
  margin: 0 0 0.5rem 0;
}

.user-email {
  font-size: var(--font-size-base);
  color: hsl(var(--foreground-secondary));
  margin: 0 0 0.5rem 0;
}

.user-role {
  padding: 0.25rem 0.75rem;
  background: hsl(var(--accent) / 0.1);
  color: hsl(var(--accent));
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 0.5rem;
}

.form-input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid hsl(var(--input-border));
  border-radius: var(--radius);
  background: hsl(var(--input));
  color: hsl(var(--foreground));
  font-size: var(--font-size-base);
  transition: all var(--transition-fast);
}

.form-input:focus {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

.form-select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid hsl(var(--input-border));
  border-radius: var(--radius);
  background: hsl(var(--input));
  color: hsl(var(--foreground));
  font-size: var(--font-size-base);
  cursor: pointer;
}

/* Security Settings Widget */
.security-settings-widget {
  grid-column: span 6;
}

.security-section {
  margin-bottom: 2rem;
}

.security-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: hsl(var(--surface-secondary));
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
}

.security-info {
  flex: 1;
}

.security-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: hsl(var(--foreground));
  margin: 0 0 0.25rem 0;
}

.security-description {
  font-size: var(--font-size-sm);
  color: hsl(var(--foreground-secondary));
}

.security-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-enabled {
  background: hsl(var(--success));
}

.status-disabled {
  background: hsl(var(--destructive));
}

.status-warning {
  background: hsl(var(--warning));
}

.status-text {
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.status-enabled .status-text {
  color: hsl(var(--success));
}

.status-disabled .status-text {
  color: hsl(var(--destructive));
}

.status-warning .status-text {
  color: hsl(var(--warning));
}

/* Preferences Widget */
.preferences-widget {
  grid-column: span 8;
}

.preferences-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.preference-group {
  background: hsl(var(--surface-secondary));
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.preference-group-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: hsl(var(--foreground));
  margin: 0 0 1rem 0;
}

.preference-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.preference-item:last-child {
  margin-bottom: 0;
}

.preference-label {
  flex: 1;
  font-size: var(--font-size-base);
  color: hsl(var(--foreground));
}

.preference-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.toggle-switch {
  width: 44px;
  height: 24px;
  background: hsl(var(--border));
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.toggle-switch.active {
  background: hsl(var(--primary));
}

.toggle-slider {
  width: 20px;
  height: 20px;
  background: hsl(var(--card));
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.toggle-switch.active .toggle-slider {
  transform: translateX(20px);
}

/* Notifications Widget */
.notifications-widget {
  grid-column: span 4;
}

.notification-types {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.notification-type {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem;
  background: hsl(var(--surface-secondary));
  border-radius: var(--radius-lg);
}

.notification-info {
  flex: 1;
}

.notification-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: hsl(var(--foreground));
  margin: 0 0 0.25rem 0;
}

.notification-description {
  font-size: var(--font-size-sm);
  color: hsl(var(--foreground-secondary));
}

.notification-methods {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.method-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-sm);
}

/* Button Styles */
.btn { padding:.65rem 1.15rem; border:1px solid var(--border); border-radius:.65rem; font-size:.75rem; font-weight:600; cursor:pointer; transition:all .35s ease; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:.55rem; background:var(--secondary); color:var(--foreground-secondary); }

.btn-primary { background:var(--primary); color:var(--primary-foreground); border-color:var(--primary); box-shadow:0 2px 8px -2px rgba(0,0,0,.4); }
.btn-primary:hover { filter:brightness(1.07); }

.btn-secondary { background:var(--surface-secondary); color:var(--foreground); }
.btn-secondary:hover { background:var(--surface-tertiary); }

.btn-destructive {
  background: hsl(var(--destructive));
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--destructive));
}

.btn-destructive:hover {
  background: hsl(var(--destructive));
  opacity: 0.9;
}

.btn-ghost { background:transparent; color:var(--foreground-muted); border-color:transparent; }
.btn-ghost:hover { background:var(--surface-secondary); color:var(--foreground); }

/* Form Actions */
.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid hsl(var(--border));
}

/* Responsive Design */
@media (max-width: 768px) { .settings-container { padding:1rem 1rem 2rem; }
  
  .settings-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .account-settings-widget,
  .security-settings-widget,
  .preferences-widget,
  .notifications-widget {
    grid-column: span 1;
  }
  
  .preferences-grid {
    grid-template-columns: 1fr;
  }
  
  .profile-avatar {
    flex-direction: column;
    text-align: center;
  }
  
  .settings-nav { flex-wrap:wrap; }
}

@keyframes setFadeIn { from { opacity:0; transform:translateY(12px);} to { opacity:1; transform:translateY(0);} }

/* === Advanced Settings UI (Professional Widgets & Modals) === */
.settings-tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.25rem; padding:.5rem .6rem; background:var(--surface-secondary); border:1px solid var(--border); border-radius:.9rem; }
.settings-tabs .st-tab { background:transparent; border:1px solid var(--border); padding:.55rem .9rem; font-size:.6rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; border-radius:.6rem; cursor:pointer; color:var(--foreground-secondary); transition:background .35s ease, color .35s ease, border-color .4s ease, box-shadow .45s ease; }
.settings-tabs .st-tab.active { background:var(--primary); color:var(--primary-foreground); border-color:var(--primary); box-shadow:0 2px 6px -2px rgba(0,0,0,.35); }
.settings-tabs .st-tab:hover:not(.active) { background:var(--surface-tertiary); color:var(--foreground); }

#settings-tab-content { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }

.users-panel, .integrations-panel, .accounting-panel, .notifications-panel, .security-panel, .audit-panel { background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-xl); padding:1.25rem 1.35rem 1.4rem; position:relative; overflow:hidden; box-shadow:0 2px 4px -2px rgba(0,0,0,.08),0 4px 14px -6px rgba(0,0,0,.18); transition:background .45s ease, box-shadow .55s ease, transform .55s cubic-bezier(.4,.14,.3,1), border-color .45s ease; }
.users-panel::before, .integrations-panel::before, .accounting-panel::before, .notifications-panel::before, .security-panel::before, .audit-panel::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--primary),var(--accent)); opacity:.7; }
.users-panel:hover, .integrations-panel:hover, .accounting-panel:hover, .notifications-panel:hover, .security-panel:hover, .audit-panel:hover { transform:translateY(-5px); box-shadow:0 10px 26px -10px rgba(0,0,0,.45),0 4px 14px -6px rgba(0,0,0,.25); }

.users-panel h3, .integrations-panel h3, .accounting-panel h3, .notifications-panel h3, .security-panel h3, .audit-panel h3 { margin:0 0 .85rem; font-size:.95rem; font-weight:700; display:flex; align-items:center; gap:.5rem; }
.users-panel h4 { margin:1.25rem 0 .5rem; font-size:.8rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--foreground-secondary); }

/* Form primitives */
.users-panel input, .users-panel select,
.integrations-panel input, .integrations-panel select,
.accounting-panel input, .accounting-panel select,
.notifications-panel input, .notifications-panel select,
.security-panel input, .security-panel select,
.audit-panel input, .audit-panel select { width:100%; padding:.55rem .65rem; background:var(--surface-secondary); border:1px solid var(--border); border-radius:.5rem; font-size:.7rem; color:var(--foreground); transition:background .3s ease, border-color .35s ease, box-shadow .4s ease; }
.users-panel input:focus, .users-panel select:focus, .integrations-panel input:focus, .integrations-panel select:focus, .accounting-panel input:focus, .accounting-panel select:focus, .notifications-panel input:focus, .notifications-panel select:focus, .security-panel select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(59,130,246,.25); }

/* Buttons refined */
#settings-page .users-panel button, #settings-page .integrations-panel button, #settings-page .accounting-panel button, #settings-page .notifications-panel button, #settings-page .security-panel button { background:var(--secondary); border:1px solid var(--border); font-size:.6rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; padding:.5rem .9rem; border-radius:.55rem; cursor:pointer; color:var(--foreground-secondary); transition:background .35s ease, color .35s ease, border-color .4s ease, box-shadow .5s ease, transform .45s cubic-bezier(.4,.14,.3,1); }
#settings-page .users-panel button:hover, #settings-page .integrations-panel button:hover, #settings-page .accounting-panel button:hover, #settings-page .notifications-panel button:hover, #settings-page .security-panel button:hover { background:var(--surface-tertiary); color:var(--foreground); }
#settings-page .users-panel button:active, #settings-page .integrations-panel button:active, #settings-page .accounting-panel button:active, #settings-page .notifications-panel button:active, #settings-page .security-panel button:active { transform:translateY(1px); }
#settings-page .primary-btn { background:var(--primary); color:var(--primary-foreground); border-color:var(--primary); box-shadow:0 2px 6px -2px rgba(0,0,0,.35); }
#settings-page .primary-btn:hover { filter:brightness(1.07); }

/* Tables */
.coa-table, .audit-table { width:100%; border-collapse:collapse; font-size:.6rem; }
.coa-table th, .coa-table td, .audit-table th, .audit-table td { padding:.45rem .6rem; border-bottom:1px solid var(--border); text-align:left; }
.coa-table th, .audit-table th { font-size:.55rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--foreground-muted); background:var(--surface-secondary); position:sticky; top:0; }
.coa-table tbody tr:hover, .audit-table tbody tr:hover { background:var(--surface-secondary); }

/* Layout specifics inside panels */
.integration-form, .coa-form { display:flex; flex-wrap:wrap; gap:.5rem; align-items:flex-start; margin:.5rem 0 1rem; }
.integration-form > *, .coa-form > * { flex:1 1 140px; }
.integration-list, .rules-list, .user-list { font-size:.6rem; display:flex; flex-direction:column; gap:.35rem; max-height:220px; overflow:auto; }
.user-row { padding:.4rem .55rem; background:var(--surface-secondary); border:1px solid var(--border); border-radius:.5rem; display:flex; justify-content:space-between; gap:.5rem; }
.user-row:hover { background:var(--surface-tertiary); }
.error { color:var(--destructive); font-size:.55rem; }

/* Modal base (future expansions) */
.settings-modal { position:fixed; inset:0; z-index:1200; display:flex; align-items:flex-start; justify-content:center; padding:8vh 1.25rem 2rem; }
.settings-modal.hidden { display:none; }
.settings-modal .sm-backdrop { position:absolute; inset:0; background:var(--background / 0.65); backdrop-filter:blur(6px); }
.settings-modal .sm-panel { position:relative; width:560px; max-width:95vw; max-height:80vh; overflow:auto; background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-xl); padding:1.25rem 1.4rem 1.6rem; box-shadow:0 8px 28px -8px rgba(0,0,0,.55),0 2px 10px -2px rgba(0,0,0,.35); display:flex; flex-direction:column; gap:.85rem; animation:modalIn .55s cubic-bezier(.4,.14,.3,1); }
.settings-modal .sm-header { display:flex; justify-content:space-between; align-items:center; gap:.75rem; border-bottom:1px solid var(--border); padding:0 0 .6rem; }
.settings-modal .sm-header h3 { margin:0; font-size:1rem; font-weight:700; }
.settings-modal .sm-body { font-size:.7rem; line-height:1.4; }
.settings-modal .sm-actions { display:flex; justify-content:flex-end; gap:.5rem; margin-top:.25rem; }

@keyframes modalIn { from { opacity:0; transform:translateY(16px) scale(.96);} to { opacity:1; transform:translateY(0) scale(1);} }

@media (max-width:860px){ #settings-tab-content { grid-template-columns:1fr; } .integration-form, .coa-form { flex-direction:column; } }