/* ==========================================================================
   SkipDeer admin — view styles
   Loaded after admin.css and depends on its tokens (--fs-*, --sp-*, --r-*).
   Both files are required; see AGENTS.md.

   Sizes come from the --fs-* scale only. See the note at the top of admin.css.
   ========================================================================== */

.view{display:none}
.view.active-view{display:block}
.mobile-topbar{display:none}

/* --- Overview layout ------------------------------------------------------ */
.overview-grid{display:grid;grid-template-columns:1.65fr .75fr;gap:var(--sp-5);margin-top:var(--sp-5)}
.chart-panel,.action-panel{margin-top:0}
.chart-panel .panel-head>b{
  font-size:var(--fs-xs);font-weight:700;color:#42602c;background:#e7f2da;
  padding:7px 12px;border-radius:999px;white-space:nowrap;
}

/* --- Bar chart ------------------------------------------------------------
   Bar heights are set from JS via the CSSOM — the CSP forbids inline style
   attributes, so a height cannot be written into the markup. See admin.js.  */
.bar-chart{
  height:200px;display:flex;align-items:flex-end;gap:8px;
  padding-top:var(--sp-6);margin-bottom:var(--sp-6);
  border-bottom:1px solid var(--line);position:relative;
}
.bar-chart:before,.bar-chart:after{content:"";position:absolute;left:0;right:0;border-top:1px dashed #dfe2dc}
.bar-chart:before{top:34%}
.bar-chart:after{top:65%}
.chart-bar{
  flex:1;min-width:8px;background:#d3d8d0;border-radius:5px 5px 0 0;
  position:relative;z-index:1;transition:background .2s;cursor:default;
}
.chart-bar:hover{background:var(--orange)}
.chart-bar.active{background:var(--lime)}
.chart-bar span{
  position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);
  font-size:var(--fs-2xs);color:var(--muted);white-space:nowrap;
}
/* Value tooltip on hover */
.chart-bar b{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  font-size:var(--fs-2xs);font-weight:700;white-space:nowrap;
  background:var(--ink);color:#fff;padding:5px 9px;border-radius:6px;
  opacity:0;pointer-events:none;transition:opacity .15s;z-index:3;
}
.chart-bar:hover b{opacity:1}

/* --- Quick actions -------------------------------------------------------- */
.action-panel>div{margin-bottom:var(--sp-3)}
.action-panel h2,.analytics-grid h2,.settings-grid h2{
  font:700 var(--fs-xl) "Manrope",sans-serif;letter-spacing:-.035em;margin:var(--sp-1) 0 var(--sp-2);
}
.action-panel>button{
  width:100%;border:0;border-top:1px solid var(--line);background:transparent;
  padding:var(--sp-4) var(--sp-1);display:flex;align-items:center;text-align:left;
  gap:var(--sp-3);cursor:pointer;transition:background .15s;
}
.action-panel>button:hover{background:#f1f1e9}
.action-panel>button>i{margin-left:auto;font-style:normal;color:var(--muted);font-size:var(--fs-md)}
.action-panel>button:hover>i{color:var(--ink)}
.action-icon{
  width:34px;height:34px;border-radius:var(--r-sm);background:#e9eae4;
  display:grid;place-items:center;font-size:var(--fs-sm);flex:none;
}
.action-icon.lime{background:#e8f9c2;color:#48591d}
.action-icon.orange{background:#ffe0d8;color:#ad3d27}
.action-panel p{margin:0;min-width:0}
.action-panel b,.action-panel small{display:block}
.action-panel b{font-size:var(--fs-sm);font-weight:700}
.action-panel small{font-size:var(--fs-xs);color:var(--muted);margin-top:2px}

.text-button{
  border:0;background:transparent;font-size:var(--fs-xs);font-weight:700;
  cursor:pointer;padding:6px 8px;border-radius:6px;transition:background .15s;
}
.text-button:hover{background:#eceade}

/* --- Orders view ---------------------------------------------------------- */
.main-panel{margin-top:0}
.filter-row{display:flex;gap:var(--sp-2);margin:var(--sp-1) 0 var(--sp-5);overflow-x:auto;padding-bottom:2px}
.filter{
  border:1px solid var(--line);background:#fff;padding:8px 14px;border-radius:999px;
  font-size:var(--fs-xs);font-weight:600;cursor:pointer;text-transform:capitalize;
  white-space:nowrap;transition:background .15s,color .15s,border-color .15s;
}
.filter:hover{border-color:#bcc2b8;background:#fbfbf7}
.filter.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.order-open{
  border:0;background:#eaece5;width:32px;height:32px;border-radius:var(--r-sm);
  cursor:pointer;font-size:var(--fs-sm);color:var(--ink);transition:background .15s;
}
.order-open:hover{background:var(--ink);color:#fff}
.primary-small{
  border:0;background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--r-sm);
  font-size:var(--fs-sm);font-weight:700;cursor:pointer;white-space:nowrap;
  transition:background .15s,transform .1s;
}
.primary-small:hover{background:#1d2724}
.primary-small:active{transform:translateY(1px)}

/* --- Products ------------------------------------------------------------- */
.product-list{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.product-admin-card{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5);
  position:relative;background:#fff;display:flex;flex-direction:column;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.product-admin-card:hover{border-color:#c7ccc3;box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.product-admin-card.inactive{opacity:.62}
.product-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3)}
.product-admin-icon{
  width:44px;height:44px;border-radius:var(--r-md);background:var(--ink);color:var(--lime);
  display:grid;place-items:center;font:800 var(--fs-lg) "Manrope",sans-serif;flex:none;
}
.product-card-head button{
  border:0;background:#f0f1ec;border-radius:var(--r-sm);padding:8px 14px;
  font-size:var(--fs-xs);font-weight:700;cursor:pointer;transition:background .15s;
}
.product-card-head button:hover{background:var(--ink);color:#fff}
.product-admin-card h3{font:700 var(--fs-lg) "Manrope",sans-serif;letter-spacing:-.02em;margin:var(--sp-4) 0 var(--sp-2)}
.product-admin-card>p{font-size:var(--fs-xs);line-height:1.6;color:var(--muted);margin:0 0 var(--sp-4);min-height:42px}
.product-price{font:800 var(--fs-2xl) "Manrope",sans-serif;letter-spacing:-.04em;margin-top:auto}
.product-meta{
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);
  border-top:1px solid var(--line);padding-top:var(--sp-3);margin-top:var(--sp-4);
  font-size:var(--fs-xs);color:var(--muted);
}
.state{padding:5px 10px;border-radius:999px;background:#e8f4da;color:#42602c;font-weight:700}
.state.off{background:#ececec;color:#6d6d6d}

/* --- Payment methods ------------------------------------------------------ */
.return-url-card{
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-5);
  flex-wrap:wrap;background:#eef0e8;border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-5);
}
.return-url-card small{font-size:var(--fs-2xs);letter-spacing:.14em;color:var(--orange);font-weight:800}
.return-url-card p{margin:var(--sp-2) 0 0;font-size:var(--fs-xs);color:var(--muted);max-width:60ch}
.return-url-card code{
  font-size:var(--fs-xs);background:#fff;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:10px 14px;white-space:nowrap;
  overflow-x:auto;max-width:100%;
}

.method-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}
.method-card{
  border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  padding:var(--sp-5);display:flex;flex-direction:column;
  transition:border-color .15s,box-shadow .15s;
}
.method-card:hover{border-color:#c7ccc3;box-shadow:var(--shadow-sm)}
.method-card.inactive{opacity:.62}
.method-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-3)}
.method-head b{display:block;font-size:var(--fs-lg);font-weight:700}
.method-head small{display:block;font-size:var(--fs-xs);color:var(--muted);margin-top:2px}
.method-head button{
  border:0;background:#f0f1ec;border-radius:var(--r-sm);padding:8px 14px;
  font-size:var(--fs-xs);font-weight:700;cursor:pointer;flex:none;transition:background .15s;
}
.method-head button:hover{background:var(--ink);color:#fff}
.method-card>p{font-size:var(--fs-xs);line-height:1.6;color:var(--muted);margin:var(--sp-3) 0 var(--sp-4);min-height:40px}
.method-link{display:flex;align-items:center;gap:var(--sp-2);min-width:0;margin-bottom:var(--sp-4)}
.method-link code{
  font-size:var(--fs-2xs);color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.method-tag{
  font-size:var(--fs-2xs);font-weight:700;padding:4px 9px;border-radius:999px;
  background:#e9eae4;color:#4c564f;flex:none;
}
.method-tag.lime{background:#e6f9bd;color:#48591d}
.method-tag.warn{background:#ffe8cc;color:#8a5a15}
.method-ref{display:flex;align-items:center;gap:var(--sp-2);min-width:0;margin:-8px 0 var(--sp-4)}
.method-ref code{
  font-size:var(--fs-2xs);color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.method-meta{
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);
  border-top:1px solid var(--line);padding-top:var(--sp-3);margin-top:auto;
  font-size:var(--fs-xs);color:var(--muted);
}

/* Per-product link overrides inside the product dialog */
.product-links{margin-top:var(--sp-5);border-top:1px solid var(--line);padding-top:var(--sp-5);display:grid;gap:var(--sp-4)}
.product-links-head b{display:block;font-size:var(--fs-sm);font-weight:700}
.product-links-head small{display:block;font-size:var(--fs-xs);color:var(--muted);font-weight:400;margin-top:2px}

/* Orders flagged by a buyer returning from a hosted payment page */
tbody tr.row-flag{background:#fff6e8}
tbody tr.row-flag:hover{background:#ffefd8}
.pill.flagged{border-color:#e0a54a;background:#fff6e8}
.flag-note{display:block;font-size:var(--fs-2xs);color:#8a5a15;font-weight:700;margin-top:4px}

/* --- Customers ------------------------------------------------------------ */
.customer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.customer-card{
  border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:var(--sp-5);
  transition:border-color .15s,box-shadow .15s;
}
.customer-card:hover{border-color:#c7ccc3;box-shadow:var(--shadow-sm)}
.customer-head{display:flex;gap:var(--sp-3);align-items:center}
.customer-avatar{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:#e6ebdf;color:#3c4a42;font:800 var(--fs-sm) "Manrope",sans-serif;
}
.customer-head p{margin:0;min-width:0}
.customer-head b,.customer-head small{display:block}
.customer-head b{font-size:var(--fs-md);font-weight:700}
.customer-head small{
  font-size:var(--fs-xs);color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.customer-contact{
  font-size:var(--fs-xs);color:var(--muted);line-height:1.7;
  padding:var(--sp-4) 0;margin-top:var(--sp-2);border-bottom:1px solid var(--line);
}
.customer-stats{display:flex;justify-content:space-between;gap:var(--sp-2);padding-top:var(--sp-4)}
.customer-stats b,.customer-stats small{display:block}
.customer-stats b{font-size:var(--fs-md);font-weight:700}
.customer-stats small{font-size:var(--fs-2xs);letter-spacing:.06em;color:var(--muted);margin-top:3px}

/* --- Analytics ------------------------------------------------------------ */
.analytics-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
.analytics-wide{grid-column:1/-1;margin-top:0}
.analytics-grid>.panel{margin-top:0}
.bar-chart.large{height:280px}
.status-breakdown,.plan-performance{margin-top:var(--sp-6)}
.breakdown-row{margin:var(--sp-5) 0}
.breakdown-label{display:flex;justify-content:space-between;font-size:var(--fs-sm);margin-bottom:var(--sp-2);text-transform:capitalize}
.breakdown-label b{font-weight:700}
.progress{height:9px;border-radius:99px;background:#e5e7e1;overflow:hidden}
/* Fill width is set from JS via the CSSOM (CSP forbids inline styles). */
.progress i{display:block;height:100%;width:0;background:var(--orange);border-radius:inherit;transition:width .3s}
.progress i.lime{background:#9dcc3f}
.progress i.dark{background:var(--ink)}
.plan-row{
  display:grid;grid-template-columns:1fr auto;gap:var(--sp-3);align-items:center;
  padding:var(--sp-4) 0;border-bottom:1px solid var(--line);
}
.plan-row b{font-size:var(--fs-sm);font-weight:700}
.plan-row span{font:700 var(--fs-lg) "Manrope",sans-serif}
.plan-row small{display:block;font-size:var(--fs-xs);color:var(--muted);margin-top:2px}

/* --- Settings ------------------------------------------------------------- */
.settings-grid{display:grid;grid-template-columns:1.4fr .75fr;gap:var(--sp-5)}
.settings-grid>.panel{margin-top:0}
.settings-grid p{color:var(--muted);font-size:var(--fs-sm)}
.settings-fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin:var(--sp-6) 0}
.settings-grid label,dialog label{display:grid;gap:var(--sp-2);font-size:var(--fs-xs);font-weight:700}
/* Inline hint inside a field label — must not inherit the label's 700 weight, or it
   reads as a second heading rather than as help text. */
.settings-grid label small,dialog label small{
  display:block;font-weight:400;font-size:var(--fs-xs);
  color:var(--muted);margin-top:-4px;
}
.settings-grid input,.settings-grid select,.settings-grid textarea,
dialog input,dialog select,dialog textarea{
  width:100%;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px;background:#fff;outline:none;
  font-family:inherit;font-size:var(--fs-sm);font-weight:400;
  transition:border-color .15s,box-shadow .15s;
}
.settings-grid input:focus,.settings-grid select:focus,.settings-grid textarea:focus,
dialog input:focus,dialog select:focus,dialog textarea:focus{border-color:#708178;box-shadow:var(--ring)}
.settings-grid textarea,dialog textarea{resize:vertical;line-height:1.6}
.full-field{grid-column:1/-1}
.switch-row{
  display:flex!important;justify-content:space-between;align-items:center;gap:var(--sp-4);
  border-top:1px solid var(--line);padding-top:var(--sp-4);
}
.switch-row b,.switch-row small{display:block}
.switch-row b{font-size:var(--fs-sm)}
.switch-row small{font-size:var(--fs-xs);color:var(--muted);font-weight:400;margin-top:2px}
.switch-row input{width:20px!important;height:20px;flex:none;accent-color:var(--ink);cursor:pointer}
.field-hint{
  margin:0;padding:12px 14px;border-radius:var(--r-sm);
  background:#eef0e8;border:1px solid var(--line);
  font-size:var(--fs-xs);color:var(--muted);line-height:1.6;
}
.field-hint b{color:var(--ink)}
.password-form label{margin:var(--sp-5) 0}
.password-form .primary-small{margin-top:var(--sp-2)}

/* --- Dialogs -------------------------------------------------------------- */
dialog{
  border:0;border-radius:var(--r-xl);padding:0;
  width:min(580px,calc(100% - 26px));box-shadow:0 35px 100px #0006;
  background:var(--paper);color:var(--ink);
}
dialog::backdrop{background:#050807c9;backdrop-filter:blur(4px)}
dialog>form,.order-detail{padding:var(--sp-6)}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-4);margin-bottom:var(--sp-6)}
.modal-head small{font-size:var(--fs-2xs);letter-spacing:.14em;color:var(--orange);font-weight:800}
.modal-head h2{font:800 var(--fs-2xl) "Manrope",sans-serif;letter-spacing:-.04em;margin:var(--sp-2) 0 0}
.modal-head>button{
  width:36px;height:36px;flex:none;border:0;background:#e9ebe5;border-radius:50%;
  font-size:var(--fs-xl);line-height:1;cursor:pointer;transition:background .15s;
}
.modal-head>button:hover{background:#d9dcd4}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.check-field{display:flex!important;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm)}
.check-field input{width:auto!important;accent-color:var(--ink);cursor:pointer}
.modal-actions{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);margin-top:var(--sp-6)}
.danger-button{
  border:0;background:var(--danger-bg);color:var(--danger);padding:12px 16px;
  border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:700;cursor:pointer;
  transition:background .15s;
}
.danger-button:hover{background:#ffd2c8}
.formError{color:var(--danger);font-size:var(--fs-xs);margin-top:var(--sp-3);min-height:18px}

.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.detail-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-4)}
.detail-card small,.detail-card b{display:block}
.detail-card small{font-size:var(--fs-2xs);letter-spacing:.08em;color:var(--muted)}
/* No text-transform here: these cards also hold the customer's name and country,
   which must render exactly as the customer entered them. The status values are
   title-cased in admin.js instead. */
.detail-card b{font-size:var(--fs-md);font-weight:700;margin-top:var(--sp-2)}
.detail-card b+small{text-transform:none;letter-spacing:0;font-size:var(--fs-xs);margin-top:3px}
.detail-items{margin-top:var(--sp-5);border-top:1px solid var(--line)}
.detail-item{display:flex;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-4) 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.detail-total{display:flex;justify-content:space-between;font:800 var(--fs-xl) "Manrope",sans-serif;padding-top:var(--sp-5)}
.empty-state{grid-column:1/-1;text-align:center;padding:56px 24px;color:var(--muted);font-size:var(--fs-sm)}

/* --- Responsive ----------------------------------------------------------- */
@media(max-width:1050px){
  .overview-grid{grid-template-columns:1fr}
  .product-list,.customer-grid{grid-template-columns:1fr 1fr}
  .settings-grid{grid-template-columns:1fr}
  .method-list{grid-template-columns:1fr}
}
@media(max-width:780px){
  .mobile-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin:-4px 0 var(--sp-6)}
  .mobile-topbar button{border:0;background:#fff;width:40px;height:40px;border-radius:var(--r-sm);font-size:var(--fs-lg);cursor:pointer;box-shadow:var(--shadow-sm)}
  .mobile-topbar .brand{font-size:18px}
  .mobile-topbar .logo{width:32px;height:32px;font-size:var(--fs-sm)}
  aside{display:flex;position:fixed;left:0;top:0;width:252px;z-index:30;transform:translateX(-100%);transition:transform .25s;box-shadow:0 0 60px #0006}
  aside.open{transform:none}
  header{margin-top:var(--sp-1)}
  .overview-grid,.analytics-grid{grid-template-columns:1fr}
  .analytics-wide{grid-column:auto}
  .product-list,.customer-grid{grid-template-columns:1fr 1fr}
  .settings-fields{grid-template-columns:1fr}
  .full-field{grid-column:auto}
}
@media(max-width:520px){
  .product-list,.customer-grid{grid-template-columns:1fr}
  .detail-grid,.form-grid{grid-template-columns:1fr}
  .full-field{grid-column:auto}
  .bar-chart{gap:4px}
  .customer-stats{flex-wrap:wrap;gap:var(--sp-3)}
  .modal-actions{flex-direction:column-reverse;align-items:stretch}
}