/* ============================================================
   Admino.ro — Carbon Design System Custom Layer
   Built on top of @carbon/styles
   ============================================================ */

/* -----------------------------------------------------------
   1. Design Tokens
   ----------------------------------------------------------- */
:root {
  /* Contrast hierarchy (4 levels) */
  --app-text-foreground: var(--cds-text-primary, #161616);
  --app-text-secondary: var(--cds-text-secondary, #525252);
  --app-text-muted: var(--cds-text-placeholder, #a8a8a8);
  --app-text-faint: var(--cds-border-subtle-01, #e0e0e0);

  /* 4px grid spacing — aliases to Carbon spacing tokens */
  --space-1: var(--cds-spacing-02, 0.25rem); /* 4px */
  --space-2: var(--cds-spacing-03, 0.5rem);  /* 8px */
  --space-3: var(--cds-spacing-04, 0.75rem); /* 12px */
  --space-4: var(--cds-spacing-05, 1rem);    /* 16px */
  --space-5: 1.25rem;                        /* 20px — no Carbon equivalent */
  --space-6: var(--cds-spacing-06, 1.5rem);  /* 24px */
  --space-7: var(--cds-spacing-07, 2rem);    /* 32px */
  --space-8: var(--cds-spacing-08, 2.5rem);  /* 40px */
  --space-9: var(--cds-spacing-09, 3rem);    /* 48px */

  /* Transitions */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --transition-micro: 150ms var(--ease-out);
  --transition-normal: 200ms var(--ease-out);
  --transition-slow: 250ms var(--ease-out);

  /* Border radius (sharp/technical) */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* Depth */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-elevated: 0 2px 6px rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(0, 0, 0, 0.04);

  /* Layout */
  --header-height: 48px; /* CDS header standard height */

  /* Form inputs: 16px minimum (prevents iOS auto-zoom, improves readability) */
  --cds-body-compact-01-font-size: 1rem;
}

/* Native form elements: override inline font-size declarations */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="tel"],
input[type="url"],
input[type="search"],
select,
textarea {
  font-size: 1rem !important;
}

/* Explicit opt-out for compact inputs */
.input--compact {
  --cds-body-compact-01-font-size: 0.875rem;
  font-size: 0.875rem !important;
}

/* Dark mode token adjustments */
.cds--g100 {
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-elevated: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 255, 0.06);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(255, 255, 255, 0.06);
}


/* -----------------------------------------------------------
   2. Base & Typography
   ----------------------------------------------------------- */
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.5;
  color: var(--app-text-foreground);
  background-color: var(--cds-background, #f4f4f4);
  margin: 0;
  padding: 0;
}

/* Heading utilities */
.heading-01 { font-size: 2.285rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.heading-02 { font-size: 1.714rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.heading-03 { font-size: 1.285rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.heading-04 { font-size: 1.142rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; }
.heading-05 { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; }
.heading-06 { font-size: 0.857rem; font-weight: 600; letter-spacing: 0; line-height: 1.4; }

/* Body text */
.body-01 { font-size: 1rem; font-weight: 400; line-height: 1.5; }
.body-02 { font-size: 0.928rem; font-weight: 400; line-height: 1.45; }
.body-compact { font-size: 1rem; font-weight: 400; line-height: 1.285; }

/* Labels */
.label-01 {
  font-size: 0.857rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--app-text-secondary);
}
.label-02 {
  font-size: 0.785rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--app-text-muted);
}

/* Data / Monospace */
.data-text {
  font-family: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.data-large {
  font-family: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
  font-size: 1.714rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.data-xl {
  font-family: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
  font-size: 2.285rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Color utilities */
.text-primary { color: var(--app-text-foreground); }
.text-secondary { color: var(--app-text-secondary); }
.text-muted { color: var(--app-text-muted); }
.text-faint { color: var(--app-text-faint); }
.text-success { color: var(--cds-support-success, #198038); }
.text-error { color: var(--cds-support-error, #da1e28); }
.text-warning { color: var(--cds-support-warning, #f1c21b); }


/* -----------------------------------------------------------
   3. CDS UI Shell Overrides
   ----------------------------------------------------------- */

/* Side nav responsive (mobile hamburger) — positioned below header */
cds-header ~ cds-side-nav {
  block-size: calc(100% - 3rem);
  margin-block-start: 3rem;
}

/* -----------------------------------------------------------
   3b. App Layout (authenticated pages)
   ----------------------------------------------------------- */
.app-main {
  padding-top: var(--header-height);
  min-height: 100vh;
}

.app-content {
  padding: var(--space-6);
  max-width: 1400px;
}

/* Full-page layout (login, register — no sidebar) */
.app-fullpage {
  display: flex;
  min-height: 100vh;
}


/* -----------------------------------------------------------
   3b. Login / Full-page Layout
   ----------------------------------------------------------- */
.login-panel {
  width: 33.33%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cds-background, #f4f4f4);
  padding: var(--space-6);
}

.login-form-wrapper {
  width: 100%;
  max-width: 400px;
}

.login-visual {
  flex: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Full-width Carbon button (login) */
.login-form-wrapper cds-button {
  width: 100%;
}

/* Login separator (metode alternative) */
.login-separator {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.login-separator::before,
.login-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--cds-border-subtle, #e0e0e0);
}

/* Progress indicator (register wizard) */
.login-form-wrapper cds-progress-indicator {
  margin-bottom: var(--space-6);
  width: 100%;
}

/* Two-column grid for form fields */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

@media (max-width: 41.98rem) {
  .form-grid-2 {
    grid-template-columns: 1fr;
  }
}


/* -----------------------------------------------------------
   4. Component Card (replaces Bootstrap .card)
   ----------------------------------------------------------- */
.component-card {
  background: var(--cds-layer-01, #ffffff);
  border: 1px solid var(--cds-border-subtle-01, #e0e0e0);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-normal);
}

.component-card:hover {
  box-shadow: var(--shadow-hover);
}

.component-card--flat {
  box-shadow: none;
}

.component-card--flat:hover {
  box-shadow: none;
}

.component-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.component-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--app-text-foreground);
  margin: 0;
}

.component-card__description {
  font-size: 0.857rem;
  color: var(--app-text-secondary);
  margin: 0;
}


/* -----------------------------------------------------------
   5. Grid & Flex Utilities
   ----------------------------------------------------------- */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-6);
}

.grid-4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--space-6);
}

.grid-2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-6);
}

.flex-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.flex-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }


/* -----------------------------------------------------------
   6. Metric Cards (KPI)
   ----------------------------------------------------------- */
.metric-card {
  background: var(--cds-layer-01, #ffffff);
  border: 1px solid var(--cds-border-subtle-01, #e0e0e0);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-normal);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.metric-card:hover {
  box-shadow: var(--shadow-hover);
}

.metric-card__label {
  font-size: 0.857rem;
  font-weight: 500;
  color: var(--app-text-secondary);
  letter-spacing: 0.02em;
}

.metric-card__value {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 2rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--app-text-foreground);
  line-height: 1.1;
}

.metric-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
}

.metric-card__trend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.857rem;
  font-weight: 500;
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
}

.metric-card__trend--up { color: var(--cds-support-success, #198038); }
.metric-card__trend--down { color: var(--cds-support-error, #da1e28); }

.metric-card__period {
  font-size: 0.785rem;
  color: var(--app-text-muted);
}

.metric-card__sparkline {
  height: 32px;
  margin-top: var(--space-2);
  overflow: hidden;
}

.metric-card__sparkline svg {
  width: 100%;
  height: 100%;
}


/* -----------------------------------------------------------
   7. Dashboard Layout Grids
   ----------------------------------------------------------- */
.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.dashboard-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.dashboard-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-6);
}


/* -----------------------------------------------------------
   8. Chart Cards
   ----------------------------------------------------------- */
.chart-card {
  background: var(--cds-layer-01, #ffffff);
  border: 1px solid var(--cds-border-subtle-01, #e0e0e0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.chart-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
}

.chart-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--app-text-foreground);
  margin: 0;
}

.chart-card__body {
  padding: var(--space-6);
  min-height: 280px;
}


/* -----------------------------------------------------------
   9. Activity Feed
   ----------------------------------------------------------- */
.activity-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 400px;
  overflow-y: auto;
}

.activity-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  position: relative;
}

.activity-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 36px;
  bottom: -4px;
  width: 1px;
  background: var(--cds-border-subtle-01, #e0e0e0);
}

.activity-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cds-border-strong-01, #8d8d8d);
  flex-shrink: 0;
  margin-top: 6px;
  margin-left: 12px;
}

.activity-item__dot--success { background: var(--cds-support-success, #198038); }
.activity-item__dot--info { background: var(--cds-support-info, #0043ce); }
.activity-item__dot--warning { background: var(--cds-support-warning, #f1c21b); }
.activity-item__dot--error { background: var(--cds-support-error, #da1e28); }

.activity-item__content {
  flex: 1;
  min-width: 0;
}

.activity-item__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 2px;
}

.activity-item__user {
  font-size: 0.857rem;
  font-weight: 600;
  color: var(--app-text-foreground);
}

.activity-item__action {
  font-size: 0.857rem;
  color: var(--app-text-secondary);
}

.activity-item__time {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.785rem;
  color: var(--app-text-muted);
  font-variant-numeric: tabular-nums;
}


/* -----------------------------------------------------------
   10. Status Indicators
   ----------------------------------------------------------- */
.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.857rem;
  font-weight: 500;
  color: var(--app-text-foreground);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot--operational { background: var(--cds-support-success, #198038); }
.status-dot--degraded { background: var(--cds-support-warning, #f1c21b); }
.status-dot--outage { background: var(--cds-support-error, #da1e28); }
.status-dot--maintenance { background: var(--cds-support-info, #0043ce); }

.status-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.status-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  transition: background var(--transition-micro);
}

.status-list__item:hover {
  background: var(--cds-layer-hover-01, #e8e8e8);
}

.status-list__left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.status-list__name {
  font-size: 0.857rem;
  font-weight: 500;
  color: var(--app-text-foreground);
}

.status-list__value {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.857rem;
  color: var(--app-text-secondary);
  font-variant-numeric: tabular-nums;
}


/* -----------------------------------------------------------
   11. Avatar System
   ----------------------------------------------------------- */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 600;
  font-size: 0.857rem;
  color: var(--cds-text-on-color, #ffffff);
  background: var(--cds-interactive, #0f62fe);
  flex-shrink: 0;
  position: relative;
}

.avatar--sm { width: 24px; height: 24px; font-size: 0.714rem; }
.avatar--md { width: 32px; height: 32px; font-size: 0.857rem; }
.avatar--lg { width: 40px; height: 40px; font-size: 1rem; }

.avatar--purple { background: #8a3ffc; }
.avatar--teal { background: #009d9a; }
.avatar--magenta { background: #ee5396; }
.avatar--cyan { background: #0072c3; }
.avatar--green { background: #198038; }

.avatar__status {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--cds-layer-01, #ffffff);
}

.avatar__status--online { background: var(--cds-support-success, #198038); }
.avatar__status--away { background: var(--cds-support-warning, #f1c21b); }
.avatar__status--offline { background: var(--app-text-muted); }


/* -----------------------------------------------------------
   12. Toast Notifications Container
   ----------------------------------------------------------- */
.toast-container {
  position: fixed;
  top: calc(var(--header-height) + var(--space-4));
  right: var(--space-4);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}


/* -----------------------------------------------------------
   13. Scrollbar Styling
   ----------------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--cds-border-subtle-01, #e0e0e0);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--app-text-muted);
}


/* -----------------------------------------------------------
   14. FOUC Prevention
   ----------------------------------------------------------- */
:not(:defined) {
  visibility: hidden;
}

/* Alpine.js cloak */
[x-cloak] {
  display: none !important;
}


/* -----------------------------------------------------------
   15. Responsive
   ----------------------------------------------------------- */

/* Tablet */
@media (max-width: 65.98rem) {
  .login-panel { width: 50%; }

  .grid-3 {
    grid-template-columns: 1fr 1fr;
  }

  .grid-4 {
    grid-template-columns: 1fr 1fr;
  }

  .dashboard-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-bottom {
    grid-template-columns: 1fr 1fr;
  }

  .dashboard-bottom > :nth-child(3) {
    grid-column: 1 / -1;
  }
}

/* Mobile */
@media (max-width: 41.98rem) {
  .login-panel { width: 100%; }
  .login-visual { display: none; }

  .app-content {
    padding: var(--space-4);
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .grid-2-1 {
    grid-template-columns: 1fr;
  }

  .dashboard-metrics {
    grid-template-columns: 1fr;
  }

  .dashboard-charts {
    grid-template-columns: 1fr;
  }

  .dashboard-bottom {
    grid-template-columns: 1fr;
  }

  .dashboard-bottom > :nth-child(3) {
    grid-column: auto;
  }

  .component-card {
    padding: var(--space-4);
    margin-bottom: var(--space-4);
  }

  .metric-card {
    padding: var(--space-4);
  }

  .metric-card__value {
    font-size: 1.5rem;
  }

  .toast-container {
    left: var(--space-4);
    right: var(--space-4);
  }

  .activity-feed {
    max-height: 300px;
  }

  .activity-item__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  /* Data table horizontal scroll on mobile */
  cds-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  cds-pagination {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* -----------------------------------------------------------
   16. (Reserved)
   ----------------------------------------------------------- */

/* -----------------------------------------------------------
   17. Loading State Utilities
   ----------------------------------------------------------- */

.loading-container {
  text-align: center;
  padding: var(--space-9) 0; /* 48px vertical */
}

.loading-container--compact {
  padding: var(--space-6) 0; /* 24px vertical */
}

/* -----------------------------------------------------------
   18. Checklist Component
   ----------------------------------------------------------- */

.checklist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4); /* 12px 16px */
  border-bottom: 1px solid var(--cds-border-subtle-01);
}

.checklist-item__left {
  display: flex;
  align-items: center;
  gap: var(--space-3); /* 12px */
}

.checklist-item__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.checklist-item__content {
  display: flex;
  flex-direction: column;
  gap: 2px; /* 2px - too small for --space-1 (4px) */
}

/* -----------------------------------------------------------
   19. Card Padding Variants (standardized overrides)
   ----------------------------------------------------------- */

.component-card--tight {
  padding: var(--space-3); /* 12px - for list items */
}

.component-card--comfortable {
  padding: var(--space-7); /* 32px - for CTAs */
}

.component-card--centered {
  text-align: center;
}

/* -----------------------------------------------------------
   20. Slide Reveal (Advanced Settings)
   ----------------------------------------------------------- */

.slide-reveal {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}

.slide-reveal.is-open {
  max-height: 600px; /* Generous max-height for smooth animation */
}

.slide-reveal-inner {
  padding-top: var(--space-3); /* 12px */
}

/* -----------------------------------------------------------
   21. Spacing Utilities
   ----------------------------------------------------------- */

/* Margin-bottom utilities */
.mb-2 { margin-bottom: var(--space-1); } /* 4px */
.mb-3 { margin-bottom: var(--space-2); } /* 8px */
.mb-4 { margin-bottom: var(--space-3); } /* 12px */
.mb-5 { margin-bottom: var(--space-4); } /* 16px */
.mb-6 { margin-bottom: var(--space-6); } /* 24px */
.mb-7 { margin-bottom: var(--space-7); } /* 32px */
.mb-8 { margin-bottom: var(--space-8); } /* 40px */

/* Margin-top utilities */
.mt-4 { margin-top: var(--space-3); }
.mt-5 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }

/* -----------------------------------------------------------
   22. Layout Utilities
   ----------------------------------------------------------- */

/* Text alignment */
.text-center { text-align: center; }
.text-secondary { color: var(--app-text-secondary); }

/* Position utilities */
.position-relative { position: relative; }
.position-absolute { position: absolute; }

/* Display utilities */
.d-block { display: block; }
.d-flex { display: flex; }
.d-inline-block { display: inline-block; }

/* Flex alignment */
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }
.justify-content-between { justify-content: space-between; }
.flex-direction-column { flex-direction: column; }

/* -----------------------------------------------------------
   23. Responsive Form Grids
   ----------------------------------------------------------- */

/* Form grid utilities */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.form-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-3);
}

.form-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

/* Auto-collapse on mobile */
@media (max-width: 41.98rem) {
  .form-grid-2,
  .form-grid-3,
  .form-grid-4 {
    grid-template-columns: 1fr;
  }
}