/* css/style-view.css */

/* =========================================================
   THEME / TOKENS
   ========================================================= */
:root{
  --bg0:#02030a;
  --bg1:#050711;
  --bg2:#151832;

  --text:#f4f5ff;
  --muted:rgba(244,245,255,0.72);

  --stroke:rgba(255,255,255,0.10);
  --stroke-soft:rgba(255,255,255,0.06);
  --stroke-strong:rgba(255,255,255,0.16);

  --accentA:rgba(165,189,255,0.95);
  --accentB:rgba(53,82,210,1);

  --panel-radial: radial-gradient(circle at top left, rgba(84,112,255,0.18), rgba(8,10,26,0.96));
  --pill-bg: radial-gradient(circle at top, rgba(120,144,255,0.18), rgba(7,12,36,0.92));
  --pill-bg-hover: radial-gradient(circle at top, rgba(141,181,255,0.55), rgba(21,32,96,0.98));
  --pill-bg-active: radial-gradient(circle at top, rgba(165,189,255,0.95), rgba(53,82,210,1));

  --shadow-card: 0 18px 40px rgba(0,0,0,0.70), 0 0 0 1px rgba(255,255,255,0.06);
  --shadow-hover: 0 0 0 1px rgba(132,179,255,0.55), 0 10px 24px rgba(0,0,0,0.65);

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;

  --radius:14px;
  --ctl-h:36px;

  --row-gap-mobile: 4px;
  --grid-col-gap-mobile: 8px;

  /* Defaults used by sticky rows (view.php also measures and sets --topbar-h for scroll-margin) */
  --header-h: 56px; /* header.php sticky bar height fallback */
  --main-h: 58px;   /* #topbarMain height fallback */
}

*{ box-sizing:border-box; }

/* Hide scrollbars globally (keep scroll) */
*{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
*::-webkit-scrollbar{ width:0; height:0; display:none; }

html,body{
  margin:0;
  padding:0;
  min-height:100%;
  background: radial-gradient(circle at top, var(--bg2) 0%, var(--bg1) 55%, var(--bg0) 100%);
  color:var(--text);
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
  overflow-y:auto;
}

a{ color: rgba(205,220,255,0.95); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* =========================================================
   STICKY STACK (CSS side)
   Note: view.php controls the actual scrolling container (#viewContent)
   and measures sticky height for scroll-margin via --topbar-h.
   ========================================================= */

/* Ensure sticky isn't broken by an overflow ancestor */
html, body{ overflow-y:auto; }

/* header.php bar (first sticky layer) */
.astro-header-theme{
  position: sticky;
  top: 0;
  z-index: 3000;
  background: rgba(5,7,17,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* topbar container stays in normal flow */
.topbar{
  position: relative;
  z-index: 2000;
}

/* sticky row 1 (below header.php) */
#topbarMain{
  position: sticky;
  top: var(--header-h, 56px);
  z-index: 2500;

  background: linear-gradient(to bottom, rgba(5,7,17,0.98), rgba(5,7,17,0.84));
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* sticky row 2 (below header + row1) */
#topbarFilters{
  position: sticky;
  top: calc(var(--header-h, 56px) + var(--main-h, 58px));
  z-index: 2400;

  background: linear-gradient(to bottom, rgba(5,7,17,0.96), rgba(5,7,17,0.82));
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#topbarFilters::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  box-shadow: 0 12px 26px rgba(0,0,0,0.55);
  pointer-events:none;
}

/* =========================================================
   TOPBAR LAYOUT
   ========================================================= */

.topbar-row{ padding:12px 24px; }

.topbar-row.main{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"title mode form";
  align-items:center;
  column-gap:12px;

  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  white-space:nowrap;
}
.topbar-row.main::-webkit-scrollbar{ display:none; }

.topbar h1{
  grid-area:title;
  margin:0;
  font-size:18px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  white-space:nowrap;
  color: rgba(244,245,255,0.92);
}

.topbar-row.filters{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;

  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.topbar-row.filters::-webkit-scrollbar{ display:none; }

/* =========================================================
   SEGMENT (Year / Date)
   ========================================================= */

.mode-toggle{
  grid-area:mode;
  display:flex;
  align-items:center;
  justify-content:center;
}

.segment{
  position:relative;
  display:inline-flex;
  align-items:center;

  padding:3px;
  border-radius:999px;
  background: radial-gradient(circle at top, rgba(120,144,255,0.22), rgba(7,12,36,0.95));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.segment a{
  position:relative;
  min-width:92px;
  height:34px;
  line-height:34px;
  padding:0 14px;
  border-radius:999px;
  text-align:center;

  font-size:12px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;

  color: rgba(244,245,255,0.78);
  white-space:nowrap;

  transition: background 140ms ease-out, color 140ms ease-out, box-shadow 140ms ease-out, transform 80ms ease-out;
}

.segment a:hover{
  background: var(--pill-bg-hover);
  color:#ffffff;
  transform: translateY(-1px);
}

.segment a.active{ color:#050711; }

.segment a.active::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:999px;
  background: var(--pill-bg-active);
  box-shadow: 0 0 0 1px rgba(205,220,255,0.85), 0 8px 18px rgba(0,0,0,0.75);
}

/* =========================================================
   FORMS / INPUTS / BUTTONS
   ========================================================= */

.year-form,.date-form{
  grid-area:form;
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  white-space:nowrap;
}

.year-form input[type=number],
.date-form input[type=number]{
  width:96px;
  height:var(--ctl-h);
  padding:0 12px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: var(--pill-bg);
  color: var(--text);
  font-weight:700;
  outline:none;
  transition: box-shadow 140ms ease-out, border-color 140ms ease-out, transform 80ms ease-out, background 140ms ease-out;
}
.date-form input[type=number]{ width:78px; }

.btn{
  height:var(--ctl-h);
  padding:0 12px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: radial-gradient(circle at top, rgba(98,150,255,0.28), rgba(13,26,76,0.92));
  color:#ffffff;
  cursor:pointer;

  font-size:12px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  white-space:nowrap;

  transition: background 140ms ease-out, box-shadow 140ms ease-out, transform 80ms ease-out, border-color 140ms ease-out;
}
.btn-light{ background: transparent; border-color: rgba(255,255,255,0.18); color: rgba(244,245,255,0.86); }

/* =========================================================
   SELECTS (UNIFIED)
   ========================================================= */

.select-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap:8px;
  white-space:nowrap;
}

/* Base select */
.select-wrap select,
select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  height:var(--ctl-h);
  min-width:120px;
  padding:0 34px 0 12px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,0.18);

  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    rgba(8,12,28,0.85);

  color: var(--text);
  outline:none;
  cursor:pointer;
  white-space:nowrap;

  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f4f5ff' stroke-opacity='0.85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:16px;

  transition: border-color 140ms ease-out, box-shadow 140ms ease-out, transform 80ms ease-out, background 140ms ease-out;
}

.select-wrap select:hover,
select:hover{
  border-color: rgba(165,189,255,0.55);
}

.select-wrap select:focus,
select:focus{
  outline:none;
  border-color: rgba(165,189,255,0.85);
  box-shadow: 0 0 0 2px rgba(165,189,255,0.25);
}

.select-wrap select option,
select option{
  background:#050711;
  color:#f4f5ff;
}

.era-select{
  min-width:0 !important;
  width:auto !important;
  padding-right:28px !important;
}

/* =========================================================
   PAGE CONTAINER
   ========================================================= */

.container-outer{
  max-width:1100px;
  margin:0 auto 40px;
  padding:12px 20px 0;
}

.container{ margin:0; padding:0; }
.hscroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
#mainContainer{ width:100%; }

/* =========================================================
   ENTRY LIST / CARDS
   ========================================================= */

.entry-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}

.entry-card{
  background: var(--panel-radial);
  padding:12px;
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 80ms ease-out, box-shadow 140ms ease-out, border-color 140ms ease-out;
  cursor:pointer;
}

.entry-card:hover{
  box-shadow: var(--shadow-hover);
  border-color: rgba(165,189,255,0.28);
  transform: translateY(-1px);
}

.entry-header{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  flex-wrap:nowrap;
  overflow:hidden;

  margin-bottom:6px;
  padding-bottom:8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.entry-header .daypair{ display:inline-flex; align-items:center; gap:6px; min-width:0; }
.entry-header .mono.day{ flex:0 0 auto; }
.entry-header .mono.day::after{ content: ","; margin-left:1px; opacity:.85; }

.entry-header .pair-name{
  flex:0 1 auto;
  min-width:0;
  max-width: clamp(220px, 45vw, 520px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  opacity:.95;
}

.entry-header .pair-planets{
  flex:0 0 auto;
  white-space:nowrap;
  font-weight:800;
  letter-spacing:.04em;
  opacity:.80;
}

.entry-header .spacer{ flex:1 1 auto; }
.entry-header .actions{ flex:0 0 auto; display:flex; gap:8px; align-items:center; }

.icon-btn{
  width:32px; height:32px; min-width:32px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: radial-gradient(circle at top, rgba(98,150,255,0.28), rgba(13,26,76,0.92));
  background-repeat:no-repeat;
  background-position:center;
  background-size:16px;
  background-image:url('../ico/arrow-repeat.svg');
  cursor:pointer;
}

.entry-header .actions .btn{ height:32px; line-height:32px; padding:0 12px; }

.mono{ font-family:var(--mono); font-size:18px; letter-spacing:0.02em; opacity:.78; }

.entry-card .ai-horo{
  margin-top:10px;
  padding:10px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,0.18);
  background: rgba(3,7,18,0.55);
  line-height:1.5;
  max-width:100%;
  white-space:pre-wrap;
  word-break:break-word;
  overflow-wrap:anywhere;
}

.month-block, .year-block{
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top:14px;
  margin-top:14px;
}
.month-block:first-of-type, .year-block:first-of-type{
  border-top:0; padding-top:0; margin-top:0;
}

.month-title, .year-title{
  margin:0 0 8px 0;
  color: rgba(244,245,255,0.65);
  font-weight:900;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.empty{
  opacity:.72;
  padding: 10px 0;
}

/* =========================================================
   DATE MODE SELECT WIDTH TWEAKS
   ========================================================= */

.date-form .select-wrap{ width:auto; flex:0 0 auto; }

.date-form select#month{
  width: fit-content;
  min-width: 0;
  padding-right: 30px;
}

.date-form select#month option{ white-space:nowrap; }

/* prevent century select collapsing */
.date-form #century{
  min-width: max-content;
  width:auto;
  padding-left:12px;
  padding-right:32px;
  background: var(--pill-bg);
  color: var(--text);
}

/* Force dark popup look as much as possible */
#era, #month, #century{
  background-color:#050711 !important;
  color:#f4f5ff !important;
}
#era option, #month option, #century option{
  background-color:#050711 !important;
  color:#f4f5ff !important;
}

/* =========================================================
   TOPBAR: hide title + move Year/Date left
   ========================================================= */

#topbarMain h1{ display:none !important; }

#topbarMain.topbar-row.main{
  grid-template-columns: auto 1fr;
  grid-template-areas: "mode form";
}

#topbarMain .mode-toggle{
  grid-area: mode;
  justify-content:flex-start;
}

#topbarMain .year-form,
#topbarMain .date-form{
  grid-area: form;
  justify-content:flex-end;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:900px){
  :root{
    --header-h: 52px;
    --main-h: 54px;
  }
  .segment a{ min-width:78px; padding:0 10px; height:32px; line-height:32px; }
  .btn{ height:32px; font-size:11px; }
  .year-form,.date-form{ gap:6px; }
  .year-form input[type=number], .date-form input[type=number]{ width:72px; height:32px; font-size:14px; }
  .topbar-row.filters{ justify-content:flex-start; gap:10px; padding:10px 16px; flex-wrap:nowrap; }
  select{ min-width:110px; height:32px; }

  .entry-card{ padding:10px; }
  .entry-header{ gap:6px; }
  .entry-header .pair-name{ max-width: clamp(180px, 55vw, 380px); }
  .mono{ font-size:16px; }
  .entry-header .actions .btn{ height:30px; line-height:30px; padding:0 10px; font-size:11px; }
  .icon-btn{ width:30px; height:30px; min-width:30px; background-size:14px; }
}

@media (max-width:700px){
  .hscroll{ overflow-x:visible; }
  .entry-list{ display:flex; flex-direction:column; gap:12px; }
  .entry-card{ width:100%; max-width:100%; }
  .entry-card *{ min-width:0; }

  .topbar-row.main{
    grid-template-columns:auto 1fr;
    grid-template-areas:"form mode";
    column-gap:8px;
  }

  select{ min-width:104px; }
}

@media (max-width:420px){
  .segment a{ min-width:72px; }
  .year-form input[type=number], .date-form input[type=number]{ width:66px; }
  .mono{ font-size:15px; }
}

/* =========================================================
   CONJUNCTIONS — MOBILE PORTRAIT GRID HEADER
   ========================================================= */

@media (max-width:700px) and (orientation:portrait){

  .entry-card[data-table="conjunctions"] .entry-header{
    display:grid;
    grid-template-columns: minmax(0,1fr) max-content max-content;
    grid-template-rows: auto auto;
    grid-template-areas:
      "name    regen   text"
      "planets .      display";
    align-items:center;
    gap: var(--row-gap-mobile) var(--grid-col-gap-mobile);
    padding-bottom:6px;
  }

  .entry-card[data-table="conjunctions"] .entry-header .actions{ display:contents; }
  .entry-card[data-table="conjunctions"] .entry-header .spacer{ display:none; }

  .entry-card[data-table="conjunctions"] .entry-header .daypair{
    grid-area:name;
    display:inline-flex;
    align-items:baseline;
    gap:6px;
    min-width:0;
  }

  .entry-card[data-table="conjunctions"] .entry-header .mono.day{
    display:inline-block;
    flex:0 0 auto;
    font-size:15px;
    opacity:.78;
  }

  .entry-card[data-table="conjunctions"] .entry-header .pair-name{
    flex:1 1 auto;
    min-width:0;
    max-width:none;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    opacity:.95;
  }

  .entry-card[data-table="conjunctions"] .entry-header .pair-planets{
    grid-area:planets;
    justify-self:start;
    min-width:0;
    white-space:nowrap;
    font-size:16px;
    font-weight:800;
    letter-spacing:.02em;
    opacity:.90;
  }

  .entry-card[data-table="conjunctions"] .entry-header .regen-btn{ grid-area:regen; justify-self:end; }
  .entry-card[data-table="conjunctions"] .entry-header .ai-btn{ grid-area:text; justify-self:end; }
  .entry-card[data-table="conjunctions"] .entry-header .display-btn{ grid-area:display; justify-self:end; }

  .entry-card[data-table="conjunctions"] .entry-header .icon-btn{
    width:30px; height:30px; min-width:30px; background-size:14px;
  }
  .entry-card[data-table="conjunctions"] .entry-header .btn{
    height:30px; line-height:30px; padding:0 10px; font-size:11px;
  }

  #prevYear, #nextYear{ display:none !important; }

  /* jumpMonth: include "All" + month names; give it enough width */
  #jumpMonth{
    min-width:auto !important;
    width:10ch !important;
    padding-left:6px !important;
    padding-right:24px !important;
    text-align:center;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    background-position:right 6px center !important;
    background-size:14px !important;
  }

  .year-form .select-wrap{ margin-left:-4px !important; }
}

@media (max-width:700px) and (orientation:landscape){
  .entry-card[data-table="conjunctions"] .entry-header{
    display:flex;
    align-items:center;
    gap: var(--grid-col-gap-mobile);
    padding-bottom:4px;
  }
  .entry-card[data-table="conjunctions"] .entry-header .spacer{ display:block; flex:1 1 auto; }
  .entry-card[data-table="conjunctions"] .entry-header .actions{ display:flex; gap:8px; }
  .entry-card[data-table="conjunctions"] .entry-header .daypair{ flex:0 0 auto; }
  .entry-card[data-table="conjunctions"] .entry-header .pair-name{
    overflow:visible;
    text-overflow:clip;
    white-space:nowrap;
    max-width:none;
  }
  .entry-card[data-table="conjunctions"] .entry-header .pair-planets{ opacity:.75; }
}