/* ===========================
   Gym Log – Warm Soft UI
   Drop-in CSS over Tailwind CDN
   (permap'ina tamsų "zinc/emerald" į šiltą kremą + oranž/rož akcentus)
   =========================== */

:root{
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Apple Color Emoji","Segoe UI Emoji";

  /* fonas */
  --bg0:#fff7ed;
  --bg1:#fffbf5;

  /* kortelės */
  --card: rgba(255,255,255,.78);
  --card2: rgba(255,255,255,.62);

  /* tekstas */
  --ink:#1f2937;
  --muted:#6b7280;
  --muted2:#9ca3af;

  /* akcentas */
  --brand:#f97316;
  --brand2:#fb7185;

  --border: rgba(17,24,39,.10);
  --border2: rgba(17,24,39,.14);
  --ring: rgba(249,115,22,.35);

  --shadow: 0 20px 60px rgba(17,24,39,.12);
  --shadow2: 0 10px 30px rgba(17,24,39,.10);

  --radius: 22px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

*{ box-sizing:border-box; }
html, body { min-height: 100%; }

/* FONAS kaip atskiras fixed sluoksnis — nesikartoja ir neturi “siūlių” */
html{
  background: var(--bg1);
  overflow-x: hidden;
}
html::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(900px 500px at 20% 15%, rgba(251,113,133,.25), transparent 60%),
    radial-gradient(900px 500px at 80% 20%, rgba(249,115,22,.22), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));

  background-repeat: no-repeat;
  background-size: cover;
}

body{
  margin:0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: transparent !important;
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }
::selection{ background: rgba(249,115,22,.22); }

:focus{ outline:none; }
:focus-visible{ box-shadow: 0 0 0 6px var(--ring); }

/* Brand highlight ring (our orange) */
.ring-brand{
  position: relative;
  z-index: 9999;
  border-radius: 12px !important;
  /* stronger backing color so mobile browsers render it reliably */
  background: linear-gradient(90deg, rgba(249,115,22,0.12), rgba(249,115,22,0.06)) !important;
  box-shadow: 0 0 0 6px rgba(249,115,22,.44) !important;
  border: 1px solid rgba(249,115,22,.14) !important;
  animation: ring-pulse 1.2s ease-in-out;
  -webkit-tap-highlight-color: rgba(249,115,22,0.18);
}
@keyframes ring-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(249,115,22,.44); }
  50%{ box-shadow: 0 0 0 12px rgba(249,115,22,.22); }
  100%{ box-shadow: 0 0 0 0 rgba(249,115,22,0); }
}

/* Mobile / touch tweaks: make active/focused state more pronounced on coarse pointers */
@media (pointer: coarse) {
  /* Ensure the pressed/tap state shows our orange, not the default gray overlay */
  #workoutList a:active,
  #workoutList a:focus,
  #workoutList a:focus-visible {
    background: linear-gradient(90deg, rgba(249,115,22,0.18), rgba(249,115,22,0.08)) !important;
    box-shadow: 0 0 0 8px rgba(249,115,22,.40) !important;
    border-radius: 12px;
    color: var(--ink) !important;
    -webkit-tap-highlight-color: transparent !important; /* prefer our orange flash over gray */
  }

  /* Force immediate active/orange flash even before :focus fires */
  #workoutList a:active { background: linear-gradient(90deg, rgba(249,115,22,0.20), rgba(249,115,22,0.10)) !important; }

  /* make the ring more visible on phones */
  .ring-brand{ background: linear-gradient(90deg, rgba(249,115,22,0.22), rgba(249,115,22,0.10)) !important; }
}

/* Also ensure anchors don't show the default gray tap highlight on any pointer by default */
#workoutList a { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }


/* When a workout link is hovered/focused/active, use soft brand highlight instead of default gray outline */
#workoutList a:hover,
#workoutList a:focus,
#workoutList a:focus-visible,
#workoutList a:active {
  outline: none;
  /* stronger orange background so it overrides .hover:bg-zinc-900/50 */
  background: linear-gradient(90deg, rgba(249,115,22,0.10), rgba(249,115,22,0.04)) !important;
  box-shadow: 0 0 0 6px rgba(249,115,22,.36) !important;
  border-radius: 12px;
  color: var(--ink) !important;
}

/* Make sure any default browser outline is removed for anchors in workoutList */
#workoutList a { outline: none; -webkit-tap-highlight-color: rgba(249,115,22,0.18); -moz-tap-highlight-color: rgba(249,115,22,0.18); }
#workoutList a:focus { outline: none; }
#workoutList a:active { transform: translateY(0); }


/* Bendri perėjimai */
button, input, select, textarea, a{
  transition: background-color .18s var(--ease),
              border-color .18s var(--ease),
              color .18s var(--ease),
              transform .08s var(--ease),
              box-shadow .18s var(--ease),
              filter .18s var(--ease);
}
button:active{ transform: translateY(1px); }

/* Scrollbar (webkit) */
*::-webkit-scrollbar { height: 10px; width: 10px; }
*::-webkit-scrollbar-thumb{
  background: rgba(17,24,39,.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-track{ background: transparent; }

/* ====== "ui-*" helperiai (suderinamumui) ====== */
.ui-header{
  background: rgba(255,255,255,.60);
  backdrop-filter: blur(14px);
}
.ui-panel{
  background: var(--card);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 18px;
  box-shadow: var(--shadow2);
  backdrop-filter: blur(10px);
}
.ui-panel-soft{
  background: var(--card2);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 18px;
  backdrop-filter: blur(10px);
}
.ui-muted{ color: var(--muted); }
.ui-muted2{ color: var(--muted2); }

.ui-input, .ui-select{
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--border2);
  background: rgba(255,255,255,.86);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.ui-input::placeholder{ color: var(--muted2); }
.ui-input:focus, .ui-select:focus{
  border-color: rgba(249,115,22,.55);
  box-shadow: 0 0 0 6px var(--ring);
}

.ui-btn{
  border: 1px solid var(--border2);
  border-radius: 14px;
  padding: 10px 16px;
  color: var(--ink);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow2);
}
.ui-btn:hover{ background: rgba(255,255,255,.86); }

.ui-btn-accent{
  border: 0;
  border-radius: 14px;
  padding: 10px 16px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 12px 26px rgba(249,115,22,.24);
}
.ui-btn-accent:hover{
  box-shadow: 0 16px 34px rgba(249,115,22,.28);
  filter: saturate(1.05);
}

.ui-badge{
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(249,115,22,.18);
  background: rgba(249,115,22,.10);
  color: #9a3412;
}

/* ====== Tailwind klasių per-map'inimas (be HTML keitimo) ====== */
/* Backgrounds */
.bg-zinc-950 { background-color: rgba(255,255,255,.35) !important; }
.bg-zinc-900 { background-color: rgba(255,255,255,.55) !important; }

/* Slash klasės (glass ant pagrindinio vaizdo) */
.bg-zinc-950\/95 { background-color: rgba(255,255,255,.62) !important; backdrop-filter: blur(12px); }
.bg-zinc-950\/80 { background-color: rgba(255,255,255,.55) !important; backdrop-filter: blur(14px); }
.bg-zinc-950\/60 { background-color: rgba(255,255,255,.60) !important; backdrop-filter: blur(14px); }
.bg-zinc-950\/40 { background-color: var(--card) !important; backdrop-filter: blur(10px); }
.bg-zinc-950\/30 { background-color: var(--card2) !important; backdrop-filter: blur(10px); }

.bg-zinc-900\/70 { background-color: rgba(255,255,255,.78) !important; }
.bg-zinc-900\/60 { background-color: rgba(255,255,255,.72) !important; }
.bg-zinc-900\/50 { background-color: rgba(255,255,255,.66) !important; }

.hover\:bg-zinc-900\/70:hover { background-color: rgba(255,255,255,.86) !important; }

/* Borders */
.border-zinc-900 { border-color: rgba(17,24,39,.10) !important; }
.border-zinc-800 { border-color: rgba(17,24,39,.14) !important; }

/* Text */
.text-zinc-100 { color: #111827 !important; }
.text-zinc-200 { color: var(--ink) !important; }
.text-zinc-300 { color: color-mix(in oklab, var(--ink) 80%, var(--muted)) !important; }
.text-zinc-400 { color: var(--muted) !important; }
.text-zinc-500 { color: var(--muted2) !important; }

/* Akcentas (emerald -> oranž/rož) */
.bg-emerald-500, .bg-emerald-400{
  background: linear-gradient(135deg, var(--brand), var(--brand2)) !important;
  color: #fff !important;
}
.hover\:bg-emerald-400:hover{ filter: brightness(1.02) saturate(1.05) !important; }

.text-emerald-400, .text-emerald-300{
  color: color-mix(in oklab, var(--brand) 72%, #c2410c) !important;
}
.text-emerald-200, .text-emerald-100, .text-emerald-100\/90, .text-emerald-100\/80{
  color: #fff !important;
}

/* Active tab (navClass) */
.bg-emerald-500\/15{ background-color: rgba(249,115,22,.10) !important; }
.bg-emerald-500\/20{ background-color: rgba(249,115,22,.12) !important; }
.bg-emerald-500\/10{ background-color: rgba(249,115,22,.08) !important; }
.bg-emerald-500\/5 { background-color: rgba(249,115,22,.06) !important; }

.border-emerald-500\/40, .border-emerald-400\/40{ border-color: rgba(249,115,22,.35) !important; }
.border-emerald-500\/30{ border-color: rgba(249,115,22,.28) !important; }
.border-emerald-500\/25{ border-color: rgba(249,115,22,.24) !important; }

.bg-emerald-500.text-black, .bg-emerald-400.text-black{ color:#fff !important; }

/* “Card”/sekcijų pagražinimai */
.rounded-2xl.border{
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow2);
}
.rounded-2xl.border.bg-zinc-950\/40{ box-shadow: var(--shadow); }

/* Inputs, jei markupe naudojami rounded-xl */
input.rounded-xl, select.rounded-xl, textarea.rounded-xl{
  background: rgba(255,255,255,.86) !important;
  border-color: rgba(17,24,39,.14) !important;
  color: var(--ink) !important;
}
input.rounded-xl::placeholder{ color: var(--muted2) !important; }
input.rounded-xl:focus, select.rounded-xl:focus, textarea.rounded-xl:focus{
  border-color: rgba(249,115,22,.55) !important;
  box-shadow: 0 0 0 6px var(--ring) !important;
}

/* Buttons su rounded-xl.border */
button.rounded-xl.border, a.rounded-xl.border{
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(17,24,39,.14) !important;
  box-shadow: var(--shadow2);
  color: var(--ink) !important;
}
button.rounded-xl.border:hover, a.rounded-xl.border:hover{
  background: rgba(255,255,255,.86) !important;
  border-color: rgba(249,115,22,.22) !important;
}

/* “Primary” mygtukai (bg-emerald-500) */
button.rounded-xl.bg-emerald-500, a.rounded-xl.bg-emerald-500{
  box-shadow: 0 12px 26px rgba(249,115,22,.24) !important;
}

/* Canvas ir divideriai */
canvas{ border-radius: 14px; }
.h-10.w-px.bg-zinc-800{
  background: linear-gradient(to bottom, transparent, rgba(17,24,39,.18), transparent) !important;
}
.text-xs{ letter-spacing: .12px; }

/* Drawer (jei naudojat) */
.drawer-actions{
  position: sticky;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  gap: 10px;
  padding: 10px;
  margin-top: 14px;
  border: 1px solid rgba(17,24,39,.14);
  border-radius: 16px;
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
}
.drawer-body{ display:flex; flex-direction:column; height: min(90vh, 820px); }
@media (min-width: 768px){ .drawer-body{ height: 100%; } }
.drawer-scroll-area{
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 16px;
}
.drawer-actionbar{
  flex: 0 0 auto;
  display:grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  z-index: 50;
}

/* ====== MODAL OVERLAY ====== */
.bg-black\/60{
  background-color: rgba(17,24,39,.65) !important;
}

/* ====== MODAL: Naujo pratimo pridėjimas ====== */
/* Apply identical panel styling to modal and details drawer */
#modal > div:nth-child(2),
#detailsDrawer > div:nth-child(2) {
  background:
    radial-gradient(900px 500px at 20% 15%, rgba(251,113,133,.25), transparent 60%),
    radial-gradient(900px 500px at 80% 20%, rgba(249,115,22,.22), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1)) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: var(--shadow) !important;
  border-color: rgba(17,24,39,.12) !important;
  color: var(--ink) !important;
  border-radius: 18px;
}

#modal * {
  color: var(--ink) !important;
}

/* Centered header divider + unified header sizing for modal & details drawer */
#modal .flex.items-center.justify-between.px-4.py-3,
#detailsDrawer .flex.items-center.justify-between.px-4.py-3 {
  border-bottom: none !important;
  position: relative;
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  min-height: 56px;
  align-items: center;
}

/* centered short divider under header */
#modal .flex.items-center.justify-between.px-4.py-3::after,
#detailsDrawer .flex.items-center.justify-between.px-4.py-3::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 8px;
  width: 82%;
  max-width: 720px;
  height: 1px;
  background: rgba(17,24,39,.10);
}

/* unify close button size/appearance in headers */
#modal #modalCloseX, #modal #modalClose, #detailsDrawer #detailsClose {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
}

/* ensure header title vertically centered and not compressed */
#modal .font-semibold, #detailsDrawer .font-semibold {
  line-height: 1;
}

/* ====== DETAILS DRAWER / PRATIMO PANELĖ (tikslinis fix) ====== */
#detailsDrawer {
  color: var(--ink);
}

#detailsDrawer .absolute.inset-0 {
  background-color: rgba(17,24,39,.65) !important;
}

/* Panelės turinis (antrasis div) */
#detailsDrawer > div:nth-child(2) {
  background:
    radial-gradient(900px 500px at 20% 15%, rgba(251,113,133,.25), transparent 60%),
    radial-gradient(900px 500px at 80% 20%, rgba(249,115,22,.22), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1)) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 20px 60px rgba(17,24,39,.15) !important;
  border-color: rgba(17,24,39,.12) !important;
}

#detailsDrawer .flex.flex-col {
  background:
    radial-gradient(900px 500px at 20% 15%, rgba(251,113,133,.25), transparent 60%),
    radial-gradient(900px 500px at 80% 20%, rgba(249,115,22,.22), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1)) !important;
  color: var(--ink) !important;
}

#detailsDrawer * {
  color: var(--ink) !important;
}

#detailsDrawer .border-b,
#detailsDrawer .border-t {
  border-color: rgba(17,24,39,.10) !important;
}

#detailsDrawer .text-zinc-300,
#detailsDrawer .text-zinc-400 {
  color: var(--muted) !important;
}

/* Input fields drawer'yje */
#detailsDrawer input.ui-input {
  background: rgba(255,255,255,.86) !important;
  color: var(--ink) !important;
}