/* ==========================================================================
   ArtGyver design system
   Single stylesheet for the shop-owner dashboard. Mobile-first, no framework.

   Modelled on the artCart admin system: the same component vocabulary and app
   shell, with ArtGyver's own blue palette. The dashboard loads ONLY this file -
   css/style.css is deliberately not loaded inside the shell, because its fixed
   control widths (input 400px, select 300px) and global `div { padding: 5px }`
   fight every layout here. Anything from style.css that owner pages still rely
   on is reproduced in the Legacy compatibility section at the foot.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  --ag-bg:            #ffffff;
  --ag-bg-sunk:       #f5f7fa;
  --ag-bg-raised:     #ffffff;
  --ag-bg-inset:      #eef1f6;

  --ag-text:          #14181f;
  --ag-text-soft:     #4a5566;
  --ag-text-faint:    #78849a;
  --ag-text-invert:   #ffffff;

  --ag-line:          #e1e6ee;
  --ag-line-strong:   #c9d2e0;

  --ag-brand:         #1560d0;
  --ag-brand-ink:     #114fac;
  --ag-brand-soft:    #e8f1fd;
  --ag-brand-line:    #c2d9f7;

  --ag-accent:        #12a06a;
  --ag-accent-ink:    #0d7d52;
  --ag-accent-soft:   #e4f7ee;

  --ag-danger:        #d33a4b;
  --ag-danger-ink:    #b02a3a;
  --ag-danger-soft:   #fdeaec;

  --ag-warn:          #b8760a;
  --ag-warn-soft:     #fdf3e0;

  --ag-radius-sm:     6px;
  --ag-radius:        10px;
  --ag-radius-lg:     16px;
  --ag-radius-pill:   999px;

  --ag-shadow-sm:     0 1px 2px rgba(16, 20, 30, .06);
  --ag-shadow:        0 2px 8px rgba(16, 20, 30, .07), 0 1px 2px rgba(16, 20, 30, .05);
  --ag-shadow-lg:     0 12px 32px rgba(16, 20, 30, .12), 0 2px 8px rgba(16, 20, 30, .06);

  --ag-sidebar-w:     252px;
  --ag-topbar-h:      56px;

  --ag-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --ag-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ag-bg:          #0f1217;
    --ag-bg-sunk:     #0b0e12;
    --ag-bg-raised:   #161a21;
    --ag-bg-inset:    #1d222b;

    --ag-text:        #eef1f6;
    --ag-text-soft:   #a9b2c1;
    --ag-text-faint:  #7b8596;

    --ag-text-invert: #0f1217;

    --ag-line:        #252b35;
    --ag-line-strong: #38404d;

    --ag-brand:       #64a6f5;
    --ag-brand-ink:   #8dbef8;
    --ag-brand-soft:  #14243c;
    --ag-brand-line:  #27436b;

    --ag-accent:      #34c98b;
    --ag-accent-ink:  #4bd79b;
    --ag-accent-soft: #10281f;

    --ag-danger:      #f2707f;
    --ag-danger-ink:  #f78e9a;
    --ag-danger-soft: #2c161a;

    --ag-warn:        #e0a63c;
    --ag-warn-soft:   #2a2113;

    --ag-shadow-sm:   0 1px 2px rgba(0, 0, 0, .4);
    --ag-shadow:      0 2px 8px rgba(0, 0, 0, .45);
    --ag-shadow-lg:   0 14px 36px rgba(0, 0, 0, .55);
  }
}

:root[data-theme="dark"] {
  --ag-bg:          #0f1217;
  --ag-bg-sunk:     #0b0e12;
  --ag-bg-raised:   #161a21;
  --ag-bg-inset:    #1d222b;
  --ag-text:        #eef1f6;
  --ag-text-soft:   #a9b2c1;
  --ag-text-faint:  #7b8596;
  --ag-text-invert: #0f1217;
  --ag-line:        #252b35;
  --ag-line-strong: #38404d;
  --ag-brand:       #64a6f5;
  --ag-brand-ink:   #8dbef8;
  --ag-brand-soft:  #14243c;
  --ag-brand-line:  #27436b;
  --ag-accent:      #34c98b;
  --ag-accent-ink:  #4bd79b;
  --ag-accent-soft: #10281f;
  --ag-danger:      #f2707f;
  --ag-danger-ink:  #f78e9a;
  --ag-danger-soft: #2c161a;
  --ag-warn:        #e0a63c;
  --ag-warn-soft:   #2a2113;
  --ag-shadow-sm:   0 1px 2px rgba(0, 0, 0, .4);
  --ag-shadow:      0 2px 8px rgba(0, 0, 0, .45);
  --ag-shadow-lg:   0 14px 36px rgba(0, 0, 0, .55);
}

/* ---------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ag-bg);
  color: var(--ag-text);
  font-family: var(--ag-font);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5 {
  margin: 0 0 .5em;
  line-height: 1.25;
  font-family: var(--ag-font);
  font-weight: 650;
  letter-spacing: -.015em;
  color: var(--ag-text);
}
h1 { font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.2rem); }
h2 { font-size: clamp(1.25rem, 1.1rem + .9vw, 1.65rem); }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 1em; color: var(--ag-text-soft); }

a {
  color: var(--ag-brand);
  font-family: inherit;
  font-size: inherit;
  letter-spacing: normal;
  text-decoration: none;
}
a:hover { text-decoration: underline; }

hr { border: 0; border-top: 1px solid var(--ag-line); margin: 2rem 0; }

code, pre, kbd { font-family: var(--ag-mono); font-size: .875em; }
code {
  background: var(--ag-bg-inset);
  padding: .15em .4em;
  border-radius: var(--ag-radius-sm);
  color: var(--ag-text);
}
pre {
  background: var(--ag-bg-inset);
  border: 1px solid var(--ag-line);
  border-radius: var(--ag-radius);
  padding: 1rem;
  overflow-x: auto;
}
pre code { background: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--ag-brand);
  outline-offset: 2px;
  border-radius: var(--ag-radius-sm);
}

/* -------------------------------------------------------------- layout --- */
.ag-stack > * + * { margin-top: 1rem; }

.ag-grid { display: grid; gap: 20px; }
.ag-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.ag-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.ag-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }

.ag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.ag-row--between { justify-content: space-between; }
.ag-row--end     { justify-content: flex-end; }
.ag-spacer       { flex: 1 1 auto; }

/* -------------------------------------------------------------- buttons -- */
.ag-btn {
  --btn-bg: var(--ag-brand);
  --btn-fg: #fff;
  --btn-line: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .65em 1.15em;
  min-height: 44px;
  font: inherit;
  font-weight: 570;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-line);
  border-radius: var(--ag-radius);
  cursor: pointer;
  text-decoration: none;
  transition: filter .15s ease, background-color .15s ease, border-color .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.ag-btn:hover { filter: brightness(1.08); text-decoration: none; color: var(--btn-fg); }
.ag-btn:active { filter: brightness(.94); }
.ag-btn[disabled], .ag-btn.is-disabled { opacity: .5; pointer-events: none; }

.ag-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ag-text);
  --btn-line: var(--ag-line-strong);
}
.ag-btn--ghost:hover { background: var(--ag-bg-inset); filter: none; }

.ag-btn--soft {
  --btn-bg: var(--ag-brand-soft);
  --btn-fg: var(--ag-brand-ink);
  --btn-line: var(--ag-brand-line);
}
.ag-btn--accent { --btn-bg: var(--ag-accent); }
.ag-btn--danger { --btn-bg: var(--ag-danger); }
.ag-btn--sm { padding: .4em .8em; min-height: 34px; font-size: .875rem; }
.ag-btn--lg { padding: .8em 1.6em; min-height: 52px; font-size: 1.05rem; }
.ag-btn--block { width: 100%; }
.ag-btn svg { width: 18px; height: 18px; flex: none; }

.ag-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.ag-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ag-spin .7s linear infinite;
}
@keyframes ag-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------- forms --- */
.ag-field { display: block; margin-bottom: 1rem; }
.ag-label {
  display: block;
  margin-bottom: .35rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ag-text);
  letter-spacing: .01em;
}
.ag-hint { margin: .35rem 0 0; font-size: .8rem; color: var(--ag-text-faint); }

.ag-input, .ag-select, .ag-textarea {
  display: block;
  width: 100%;
  padding: .6rem .75rem;
  min-height: 44px;
  font: inherit;
  letter-spacing: normal;
  color: var(--ag-text);
  background: var(--ag-bg-raised);
  border: 1px solid var(--ag-line-strong);
  border-radius: var(--ag-radius);
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.ag-textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.ag-input:focus, .ag-select:focus, .ag-textarea:focus {
  outline: none;
  border-color: var(--ag-brand);
  box-shadow: 0 0 0 3px var(--ag-brand-soft);
}
.ag-input::placeholder, .ag-textarea::placeholder { color: var(--ag-text-faint); }
.ag-input[readonly], .ag-input:disabled { background: var(--ag-bg-inset); color: var(--ag-text-soft); }

.ag-select {
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2378849a' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
}

.ag-check {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .35rem 0;
  cursor: pointer;
  font-size: .92rem;
  color: var(--ag-text);
}
.ag-check input[type="checkbox"], .ag-check input[type="radio"] {
  width: 18px; height: 18px;
  margin: 3px 0 0;
  accent-color: var(--ag-brand);
  flex: none;
}

.ag-inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.ag-inline-form .ag-field { margin-bottom: 0; flex: 1 1 200px; }

/* A search input with a magnifier tucked inside the left edge. */
.ag-search { position: relative; flex: 1 1 240px; }
.ag-search .ag-input { padding-left: 2.4rem; }
.ag-search svg {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--ag-text-faint);
  pointer-events: none;
}

/* --------------------------------------------------------------- cards --- */
.ag-card {
  background: var(--ag-bg-raised);
  border: 1px solid var(--ag-line);
  border-radius: var(--ag-radius-lg);
  box-shadow: var(--ag-shadow-sm);
  padding: 20px;
}
.ag-card--flush { padding: 0; overflow: hidden; }
.ag-card__head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ag-line);
}
.ag-card__head h2, .ag-card__head h3 { margin: 0; font-size: 1.05rem; }
.ag-card__body { padding: 20px; }
.ag-card__foot {
  padding: 14px 20px;
  border-top: 1px solid var(--ag-line);
  background: var(--ag-bg-sunk);
}

.ag-stat {
  background: var(--ag-bg-raised);
  border: 1px solid var(--ag-line);
  border-radius: var(--ag-radius-lg);
  padding: 18px 20px;
  box-shadow: var(--ag-shadow-sm);
}
.ag-stat__label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ag-text-faint);
  margin: 0 0 .35rem;
}
.ag-stat__value {
  font-size: 1.9rem;
  font-weight: 680;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ag-text);
}
.ag-stat__meta { margin: .3rem 0 0; font-size: .82rem; color: var(--ag-text-faint); }
.ag-stat a.ag-stat__meta:hover { color: var(--ag-brand); }

/* A stat that is a link to the thing it counts. */
a.ag-stat { display: block; color: inherit; }
a.ag-stat:hover { text-decoration: none; border-color: var(--ag-brand-line); box-shadow: var(--ag-shadow); }

/* --------------------------------------------------------------- badges -- */
.ag-badge {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .2em .6em;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.5;
  border-radius: var(--ag-radius-pill);
  background: var(--ag-bg-inset);
  color: var(--ag-text-soft);
  border: 1px solid var(--ag-line);
  white-space: nowrap;
}
.ag-badge--on   { background: var(--ag-accent-soft); color: var(--ag-accent-ink); border-color: transparent; }
.ag-badge--off  { background: var(--ag-bg-inset);    color: var(--ag-text-faint); }
.ag-badge--warn { background: var(--ag-warn-soft);   color: var(--ag-warn); border-color: transparent; }
.ag-badge--bad  { background: var(--ag-danger-soft); color: var(--ag-danger-ink); border-color: transparent; }
.ag-badge--brand{ background: var(--ag-brand-soft);  color: var(--ag-brand-ink); border-color: transparent; }

.ag-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ag-text-faint); flex: none; }
.ag-dot--on  { background: var(--ag-accent); }
.ag-dot--off { background: var(--ag-line-strong); }

/* --------------------------------------------------------------- alerts -- */
.ag-alert {
  padding: .85rem 1rem;
  border-radius: var(--ag-radius);
  border: 1px solid var(--ag-line);
  background: var(--ag-bg-inset);
  color: var(--ag-text);
  margin-bottom: 1rem;
  font-size: .92rem;
}
.ag-alert p:last-child { margin-bottom: 0; }
.ag-alert--ok   { background: var(--ag-accent-soft); border-color: transparent; color: var(--ag-accent-ink); }
.ag-alert--bad  { background: var(--ag-danger-soft); border-color: transparent; color: var(--ag-danger-ink); }
.ag-alert--warn { background: var(--ag-warn-soft);   border-color: transparent; color: var(--ag-warn); }

/* --------------------------------------------------------------- tables -- */
.ag-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ag-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
.ag-table th, .ag-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--ag-line);
  vertical-align: middle;
}
.ag-table th {
  font-size: .76rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ag-text-faint);
  background: var(--ag-bg-sunk);
  white-space: nowrap;
}
.ag-table tbody tr:hover { background: var(--ag-bg-sunk); }
.ag-table td.ag-num { text-align: right; font-variant-numeric: tabular-nums; }
.ag-table .ag-thumb {
  width: 44px;
  height: 44px;
  flex: none;
  min-width: 44px;
  min-height: 44px;
  object-fit: cover;
  border-radius: var(--ag-radius-sm);
  background: var(--ag-bg-inset);
  display: block;
}

/* Row-level action buttons: icon-sized, quiet until hovered. */
.ag-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--ag-radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ag-text-faint);
  cursor: pointer;
  flex: none;
}
.ag-iconbtn svg { width: 17px; height: 17px; }
.ag-iconbtn:hover {
  background: var(--ag-bg-inset);
  color: var(--ag-text);
  border-color: var(--ag-line);
  text-decoration: none;
}
.ag-iconbtn--danger:hover { background: var(--ag-danger-soft); color: var(--ag-danger-ink); border-color: transparent; }

/* Card-style table rows once there is no room for columns. */
@media (max-width: 640px) {
  .ag-table--stack thead { display: none; }
  .ag-table--stack tr {
    display: block;
    padding: 12px 14px;
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius);
    margin-bottom: 10px;
    background: var(--ag-bg-raised);
  }
  .ag-table--stack td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    border: 0;
    text-align: right;
  }
  .ag-table--stack td::before {
    content: attr(data-label);
    font-size: .76rem;
    font-weight: 650;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ag-text-faint);
    text-align: left;
  }
  .ag-table--stack td.ag-num { text-align: right; }
  .ag-table--stack td:has(> .ag-thumb),
  .ag-table--stack td:has(> a > .ag-thumb) { justify-content: flex-start; }
}

/* ------------------------------------------------------------ app shell -- */
.ag-app { min-height: 100vh; background: var(--ag-bg-sunk); }

.ag-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--ag-topbar-h);
  padding: 0 16px;
  background: var(--ag-bg-raised);
  border-bottom: 1px solid var(--ag-line);
}
.ag-topbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 680;
  letter-spacing: -.02em;
  color: var(--ag-text);
  font-size: 1.05rem;
}
.ag-topbar__brand:hover { text-decoration: none; }

.ag-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--ag-line);
  border-radius: var(--ag-radius);
  background: var(--ag-bg-raised);
  color: var(--ag-text);
  cursor: pointer;
  flex: none;
}
.ag-burger svg { width: 20px; height: 20px; }

.ag-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: var(--ag-sidebar-w);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--ag-bg-raised);
  border-right: 1px solid var(--ag-line);
  transform: translateX(-100%);
  transition: transform .22s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ag-sidebar.is-open { transform: none; }

.ag-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 16px 18px;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -.02em;
  color: var(--ag-text);
  border-bottom: 1px solid var(--ag-line);
}
.ag-sidebar__brand:hover { text-decoration: none; }

.ag-logo {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--ag-brand), var(--ag-accent));
  display: grid;
  place-items: center;
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: -.02em;
  flex: none;
}

.ag-user {
  padding: 14px 18px;
  border-bottom: 1px solid var(--ag-line);
  background: var(--ag-bg-sunk);
}
.ag-user__name { font-weight: 620; font-size: .95rem; }
.ag-user__meta { font-size: .82rem; color: var(--ag-text-faint); }

.ag-nav { padding: 10px 10px 24px; flex: 1 1 auto; }
.ag-nav__label {
  padding: 14px 10px 6px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ag-text-faint);
}
.ag-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--ag-radius);
  color: var(--ag-text-soft);
  font-size: .92rem;
  font-weight: 520;
  letter-spacing: normal;
  line-height: 1.3;
  min-height: 40px;
}
.ag-nav a:hover { background: var(--ag-bg-inset); color: var(--ag-text); text-decoration: none; }
.ag-nav a.is-active { background: var(--ag-brand-soft); color: var(--ag-brand-ink); font-weight: 620; }
.ag-nav a svg { width: 18px; height: 18px; flex: none; opacity: .8; }
.ag-nav a.is-active svg { opacity: 1; }

.ag-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(10, 12, 18, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.ag-scrim.is-open { opacity: 1; pointer-events: auto; }

.ag-main { padding: 20px 16px 64px; }
.ag-main__inner { max-width: 1160px; margin-inline: auto; }

.ag-page-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.ag-page-head h1 { margin: 0; font-size: clamp(1.4rem, 1.2rem + 1vw, 1.85rem); }
.ag-page-head p  { margin: .2rem 0 0; color: var(--ag-text-faint); font-size: .92rem; }

@media (min-width: 1024px) {
  .ag-sidebar { transform: none; }
  .ag-app { padding-left: var(--ag-sidebar-w); }
  .ag-topbar { display: none; }
  .ag-scrim { display: none; }
  .ag-main { padding: 32px 32px 80px; }
}

/* ------------------------------------------------------------- app foot -- */
.ag-appfoot {
  padding: 24px 0 0;
  margin-top: 32px;
  border-top: 1px solid var(--ag-line);
  color: var(--ag-text-faint);
  font-size: .85rem;
  text-align: center;
}
.ag-appfoot p { color: inherit; }

/* ---------------------------------------------------------------- modal --- */
.ag-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(10, 12, 18, .6);
}
.ag-modal[hidden] { display: none; }
.ag-modal__box {
  background: var(--ag-bg-raised);
  border-radius: var(--ag-radius-lg);
  box-shadow: var(--ag-shadow-lg);
  width: 100%;
  max-width: 520px;
  max-height: 88dvh;
  overflow-y: auto;
  padding: 22px;
}
.ag-modal__box h3 { margin-top: 0; }

/* ----------------------------------------------------------------- misc --- */
.ag-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--ag-text-faint);
  border: 1px dashed var(--ag-line-strong);
  border-radius: var(--ag-radius-lg);
}
.ag-empty h3 { color: var(--ag-text-soft); }

.ag-muted   { color: var(--ag-text-faint); }
.ag-small   { font-size: .85rem; }
.ag-center  { text-align: center; }
.ag-nowrap  { white-space: nowrap; }
.ag-mt-0 { margin-top: 0; }
.ag-mb-0 { margin-bottom: 0; }
.ag-mt-2 { margin-top: 1rem; }
.ag-mt-3 { margin-top: 1.5rem; }
.ag-mb-2 { margin-bottom: 1rem; }
.ag-mb-3 { margin-bottom: 1.5rem; }

.ag-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ag-brand);
  color: #fff;
  padding: .7rem 1rem;
  z-index: 200;
  border-radius: 0 0 var(--ag-radius) 0;
}
.ag-skip:focus { left: 0; }

@media print {
  .ag-sidebar, .ag-topbar, .ag-scrim { display: none !important; }
  .ag-app { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Legacy compatibility
   Most owner pages still carry markup from before the redesign - bare inputs,
   .container blocks, .alert-box messages, unclassed tables and the .switch
   toggle. These rules give that markup the new look without editing each page,
   so nothing renders unstyled inside the shell. They also stand in for the
   parts of css/style.css that the dashboard no longer loads. New work should
   use the .ag-* components above rather than relying on any of this.
   ========================================================================== */

.ag-main .center_content,
.ag-main .center {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding: 0;
}

/* Bare form controls, styled to match .ag-input / .ag-select / .ag-textarea.
   :where() carries zero specificity, so this acts as a genuine fallback: a
   page's own stylesheet wins without having to out-specify it. Written as
   .ag-main input[type="text"] it would score (0,2,1) and quietly beat page
   rules like .form-control, leaving controls at mismatched heights. */
:where(.ag-main) :where(
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="tel"],
  input[type="date"],
  select,
  textarea
) {
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  padding: .6rem .75rem;
  margin: 0 0 .9rem;
  font: inherit;
  letter-spacing: normal;
  color: var(--ag-text);
  background: var(--ag-bg-raised);
  border: 1px solid var(--ag-line-strong);
  border-radius: var(--ag-radius);
  -webkit-appearance: none;
  appearance: none;
}
:where(.ag-main) :where(textarea) { min-height: 110px; resize: vertical; }
:where(.ag-main) :where(input, select, textarea):focus {
  outline: none;
  border-color: var(--ag-brand);
  box-shadow: 0 0 0 3px var(--ag-brand-soft);
}
:where(.ag-main) :where(input[type="checkbox"], input[type="radio"]) {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0 .4rem 0 0;
  accent-color: var(--ag-brand);
}
:where(.ag-main) :where(input[type="color"]) {
  width: 56px;
  height: 44px;
  padding: 4px;
  border: 1px solid var(--ag-line-strong);
  border-radius: var(--ag-radius);
  background: var(--ag-bg-raised);
  cursor: pointer;
}
:where(.ag-main) :where(input[type="file"]) { margin-bottom: .9rem; }

:where(.ag-main) :where(button:not([class]), input[type="submit"], input[type="button"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 44px;
  padding: .65em 1.15em;
  font: inherit;
  font-weight: 570;
  letter-spacing: normal;
  color: #fff;
  background: var(--ag-brand);
  border: 1px solid transparent;
  border-radius: var(--ag-radius);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
:where(.ag-main) :where(button:not([class]), input[type="submit"], input[type="button"]):hover { filter: brightness(1.08); }

/* Unclassed tables. */
:where(.ag-main) :where(table:not([class])) {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  margin-bottom: 1.2rem;
}
:where(.ag-main) :where(table:not([class])) :where(th, td) {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--ag-line);
}
:where(.ag-main) :where(table:not([class])) :where(th) {
  font-size: .76rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ag-text-faint);
  background: var(--ag-bg-sunk);
}
/* Owner pages set zebra striping with hard-coded greys (#CCC/#FFF) that clash
   badly in dark mode - override both the rule and any inline equivalent. */
.ag-main tr[style*="background"] { background: transparent !important; }
.ag-main tr:nth-child(even) { background: var(--ag-bg-sunk); }
.ag-main tr:nth-child(odd)  { background: transparent; }

/* Generic .container blocks used as cards on older pages. */
.ag-main .container {
  background: var(--ag-bg-raised);
  border: 1px solid var(--ag-line);
  border-radius: var(--ag-radius-lg);
  padding: 18px;
  margin-bottom: 1.2rem;
}

/* Status messages. .alert-box.success is faded in by jQuery on several pages,
   so it must stay hidden until then - matching the old style.css behaviour. */
.ag-main .error-message,
.ag-main .failure,
.ag-main .alert-box.error {
  color: var(--ag-danger-ink);
  background: var(--ag-danger-soft);
  padding: .7rem .9rem;
  border-radius: var(--ag-radius);
}
.ag-main .success-message,
.ag-main .alert-box.success:not(:empty) {
  color: var(--ag-accent-ink);
  background: var(--ag-accent-soft);
  padding: .7rem .9rem;
  border-radius: var(--ag-radius);
}
.ag-main .alert-box:empty { display: none; }
.ag-main .success, .ag-main .failure { display: none; }

/* The .switch / .slider toggle from style.css, on brand. */
.ag-main .switch { position: relative; display: inline-block; width: 52px; height: 30px; flex: none; }
.ag-main .switch input { opacity: 0; width: 0; height: 0; }
.ag-main .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--ag-line-strong);
  border-radius: var(--ag-radius-pill);
  transition: background-color .25s ease;
}
.ag-main .slider:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: var(--ag-shadow-sm);
  transition: transform .25s ease;
}
.ag-main input:checked + .slider { background-color: var(--ag-brand); }
.ag-main input:focus-visible + .slider { box-shadow: 0 0 0 3px var(--ag-brand-soft); }
.ag-main input:checked + .slider:before { transform: translateX(22px); }

/* Older pages group a label and control in .form-group / .form-section. */
.ag-main .form-group { margin-bottom: 1rem; }
.ag-main .form-group label { display: block; margin-bottom: .35rem; font-size: .85rem; font-weight: 600; }
.ag-main .form-section {
  background: var(--ag-bg-raised);
  border: 1px solid var(--ag-line);
  border-radius: var(--ag-radius-lg);
  padding: 18px;
  margin-bottom: 1.2rem;
}
.ag-main .help-text { font-size: .8rem; color: var(--ag-text-faint); }

/* Nothing in the dashboard should be able to scroll the page sideways. */
:where(.ag-main) :where(img) { max-width: 100%; height: auto; }
.ag-main pre { overflow-x: auto; }

/* --------------------------------------------------------------- frames -- */
/* A moulding drawn round an element. The nine-patch is generated once on
   upload (lib/ag_frames.php) so one image serves every size and proportion -
   the border-width is the only thing that changes between a swatch and a
   full-size preview. */
.fr-preview {
  border-style: solid;
  /* A starting point only: js/frames.js replaces this with the moulding's real
     face width measured against the print it surrounds, so a wide moulding
     draws wide and every frame scales with the picture. This value is what
     shows if that script has not run. */
  border-width: 26px;
  border-image-slice: 33.333% fill;
  border-image-repeat: round;
  background: var(--ag-bg-inset);
  line-height: 0;
}
.fr-preview img { width: 100%; height: auto; display: block; }
.fr-preview__blank {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--ag-text-faint);
}

/* The admin grid of mouldings. */
.fr-admin {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.fr-admin__item {
  border: 1px solid var(--ag-line);
  border-radius: var(--ag-radius-lg);
  padding: 14px;
  background: var(--ag-bg-raised);
  min-width: 0;
}
.fr-admin__item.is-off { opacity: .55; }
.fr-admin__item .ag-label { font-size: .78rem; }

/* The swatches a shopper picks a moulding from: square, because a corner
   sample is square and a row of them reads as a set of choices rather than a
   gallery. */
.sf-frames { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 10px; }
.sf-frame {
  width: 66px;
  height: 66px;
  padding: 0;
  border: 2px solid var(--ag-line-strong);
  border-radius: 8px;
  background: none;
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
}
.sf-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-frame:hover { border-color: var(--ag-text-faint); }
.sf-frame.is-selected {
  border-color: var(--ag-text);
  box-shadow: 0 0 0 2px var(--ag-brand-soft);
}
/* border-width takes no percentages, so the width is set in script instead. */
.sf-framed { max-width: 100%; }

/* ------------------------------------------------ public site header/foot */
.ag-sitehead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--ag-bg) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--ag-line);
}
.ag-sitehead__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
}
.ag-sitehead__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 720;
  font-size: 1.12rem;
  letter-spacing: -.025em;
  color: var(--ag-text);
}
.ag-sitehead__brand:hover { text-decoration: none; }

.ag-sitenav { display: none; gap: 4px; align-items: center; }
.ag-sitenav a {
  padding: .5rem .7rem;
  border-radius: var(--ag-radius);
  color: var(--ag-text-soft);
  font-size: .93rem;
  font-weight: 540;
}
.ag-sitenav a:hover { background: var(--ag-bg-inset); color: var(--ag-text); text-decoration: none; }
.ag-sitenav a.is-active { color: var(--ag-text); font-weight: 640; }

.ag-sitehead__actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.ag-sitehead__actions .ag-btn { min-height: 40px; padding: .45em .95em; font-size: .92rem; }

#ag-mobile-nav {
  display: block;
  border-top: 1px solid var(--ag-line);
  padding: 10px 0 16px;
}
#ag-mobile-nav[hidden] { display: none; }
#ag-mobile-nav a {
  display: block;
  padding: 11px 4px;
  color: var(--ag-text);
  font-weight: 540;
  border-bottom: 1px solid var(--ag-line);
}
#ag-mobile-nav a:last-of-type { border-bottom: 0; }

@media (min-width: 900px) {
  .ag-sitenav { display: flex; }
  .ag-sitehead__burger { display: none; }
  #ag-mobile-nav { display: none !important; }
}

.ag-sitefoot {
  background: var(--ag-bg-sunk);
  border-top: 1px solid var(--ag-line);
  padding: 48px 0 32px;
  margin-top: 64px;
}
.ag-sitefoot__cols {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}
.ag-sitefoot h4 {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ag-text-faint);
  margin-bottom: .9rem;
}
.ag-sitefoot ul { list-style: none; margin: 0; padding: 0; }
.ag-sitefoot li { margin-bottom: .5rem; }
.ag-sitefoot li a { color: var(--ag-text-soft); font-size: .92rem; }
.ag-sitefoot li a:hover { color: var(--ag-text); }
.ag-sitefoot__base {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--ag-line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  color: var(--ag-text-faint);
  font-size: .85rem;
}

/* --------------------------------------------------------------- marketing */
.ag-hero {
  padding-block: clamp(3rem, 2rem + 6vw, 6.5rem);
  background:
    radial-gradient(1000px 480px at 15% -10%, var(--ag-brand-soft), transparent 65%),
    radial-gradient(760px 400px at 100% 0%, var(--ag-accent-soft), transparent 60%);
}
.ag-hero h1 { max-width: 18ch; }
.ag-hero__lede {
  font-size: clamp(1.02rem, .95rem + .45vw, 1.22rem);
  color: var(--ag-text-soft);
  max-width: 56ch;
}
.ag-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .3em .8em;
  margin-bottom: 1.1rem;
  border-radius: var(--ag-radius-pill);
  background: var(--ag-bg-raised);
  border: 1px solid var(--ag-brand-line);
  color: var(--ag-brand-ink);
  font-size: .8rem;
  font-weight: 620;
}

.ag-feature {
  background: var(--ag-bg-raised);
  border: 1px solid var(--ag-line);
  border-radius: var(--ag-radius-lg);
  padding: 22px;
  height: 100%;
}
.ag-feature h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.ag-feature p  { margin: 0; font-size: .93rem; }
.ag-feature__icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--ag-brand-soft);
  color: var(--ag-brand-ink);
  margin-bottom: 14px;
  font-size: 1.05rem;
}

.ag-steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.ag-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  align-items: start;
}
.ag-steps li::before {
  content: counter(step);
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ag-brand);
  color: #fff;
  font-weight: 700;
  font-size: .92rem;
}
.ag-steps h3 { margin: .2rem 0 .25rem; font-size: 1.02rem; }
.ag-steps p  { margin: 0; font-size: .93rem; }

.ag-price {
  background: var(--ag-bg-raised);
  border: 1px solid var(--ag-line);
  border-radius: var(--ag-radius-lg);
  padding: 26px;
  display: flex;
  flex-direction: column;
}
.ag-price--featured { border-color: var(--ag-brand); box-shadow: var(--ag-shadow-lg); }
.ag-price__amount { font-size: 2.4rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.ag-price__per { font-size: .9rem; color: var(--ag-text-faint); font-weight: 500; }
.ag-price ul { list-style: none; padding: 0; margin: 1.2rem 0; flex: 1 1 auto; }
.ag-price li {
  padding-left: 1.6rem;
  position: relative;
  margin-bottom: .6rem;
  font-size: .93rem;
  color: var(--ag-text-soft);
}
.ag-price li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--ag-accent);
  font-weight: 700;
}

.ag-faq { border-top: 1px solid var(--ag-line); }
.ag-faq details { border-bottom: 1px solid var(--ag-line); }
.ag-faq summary {
  padding: 1.05rem 2rem 1.05rem 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  position: relative;
  color: var(--ag-text);
}
.ag-faq summary::-webkit-details-marker { display: none; }
.ag-faq summary::after {
  content: "+";
  position: absolute;
  right: .25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--ag-text-faint);
  line-height: 1;
}
.ag-faq details[open] summary::after { content: "–"; }
.ag-faq details > div { padding-bottom: 1.1rem; }
.ag-faq details p:last-child { margin-bottom: 0; }


/* ----------------------------------------------- marketing page helpers -- */
.ag-wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 20px;
}
.ag-wrap--narrow { max-width: 780px; }

.ag-section { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.ag-section--sunk { background: var(--ag-bg-sunk); }

.ag-stack-lg > * + * { margin-top: 2rem; }

/* Long-form documentation. */
.ag-prose h2 { margin-top: 2.2rem; }
.ag-prose h3 { margin-top: 1.7rem; }
.ag-prose ul, .ag-prose ol { color: var(--ag-text-soft); padding-left: 1.3rem; }
.ag-prose li { margin-bottom: .45rem; }
.ag-prose img { border-radius: var(--ag-radius); border: 1px solid var(--ag-line); margin: 1rem 0; }
.ag-prose table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .92rem; }
.ag-prose th, .ag-prose td { padding: 10px 12px; border-bottom: 1px solid var(--ag-line); text-align: left; }

/* The help index: one card per topic. */
.ag-doc-card {
  display: block;
  background: var(--ag-bg-raised);
  border: 1px solid var(--ag-line);
  border-radius: var(--ag-radius-lg);
  padding: 20px;
  height: 100%;
  color: inherit;
}
.ag-doc-card:hover {
  text-decoration: none;
  border-color: var(--ag-brand-line);
  box-shadow: var(--ag-shadow);
}
.ag-doc-card h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.ag-doc-card p  { margin: 0; font-size: .92rem; }

/* Sidebar of topics on a help page. */
.ag-doc-layout { display: grid; gap: 32px; }
@media (min-width: 900px) {
  .ag-doc-layout { grid-template-columns: 230px 1fr; }
}
.ag-doc-nav { position: sticky; top: 84px; align-self: start; }
.ag-doc-nav h4 {
  font-size: .72rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ag-text-faint); margin-bottom: .7rem;
}
.ag-doc-nav a {
  display: block; padding: 7px 10px; border-radius: var(--ag-radius);
  color: var(--ag-text-soft); font-size: .92rem;
}
.ag-doc-nav a:hover { background: var(--ag-bg-inset); color: var(--ag-text); text-decoration: none; }
.ag-doc-nav a.is-active { background: var(--ag-brand-soft); color: var(--ag-brand-ink); font-weight: 620; }