/* Shared professional layer for auth/account experiences */

:root {
  --portal-bg: #070d16;
  --portal-surface: linear-gradient(180deg, rgba(13, 23, 37, 0.92), rgba(9, 17, 29, 0.94));
  --portal-border: rgba(148, 163, 184, 0.28);
  --portal-text: #e2ebf8;
  --portal-muted: #9fb3d1;
  --portal-accent: #6f7cff;
  --portal-success: #9bf4c9;
  --portal-error: #ffacac;
  --portal-shadow: 0 18px 44px rgba(2, 8, 20, 0.4);
}

:root[data-theme="light"] {
  --portal-bg: #f6f9ff;
  --portal-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.95));
  --portal-border: rgba(15, 23, 42, 0.16);
  --portal-text: #0f172a;
  --portal-muted: #475569;
  --portal-accent: #2d52ba;
  --portal-success: #166534;
  --portal-error: #b91c1c;
  --portal-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
}

/* Account dashboards */
.user-page,
.owner-page,
.manager-page {
  max-width: 1240px;
  margin: 30px auto 52px;
  padding: 0 20px;
}

.user-top,
.owner-top,
.manager-top {
  margin-bottom: 20px;
  padding: 18px 20px;
  border: 1px solid var(--portal-border);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0% 0%, rgba(111, 124, 255, 0.2), transparent 48%),
    radial-gradient(circle at 100% 0%, rgba(59, 130, 246, 0.16), transparent 40%),
    var(--portal-surface);
  box-shadow: var(--portal-shadow);
}

.user-top h1,
.owner-top h1,
.manager-top h1 {
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  color: var(--portal-text);
}

#userSummary,
#ownerSummary,
#managerSummary {
  color: var(--portal-muted) !important;
  font-size: 0.92rem;
  line-height: 1.6;
}

.user-card,
.owner-card,
.manager-card {
  border: 1px solid var(--portal-border) !important;
  background: var(--portal-surface) !important;
  border-radius: 16px !important;
  box-shadow: var(--portal-shadow) !important;
  padding: 18px !important;
}

.user-card h3,
.owner-card h3,
.manager-card h3 {
  font-size: 1.02rem !important;
  margin-bottom: 12px !important;
  color: var(--portal-text);
}

.user-card input,
.owner-card input,
.user-card select,
.owner-card select {
  border: 1px solid var(--portal-border) !important;
  background: rgba(12, 21, 34, 0.72) !important;
  color: var(--portal-text) !important;
  border-radius: 12px !important;
  min-height: 44px !important;
}

:root[data-theme="light"] .user-card input,
:root[data-theme="light"] .owner-card input,
:root[data-theme="light"] .user-card select,
:root[data-theme="light"] .owner-card select {
  background: rgba(255, 255, 255, 0.9) !important;
}

.user-card button,
.owner-card button,
.manager-card button {
  background: linear-gradient(135deg, var(--portal-accent), #7f8bff) !important;
  border-radius: 12px !important;
  min-height: 44px !important;
}

.user-msg,
.owner-msg {
  color: var(--portal-success) !important;
}

.user-table,
.owner-table,
.manager-table {
  font-size: 0.86rem !important;
}

.user-table th,
.user-table td,
.owner-table th,
.owner-table td,
.manager-table th,
.manager-table td {
  border-bottom: 1px solid var(--portal-border) !important;
  color: var(--portal-text);
}

.user-table th,
.owner-table th,
.manager-table th {
  color: var(--portal-muted) !important;
  font-weight: 700;
}

.stats,
.owner-stats,
.manager-stats {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.stat-box {
  border: 1px solid var(--portal-border) !important;
  background: rgba(10, 18, 30, 0.72) !important;
  border-radius: 12px !important;
}

:root[data-theme="light"] .stat-box {
  background: rgba(255, 255, 255, 0.86) !important;
}

.stat-box .label {
  color: var(--portal-muted) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.stat-box .value {
  color: var(--portal-text);
  font-size: clamp(1rem, 2vw, 1.32rem) !important;
}

/* Auth, verify, and utility cards */
.main-container .form-card,
.main-shell .panel,
.owner-wrap .owner-card,
.owner-wrap .owner-info,
.utility-shell .card {
  border-color: var(--portal-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--portal-shadow) !important;
}

.main-container .form-card h2,
.main-shell .form-panel h2,
.owner-wrap .owner-card h1,
.utility-shell .card h1 {
  letter-spacing: -0.02em;
}

.main-container .form-input,
.main-shell .form-input,
.owner-wrap .owner-field input,
.owner-wrap .owner-field select,
.utility-shell input {
  border-radius: 12px !important;
  border-color: var(--portal-border) !important;
}

.main-container .btn-submit,
.main-shell .btn-primary,
.owner-wrap .owner-btn,
.utility-shell button,
.verification-actions .btn {
  border-radius: 12px !important;
  min-height: 44px;
}

.main-container .auth-panel-message,
.main-container .signup-inline-message,
.main-shell .signup-inline-message,
.owner-wrap .owner-msg,
.utility-shell .status-box,
.utility-shell .message {
  border-radius: 12px;
}

@media (max-width: 780px) {
  .user-page,
  .owner-page,
  .manager-page {
    padding: 0 12px;
  }

  .user-top,
  .owner-top,
  .manager-top {
    padding: 14px;
  }
}

/* ── Enhanced Professional Styling ── */

/* Form inputs and fields - improved focus states */
.main-container .form-input:focus,
.main-shell .form-input:focus,
.owner-wrap .owner-field input:focus,
.owner-wrap .owner-field select:focus,
.utility-shell input:focus,
.user-card input:focus,
.owner-card input:focus,
.user-card select:focus,
.owner-card select:focus {
  border-color: var(--portal-accent) !important;
  background: rgba(111, 124, 255, 0.08) !important;
  box-shadow: 0 0 0 3px rgba(111, 124, 255, 0.12) !important;
  transition: all 0.2s ease;
}

:root[data-theme="light"] .main-container .form-input:focus,
:root[data-theme="light"] .main-shell .form-input:focus,
:root[data-theme="light"] .owner-wrap .owner-field input:focus,
:root[data-theme="light"] .owner-wrap .owner-field select:focus,
:root[data-theme="light"] .utility-shell input:focus,
:root[data-theme="light"] .user-card input:focus,
:root[data-theme="light"] .owner-card input:focus,
:root[data-theme="light"] .user-card select:focus,
:root[data-theme="light"] .owner-card select:focus {
  border-color: var(--portal-accent) !important;
  background: rgba(45, 82, 186, 0.04) !important;
  box-shadow: 0 0 0 3px rgba(45, 82, 186, 0.08) !important;
}

/* Button enhancements */
.main-container .btn-submit,
.main-shell .btn-primary,
.owner-wrap .owner-btn,
.utility-shell button,
.verification-actions .btn,
.user-card button,
.owner-card button,
.manager-card button {
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  border: none;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.02em;
}

.main-container .btn-submit:hover,
.main-shell .btn-primary:hover,
.owner-wrap .owner-btn:hover,
.utility-shell button:hover,
.verification-actions .btn:hover,
.user-card button:hover,
.owner-card button:hover,
.manager-card button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(111, 124, 255, 0.28) !important;
}

:root[data-theme="light"] .main-container .btn-submit:hover,
:root[data-theme="light"] .main-shell .btn-primary:hover,
:root[data-theme="light"] .owner-wrap .owner-btn:hover,
:root[data-theme="light"] .utility-shell button:hover,
:root[data-theme="light"] .verification-actions .btn:hover,
:root[data-theme="light"] .user-card button:hover,
:root[data-theme="light"] .owner-card button:hover,
:root[data-theme="light"] .manager-card button:hover {
  box-shadow: 0 12px 32px rgba(45, 82, 186, 0.18) !important;
}

.main-container .btn-submit:active,
.main-shell .btn-primary:active,
.owner-wrap .owner-btn:active,
.utility-shell button:active,
.verification-actions .btn:active {
  transform: translateY(-1px);
}

/* Card hover states */
.user-card,
.owner-card,
.manager-card,
.main-container .form-card {
  transition: all 0.3s ease;
}

.user-card:hover,
.owner-card:hover,
.manager-card:hover,
.main-container .form-card:hover {
  border-color: rgba(111, 124, 255, 0.4) !important;
  transform: translateY(-2px);
}

:root[data-theme="light"] .user-card:hover,
:root[data-theme="light"] .owner-card:hover,
:root[data-theme="light"] .manager-card:hover,
:root[data-theme="light"] .main-container .form-card:hover {
  border-color: rgba(45, 82, 186, 0.3) !important;
}

/* Form section headers - enhanced typography */
.form-section-title {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  color: var(--portal-text) !important;
}

.form-section-hint {
  font-size: 0.9rem !important;
  color: var(--portal-muted) !important;
  line-height: 1.5 !important;
  margin-bottom: 16px !important;
}

/* Status messages - professional styling */
.auth-panel-message,
.signup-inline-message,
.form-status-message {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  font-size: 0.9rem !important;
  line-height: 1.5;
  animation: slideInDown 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-status-message::before {
  content: '';
  min-width: 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.form-status-message.success::before {
  content: '✓';
  background: var(--portal-success);
  color: white;
  font-weight: bold;
  font-size: 0.75rem;
}

.form-status-message.error::before {
  content: '!';
  background: var(--portal-error);
  color: white;
  font-weight: bold;
  font-size: 0.75rem;
}

/* Tables - professional styling */
.user-table,
.owner-table,
.manager-table {
  width: 100% !important;
  border-collapse: collapse;
}

.user-table tr,
.owner-table tr,
.manager-table tr {
  transition: background-color 0.2s ease;
  border-bottom: 1px solid var(--portal-border) !important;
}

.user-table tbody tr:hover,
.owner-table tbody tr:hover,
.manager-table tbody tr:hover {
  background-color: rgba(111, 124, 255, 0.08) !important;
}

:root[data-theme="light"] .user-table tbody tr:hover,
:root[data-theme="light"] .owner-table tbody tr:hover,
:root[data-theme="light"] .manager-table tbody tr:hover {
  background-color: rgba(45, 82, 186, 0.04) !important;
}

.user-table th,
.owner-table th,
.manager-table th {
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.05em !important;
  font-weight: 700 !important;
  padding: 14px 12px !important;
  text-align: left;
}

.user-table td,
.owner-table td,
.manager-table td {
  padding: 12px !important;
  font-size: 0.9rem !important;
}

/* Link styling */
.form-link {
  position: relative;
  overflow: hidden;
  transition: color 0.2s ease;
}

.form-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--portal-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.form-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Spinners and loading states */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner,
.loading-indicator {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(111, 124, 255, 0.2);
  border-top-color: var(--portal-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Badges and tags */
.verified-badge,
.status-badge,
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.verified-badge {
  background: rgba(155, 244, 201, 0.15);
  color: var(--portal-success);
  border: 1px solid rgba(155, 244, 201, 0.3);
}

/* Accessibility improvements */
.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--portal-text);
  letter-spacing: 0.01em;
}

input[type="checkbox"],
input[type="radio"] {
  cursor: pointer;
  accent-color: var(--portal-accent);
}

input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Form groups spacing */
.form-group {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
}

.form-group:last-child {
  margin-bottom: 0;
}

/* Responsive improvements */
@media (max-width: 1024px) {
  .stats,
  .owner-stats,
  .manager-stats {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
}

@media (max-width: 768px) {
  .form-section-title {
    font-size: 0.88rem !important;
  }

  .auth-panel-message,
  .signup-inline-message,
  .form-status-message {
    font-size: 0.85rem !important;
    padding: 12px 14px !important;
  }

  .user-table,
  .owner-table,
  .manager-table {
    font-size: 0.8rem !important;
  }

  .user-table th,
  .owner-table th,
  .manager-table th {
    padding: 10px 8px !important;
  }

  .user-table td,
  .owner-table td,
  .manager-table td {
    padding: 10px 8px !important;
  }
}