/* ===========================
   PinkSheets — Unified Styles
   Applies to: Login, SiteSelection, List, Entry
   =========================== */

/* ---------- Theme ---------- */
:root{
  --bg:#ffc0cb;           /* app background */
  --card-bg:#ffffff;      /* card panels */
  --text:#222;
  --muted:#6b7280;

  --brand:#db2777;
  --brand-pressed:#be185d;

  --error-bg:#fee2e2;
  --error:#b91c1c;

  --radius:16px;
}

/* ---------- Reset & Base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }

body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: var(--bg);
  color: var(--text);
  display: grid;           /* center card-style pages (login, site, list) */
  place-items: center;
  padding: 16px;
}

/* ========== Card-style pages (Login, SiteSelection, List) ========== */
.container{ width:100%; max-width: 520px; }
.container--narrow{ max-width: 420px; }  /* Login */
.container--wide{ max-width: 900px; }    /* optional larger card */
.container--xl  { max-width: 1100px; }   /* List page */

.card{
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.12);
  padding: 24px;
}

.brand{ display:grid; justify-items:center; gap:12px; margin-bottom:12px; }
.brand img{ display:block; max-width: 180px; height:auto; }

h1{ font-size: 1.4rem; margin: 0; }
.subtle{ font-size:.9rem; color:var(--muted); text-align:center; margin-bottom:12px; }

/* Messages */
.notice-box{
  background:#eef2ff;
  color:#3730a3;
  border-radius:10px;
  padding:10px 12px;
  margin:8px 0 12px;
  word-wrap:break-word;
}
.error{
  background: var(--error-bg);
  color: var(--error);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 8px 0 12px;
  font-weight: 600;
  word-wrap: break-word;
}
.error:empty{ display:none; }  /* hide empty server labels */

/* Inputs */
.field{ display:grid; gap:6px; margin:10px 0; }
.field label{ font-size:.95rem; }

.field input[type="text"],
.field input[type="password"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="search"],
.field input[type="url"]{
  width:100%;
  font-size:1rem;
  padding:12px 14px;
  border:1px solid #d1d5db;
  border-radius:10px;
  outline:none;
  background:#fff;
}
.field input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(219,39,119,.2);
}

/* Selects (ASP:DropDownList-friendly) */
select, .asp-select{
  width:100%;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  font-size:1rem;
  padding:12px 14px;
  border:1px solid #d1d5db;
  border-radius:10px;
  background:#fff;
  background-image:
    linear-gradient(45deg, transparent 50%, #6b7280 50%),
    linear-gradient(135deg, #6b7280 50%, transparent 50%),
    linear-gradient(to right, #d1d5db, #d1d5db);
  background-position:
    calc(100% - 18px) calc(1.05em),
    calc(100% - 13px) calc(1.05em),
    calc(100% - 2.5rem) 50%;
  background-size:6px 6px, 6px 6px, 1px 2.2rem;
  background-repeat:no-repeat;
}
select:focus, .asp-select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(219,39,119,.2);
  outline:none;
}

/* Actions & buttons */
.actions{ margin-top:16px; display:grid; gap:10px; }
.btn{
  display:inline-block; width:100%;
  text-align:center; font-weight:600; font-size:1.05rem;
  padding:12px 16px; border-radius:10px; border:none;
  background:var(--brand); color:#fff; cursor:pointer;
}
.btn:active{ background:var(--brand-pressed); }
.btn:disabled{ opacity:.6; cursor:default; }

/* Footer links */
.footer-links{ text-align:center; margin-top:14px; }
.footer-links a{ color:inherit; text-decoration:underline; }

/* reCAPTCHA container */
.captcha-wrap{ margin:12px 0; display:grid; justify-content:center; }

/* Make card pages scrollable on phones (for long captchas, etc.) */
@media (max-width:640px){
  body{ display:block; padding:16px; }
  .container{ max-width:100%; }
  .card{ border-radius:12px; padding:20px; }
}

/* Tiny devices: slight scaling for the small checkbox widget */
@media (max-width:360px){
  .captcha-wrap{ transform:scale(.9); transform-origin:top center; }
}
@media (max-width:320px){
  .captcha-wrap{ transform:scale(.82); transform-origin:top center; }
}

/* ========== List page helpers (ListPinkSheets) ========== */
.controls { display: grid; gap: 8px 12px; grid-template-columns: 1fr; margin-bottom: 12px; }
.row { display: grid; gap: 8px 12px; grid-template-columns: 1fr 1fr; }
.radio-group { display: grid; gap: 6px; }
.section-gap { margin-top: 10px; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.grid-full { display: block; }
.grid-compact { display: none; }

/* ASP.NET DataGrid base polish */
table { border-collapse: collapse; width: 100%; }
.aspnet-header th { text-align: left; padding: 10px; }
.aspnet-cell, .aspnet-altcell { padding: 8px 10px; border-top: 1px solid #e5e7eb; }

/* Switch to compact list grid + stacked filters */
@media (max-width: 912px){
  .row { grid-template-columns: 1fr; }
  .grid-full { display: none; }
  .grid-compact { display: block; }
}

/* ================== Entry page (scoped overrides) ================== */
body.entry-page{
  /* Keep legacy look/layout; do not center like card screens */
  background-color: Pink;
  display:block;
  padding:0;
  font-family: Arial, Helvetica, Geneva, sans-serif;
}

/* Legacy validation label in header row */
.entry-page .errorlabel{
  color: DarkRed;
  font-size: x-large;
}

/* Main form table preserves desktop layout */
.entry-page .form-table{
  border-collapse: separate;
  border-spacing: 2px;
  margin: 0 auto;
  width: auto;
}
.entry-page .form-table td{ vertical-align: top; }

/* Desktop dropdown sizing helpers (apply via CssClass="select-sm" / "select-md") */
.entry-page .form-table select{ width: auto; max-width:100%; }
.entry-page .select-sm{ width:180px; }
.entry-page .select-md{ width:220px; }

/* Buttons in cells */
.entry-page .form-table button{
  padding:4px 8px;
  font-size: 14px;
}

/* Grid header look (match legacy) */
.entry-page .aspnet-header th{
  text-align:left;
  padding: 6px 8px;
  background: #f0abfc;
}

/* ===== Products grid visibility ===== */
.entry-page .grid-desktop { display:block; }
.entry-page .grid-mobile  { display:none;  }

/* Shared grid container */
.entry-page .table-scroll{
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  border-radius:6px;
}

/* Shared grid table: expand to content width; horizontal scroll when needed */
.entry-page .products-table{
  border-collapse:collapse;
  table-layout:auto;
  width:max-content;
  white-space:nowrap;
}
.entry-page .products-table th,
.entry-page .products-table td{
  white-space:nowrap;
  word-break:normal;
  padding:6px 8px;
}

/* Inputs inside the grid: compact, no wrapping */
.entry-page .products-table input[type="text"]{
  width:auto;
  max-width:none;
  overflow:hidden;
  text-overflow:ellipsis;
  padding:6px 8px;
  line-height:1.2;
  font-size:13px;
}

/* Reasonable column minimums so wide fields don’t dominate */
.entry-page .col-product input[type="text"]{ min-width:160px; }
.entry-page .col-date    input[type="text"]{ min-width:90px;  text-align:center; }
.entry-page .col-qty     input[type="text"]{ min-width:70px;  text-align:right; }
.entry-page .col-money   input[type="text"]{ min-width:90px;  text-align:right; }

/* ===== Entry page: phones (≤640px) ===== */
@media (max-width:640px){
  /* Stack only the form table; grid remains single row per record */
  .entry-page .form-table{ width:100%; table-layout:fixed; }
  .entry-page .form-table tr{ display:block; margin-bottom:8px; }
  .entry-page .form-table td{ display:block; width:100%; padding:6px 0; text-align:left; }

  /* Full-width inputs outside the grid (default) */
  .entry-page .form-table input[type="text"],
  .entry-page .form-table textarea,
  .entry-page .form-table select,
  .entry-page .select-sm,
  .entry-page .select-md{
    width:100%;
  }

  /* Keep an input/select and its adjacent “Pick” button on ONE line */
  .entry-page .form-table input[type="text"] + button,
  .entry-page .form-table select + button{
    display:inline-block;
    vertical-align:middle;
    margin-left:6px;
    white-space:nowrap;
  }
  .entry-page .form-table input[type="text"] + button,
  .entry-page .form-table select + button{ max-width:64px; }
  .entry-page .form-table input[type="text"]:has(+ button),
  .entry-page .form-table select:has(+ button){
    width:calc(100% - 70px) !important;
    max-width:calc(100% - 70px) !important;
    display:inline-block;
    vertical-align:middle;
  }
  /* Fallback for browsers without :has() — shrink when a button follows */
  @supports not (selector(:has(+ button))){
    .entry-page .form-table input[type="text"] + button,
    .entry-page .form-table select + button{
      /* input/select width handled via sibling override below */
    }
    .entry-page .form-table input[type="text"]{
      /* when followed by a button, this selector triggers via width calc below */
    }
    .entry-page .form-table input[type="text"] + button,
    .entry-page .form-table select + button{
      /* pair rule: reduce preceding control */
    }
    .entry-page .form-table input[type="text"] + button { }
    .entry-page .form-table select + button { }
    .entry-page .form-table input[type="text"]{
      width:calc(100% - 70px);
      max-width:calc(100% - 70px);
    }
    .entry-page .form-table select{
      width:calc(100% - 70px);
      max-width:calc(100% - 70px);
    }
  }

  /* Use the mobile grid; hide desktop grid */
  .entry-page .grid-desktop { display:none;  }
  .entry-page .grid-mobile  { display:block; }

  /* Mobile grid: one real table (header + rows) that scrolls as a unit */
  .entry-page .grid-mobile .table-scroll{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    max-width:100%;
  }
  .entry-page .grid-mobile .products-table{
    border-collapse:collapse;
    table-layout:auto;
    width:max-content;    /* forces horizontal scroll */
    min-width:640px;      /* floor so scrollbar reliably appears */
  }
  .entry-page .grid-mobile .products-table tr{ display:table-row; }
  .entry-page .grid-mobile .products-table th,
  .entry-page .grid-mobile .products-table td{
    display:table-cell;
    white-space:nowrap;
    word-break:normal;
    overflow:visible;
    padding:4px 6px;
    vertical-align:top;
  }
  .entry-page .grid-mobile .products-table input[type="text"]{
    width:auto;
    max-width:none;
    white-space:inherit;
    text-overflow:clip;
    overflow:visible;
    padding:4px 6px;
    line-height:1.2;
    font-size:12px;
  }
}

/* Entry page: remove ALL space from the hidden desktop grid on phones (spacer fix retained) */
@media (max-width:640px){
  .entry-page .grid-desktop{
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .entry-page .grid-desktop .table-scroll{
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  /* Hide any spacer cells/rows the server emits */
  .entry-page .form-table .spacer { display:none !important; }
}

/* ===== Home page desktop tweaks (scoped) ===== */
body.home-page .card { text-align: left; }
@media (min-width: 900px){
  body.home-page .actions.actions--inline{
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
  }
  body.home-page .actions.actions--inline .btn{
    width: auto;            /* stop looking like phone buttons on desktop */
    padding: 10px 16px;
  }
  body.home-page .container.container--xl{
    max-width: 1100px;      /* wider than the phone/card look */
  }
}

/* ===========================
   Manager / Filter Panel (ListPinkSheets)
   Keeps layout tidy on desktop, stacked on phones
   =========================== */

#ManagerPanel{
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  padding: 14px;
  margin: 10px 0 16px;
}

/* Radios: inline on desktop, stack on small screens */
#ManagerPanel .radio-group{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  margin-bottom: 10px;
}

/* Two equal columns for inputs on desktop */
#ManagerPanel .row{
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px 16px;
}

/* Field polish */
#ManagerPanel .field{
  display: grid;
  gap: 6px;
}
#ManagerPanel .field label{
  font-size: .95rem;
  color: var(--muted);
}
#ManagerPanel .field input[type="text"],
#ManagerPanel .field select{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background:#fff;
}
#ManagerPanel .field input[type="text"]:focus,
#ManagerPanel .field select:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(219,39,119,.2);
  outline: none;
}

/* Actions line: buttons side-by-side if there’s room */
#ManagerPanel .actions{
  margin-top: 12px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 10px;
  justify-content: start;
}
#ManagerPanel .actions .btn{
  width: auto;            /* don’t stretch full-width on desktop */
  padding: 10px 16px;
}

/* --------- Responsive tweaks --------- */
@media (max-width: 912px){
  #ManagerPanel{
    padding: 12px;
  }
  #ManagerPanel .row{
    grid-template-columns: 1fr;  /* stack inputs */
  }
  #ManagerPanel .actions{
    grid-auto-flow: row;
    grid-auto-columns: unset;
    justify-content: stretch;
  }
  #ManagerPanel .actions .btn{
    width: 100%;                 /* full width on phones */
  }
}

/* Very small devices: tighten spacing slightly */
@media (max-width: 360px){
  #ManagerPanel{ padding: 10px; }
  #ManagerPanel .field input[type="text"],
  #ManagerPanel .field select{ padding: 9px 10px; }
}

/* Compact filter UI */
.filters summary {
  font-weight:600;
  padding:.5rem .75rem;
  border:1px solid #ccc;
  border-radius:8px;
  background:#f9f9f9;
  cursor:pointer;
}
.filters[open] summary { border-bottom-left-radius:0; border-bottom-right-radius:0; }
.filters > *:not(summary) { border:1px solid #ccc; border-top:0; padding:.5rem .75rem; border-bottom-left-radius:8px; border-bottom-right-radius:8px; }

/* Inputs compact */
.filters label { display:block; margin:.35rem 0 .15rem; font-size:.95rem; }
.filters input[type=text], .filters select {
  width:100%; padding:.4rem .5rem; margin-bottom:.4rem;
}

/* On small screens: start collapsed; remove big gaps */
@media (max-width: 768px) {
  .filters { margin-bottom:.5rem; }
  .filters summary { font-size:1rem; padding:.45rem .6rem; }
  .filters > *:not(summary) { padding:.45rem .6rem; }
}

/* On larger screens: keep it open like a toolbar */
@media (min-width: 769px) {
  .filters { display:block; }
  .filters[open] { /* ensure open on desktop */ }
}

.radio-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;           /* space between the radios */
}

.radio-group label {
  margin: 0;
  white-space: nowrap;    /* prevent text from wrapping */
  font-size: 0.95rem;     /* optional: smaller for mobile */
}

/* optional: tighter on small screens */
@media (max-width: 768px) {
  .radio-group {
    gap: 0.5rem;
  }
}