/* ============================================================
   ASAHI Design System — Global Styles
   Shared across all demo pages. Tailwind CDN utility classes
   still do the heavy lifting; this file carries tokens, base
   resets, and repeated component patterns.
   ============================================================ */

/* --- Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Inter:wght@400&family=Geist:wght@400;500&display=swap');

/* --- Design Tokens (CSS vars, mirrors design.md) --- */
:root {
  /* Brand */
  --asa-primary: #1c3563;
  --asa-primary-on: #ffffff;
  --asa-primary-subtle: #f2f5fa;
  --asa-primary-text: #25266a;
  --asa-primary-hover: #162b52;
  --asa-avatar-bg: #c3d0e6;

  /* Secondary palette */
  --asa-pink-1: #f5375c;
  --asa-pink-2: #f1c5c2;
  --asa-blue-3: #b1e7f5;
  --asa-blue-1: #103767;

  /* Neutral */
  --asa-text: #202020;
  --asa-text-strong: #0a0a0a;
  --asa-text-muted: #737373;
  --asa-text-light: #838383;
  --asa-text-subtle: #4a5565;
  --asa-text-dark: #141b34;
  --asa-border: #e8e8e8;
  --asa-border-light: #efefef;
  --asa-bg: #fafafa;
  --asa-bg-subtle: #f9f9f9;
  --asa-white: #ffffff;

  /* Semantic */
  --asa-success: #2baa50;
  --asa-success-bg: #d7f2da;
  --asa-info: #007af1;
  --asa-info-strong: #0087ff;
  --asa-info-bg: #e8f3ff;
  --asa-warning: #947300;
  --asa-warning-bg: #fff4ce;
  --asa-warning-border: #ffce00;
  --asa-danger: #e5484d;
  --asa-danger-2: #d73840;
  --asa-danger-bg: #ffebea;
  --asa-yellow: #f9c500;

  /* Radii + shadows */
  --asa-radius: 2px;
  --asa-radius-pill: 1000px;
  --asa-shadow-sm: 0px 2px 4px rgba(0, 0, 0, 0.04);
  --asa-shadow-md: 0px 4px 8px rgba(0, 0, 0, 0.06), 0px 0px 4px rgba(0, 0, 0, 0.04);

  /* Hero gradient (dashboard, landing, hero banners) */
  --asa-hero-gradient: linear-gradient(to right, #1c3563, #103767);
}

/* --- Base --- */
html, body {
  font-family: 'Roboto', sans-serif;
  background-color: var(--asa-bg);
  color: var(--asa-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings get balanced wrapping for better line break distribution */
h1, h2, h3, h4 {
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}

.font-inter { font-family: 'Inter', sans-serif; }
.font-geist { font-family: 'Geist', sans-serif; }

/* --- Minimum font size guard (accessibility) --- */
html, body { font-size: 14px; }
.text-\[10px\], .text-\[11px\] { font-size: 12px !important; } /* bump anything below */

/* --- Global focus-visible ring (keyboard accessibility) --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--asa-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Inputs already have ring on focus — keep subtle here */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-offset: 0;
}

/* --- Phosphor Icons — make <i class="ph ..."> respect Tailwind w-h sizing --- */
i[class*="ph "], i[class^="ph-"], i.ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
i[class*="ph "] > svg,
i[class^="ph-"] > svg,
i.ph > svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* ============================================================
   LAYOUT — shell page structure
   ============================================================ */

.asa-shell {
  display: flex;
  min-height: 100vh;
}

.asa-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.asa-content {
  flex: 1;
  overflow-y: auto;
  padding: 40px;
}

.asa-content-inner {
  max-width: 1060px;
  margin: 0 auto;
}

/* ============================================================
   SIDEBAR — 300px dual rail (56 icon + 244 section nav)
   ============================================================ */

.asa-sidebar {
  width: 300px;
  display: flex;
  background: var(--asa-white);
  border-right: 1px solid var(--asa-border-light);
  flex-shrink: 0;
}

.asa-sidebar-rail {
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  border-right: 1px solid var(--asa-border-light);
  flex-shrink: 0;
}

.asa-sidebar-logo {
  width: 28px;
  height: 28px;
  position: relative;
  margin-bottom: 16px;
}
.asa-sidebar-logo::before,
.asa-sidebar-logo::after,
.asa-sidebar-logo > span:nth-child(1),
.asa-sidebar-logo > span:nth-child(2) {
  content: '';
  position: absolute;
  display: block;
}
.asa-sidebar-logo > span:nth-child(1) { top: 0; left: 0; width: 14px; height: 14px; background: var(--asa-pink-1); }
.asa-sidebar-logo > span:nth-child(2) { top: 0; right: 0; width: 6px; height: 6px; background: var(--asa-pink-2); }
.asa-sidebar-logo > span:nth-child(3) { bottom: 0; left: 0; width: 14px; height: 14px; background: var(--asa-blue-3); display: block; position: absolute; }
.asa-sidebar-logo > span:nth-child(4) { bottom: 0; right: 0; width: 14px; height: 14px; background: var(--asa-blue-1); display: block; position: absolute; }

.asa-rail-btn {
  width: 100%;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--asa-text-dark);
  transition: background-color 0.15s ease;
}
.asa-rail-btn:hover { background: #f3f4f6; }
.asa-rail-btn.is-active {
  background: var(--asa-primary);
  color: var(--asa-white);
}

.asa-rail-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 0 8px;
}

.asa-sidebar-section {
  flex: 1;
  background: var(--asa-bg);
}

.asa-sidebar-section-header {
  padding: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.asa-sidebar-section-header h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--asa-text-strong);
  line-height: 24px;
  margin-bottom: 8px;
}
.asa-sidebar-section-header p {
  font-size: 16px;
  color: var(--asa-text-subtle);
  line-height: 24px;
}

.asa-sidebar-nav {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.asa-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  color: var(--asa-text);
  font-size: 16px;
  transition: background-color 0.15s ease;
}
.asa-nav-item:hover { background: #f3f4f6; }
.asa-nav-item.is-active {
  background: var(--asa-primary-subtle);
  color: var(--asa-primary-text);
  font-weight: 500;
}

/* ============================================================
   TOP HEADER (64px)
   ============================================================ */

.asa-header {
  height: 64px;
  background: var(--asa-white);
  border-bottom: 1px solid var(--asa-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  flex-shrink: 0;
}

.asa-search {
  position: relative;
  width: 336px;
}
.asa-search input {
  width: 100%;
  height: 40px;
  padding: 0 16px 0 40px;
  background: var(--asa-bg-subtle);
  border: 1px solid var(--asa-border);
  border-radius: var(--asa-radius);
  font-size: 16px;
}
.asa-search input:focus {
  outline: none;
  box-shadow: 0 0 0 1px var(--asa-primary);
}
.asa-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--asa-text-muted);
}

.asa-points-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  background: var(--asa-primary);
  color: var(--asa-white);
  border-radius: var(--asa-radius-pill);
  box-shadow: var(--asa-shadow-md);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: opacity 0.15s ease;
}
.asa-points-pill:hover { opacity: 0.9; }

.asa-header-btn {
  height: 40px;
  border: 1px solid #000;
  border-radius: var(--asa-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  gap: 8px;
  background: transparent;
  transition: background-color 0.15s ease;
}
.asa-header-btn:hover { background: var(--asa-bg); }
.asa-header-btn.is-square { width: 40px; padding: 0; }

.asa-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--asa-radius-pill);
  background: var(--asa-avatar-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--asa-primary);
  font-weight: 500;
  font-size: 16px;
}

/* ============================================================
   FOOTER (64px)
   ============================================================ */

.asa-footer {
  height: 64px;
  background: var(--asa-white);
  border-top: 1px solid var(--asa-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  flex-shrink: 0;
}
.asa-footer p { font-size: 14px; font-weight: 500; color: var(--asa-text-light); }
.asa-footer a {
  font-size: 14px;
  color: var(--asa-text-light);
  transition: opacity 0.15s ease;
}
.asa-footer a:hover { opacity: 0.8; }
.asa-footer-divider {
  height: 16px;
  width: 1px;
  background: var(--asa-border-light);
  transform: rotate(1.6deg);
}

/* ============================================================
   COMPONENTS — cards, buttons, inputs, badges, alerts
   ============================================================ */

.asa-card {
  background: var(--asa-white);
  border: 1px solid var(--asa-border);
  border-radius: var(--asa-radius);
  overflow: hidden;
}
.asa-card-header {
  background: var(--asa-bg-subtle);
  padding: 24px;
}
.asa-card-body { padding: 24px; }

/* Buttons */
.asa-btn {
  height: 40px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--asa-radius);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: opacity 0.15s ease, background-color 0.15s ease;
  cursor: pointer;
}
.asa-btn-primary {
  background: var(--asa-primary);
  color: var(--asa-white);
  box-shadow: var(--asa-shadow-md);
}
.asa-btn-primary:hover { opacity: 0.9; }
.asa-btn-secondary {
  background: var(--asa-white);
  color: var(--asa-text);
  border: 1px solid var(--asa-border);
}
.asa-btn-secondary:hover { background: var(--asa-bg); }
.asa-btn-danger {
  background: var(--asa-danger-2);
  color: var(--asa-white);
}
.asa-btn-danger:hover { opacity: 0.9; }

/* Inputs */
.asa-input, .asa-textarea, .asa-select {
  width: 100%;
  padding: 0 12px;
  border: 1px solid var(--asa-border);
  border-radius: var(--asa-radius);
  font-size: 14px;
  background: var(--asa-white);
  color: var(--asa-text);
}
.asa-input { height: 40px; }
.asa-textarea { padding: 8px 12px; resize: none; }
.asa-input:focus, .asa-textarea:focus, .asa-select:focus {
  outline: none;
  box-shadow: 0 0 0 1px var(--asa-primary);
}
.asa-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--asa-text);
  display: block;
  margin-bottom: 8px;
}

/* Badges */
.asa-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--asa-radius-pill);
  border: 1px solid transparent;
}
.asa-badge-success { background: var(--asa-success-bg); border-color: var(--asa-success); color: var(--asa-success); }
.asa-badge-info { background: var(--asa-info-bg); border-color: var(--asa-info-strong); color: var(--asa-info); }
.asa-badge-danger { background: var(--asa-danger-bg); border-color: var(--asa-danger); color: var(--asa-danger-2); }
.asa-badge-pink { background: var(--asa-danger-bg); border-color: var(--asa-pink-1); color: var(--asa-pink-1); }

/* Alerts */
.asa-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--asa-radius);
  border: 1px solid transparent;
}
.asa-alert h4 { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.asa-alert p { font-size: 14px; color: var(--asa-text); }
.asa-alert-info { background: var(--asa-info-bg); border-color: var(--asa-info-strong); }
.asa-alert-info h4 { color: var(--asa-info); }
.asa-alert-warning { background: var(--asa-warning-bg); border-color: var(--asa-warning-border); }
.asa-alert-warning h4 { color: var(--asa-warning); }
.asa-alert-danger { background: var(--asa-danger-bg); border-color: var(--asa-danger); }
.asa-alert-danger h4 { color: var(--asa-danger-2); }

/* Page title block */
.asa-page-title {
  margin-bottom: 32px;
}
.asa-page-title h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--asa-text-strong);
  line-height: 24px;
  margin-bottom: 4px;
}
.asa-page-title p {
  font-size: 16px;
  color: var(--asa-text-subtle);
}
.asa-page-title hr {
  margin-top: 16px;
  border: 0;
  border-bottom: 1px solid var(--asa-border-light);
}