/* Glutz RMA Portal – app.css */
/* Utility classes used across Jinja2 templates */

/* Design token CSS custom properties */
:root {
  --glutz-navy:     #0d2351;
  --glutz-navy-100: #e8edf7;
  --glutz-navy-50:  #f2f4fb;
  --glutz-cyan:     #00c8d7;
  --slate-200:      #e2e8f0;
  --slate-400:      #94a3b8;
  --slate-500:      #64748b;
}

/* Reusable form field classes (used with Tailwind via class="field-label" etc.) */
/* Note: With Tailwind CDN these are NOT auto-purged, so we define them as plain CSS */

.field-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--slate-500);
  margin-bottom: 0.375rem;
}

.field-input {
  width: 100%;
  border: 1px solid var(--slate-200);
  border-radius: 0.5rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  color: var(--glutz-navy);
  background: #fff;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field-input.field-input-locked {
  background: #f1f5f9;
  color: var(--slate-500);
  cursor: not-allowed;
}

.field-input:focus {
  border-color: var(--glutz-navy);
  box-shadow: 0 0 0 1px var(--glutz-navy);
}

.field-input::placeholder {
  color: var(--slate-400);
}

.field-select {
  width: 100%;
  border: 1px solid var(--slate-200);
  border-radius: 0.5rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  color: var(--glutz-navy);
  background: #fff;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230d2351' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field-select:focus {
  border-color: var(--glutz-navy);
  box-shadow: 0 0 0 1px var(--glutz-navy);
}

/* Stronger card separation against the app background */
.bg-white.rounded-xl,
.bg-white.rounded-2xl,
.bg-white.rounded-lg {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 10px 28px rgba(15, 23, 42, 0.06);
}

.bg-white.border-slate-100,
.bg-white[class*="border-slate-100"] {
  border-color: #d6deea;
}

.bg-white.border-slate-200,
.bg-white[class*="border-slate-200"] {
  border-color: #c3cedd;
}

.bg-white .border-slate-100,
.bg-white[class*="border-slate-100"] .border-slate-100 {
  border-color: #dbe4ef;
}

.bg-slate-50 {
  background-color: #eef3f8;
}

.surface-subtle {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

html {
  scrollbar-gutter: stable;
}

.app-logo {
  display: block;
  width: 108px;
  height: auto;
}

.app-logo-auth {
  display: block;
  width: 148px;
  height: auto;
}

.app-logo-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.app-logo-mark img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

[x-cloak] {
  display: none !important;
}

@media (max-width: 1023px) {
  .app-logo {
    width: 96px;
  }

  .app-logo-auth {
    width: 132px;
  }
}

/* Dashboard: draft cleanup notice rows */
.draft-cleanup-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  white-space: nowrap;
}

.draft-cleanup-number {
  display: inline-block;
  min-width: 9rem;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.draft-cleanup-date {
  display: inline-block;
  min-width: 12rem;
}

.draft-cleanup-days {
  display: inline-block;
}

@media (max-width: 640px) {
  .draft-cleanup-row {
    display: grid;
    gap: 0.125rem;
    white-space: normal;
  }

  .draft-cleanup-number,
  .draft-cleanup-date,
  .draft-cleanup-days {
    min-width: 0;
    max-width: none;
  }
}

/* Admin masterdata: tab row remains visible while page scrolls */
.admin-tabs-sticky {
  position: sticky;
  top: 0;
  z-index: 20;
}