/* TECHANDTAG PMS — Glassmorphism, mobile-first
   Palette: white/frost, turquoise (#40E0D0), deep charcoal (#0B0B0D) */
:root{
  --bg-1:#0b0b0d;
  --bg-2:#141418;
  --frost:rgba(255,255,255,.12);
  --frost-strong:rgba(255,255,255,.22);
  --stroke:rgba(255,255,255,.28);
  --ink:#f7f7f8;
  --ink-dim:#c9ccd1;
  --muted:#8a8f98;
  --accent:#40E0D0;
  --accent-2:#7ff0e3;
  --danger:#ff5c6c;
  --ok:#4ade80;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(64,224,208,.25), transparent 60%),
    radial-gradient(900px 700px at 110% 20%, rgba(127,240,227,.18), transparent 60%),
    linear-gradient(180deg,var(--bg-2),var(--bg-1));
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-2);text-decoration:none}
img{max-width:100%;display:block;user-select:none;-webkit-user-drag:none}

/* Glass */
.glass{
  background:var(--frost);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card{padding:18px}
.wrap{max-width:1100px;margin:0 auto;padding:16px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.inline{display:inline-flex;gap:8px;align-items:center;margin:0}
.muted{color:var(--muted)}
.small{font-size:.85rem}

/* Topbar */
.topbar{
  position:sticky;top:8px;z-index:20;
  margin:8px 12px;padding:10px 14px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.brand-link{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:600}
.brand-link .logo{height:28px;width:28px;object-fit:contain;border-radius:6px;background:#fff2}
.topnav{display:flex;gap:10px;flex-wrap:wrap}
.topnav a{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--ink-dim)}
.topnav a:hover{background:rgba(64,224,208,.18);color:var(--ink)}

/* Auth */
.auth-wrap{display:flex;justify-content:center;padding:40px 16px}
.auth-card{max-width:420px;width:100%}
.auth-card .brand{margin:0 0 4px;font-weight:800;letter-spacing:.5px}
.auth-card .brand span{color:var(--accent)}
form label{display:block;margin:10px 0}
input,select,textarea,button{font:inherit;color:var(--ink)}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],
input[type=file],select,textarea{
  width:100%;background:rgba(255,255,255,.06);border:1px solid var(--stroke);
  border-radius:12px;padding:10px 12px;outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(64,224,208,.25)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;
     border:1px solid var(--stroke);background:rgba(255,255,255,.06);color:var(--ink);cursor:pointer}
.btn:hover{background:rgba(255,255,255,.12)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#00323b;border-color:transparent;font-weight:700}
.btn.ghost{background:transparent}
.btn.danger{background:rgba(255,92,108,.15);border-color:rgba(255,92,108,.4);color:#ffb1b8}
.btn.small{padding:6px 10px;font-size:.85rem}
.alert{background:rgba(255,92,108,.15);border:1px solid rgba(255,92,108,.45);padding:10px;border-radius:12px;margin:10px 0}

/* Grids */
.grid{display:grid;gap:14px}
.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.photo-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.stats{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.stat h2{margin:6px 0 0;color:var(--accent)}

/* Gallery tile */
.gallery-tile{padding:14px;display:block;color:var(--ink)}
.gallery-tile.expired{opacity:.55;filter:grayscale(.4)}
.tile-head{display:flex;justify-content:space-between;align-items:center}
.tile-head h3{margin:0;font-size:1rem}
.badge{background:rgba(64,224,208,.2);color:var(--accent-2);padding:2px 8px;border-radius:999px;font-size:.75rem}
.chip{display:inline-block;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.1);font-size:.75rem}
.chip.danger{background:rgba(255,92,108,.25);color:#ffb1b8}
.status-awaiting_pop{background:rgba(255,204,64,.2);color:#ffe08a}
.status-paid{background:rgba(74,222,128,.2);color:#b8f0c9}
.status-printing{background:rgba(64,224,208,.2);color:var(--accent-2)}
.status-completed{background:rgba(128,180,255,.2);color:#c6dbff}

/* Photo card */
.photo-card{padding:8px;position:relative;overflow:hidden}
.photo-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;pointer-events:none}
.photo-card.is-hidden{outline:2px dashed rgba(255,92,108,.6)}
.photo-card figcaption{display:flex;gap:6px;justify-content:space-around;margin-top:8px}
.icon-btn{background:rgba(255,255,255,.08);border:1px solid var(--stroke);border-radius:10px;padding:6px 10px;cursor:pointer;font-size:1rem;color:var(--ink)}
.icon-btn.on{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#00323b}
.note-box{width:100%;margin-top:8px;min-height:52px;resize:vertical;display:none}
.photo-card.show-note .note-box{display:block}

/* Tables */
.table{width:100%;border-collapse:collapse;font-size:.92rem}
.table th,.table td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;vertical-align:middle}
.table .thumb{width:44px;height:44px;object-fit:cover;border-radius:8px}

/* Dropzone */
.dropzone{
  margin-top:10px;padding:28px;border:2px dashed var(--stroke);border-radius:16px;
  text-align:center;color:var(--muted);cursor:pointer;transition:.2s;
}
.dropzone.drag{background:rgba(64,224,208,.1);border-color:var(--accent);color:var(--ink)}
.upload-log{list-style:none;padding:0;margin:10px 0;max-height:180px;overflow:auto;font-size:.85rem}
.upload-log li{padding:4px 8px;border-bottom:1px solid rgba(255,255,255,.06)}
.upload-log li.err{color:#ffb1b8}
.upload-log li.ok{color:#b8f0c9}

/* Tabs */
.tabs{display:flex;gap:8px;overflow-x:auto;margin:10px 0}
.tabs a{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--ink-dim);white-space:nowrap}
.tabs a.active{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#00323b;font-weight:600}

/* Footer */
.footer{margin:24px 12px 12px;padding:12px 16px;text-align:center;color:var(--muted)}

/* Expired notice */
.expired-notice{max-width:520px;margin:40px auto;text-align:center}

@media (max-width: 560px){
  .topbar{flex-direction:column;align-items:flex-start}
  .table thead{display:none}
  .table,.table tbody,.table tr,.table td{display:block;width:100%}
  .table tr{margin-bottom:10px;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:8px}
  .table td{border:none;padding:6px}
}

/* -------- v2 additions -------- */

/* Light theme */
html.theme-light body{
  color:#0b0b0d;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(64,224,208,.35), transparent 60%),
    radial-gradient(900px 700px at 110% 20%, rgba(127,240,227,.25), transparent 60%),
    linear-gradient(180deg,#f6f8fa,#eef2f6);
}
html.theme-light{
  --ink:#0b0b0d; --ink-dim:#333; --muted:#5b6472;
  --frost:rgba(255,255,255,.55); --frost-strong:rgba(255,255,255,.75);
  --stroke:rgba(0,0,0,.12);
}
html.theme-light .glass{ background:var(--frost); }
html.theme-light .btn{ background:rgba(255,255,255,.6); color:#0b0b0d; }
html.theme-light input,html.theme-light select,html.theme-light textarea{
  background:rgba(255,255,255,.75); color:#0b0b0d;
}
html.theme-light .topnav a{ background:rgba(0,0,0,.04); color:#333; }
html.theme-light .btn.primary{ color:#00323b; }

/* Notification bell */
.bell{position:relative;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06)}
.badge-count{position:absolute;top:-4px;right:-4px;background:#ff5c6c;color:#fff;font-size:.7rem;border-radius:999px;padding:1px 6px;font-weight:700}
.theme-toggle{background:rgba(255,255,255,.06);border:1px solid var(--stroke);border-radius:999px;padding:6px 10px;cursor:pointer;color:var(--ink)}

/* Bulk bar */
.bulkbar{margin:10px 0;padding:10px 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bulkbar.hidden{display:none}
.chip-select{background:rgba(255,255,255,.08);border:1px solid var(--stroke);border-radius:999px;padding:2px 8px;font-size:.75rem;color:var(--ink)}

/* Selectable photo cards */
.photo-grid.selectable .photo-card{position:relative}
.select-box{position:absolute;top:10px;left:10px;z-index:3;background:rgba(0,0,0,.55);border-radius:8px;padding:4px}
.select-box input{transform:scale(1.2)}

/* Crop guide overlay */
.photo-grid.show-crop .photo-card{position:relative}
.photo-grid.show-crop .photo-card::after{
  content:"";position:absolute;inset:8px;pointer-events:none;
  border:2px dashed rgba(255,92,108,.85);
  aspect-ratio: var(--crop-ratio, 4 / 6);
  margin:auto;top:0;left:0;right:0;bottom:0;
  border-radius:8px;
  background:linear-gradient(rgba(0,0,0,.0),rgba(0,0,0,.0));
}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:100;display:flex;align-items:center;justify-content:center}
.lightbox.hidden{display:none}
.lightbox .lb-stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto}
.lightbox .lb-img{max-width:95vw;max-height:90vh;border-radius:12px;cursor:zoom-in;transition:transform .2s}
.lightbox .lb-img.zoom{transform:scale(1.8);cursor:zoom-out}
.lightbox button{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:999px;width:44px;height:44px;font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lightbox .lb-close{top:16px;right:16px}
.lightbox .lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.lightbox .lb-next{right:16px;top:50%;transform:translateY(-50%)}
.lightbox .lb-meta{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:#fff;background:rgba(0,0,0,.5);padding:4px 12px;border-radius:999px;font-size:.85rem}

/* Timeline */
.timeline{list-style:none;padding:0;margin:14px 0;display:flex;gap:6px;flex-wrap:wrap}
.timeline li{flex:1;min-width:110px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.06);color:var(--muted);text-align:center;font-size:.85rem;text-transform:capitalize;border:1px solid var(--stroke)}
.timeline li.done{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#00323b;border-color:transparent;font-weight:600}

/* Notifications list */
.notif.unread{border-left:4px solid var(--accent)}
.notif.read{opacity:.72}

/* SVG chart */
.chart{width:100%;height:auto;max-height:220px}

/* Photo manager drag */
.mgr-card{cursor:grab}
.mgr-card.dragging{opacity:.4}
.mgr-card figcaption input[type=text]{margin-top:6px;font-size:.8rem}

/* Alert variants */
.alert.ok{background:rgba(74,222,128,.15);border-color:rgba(74,222,128,.45);color:#b8f0c9}

/* Print styles for invoice */
@media print{
  .no-print,.topbar,.topnav,.footer,.tabs{display:none !important}
  body{background:#fff;color:#000}
  .glass{background:#fff;border:1px solid #ddd;box-shadow:none;color:#000}
  .print-only{display:inline !important}
}
.print-only{display:none}