/* =====================================================================
   Zetsu — Saisie d'heure : tokens du design system Indeso/Livin'
   Source : maquette claude.ai/design « Livin Saisie d'heure »
   (app/colors_and_type.css — palette bordeaux/prune Livin')
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* === BRAND PALETTE (Livin' — bordeaux / prune) ====================== */
  --indeso-turquoise: #7A3C51;
  --indeso-blue:      #4A2236;
  --indeso-green:     #6E9A4F;
  --indeso-yellow:    #C8922B;
  --indeso-orange:    #C0612E;
  --indeso-pink:      #C0567E;
  --indeso-violet:    #8A4E83;
  --indeso-purple:    #6E4A86;

  --indeso-turquoise-tint: #E9D3DC;
  --indeso-turquoise-wash: #F7ECF0;
  --indeso-turquoise-deep: #5E2A40;
  --indeso-blue-tint:      #E5D2DB;
  --indeso-blue-deep:      #371928;

  /* === NEUTRES ========================================================= */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #F7F7F8;
  --neutral-100:  #EEEEEF;
  --neutral-200:  #BFC0C0;
  --neutral-300:  #A3A4A6;
  --neutral-500:  #696B70;
  --neutral-700:  #525358;
  --neutral-900:  #3A3B43;

  /* === SEMANTIC / ROLES ================================================ */
  --color-success: var(--indeso-green);
  --color-warning: var(--indeso-yellow);
  --color-danger:  var(--indeso-orange);

  --fg-primary:   var(--indeso-blue);
  --fg-body:      var(--neutral-900);
  --fg-secondary: var(--neutral-500);
  --fg-link:      var(--indeso-turquoise-deep);

  --bg-page:      var(--neutral-0);
  --bg-subtle:    var(--neutral-50);
  --bg-tinted:    var(--indeso-turquoise-wash);
  --bg-card:      var(--neutral-0);

  --border-soft:  #E2E3E4;
  --border-mid:   var(--neutral-200);
  --border-focus: var(--indeso-turquoise);

  /* Tints des types de saisie (maquette app/data.js TYPES) */
  --tint-travel:  #ECDFEE;
  --tint-work:    var(--indeso-turquoise-wash);
  --tint-break:   #FCEBDB;
  --tint-purple:  #EDE6F3;

  /* === TYPO ============================================================ */
  --font-sans: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;

  /* === RADIUS ========================================================== */
  --radius-xs:   4px;  --radius-sm:   6px;  --radius-md:   10px;
  --radius-lg:   16px; --radius-xl:   24px; --radius-pill: 999px;

  /* === SHADOWS (teintées bordeaux) ===================================== */
  --shadow-xs: 0 1px 2px rgba(74, 34, 54, 0.07);
  --shadow-sm: 0 2px 6px rgba(74, 34, 54, 0.09);
  --shadow-md: 0 8px 20px rgba(74, 34, 54, 0.12);
  --shadow-lg: 0 18px 40px rgba(74, 34, 54, 0.16);
  --shadow-cta: 0 10px 24px rgba(122, 60, 81, 0.34);

  /* === MOTION ========================================================== */
  --ease-standard: cubic-bezier(.22, .61, .36, 1);
  --ease-out:      cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 360ms;

  /* === SIGNATURE GRADIENTS ============================================ */
  --cta-bg:       #7A3C51;
  --cta-bg-hover: #8C4A60;
  --wave-main:    linear-gradient(120deg, #4A2236 0%, #6E3349 50%, #8E475F 100%);
}

/* =====================================================================
   Base — coque mobile (Saisie d'heure.html)
   ===================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
html { font-size: 16px; }

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  background: var(--bg-subtle);
  color: var(--fg-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, textarea { font-family: var(--font-sans); -webkit-tap-highlight-color: transparent; }
::-webkit-scrollbar { width: 0; height: 0; }
::selection { background: var(--indeso-turquoise-tint); color: var(--indeso-blue-deep); }

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  color: var(--indeso-blue);
  letter-spacing: -0.01em;
  margin: 0;
  font-weight: 700;
}

#app { display: flex; justify-content: center; }

/* Colonne app : plein écran sur mobile, centrée façon app sur desktop */
.appcol {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  height: 100vh;
  height: 100dvh;
  background: var(--bg-page);
  overflow: hidden;
}
@media (min-width: 540px) {
  body {
    background:
      radial-gradient(120% 80% at 50% -10%, var(--indeso-turquoise-wash) 0%, transparent 55%),
      var(--bg-subtle);
  }
  #app { align-items: center; min-height: 100vh; min-height: 100dvh; padding: 24px; }
  .appcol {
    height: min(900px, calc(100dvh - 48px));
    border-radius: 28px;
    box-shadow: 0 30px 70px rgba(74, 34, 54, .16), 0 6px 18px rgba(74, 34, 54, .08);
    border: 1px solid var(--border-soft);
  }
}

@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes sheetFade { from { opacity: 0; } to { opacity: 1; } }

/* Écrans d'erreur Blazor par défaut */
#blazor-error-ui {
  background: #FCEBDB;
  color: var(--indeso-orange);
  bottom: 0;
  box-shadow: var(--shadow-md);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
  font-weight: 700;
  font-size: 13px;
}
#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

.loading-splash {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--indeso-blue);
  font-family: 'Lato', sans-serif;
  font-weight: 700;
}
.loading-splash .spin {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 4px solid var(--indeso-turquoise-tint);
  border-top-color: var(--indeso-turquoise);
  animation: zspin 0.9s linear infinite;
}
@keyframes zspin { to { transform: rotate(360deg); } }