/*
 * Powered by AIMRON | https://aim-dev.com
 * (c) 2026 AIM DEV TEAM · aim-dev.com — All Rights Reserved · Proprietary
 * File: public/assets/css/aim-app.css
 *
 * Component styles · v2 Luxury edition
 */

/* Layout */
.aim-page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.aim-container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--aim-space-6);
}

/* Header */
.aim-header {
  position: sticky;
  top: 0;
  z-index: var(--aim-z-dropdown);
  background: color-mix(in srgb, var(--aim-bg-elev) 92%, transparent);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-block-end: 1px solid var(--aim-border);
}
.aim-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--aim-space-4);
  gap: var(--aim-space-4);
}
.aim-brand {
  font-family: var(--aim-font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.4px;
  color: var(--aim-text);
}
.aim-brand .accent {
  background: var(--aim-gradient-emerald-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}

/* Footer */
.aim-footer {
  border-block-start: 1px solid var(--aim-border);
  padding-block: var(--aim-space-10);
  text-align: center;
  color: var(--aim-text-mute);
  font-size: 14px;
}
.aim-footer .brand {
  background: var(--aim-gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
  letter-spacing: 1px;
}
.aim-footer .domain { color: var(--aim-accent); font-weight: 700; }

/* Card */
.aim-card {
  background: var(--aim-bg-elev);
  border: 1px solid var(--aim-border);
  border-radius: var(--aim-radius);
  box-shadow: var(--aim-shadow-sm);
  padding: var(--aim-space-6);
}

/* Auth */
.aim-auth-wrap {
  min-height: calc(100vh - 64px);
  display: grid;
  place-items: center;
  padding: var(--aim-space-6);
}
.aim-auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--aim-bg-elev);
  border: 1px solid var(--aim-border);
  border-radius: var(--aim-radius-lg);
  box-shadow: var(--aim-shadow-md);
  padding: var(--aim-space-10) var(--aim-space-8);
}
.aim-auth-card h1 {
  margin: 0 0 var(--aim-space-2);
  font-size: 28px;
  font-weight: 700;
  text-align: center;
}
.aim-auth-card .subtitle {
  text-align: center;
  color: var(--aim-text-mute);
  margin-block-end: var(--aim-space-6);
  font-size: 14px;
}

/* Forms */
.aim-field { margin-block-end: var(--aim-space-4); }
.aim-label {
  display: block;
  margin-block-end: var(--aim-space-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--aim-text-mute);
}
.aim-input,
.aim-textarea,
.aim-select {
  width: 100%;
  padding: 12px 16px;
  background: var(--aim-input-bg);
  border: 1px solid var(--aim-input-border);
  border-radius: var(--aim-radius-sm);
  color: var(--aim-text);
  font-size: 15px;
  transition: border-color var(--aim-duration-fast), box-shadow var(--aim-duration-fast);
}
.aim-input::placeholder,
.aim-textarea::placeholder { color: var(--aim-input-placeholder); }
.aim-input:focus,
.aim-textarea:focus,
.aim-select:focus {
  outline: none;
  border-color: var(--aim-input-border-focus);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--aim-primary) 15%, transparent);
}
.aim-input[aria-invalid="true"] { border-color: var(--aim-danger); }
.aim-error { color: var(--aim-danger); font-size: 13px; margin-block-start: var(--aim-space-1); }
.aim-help { color: var(--aim-text-mute); font-size: 13px; margin-block-start: var(--aim-space-1); }

/* Buttons */
.aim-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--aim-space-2);
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--aim-radius-sm);
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--aim-duration-fast) var(--aim-ease);
  user-select: none;
}
.aim-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.aim-btn:active:not(:disabled) { transform: translateY(1px); }
.aim-btn:focus-visible { outline: 3px solid var(--aim-primary); outline-offset: 2px; }

.aim-btn-primary {
  background: var(--aim-gradient-emerald);
  color: var(--aim-text-on-primary);
  border: 0;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--aim-primary) 30%, transparent);
}
.aim-btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--aim-primary) 40%, transparent);
}

.aim-btn-secondary {
  background: var(--aim-bg-elev2);
  color: var(--aim-text);
  border-color: var(--aim-border);
}
.aim-btn-secondary:hover:not(:disabled) {
  background: var(--aim-bg-elev);
  border-color: var(--aim-primary);
}

.aim-btn-ghost { background: transparent; color: var(--aim-text); }
.aim-btn-ghost:hover:not(:disabled) { background: var(--aim-bg-elev2); color: var(--aim-primary); }

.aim-btn-block { width: 100%; }

/* Provider buttons (OAuth) */
.aim-btn-provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--aim-border);
  border-radius: var(--aim-radius-sm);
  background: var(--aim-bg-elev);
  color: var(--aim-text);
  font-weight: 600;
  text-decoration: none;
  margin-block-end: var(--aim-space-2);
  transition: all var(--aim-duration-fast) var(--aim-ease);
}
.aim-btn-provider:hover { transform: translateY(-1px); border-color: var(--aim-primary); box-shadow: var(--aim-shadow); }
.aim-btn-provider .ico { width: 18px; height: 18px; display: inline-block; }
.aim-btn-provider.google  { color: #1f1f1f; background: #fff; border-color: #d4d4d4; }
.aim-btn-provider.apple   { color: #fff; background: #000; border-color: #000; }
.aim-btn-provider.line    { color: #fff; background: #06c755; border-color: #06c755; }
.aim-btn-provider.facebook{ color: #fff; background: #1877f2; border-color: #1877f2; }

/* Divider */
.aim-divider {
  display: flex;
  align-items: center;
  gap: var(--aim-space-3);
  color: var(--aim-text-mute);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-block: var(--aim-space-6);
}
.aim-divider::before,
.aim-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--aim-divider);
}

/* Flash messages */
.aim-flash {
  padding: var(--aim-space-4) var(--aim-space-5);
  border-radius: var(--aim-radius-sm);
  margin-block-end: var(--aim-space-4);
  font-size: 14px;
  border: 1px solid var(--aim-border);
  border-inline-start: 4px solid var(--aim-info);
  background: var(--aim-bg-elev);
}
.aim-flash-success { border-inline-start-color: var(--aim-success); background: color-mix(in srgb, var(--aim-success) 8%, var(--aim-bg-elev)); }
.aim-flash-warning { border-inline-start-color: var(--aim-warning); background: color-mix(in srgb, var(--aim-warning) 8%, var(--aim-bg-elev)); }
.aim-flash-danger  { border-inline-start-color: var(--aim-danger);  background: color-mix(in srgb, var(--aim-danger) 8%, var(--aim-bg-elev)); }
.aim-flash-info    { border-inline-start-color: var(--aim-info); }

/* Theme toggle */
.aim-theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--aim-bg-elev2);
  border: 1px solid var(--aim-border);
  color: var(--aim-text);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: all var(--aim-duration-fast);
}
.aim-theme-toggle:hover { background: var(--aim-bg-elev); transform: rotate(15deg); }
.aim-theme-toggle [data-theme-icon] { display: none; }
[data-theme="light"] .aim-theme-toggle [data-theme-icon="light"] { display: block; }
[data-theme="dark"]  .aim-theme-toggle [data-theme-icon="dark"]  { display: block; }
[data-theme="auto"]  .aim-theme-toggle [data-theme-icon="auto"]  { display: block; }

/* Utility */
.aim-text-mute { color: var(--aim-text-mute); }
.aim-text-center { text-align: center; }
.aim-mb-2 { margin-block-end: var(--aim-space-2); }
.aim-mb-4 { margin-block-end: var(--aim-space-4); }
.aim-mb-6 { margin-block-end: var(--aim-space-6); }
.aim-mt-4 { margin-block-start: var(--aim-space-4); }
.aim-flex { display: flex; gap: var(--aim-space-2); }
.aim-flex-between { display: flex; justify-content: space-between; align-items: center; gap: var(--aim-space-3); }
.aim-flex-col { display: flex; flex-direction: column; gap: var(--aim-space-2); }