@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root{
  --bg: 246 248 250;
  --card: 255 255 255;
  --muted: 244 244 245;
  --border: 228 228 231;
  --text: 9 9 11;
  --mutedText: 107 114 128;
  --primary: 0 150 136; /* vinted-ish teal */
}
html.dark{
  --bg: 9 9 11;
  --card: 24 24 27;
  --muted: 39 39 42;
  --border: 63 63 70;
  --text: 244 244 245;
  --mutedText: 161 161 170;
  --primary: 0 190 170;
}
html,body{height:100%;}
body{background:rgb(var(--bg)); color:rgb(var(--text)); font-family:"Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";}
/* Small helpers */
.fa-container{max-width:1200px;}

/* Form fields (match v0/shadcn-like defaults) */
label{display:block; font-size:.875rem; font-weight:500; margin-bottom:.25rem; color:rgb(var(--text));}
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea{
  width:100%;
  border:1px solid rgb(var(--border));
  background:rgb(var(--bg));
  color:rgb(var(--text));
  border-radius:.75rem; /* rounded-xl */
  padding:.55rem .75rem;
  font-size:.875rem;
  outline:none;
}
textarea{resize:vertical;}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(var(--primary),.15); border-color:rgba(var(--primary),.35)}

/* Card primitive */
.fa-card{background:rgb(var(--card)); border:1px solid rgb(var(--border)); border-radius:1.25rem;}

/* Switch (simple) */
.fa-switch{position:relative; width:44px; height:24px; display:inline-block;}
.fa-switch input{opacity:0; width:0; height:0;}
.fa-slider{position:absolute; cursor:pointer; inset:0; background:rgb(var(--muted)); border:1px solid rgb(var(--border)); border-radius:999px; transition:all .15s ease;}
.fa-slider:before{content:""; position:absolute; height:18px; width:18px; left:3px; top:50%; transform:translateY(-50%); background:rgb(var(--card)); border:1px solid rgb(var(--border)); border-radius:999px; transition:all .15s ease;}
.fa-switch input:checked + .fa-slider{background:rgb(var(--primary)); border-color:rgb(var(--primary));}
.fa-switch input:checked + .fa-slider:before{left:22px; background:#fff; border-color:#fff;}

/* Pills (Saved Searches status) */
.fa-pill{display:inline-flex; align-items:center; border-radius:999px; padding:.25rem .625rem; font-size:.75rem; font-weight:600; line-height:1;}
.fa-pill--active{background:rgb(var(--primary)); color:#fff;}
.fa-pill--paused{background:rgb(var(--muted)); color:rgb(var(--mutedText)); border:1px solid rgb(var(--border));}

/* Kebab menu (Saved Searches cards) */
.fa-kebab{width:28px; height:28px; border-radius:8px; border:0; background:transparent; color:rgb(var(--mutedText)); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background-color .15s ease, color .15s ease;}
.fa-kebab:hover{background:rgba(var(--primary),.12); color:rgb(var(--primary));}
.fa-kebab[aria-expanded="true"]{background:rgba(var(--primary),.12); color:rgb(var(--primary));}
.fa-menu{position:absolute; right:0; top:34px; min-width:170px; background:rgb(var(--card)); border:1px solid rgb(var(--border)); border-radius:12px; box-shadow:0 18px 50px rgba(0,0,0,.18); overflow:hidden; z-index:20;}
.fa-menu button{width:100%; display:flex; align-items:center; gap:10px; padding:9px 12px; background:transparent; border:0; text-align:left; font-weight:600; font-size:14px; color:rgb(var(--text)); cursor:pointer;}
.fa-menu button:hover{background:rgb(var(--primary)); color:#fff;}
.fa-menu button:hover svg{color:#fff;}

.fa-menu .sep{height:1px; background:rgb(var(--border));}
.fa-menu .danger{color:rgb(220,38,38);}
.fa-menu .danger:hover{background:rgb(var(--primary)); color:#fff;}  

/* V0-like top navigation links */
.fa-navlink{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border-radius:.5rem; /* rounded-lg */
  padding:.5rem .75rem; /* px-3 py-2 */
  font-size:.875rem; /* text-sm */
  font-weight:500;
  transition: background-color .15s ease, color .15s ease;
  color:rgb(var(--mutedText));
}
.fa-navlink:hover{background:rgb(var(--muted)); color:rgb(var(--text));}
.fa-navlink--active{background:rgba(var(--primary),.10); color:rgb(var(--primary));}
.fa-navlink--active:hover{background:rgba(var(--primary),.12); color:rgb(var(--primary));}
/* Make existing modal still usable */
.modal[aria-hidden="true"]{display:none;}
.modal{position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:flex-start; justify-content:center; padding:16px; padding-top:72px; z-index:50;}
.modalbox{background:rgb(var(--card)); border:1px solid rgb(var(--border)); border-radius:16px; width:min(980px,100%); max-height:calc(100vh - 110px); box-shadow:0 20px 60px rgba(0,0,0,.25); overflow:auto;}
.modalhead{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgb(var(--border));}
.modalbody{padding:16px;}
/* Form layout in modals: keep spacing consistent and professional */
form.modalbody{display:flex; flex-direction:column; gap:12px;}
form.modalbody .catSection{margin-top:4px;}
form.modalbody .catBlock .btn{margin-top:10px;}
form.modalbody .catBlock textarea{margin-bottom:4px;}
.modalfoot{display:flex; gap:10px; padding:0 16px 16px; justify-content:space-between; align-items:flex-end; flex-wrap:wrap;}
.modalfoot .footleft{display:flex; flex-direction:column; gap:6px; max-width:72%;}
.modalfoot .footright{display:flex; gap:10px; margin-left:auto;}
.modal .x{border:0; background:transparent; font-size:18px; cursor:pointer; color:rgb(var(--mutedText));}
/* Keep buttons looking decent in modals */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:999px; padding:.55rem .9rem; font-weight:600; border:1px solid rgb(var(--border)); background:rgb(var(--card)); color:rgb(var(--text)); cursor:pointer;}
.btn.primary{background:rgb(var(--primary)); border-color:rgb(var(--primary)); color:white;}
.btn.ghost{background:transparent;}
.btn.good{background:rgb(var(--primary)); border-color:rgb(var(--primary)); color:white;}
.btn.danger{border-color:rgba(239,68,68,.45); color:rgb(239,68,68); background:rgba(239,68,68,.04);}
.btn.danger:hover{background:rgba(239,68,68,.08);}
.btn.sm{padding:.4rem .75rem; font-size:.875rem;}

/* Tables */
.fa-table th{font-weight:600; color:rgb(var(--mutedText)); font-size:.75rem; text-transform:uppercase; letter-spacing:.04em;}
.fa-table td{vertical-align:middle;}
.fa-table tr + tr td{border-top:1px solid rgb(var(--border));}

/* Legacy helpers still used by modals/forms */
.muted{color:rgb(var(--mutedText));}
.tiny{font-size:12px;}
.h2{font-size:1rem; font-weight:700;}
.link{color:rgb(var(--primary)); text-decoration:none;}
.link:hover{text-decoration:underline;}
.chk{display:inline-flex; align-items:center; gap:.5rem; color:rgb(var(--mutedText)); font-size:.875rem;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width: 900px){.grid2{grid-template-columns:1fr;}}

.chips{display:flex; flex-wrap:wrap; gap:8px;}
.chip{border:1px solid rgb(var(--border)); background:rgba(var(--muted),.55); padding:8px 10px; border-radius:999px; cursor:pointer; font-size:13px; user-select:none;}
.chip.on{border-color:rgba(var(--primary),.45); background:rgba(var(--primary),.12); color:rgb(var(--primary));}

.catSection{border:1px solid rgb(var(--border)); border-radius:16px; padding:12px; background:rgba(var(--muted),.35)}
.catRow{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width: 900px){.catRow{grid-template-columns:1fr;}}
.catBlock{background:rgb(var(--card)); border:1px solid rgb(var(--border)); border-radius:16px; padding:12px;}
.catLabel{font-weight:700; font-size:14px;}
.catSummary{font-size:12px; color:rgb(var(--mutedText)); margin-top:2px; margin-bottom:10px;}

.catList{margin-top:12px; max-height:52vh; overflow:auto; border:1px solid rgb(var(--border)); border-radius:16px; padding:8px; background:rgb(var(--card));}
.catItem{display:flex; gap:10px; align-items:flex-start; padding:8px 10px; border-radius:12px; cursor:pointer;}
.catItem:hover{background:rgba(var(--muted),.75)}

/* User dropdown (top-right) */
.fa-dd-trigger:hover{background:rgba(var(--primary),.10);}
.fa-dd-item{display:block; border-radius:12px;}
.fa-dd-item:hover{background:rgb(var(--primary)); color:#fff;}
.fa-dd-item:hover svg{color:#fff;}

/* ---------------------------------------------------------
   Mobile bottom navigation (used by fa_nav in ui.php)
   Previously these styles lived in app.css, but most pages
   now load only tw.css + Tailwind. Without these rules the
   mobile nav renders as an unstyled vertical list.
--------------------------------------------------------- */

/* Add padding so content isn't hidden behind the fixed bar */
.fa-has-mobile-nav{ padding-bottom: 76px; }
@media (min-width: 640px){
  .fa-has-mobile-nav{ padding-bottom: 0; }
}

.fa-mobile-nav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  justify-content: space-around;
  gap: 6px;
  padding: 10px 8px 12px;
  border-top: 1px solid rgb(var(--border));
  background: rgb(var(--card));
}
html.dark .fa-mobile-nav{ background: rgb(var(--card)); }

.fa-mnav-item{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 4px;
  border-radius: 14px;
  text-decoration: none;
  color: rgba(var(--mutedText), .95);
  font-weight: 600;
  font-size: 12px;
  transition: background-color .15s ease, color .15s ease;
}
.fa-mnav-item svg{ width: 20px; height: 20px; }
.fa-mnav-label{ line-height: 1; }

.fa-mnav-item:hover{ background: rgba(var(--primary), .10); color: rgb(var(--primary)); }
.fa-mnav-item--active{ background: rgba(var(--primary), .12); color: rgb(var(--primary)); }