/* Basic dark theme variables */
:root{
  --bg:
#0b0f14;
  --panel:
#0f1418;
  --muted:rgba(255,255,255,0.55);
  --muted-2:rgba(230,238,243,0.65);
  --text:
#e6f0f6;
  --accent:
#1fb6a6;
  --danger:
#ff6b6b;
  --success:
#4cd964;
  --glass: rgba(255,255,255,0.02);
  --glass-2: rgba(255,255,255,0.03);
  --shadow: rgba(0,0,0,0.6);
  --max-width:1100px;
  --gap:12px;
  --radius:8px;
  --card-padding:14px;
  --card-radius:10px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* Page background and container */
html,body{
  min-height:100%;
  margin:0;
  background:linear-gradient(180deg, var(--bg),
#071018);
  color:var(--text);
  /* Tells the browser this page is dark-themed, so native UI it renders
     itself -- the on-screen keyboard, its accessory bar (the Prev/Next/
     Done row shown above it on iOS), form controls, scrollbars -- follows
     suit instead of defaulting to a light theme that looks like a stray
     white bar bolted onto an otherwise dark page. */
  color-scheme: dark;
}
.container{
  max-width:var(--max-width);
  margin:20px auto;
  padding:18px;
}
/* Top nav / header
   NOTE: markup uses <header class="site-header"><nav class="top-nav">
   <button class="tile header-btn">...</button></nav></header> — all header
   rules below target those real classes/elements (this used to be split
   across an unused ".header" class and ".top-nav a" selectors that never
   matched the actual <button> markup). */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 18px;
  background: linear-gradient(180deg, var(--panel), var(--bg));
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow:0 6px 18px var(--shadow);
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:18px;
  flex-shrink:0;
}
/* .top-nav fills whatever width is left after .brand, and its own buttons
   left-align inside it. The username button gets margin-left:auto inline
   in header.php, which pushes just that one button to the far right edge
   of this box. On screens too narrow to fit all four buttons, the row
   scrolls sideways instead of wrapping to a second line. */
.top-nav{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  gap:6px;
  align-items:center;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.top-nav::-webkit-scrollbar{ display:none; }
.top-nav .header-btn{
  flex:0 0 auto;
  white-space:nowrap;
}
.top-nav .header-btn:hover,
.top-nav .header-btn:active{
  background: rgba(255,255,255,0.035);
}
.top-nav .header-btn:focus{
  outline: 3px solid rgba(255,255,255,0.06);
  outline-offset: 2px;
}
@media (max-width:720px){
  .site-header{ padding:8px 12px; }
}
/* Cards and panels */
.card{
  padding: var(--card-padding);
  border-radius: var(--card-radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  transition: box-shadow .14s ease, opacity .12s ease;
  overflow: hidden;
}
.card + .card{ margin-top:var(--gap); }
.card:hover, .card:focus-within{
  box-shadow: 0 18px 36px rgba(0,0,0,0.55);
}
.card h2, .card h3{
  margin: 0 0 8px 0;
  color: var(--text);
  font-weight: 700;
}
/* Grid helpers */
.grid{
  display:grid;
  gap:var(--gap);
}
.grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
.grid.cols-2{ grid-template-columns: repeat(2, 1fr); }
.grid.responsive{ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
/* Typography */
h1,h2,h3{ margin:0 0 8px 0; font-weight:700; color:var(--text); }
p{ margin:0 0 10px 0; color:var(--muted); line-height:1.4; }
/* Form controls */
.form label{ display:block; margin-bottom:8px; color:var(--muted); font-size:14px; }
input[type="text"], input[type="number"], select, textarea{
  width:100%;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid var(--glass-2);
  background: rgba(255,255,255,0.02);
  color:var(--text);
  box-sizing:border-box;
}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 8px 20px rgba(31,182,166,0.06);
}
/* Standardized form controls inside cards */
.card input[type="text"], .card input[type="number"], .card select, .card textarea {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 8px;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.card input[type="text"]:focus, .card input[type="number"]:focus, .card select:focus, .card textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(31,182,166,0.06);
}
/* Buttons */
.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:10px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 85%, black 15%));
  color:#fff;
  border:none;
  cursor:pointer;
  font-weight:600;
  box-shadow: 0 6px 18px rgba(31,182,166,0.12);
  transition: box-shadow .12s ease, opacity .08s ease;
}
.btn-primary:hover{ box-shadow:0 12px 28px rgba(31,182,166,0.14); }
.btn-primary:active{ opacity:.95; }
.btn-primary:focus{ outline:3px solid rgba(31,182,166,0.14); outline-offset:2px; }
.tile{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:10px;
  background: rgba(255,255,255,0.02);
  color:var(--text);
  text-decoration:none;
  border:1px solid rgba(255,255,255,0.03);
  transition: background .12s ease;
}
.tile:hover{ background: rgba(255,255,255,0.03); }
/* Danger / remove */
.btn-danger, .btn-remove{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border-radius:8px;
  background:transparent;
  color:var(--danger);
  border:1px solid rgba(255,255,255,0.03);
  cursor:pointer;
}
.btn-danger:hover, .btn-remove:hover{ background: rgba(255,0,0,0.03); }
/* Lists */
.list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.list .item{ display:flex; gap:12px; align-items:center; padding:8px; border-radius:8px; background:rgba(255,255,255,0.01); }
/* Images */
.card img, .tile img{ max-width:100%; border-radius:6px; display:block; }
/* Tables */
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ padding:8px; text-align:left; border-bottom:1px solid rgba(255,255,255,0.03); color:var(--muted); }
/* Small helpers */
.muted{ color:var(--muted); font-size:13px; }
.kv{ display:flex; gap:8px; align-items:center; }
/* Footer */
.footer{ margin-top:20px; color:var(--muted); font-size:13px; text-align:center; }
/* Drag handle improvements */
.drag-handle{
  touch-action:none;
  -webkit-user-drag:none;
  -webkit-touch-callout:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:8px;
  background: rgba(255,255,255,0.01);
  color:var(--muted);
  font-size:18px;
  cursor:grab;
}
.drag-handle:active{ cursor:grabbing; }
/* Sparkline placeholder */
.sparkline{ height:34px; margin-top:8px; }
/* Focus outlines for accessibility */
a:focus, button:focus, input:focus, select:focus, textarea:focus{
  outline:3px solid rgba(255,255,255,0.06);
  outline-offset:2px;
}
/* Small animations for adding/removing cards */
.card.adding{ animation: cardAdd .28s ease forwards; }
.card.removing{ animation: cardRemove .28s ease forwards; }
@keyframes cardAdd{ from{ opacity:0; transform: translateY(8px) scale(.995); } to{ opacity:1; transform: translateY(0) scale(1); } }
@keyframes cardRemove{ from{ opacity:1; transform: translateY(0); } to{ opacity:0; transform: translateY(8px) scale(.995); } }
/* Responsive tweaks */
@media (max-width:900px){
  .grid.cols-3{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:720px){
  .container{ padding:12px; }
  .card{ padding:12px; }
  .drag-handle{ width:40px; height:40px; font-size:20px; }
  .btn-primary{ padding:10px 14px; }
}
/* Style header buttons on mobile */
@media (max-width:720px) {
  .site-header .header-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    padding:10px 12px;
    border-radius:10px;
    background: rgba(255,255,255,0.02);
    color: 
#dcdcdc;
    font-size:15px;
    font-weight:600;
    border: 1px solid rgba(255,255,255,0.03);
    cursor:pointer;
  }
  .site-header .header-btn:focus { outline: 3px solid rgba(255,255,255,0.06); outline-offset:2px; }
}
/* Dashboard centering and larger text */
.dashboard-card {
  /* push the Dashboard title further down the page */
  padding-top: 56px;
  padding-bottom: 40px;
  text-align: center;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  /* slightly larger base text for everything inside the dashboard card */
  font-size: 18px;
}
/* Make the Dashboard heading more prominent and lower on the page */
.dashboard-card > h2 {
  margin: 28px 0 18px 0;
  font-size: 34px;
  line-height: 1.05;
  font-weight: 800;
  color: var(--text);
}
/* Center the grid and make tiles larger and stacked nicely on small screens */
.dashboard-card .grid {
  display: grid;
  gap: 14px;
  justify-items: center;
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
/* Make tiles look like large tappable buttons */
.dashboard-card .tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 14px 18px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 12px;
  text-decoration: none;
  color: 
#e6eef3;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 8px 20px rgba(0,0,0,0.45);
  transition: box-shadow .12s ease, background .12s ease;
}
/* Hover / active states */
.dashboard-card .tile:hover {
  box-shadow: 0 18px 36px rgba(0,0,0,0.55);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
}
/* Increase spacing and font sizes on small screens */
@media (max-width:720px) {
  .dashboard-card { padding-top: 36px; padding-bottom: 28px; font-size: 17px; }
  .dashboard-card > h2 { font-size: 30px; margin-top: 22px; }
  .dashboard-card .tile { min-width: 160px; padding: 12px 14px; font-size: 17px; }
  .dashboard-card .grid { gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
/* Optional: slightly increase the header/title vertical offset on very tall screens */
@media (min-height:900px) {
  .dashboard-card { padding-top: 90px; }
}
/* Reference list inside session cards */
.ref-list { display:flex; flex-direction:column; gap:6px; }
.ref-row {
  background: rgba(255,255,255,0.01);
  padding:6px 8px;
  border-radius:8px;
  color: var(--muted);
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width:720px) {
  .ref-row { font-size:14px; padding:8px; }
}
/* Strongly scoped auth form rules to override older styles */
.auth-card .auth-form { display:flex; flex-direction:column; gap:14px; align-items:stretch; width:100%; }
.auth-card .auth-form > div { display:flex; flex-direction:column; align-items:stretch; }
/* Ensure labels are block and inputs take full width */
.auth-card label { display:block; margin-bottom:6px; text-align:left; }
.auth-card .auth-form input[type="text"],
.auth-card .auth-form input[type="email"],
.auth-card .auth-form input[type="password"],
.auth-card .auth-form select,
.auth-card .auth-form textarea {
  display:block;
  width:100% !important;
  box-sizing:border-box;
  padding:12px 14px;
  font-size:17px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(0,0,0,0.22);
  color:var(--text);
}
/* Make sure small/inline rules don't shrink the password field */
.auth-card .auth-form input { min-width:0; }
/* Center the submit button and make it full-width on small screens */
.auth-card .btn-primary,
.auth-card button[type="submit"] {
  display:block;
  margin:12px auto 0 auto;
  width:320px;
  max-width:100%;
  padding:12px 16px;
  font-size:17px;
  font-weight:700;
  border-radius:10px;
}
/* Strong visible gray inputs for auth card */
.auth-card .auth-form input[type="text"],
.auth-card .auth-form input[type="email"],
.auth-card .auth-form input[type="password"] {
  background: 
#2f2f2f !important;        /* slightly lighter than card */
  border: 1px solid 
#6e6e6e !important;  /* visible gray border */
  color: var(--text) !important;
  box-shadow: none !important;
}
/* Slight inset to make the field look like a box */
.auth-card .auth-form input[type="text"]:not(:disabled),
.auth-card .auth-form input[type="email"]:not(:disabled),
.auth-card .auth-form input[type="password"]:not(:disabled) {
  padding: 12px 14px;
  border-radius: 10px;
}
/* Stronger focus state so users can see the active field */
.auth-card .auth-form input:focus {
  border-color: 
#9aa0a6 !important;
  box-shadow: 0 6px 18px rgba(154,160,166,0.06) !important;
  outline: none !important;
}
/* Error state (if you show inline errors) */
.auth-card .auth-form input.error,
.auth-card .auth-form input[aria-invalid="true"] {
  border-color: 
#d66b6b !important;
  background: rgba(214,107,107,0.04) !important;
}
/* Defensive: override any float/align rules from older CSS */
.auth-card .btn-primary { float:none !important; text-align:center !important; }
/* Small screens: keep inputs and button comfortably sized */
@media (max-width:720px) {
  .auth-card { padding:28px 18px; }
  .auth-card .auth-title { font-size:30px; }
  .auth-card .btn-primary { width:100%; }
}
.library-controls {
  display:flex;
  align-items:center;
  gap:12px;
}
.library-controls select {
  padding:8px 10px;
  border-radius:8px;
  border:1px solid 
#6e6e6e;
  background:
#2f2f2f;
  color:var(--text);
  min-width:220px;
}
/* Desktop-friendly category dropdown (keeps mobile styling intact) */
@media (min-width: 821px) {
  .library-controls select#category-filter {
    background: 
#f5f5f5;           /* light background for high contrast on desktop */
    color: 
#222222;                /* dark text for readability */
    border: 1px solid 
#cfcfcf;     /* visible gray border */
    padding: 10px 12px;
    font-size: 16px;
    border-radius: 8px;
    min-width: 260px;
    -webkit-appearance: none;      /* remove native arrow styling for consistent look */
    -moz-appearance: none;
    appearance: none;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    background-image: linear-gradient(45deg, transparent 50%, #666 50%),
                      linear-gradient(135deg, #666 50%, transparent 50%),
                      linear-gradient(to right, rgba(0,0,0,0.02), rgba(0,0,0,0.02));
    background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px), 0 0;
    background-size: 6px 6px, 6px 6px, 100% 100%;
    background-repeat: no-repeat;
  }
  /* Make the select's label and surrounding area match desktop spacing */
  .library-controls label[for="category-filter"] {
    color: var(--muted);
    font-size: 15px;
    margin-right: 8px;
  }
}
.picker-item:hover { background: rgba(31,182,166,0.12); }