/**
 * Seamx shared theme — copy this file to your client portal project
 * and link it before other stylesheets:
 *   <link rel="stylesheet" href="assets/css/seamx-theme.css">
 */
:root{
  /* Backgrounds — slightly dimmed off-white */
  --bg:#F3F3F3;
  --bg2:#EAEAEA;
  --surface:#FFFFFF;
  --surface2:#F7F7F7;
  --surface3:#E8E8E8;

  /* Borders */
  --border:rgba(0,0,0,0.1);
  --border-light:rgba(0,0,0,0.10);
  --sticky-col-edge:rgba(0,0,0,0.012);
  --border2:rgba(0,0,0,0.18);

  /* Typography */
  --text:#111111;
  --text2:#444444;
  --text3:#5C5C5C;

  /* Accent */
  --accent:#111111;
  --accent2:#000000;
  --accent-soft:rgba(0,0,0,0.05);
  --accent-softer:rgba(0,0,0,0.025);
  --on-accent:#FFFFFF;

  /* Status */
  --green:#16A34A;
  --green-soft:rgba(22,163,74,0.1);
  --red:#DC2626;
  --red-soft:rgba(220,38,38,0.1);
  --orange:#EA580C;
  --orange-soft:rgba(234,88,12,0.1);
  --yellow:#CA8A04;
  --yellow-soft:rgba(202,138,4,0.1);
  --pink:#DB2777;
  --pink-soft:rgba(219,39,119,0.1);
  --blue:#2563EB;
  --blue-soft:rgba(37,99,235,0.1);

  /* Layout */
  --sidebar-w:72px;
  --sidebar-exp:240px;
  --topbar-h:64px;

  /* Radius */
  --radius:12px;
  --radius-sm:8px;
  --radius-xs:5px;

  /* Typography */
  --sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --display:'Helvetica Neue',Helvetica,Arial,sans-serif;

  /* Motion */
  --ease:cubic-bezier(.4,0,.2,1);

  /* Shadows */
  --shadow:0 1px 3px rgba(0,0,0,0.06),0 4px 14px rgba(0,0,0,0.05);
  --shadow-lg:0 10px 28px rgba(0,0,0,0.1);

  color-scheme:light;
}

/* Skeleton shimmer — visible on light backgrounds */
.sk{
  background:linear-gradient(90deg,var(--surface3) 20%,#DCDCDC 50%,var(--surface3) 80%);
  background-size:200% 100%;
  animation:sksh 1.4s infinite;
  border-radius:var(--radius-sm);
}
@keyframes sksh{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* Layout skeletons — shared admin + client portal */
.sk-layout{display:flex;flex-direction:column;gap:16px;max-width:100%}
.sk-layout-portal{gap:14px}
.sk-layout-sec-hd-wrap{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:4px}
.sk-layout-sec-hd{flex:1;min-width:0}
.sk-layout-sec-hd .sk-line-lg{height:22px;width:min(220px,42%);margin-bottom:8px}
.sk-layout-sec-hd .sk-line-sm{height:12px;width:min(320px,58%)}
.sk-layout-sec-btns{display:flex;gap:8px;flex-shrink:0}
.sk-layout-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sk-stat-card{height:96px;border-radius:var(--radius)}
.sk-layout-pills{display:flex;flex-wrap:wrap;gap:8px}
.sk-pill{height:30px;width:72px;border-radius:999px}
.sk-layout-charts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sk-chart-card{border:1px solid var(--border);border-radius:var(--radius);padding:14px;background:var(--surface)}
.sk-chart-card .sk-line-md{height:14px;width:40%;margin-bottom:12px}
.sk-chart-area{height:220px;border-radius:var(--radius-sm)}
.sk-layout-table-wrap{display:flex;flex-direction:column;gap:10px}
.sk-filter{height:36px;width:min(240px,55%);border-radius:var(--radius-sm)}
.sk-layout-table{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.sk-layout-thead,.sk-layout-tr{display:grid;grid-template-columns:repeat(var(--sk-cols,5),minmax(0,1fr));gap:8px;padding:10px 12px;align-items:center}
.sk-layout-thead{background:var(--surface2);border-bottom:1px solid var(--border)}
.sk-layout-tr+.sk-layout-tr{border-top:1px solid var(--border)}
.sk-th,.sk-td{height:12px;border-radius:4px}
.sk-td{height:14px}
.sk-layout-tr .sk-td:first-child{max-width:36px}
.sk-layout-catalog-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sk-catalog-tile{border:1px solid var(--border);border-radius:var(--radius);padding:30px 18px;text-align:center;background:var(--surface)}
.sk-catalog-icon{width:52px;height:52px;border-radius:14px;margin:0 auto 12px}
.sk-layout-empty{text-align:center;padding:36px 20px;border:1px dashed var(--border);border-radius:var(--radius);background:var(--surface)}
.sk-empty-ico{width:52px;height:52px;border-radius:50%;margin:0 auto 14px}
.sk-set-hd-row{display:flex;align-items:flex-start;gap:12px;margin-bottom:4px}
.sk-set-ico{width:40px;height:40px;border-radius:10px;flex-shrink:0}
.sk-set-hd-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.sk-set-fields{display:flex;flex-direction:column;gap:10px}
.sk-field-row{display:flex;flex-direction:column;gap:6px}
.sk-field-input{height:34px;border-radius:var(--radius-sm)}
.sk-layout-settings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.sk-set-card{border:1px solid var(--border);border-radius:var(--radius);padding:16px;background:var(--surface);display:flex;flex-direction:column;gap:10px;overflow:hidden;box-shadow:var(--shadow)}
.sk-set-card--site .sk-site-preview{height:88px;border-radius:var(--radius-sm)}
.sk-set-card--danger{background:var(--red-soft)}
.sk-set-sync-rows,.sk-set-toggle-rows{display:flex;flex-direction:column;gap:10px}
.sk-set-sync-row,.sk-set-toggle-row{display:flex;align-items:center;gap:10px}
.sk-set-sync-copy,.sk-set-toggle-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.sk-sync-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.sk-toggle-pill{width:38px;height:22px;border-radius:999px;flex-shrink:0}
.sk-set-btn-stack{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.sk-line{height:14px;width:72%;border-radius:4px}
.sk-line-md{width:55%}
.sk-line-sm{width:38%;height:11px}
.sk-line-xs{height:9px;width:42%;border-radius:4px}
.sk-line-lg{height:18px}
.sk-btn{height:32px;width:88px;border-radius:var(--radius-sm)}
.sk-btn-sm{height:28px}
.sk-btn-danger{opacity:.85}
.sk-pager{height:34px;width:min(280px,55%);border-radius:var(--radius-sm);margin-top:4px}
.sk-layout-messages{display:flex;flex-direction:column;gap:10px}
.sk-msg-row{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.sk-av{width:40px;height:40px;border-radius:50%;flex-shrink:0}
.sk-msg-body{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.sk-activity-card{height:120px;border-radius:var(--radius)}
.sk-layout-table--media .sk-layout-tr .sk-td:nth-child(2){max-width:44px;height:44px;border-radius:6px}
.sk-layout-table--quotes .sk-layout-tr .sk-td:nth-child(2){width:100%}
.sk-layout-table--portal-quotes .sk-layout-thead,
.sk-layout-table--portal-quotes .sk-layout-tr{grid-template-columns:repeat(8,minmax(0,1fr))}
.sk-layout-table--portal-invoices .sk-layout-thead,
.sk-layout-table--portal-invoices .sk-layout-tr{grid-template-columns:repeat(8,minmax(0,1fr))}

/* Portal quote/invoice — mirrors .table-wrap + mobile cards */
.sk-layout-portal .sk-layout-sec-hd-wrap{margin-bottom:16px}
.sk-layout-portal .sk-layout-sec-hd .sk-line-lg{height:20px;width:min(140px,38%);margin-bottom:6px}
.sk-layout-portal .sk-layout-sec-hd .sk-line-sm{height:11px;width:min(280px,78%)}
.sk-layout-portal .sk-layout-stats{gap:11px;margin-bottom:16px}
.sk-portal-table-wrap{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  min-width:0;
}
.sk-portal-filters{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 13px;
  border-bottom:1px solid var(--border-light);
  background:var(--surface2);
  flex-wrap:wrap;
}
.sk-portal-list-filter{height:32px;width:min(180px,70%);border-radius:var(--radius-sm)}
.sk-portal-cards-wrap{display:none;min-width:0}
.sk-portal-table-wrap > .sk-layout-table-wrap{display:flex;border:none;border-radius:0;padding:0;gap:0}
.sk-portal-table-wrap > .sk-layout-table-wrap .sk-layout-table{border:none;border-radius:0}
.sk-portal-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  padding:10px;
  background:transparent;
  border:none;
  min-width:0;
}
.sk-portal-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  min-width:0;
  box-shadow:none;
}
.sk-portal-card-hd{display:flex;justify-content:flex-end;align-items:flex-start;min-height:0}
.sk-portal-badge{height:18px;width:68px;border-radius:20px}
.sk-portal-card-prod{display:flex;align-items:flex-start;gap:12px;min-width:0}
.sk-portal-thumb{width:40px;height:40px;border-radius:6px;flex-shrink:0;border:1px solid var(--border)}
.sk-portal-card-prod-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.sk-portal-prod-name{height:13px;width:78%;max-width:220px}
.sk-portal-prod-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.sk-portal-tag{height:16px;width:52px;border-radius:20px}
.sk-portal-prod-sub{width:72px;height:11px;margin:0}
.sk-portal-card-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;margin:0}
.sk-portal-card-meta-cell{display:flex;flex-direction:column;gap:3px;min-width:0}
.sk-portal-card-meta-wide{grid-column:1/-1}
.sk-portal-card-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-top:2px;
}
.sk-portal-card-act{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding:8px 12px;
  border:1px solid #111;
  border-radius:6px;
  background:#fff;
  box-sizing:border-box;
  width:100%;
  min-width:0;
}
.sk-portal-act-ico{width:14px;height:14px;border-radius:3px;flex-shrink:0}
.sk-portal-act-lbl{height:11px;width:56%;border-radius:4px;flex:1;max-width:72px}

@media(max-width:1200px){.sk-layout-catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){.sk-layout-stats,.sk-layout-charts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
  .sk-layout-catalog-grid,.sk-layout-settings{grid-template-columns:repeat(2,minmax(0,1fr))}
  .section-loader,.portal-section-loader{padding:14px 12px}
  .sk-layout-portal .sk-layout-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sk-layout-portal .sk-stat-card{height:78px}
  .sk-layout-table--portal-quotes .sk-layout-thead .sk-th:nth-child(4),
  .sk-layout-table--portal-quotes .sk-layout-thead .sk-th:nth-child(6),
  .sk-layout-table--portal-quotes .sk-layout-tr .sk-td:nth-child(4),
  .sk-layout-table--portal-quotes .sk-layout-tr .sk-td:nth-child(6){display:none}
  .sk-layout-table--portal-quotes .sk-layout-thead,
  .sk-layout-table--portal-quotes .sk-layout-tr{grid-template-columns:repeat(6,minmax(0,1fr))}
  .sk-layout-table--portal-invoices .sk-layout-thead .sk-th:nth-child(5),
  .sk-layout-table--portal-invoices .sk-layout-thead .sk-th:nth-child(6),
  .sk-layout-table--portal-invoices .sk-layout-tr .sk-td:nth-child(5),
  .sk-layout-table--portal-invoices .sk-layout-tr .sk-td:nth-child(6){display:none}
  .sk-layout-table--portal-invoices .sk-layout-thead,
  .sk-layout-table--portal-invoices .sk-layout-tr{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sk-layout-table--portal-quotes .sk-layout-tr .sk-td:last-child,
  .sk-layout-table--portal-invoices .sk-layout-tr .sk-td:last-child{max-width:28px}
}
/* Match real portal cards breakpoint (≤768) */
@media(max-width:768px){
  .sk-portal-table-wrap > .sk-layout-table-wrap{display:none!important}
  .sk-portal-cards-wrap{display:block}
  .sk-portal-filters{padding:8px 10px}
  .sk-portal-list-filter{width:100%;max-width:100%;height:34px}
  .sk-portal-card-actions{grid-template-columns:1fr 1fr}
  .sk-portal-card-act{min-height:36px}
  .sk-layout-portal .sk-stat-card{height:72px}
}
@media(max-width:700px){.sk-layout-stats,.sk-layout-charts{grid-template-columns:1fr}}
@media(max-width:640px){
  .sk-layout-settings{grid-template-columns:1fr}
  .sk-layout-portal .sk-layout-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
}

/* Actions column — header + buttons align start (client portal + admin) */
.data-table:not(.xs-quotes-table) th.col-actions,
.data-table:not(.xs-quotes-table) td.col-actions {
  width: 1%;
  white-space: nowrap;
  text-align: left;
  vertical-align: middle;
}

.data-table:not(.xs-quotes-table) td.col-actions .file-actions,
.data-table:not(.xs-quotes-table) td.col-actions .table-act-group {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 0;
  margin: 0;
  vertical-align: middle;
  width: auto;
  max-width: none;
}