/* Phase 2 — Pic Visual design system (original, not copied from any reference).
   Tokens are the single source of truth for colour, type, spacing, radius and shadow.
   All existing page classes are preserved, so no working feature breaks. */
:root {
  --primary: #26AAE1;
  --primary-dark: #1B8AB8;
  --primary-soft: #E0F2FE;
  --navy: #101827;
  --navy-soft: #1E293B;
  --ink: #101827;
  --body: #334155;
  --muted: #64748B;
  --light: #F5F9FC;
  --surface: #FFFFFF;
  --border: #E4EAF0;
  --border-strong: #CBD5E1;
  --success-bg: #F0FDF4;
  --success-border: #BBF7D0;
  --success-text: #166534;
  --error-bg: #FEF2F2;
  --error-border: #FECACA;
  --error-text: #991B1B;
  --warning-bg: #FFFBEB;
  --warning-border: #FDE68A;
  --warning-text: #92400E;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(16, 24, 39, 0.06);
  --shadow-md: 0 4px 16px rgba(16, 24, 39, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 39, 0.14);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-size-xs: 13px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: var(--font-size-base); line-height: 1.55; color: var(--ink); background: var(--light); }
a { color: var(--primary); }
a:hover { color: var(--primary-dark); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Type scale — fixed, not fluid, so headings are predictable at every width. */
h1 { font-size: var(--font-size-3xl); line-height: 1.2; margin: 0 0 var(--space-3); letter-spacing: -0.01em; }
h2 { font-size: var(--font-size-xl); line-height: 1.3; margin: var(--space-6) 0 var(--space-3); }
h3 { font-size: var(--font-size-lg); line-height: 1.35; margin: var(--space-5) 0 var(--space-2); }
p { margin: 0 0 var(--space-3); color: var(--body); }
.muted { color: var(--muted); }
.small { font-size: var(--font-size-sm); }
.page-lead { color: var(--muted); margin-bottom: var(--space-5); }

/* Layout */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-5); }
main { padding: var(--space-8) var(--space-5) var(--space-12); }
.footer { padding-bottom: var(--space-8); color: var(--muted); font-size: var(--font-size-sm); }

/* Top bar (logged-out pages) and inner top bar (logged-in pages) */
.topbar { background: var(--navy); color: #fff; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; min-height: 60px; gap: var(--space-4); }
.brand { color: #fff; font-weight: 700; font-size: 20px; text-decoration: none; letter-spacing: -0.01em; }
.topbar nav { display: flex; gap: var(--space-4); align-items: center; }
.topbar nav a { color: #fff; text-decoration: none; }
.nav-logout { margin: 0; }
.nav-logout button { background: transparent; border: 0; color: #fff; cursor: pointer; font-size: var(--font-size-base); padding: 0; }

/* Sidebar layout — grouped navigation, profile at the bottom */
.layout { display: flex; min-height: 100vh; align-items: stretch; }
.sidebar { width: 260px; flex-shrink: 0; background: var(--navy); color: #fff; padding: var(--space-6) 18px; display: flex; flex-direction: column; gap: 18px; }
.sidebar .brand { font-size: 22px; }
.sidebar-user { margin: 0; line-height: 1.5; }
.sidebar-user .muted { color: #CBD5E1; font-size: var(--font-size-xs); word-break: break-all; }
.side-nav { display: flex; flex-direction: column; gap: var(--space-1); }
.side-nav-group { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #94A3B8; padding: var(--space-4) 12px var(--space-2); }
.side-nav a { color: #E2E8F0; text-decoration: none; padding: 10px 12px; border-radius: var(--radius-sm); display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.side-nav a:hover { background: var(--navy-soft); color: #fff; }
.side-nav a.is-active { background: var(--navy-soft); color: #fff; box-shadow: inset 3px 0 0 var(--primary); }
.side-logout { margin-top: auto; }
.side-logout button { width: 100%; background: transparent; border: 1px solid #334155; color: #fff; border-radius: var(--radius-sm); padding: 11px; cursor: pointer; font-size: 15px; }
.main { flex: 1; min-width: 0; }
.main .topbar { background: var(--surface); color: var(--navy); border-bottom: 1px solid var(--border); }
.main .topbar .muted { color: var(--muted); }
.page-title { font-weight: 700; font-size: var(--font-size-lg); }

/* Profile dropdown in the top bar — real behaviour via a small script in app.php */
.profile { position: relative; }
.profile-button { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 8px 14px; cursor: pointer; font-size: 15px; color: var(--ink); }
.profile-menu { display: none; position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 8px; z-index: 20; }
.profile-menu.open { display: block; }
.profile-menu a, .profile-menu button { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; background: transparent; color: var(--ink); text-decoration: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 15px; }
.profile-menu a:hover, .profile-menu button:hover { background: var(--light); }

/* Cards, stats, grids */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 28px; box-shadow: var(--shadow-sm); }
.card.narrow { max-width: 520px; margin: 0 auto; }
.card + .card { margin-top: var(--space-4); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.stat-label { color: var(--muted); font-size: var(--font-size-sm); margin: 0 0 var(--space-1); }
.stat-value { font-size: 28px; font-weight: 700; line-height: 1.2; margin: 0; }
.stat-note { color: var(--muted); font-size: var(--font-size-sm); margin: var(--space-1) 0 0; }

/* Forms and buttons — one size system, no oversized controls */
label { display: block; margin: 14px 0 4px; font-weight: 600; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: var(--font-size-base); font-family: inherit; background: var(--surface); color: var(--ink); }
input:focus, select:focus, textarea:focus { border-color: var(--primary); outline: 2px solid var(--primary-soft); }
.field-hint { color: var(--muted); font-size: var(--font-size-sm); margin-top: 4px; }
button.primary, .btn { background: var(--primary); color: #fff; border: 0; border-radius: var(--radius-sm); padding: 12px 18px; font-size: var(--font-size-base); font-weight: 600; cursor: pointer; margin-top: 18px; }
.btn { display: inline-block; text-align: center; text-decoration: none; }
.actions .btn { margin-top: 0; }
button.primary:hover, .btn:hover { background: var(--primary-dark); color: #fff; }
button.secondary { background: var(--surface); color: var(--navy); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 12px 18px; font-size: var(--font-size-base); cursor: pointer; margin-top: 18px; }
button.secondary:hover { border-color: var(--primary); }
.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.actions button { margin-top: 0; }
.btn-sm { padding: 8px 12px; font-size: var(--font-size-sm); margin-top: 0; }
.btn-danger { background: #DC2626; color: #fff; border: 0; border-radius: var(--radius-sm); padding: 12px 18px; cursor: pointer; }
button:disabled, .btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Alerts, badges, empty / loading / error states */
.error { background: var(--error-bg); border: 1px solid var(--error-border); color: var(--error-text); padding: 12px; border-radius: var(--radius-sm); }
.success { background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success-text); padding: 12px; border-radius: var(--radius-sm); }
.notice { background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning-text); padding: 12px; border-radius: var(--radius-sm); }
.badge { display: inline-block; background: var(--primary-soft); color: #075985; border-radius: var(--radius-pill); padding: 2px 10px; font-size: var(--font-size-xs); font-weight: 600; }
.badge-success { background: var(--success-bg); color: var(--success-text); }
.badge-warning { background: var(--warning-bg); color: var(--warning-text); }
.badge-error { background: var(--error-bg); color: var(--error-text); }
.empty-state { text-align: center; padding: var(--space-8) var(--space-5); color: var(--muted); }
.empty-state h2 { color: var(--ink); }
.loading { color: var(--muted); font-size: var(--font-size-sm); }

/* Tables, filters, tabs */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.orders { width: 100%; border-collapse: collapse; min-width: 640px; }
table.orders th, table.orders td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.orders th { color: var(--muted); font-size: var(--font-size-sm); font-weight: 600; }
table.orders tbody tr:hover { background: var(--light); }
.filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin: var(--space-4) 0; }
.filters label { margin: 0; font-size: var(--font-size-sm); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: var(--space-4) 0; flex-wrap: wrap; }
.tabs a { padding: 10px 14px; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.is-active { color: var(--ink); border-bottom-color: var(--primary); font-weight: 600; }

/* Comments, modals, dropdowns (for Phases 5–7; classes are ready, not decorative buttons) */
.comment { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px; }
.comment:first-of-type { border-top: 0; }
.modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(16, 24, 39, 0.55); z-index: 40; align-items: center; justify-content: center; padding: var(--space-4); }
.modal-backdrop.open { display: flex; }
.modal { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); max-width: 560px; width: 100%; padding: 28px; max-height: 90vh; overflow: auto; }
.modal h2 { margin-top: 0; }

/* Auth shell — structure for Phase 3; existing login/signup already use .card.narrow today */
.auth-page { background: var(--navy); min-height: 100vh; }
.auth-layout { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.auth-panel { display: flex; align-items: center; justify-content: center; padding: var(--space-8); color: #fff; }
.auth-panel-inner { max-width: 420px; }
.auth-panel-inner h1 { color: #fff; }
.auth-panel-inner p { color: #CBD5E1; }
.auth-card-wrap { display: flex; align-items: center; justify-content: center; padding: var(--space-8); background: var(--light); }
.auth-card { width: 100%; max-width: 440px; }

/* Responsive — sidebar collapses, then auth stacks, then controls go full width */
@media (max-width: 1200px) { .wrap { max-width: 100%; } }
@media (max-width: 900px) {
  .layout { flex-direction: column; }
  .sidebar { width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .side-nav { flex-direction: row; flex-wrap: wrap; }
  .side-nav-group { width: 100%; }
  .side-logout { margin-top: 0; margin-left: auto; }
  .side-logout button { width: auto; }
  .auth-layout { grid-template-columns: 1fr; }
  .auth-panel { display: none; }
}
@media (max-width: 720px) {
  h1 { font-size: var(--font-size-2xl); }
  .grid { grid-template-columns: 1fr; }
  .filters > div { flex: 1 1 100%; }
  .filters button.primary, .filters .btn { width: 100%; }
  .btn { width: 100%; }
  .topbar-inner { flex-wrap: wrap; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
  .topbar nav { flex-wrap: wrap; gap: 10px; width: 100%; }
  .topbar nav a { font-size: 15px; }
  main { padding: var(--space-5) var(--space-4) 36px; }
  .card { padding: var(--space-5); }
  button.primary, button.secondary { width: 100%; }
  .actions { flex-direction: column; align-items: stretch; }
  .actions button { width: 100%; }
}

/* Phase 3 auth details: password visibility, auth links, auth card spacing. */
.password-field { position: relative; }
.password-field input { padding-right: 72px; }
.toggle-password { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: var(--primary); cursor: pointer; font-size: 14px; font-weight: 600; padding: 6px 8px; }
.auth-links { text-align: right; margin-top: 8px; }
.auth-card h2 { margin-top: 0; }
.auth-card form { margin-top: 20px; }
.auth-panel-inner .brand { font-size: 24px; }

/* Phase 6: media library grid, review viewer, annotation pins. */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.media-card { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: #fff; }
.media-card img { width: 100%; height: 160px; object-fit: cover; display: block; background: var(--light); }
.media-file-type { height: 160px; display: flex; align-items: center; justify-content: center; background: var(--light); color: var(--muted); font-weight: 700; text-transform: uppercase; }
.media-card-body { padding: 12px 14px; }
.review-viewer { position: relative; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--light); max-height: 70vh; }
.review-viewer img { display: block; max-width: none; }
.review-pin { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--primary); color: #fff; border: 2px solid #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: help; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.compare-grid img { width: 100%; height: auto; display: block; border: 1px solid var(--border); border-radius: var(--radius-md); }
@media (max-width: 720px) { .compare-grid { grid-template-columns: 1fr; } }

/* Design polish — image sections only (upload, Media Library, image review).
   No layout, colour token, or page structure was changed; these rules only
   add hover, focus, drag and preview feedback to existing elements. */
button.primary, .btn, button.secondary { transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease; }
button.primary:active, .btn:active, button.secondary:active { transform: translateY(1px); }

/* Drag-and-drop upload zone (wizard Step 2 and order page). The real file
   input stays in the form, so server-side validation is unchanged. */
.dropzone { border: 2px dashed var(--border-strong); border-radius: var(--radius-md); padding: 24px 20px; text-align: center; background: var(--light); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.dropzone:hover { border-color: var(--primary); }
.dropzone:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.dropzone.is-dragover { border-color: var(--primary); background: var(--primary-soft); }
.dropzone input[type="file"] { display: block; width: 100%; margin: 12px auto 0; cursor: pointer; }
.dropzone-preview { margin-top: 12px; }
.dropzone-preview img { max-width: 220px; max-height: 160px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
.dropzone-preview p { margin: 8px 0 0; }

/* Media Library cards: lift + image zoom on hover, focus ring on the link. */
.media-card { transition: box-shadow 0.15s ease, transform 0.15s ease; }
.media-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.media-card-img { display: block; overflow: hidden; background: var(--light); }
.media-card img { transition: transform 0.2s ease; }
.media-card:hover img { transform: scale(1.04); }
.media-card-body p { overflow-wrap: anywhere; }
.media-card-body strong { overflow-wrap: anywhere; }
.list-thumb { width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--light); vertical-align: middle; }
.list-thumb-type { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--light); color: var(--muted); font-size: 12px; font-weight: 700; vertical-align: middle; }

/* Image review: crosshair over the image (click to pin), pins grow on hover,
   zoom level readout, and a gentle hover on the version comparison. */
.review-viewer { cursor: crosshair; }
.review-viewer img { cursor: crosshair; }
.review-pin { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.review-pin:hover { transform: scale(1.25); box-shadow: var(--shadow-md); }
.review-pin-pending { background: var(--navy); }
.review-zoom-level { font-weight: 700; }
.compare-grid img { transition: transform 0.2s ease; }
.compare-grid a:hover img { transform: scale(1.02); }
@media (max-width: 720px) { .dropzone { padding: 20px 14px; } .dropzone-preview img { max-width: 100%; } }

/* Step 1 (Pixelz-follow, Pic Visual design): guided home card. */
.get-started { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: center; }
.get-started-img { width: 100%; height: auto; display: block; border: 1px solid var(--border); border-radius: var(--radius-md); }
@media (max-width: 900px) { .get-started { grid-template-columns: 1fr; } .get-started-img { max-width: 480px; } }

/* Email-first sign-in: provider options first (Google, then SSO), email
   form below them. Original Pic Visual styling; no reference assets. */
.provider-options { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.provider-btn { display: block; width: 100%; text-align: center; background: var(--surface); color: var(--ink); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 12px 18px; font-size: var(--font-size-base); font-weight: 600; text-decoration: none; }
.provider-btn:hover { border-color: var(--primary); color: var(--ink); }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: var(--font-size-sm); margin: 20px 0 4px; }
.auth-divider span { flex: 1; border-top: 1px solid var(--border); }