/* Square-like dark UI layer for SBCR3 */

/*
  Theme-sync notes:
  - When the Shear Horizon theme is active, we inherit its CSS variables.
  - When it isn't, we fall back to sane defaults so the portal still looks good.
*/

:root{
  --sbcr3-font: var(--font, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial);
  --sbcr3-text: var(--text, rgba(248,250,252,.94));
  --sbcr3-muted: var(--muted, rgba(248,250,252,.72));
  --sbcr3-border: var(--border, rgba(248,250,252,.14));
  --sbcr3-card: var(--card, rgba(2,6,23,.42));
  --sbcr3-card2: var(--card2, rgba(2,6,23,.36));

  --sbcr3-radius-shell: var(--radius-shell, 18px);
  --sbcr3-radius-card: var(--radius-card, 14px);
  --sbcr3-radius-inner: var(--radius-inner, 12px);
  --sbcr3-radius-btn: var(--radius-btn, 12px);

  /* Accent: match theme “primary” pill (green). */
  --sbcr3-accent: rgba(25,195,125,.95);
  --sbcr3-accent-border: rgba(25,195,125,.55);
  --sbcr3-accent-soft: rgba(25,195,125,.14);
}

.sbcr3-wrap{max-width:1180px;margin:28px auto;padding:0 18px;font-family:var(--sbcr3-font);color:var(--sbcr3-text)}

.sbcr3-title{font-weight:800;letter-spacing:-.02em;margin:0 0 8px;font-size:44px;line-height:1.06}
.sbcr3-sub{margin:0 0 18px;color:var(--sbcr3-muted)}

.sbcr3-panel{background:var(--sbcr3-card);border:1px solid var(--sbcr3-border);border-radius:var(--sbcr3-radius-shell);padding:20px;box-shadow:0 18px 50px rgba(0,0,0,.35);backdrop-filter:blur(10px)}

.sbcr3-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.sbcr3-greet{font-size:16px;color:var(--sbcr3-muted);font-weight:600}

.sbcr3-btn,.sbcr3-wrap button,.sbcr3-wrap input[type=submit]{
  appearance:none;border:1px solid var(--sbcr3-border);background:rgba(248,250,252,.06);color:var(--sbcr3-text);
  padding:10px 14px;border-radius:var(--sbcr3-radius-btn);font-weight:800;cursor:pointer;transition:transform .08s ease, background .12s ease, border-color .12s ease;
}
.sbcr3-btn:hover,.sbcr3-wrap button:hover,.sbcr3-wrap input[type=submit]:hover{background:rgba(248,250,252,.10);border-color:rgba(248,250,252,.22)}
.sbcr3-btn:active,.sbcr3-wrap button:active,.sbcr3-wrap input[type=submit]:active{transform:translateY(1px)}

.sbcr3-btn-primary{background:linear-gradient(135deg, var(--sbcr3-accent), rgba(25,195,125,.62));border-color:var(--sbcr3-accent-border);color:#04120c}
.sbcr3-btn-primary:hover{background:linear-gradient(135deg, rgba(25,195,125,.98), rgba(25,195,125,.70));border-color:rgba(25,195,125,.65)}

.sbcr3-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;align-items:stretch}
.sbcr3-span-12{grid-column:span 12}
.sbcr3-span-8{grid-column:span 8}
.sbcr3-span-4{grid-column:span 4}

@media (max-width: 980px){
  .sbcr3-title{font-size:36px}
  .sbcr3-span-8,.sbcr3-span-4{grid-column:span 12}
}

.sbcr3-card{background:var(--sbcr3-card2);border:1px solid rgba(248,250,252,.12);border-radius:var(--sbcr3-radius-card);padding:16px;min-height:unset;backdrop-filter:blur(14px)}
.sbcr3-cardhead{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.sbcr3-ic{width:28px;height:28px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.sbcr3-svg{width:18px !important;height:18px !important;display:block}
.sbcr3-card h3{margin:0;font-size:15px;font-weight:800}
.sbcr3-card p{margin:3px 0 0;color:var(--sbcr3-muted);font-size:13px;line-height:1.35}

.sbcr3-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.sbcr3-actions .sbcr3-btn{flex:1 1 auto;min-width:140px}

/* inputs */
.sbcr3-wrap input[type=text],.sbcr3-wrap input[type=date]{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;
  padding:9px 10px;border-radius:12px;outline:none
}
.sbcr3-wrap input[type=text]:focus,.sbcr3-wrap input[type=date]:focus{border-color:rgba(54,194,214,.6)}

/* recent activity list */
.sbcr3-list{margin-top:10px}
.sbcr3-item{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid rgba(255,255,255,.08)}
.sbcr3-item:first-child{border-top:0}
.sbcr3-item strong{display:block;font-weight:900;font-size:13px}
.sbcr3-item .sbcr3-meta{color:rgba(255,255,255,.60);font-size:12px;margin-top:2px}
.sbcr3-item .sbcr3-right{text-align:right}
.sbcr3-item .sbcr3-right .sbcr3-amt{font-weight:900}
.sbcr3-item .sbcr3-receipt a{color:rgba(54,194,214,.95);text-decoration:none;font-weight:800}
.sbcr3-item .sbcr3-receipt a:hover{text-decoration:underline}
.sbcr3-tag{display:inline-block;font-size:11px;font-weight:900;padding:3px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:rgba(255,255,255,.85)}
.sbcr3-tag.PENDING{border-color:rgba(244,201,78,.45);background:rgba(244,201,78,.12)}
.sbcr3-tag.REJECTED{border-color:rgba(255,100,100,.45);background:rgba(255,100,100,.12)}
.sbcr3-tag.COMPLETED{border-color:rgba(37,197,138,.45);background:rgba(37,197,138,.12)}
.sbcr3-activity-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid rgba(255,255,255,.08)}
.sbcr3-activity-row:first-child{border-top:0}
.sbcr3-activity-main{display:flex;flex-direction:column;gap:2px}
.sbcr3-activity-main .sbcr3-what{font-weight:800;font-size:13px}
.sbcr3-activity-main .sbcr3-when{color:rgba(255,255,255,.60);font-size:12px}
.sbcr3-activity-meta{text-align:right}
.sbcr3-activity-meta .sbcr3-amt{font-weight:900}
.sbcr3-pill{display:inline-block;font-size:11px;font-weight:900;padding:3px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:rgba(255,255,255,.85)}
.sbcr3-pill.pending{border-color:rgba(244,201,78,.45);background:rgba(244,201,78,.12)}
.sbcr3-pill.rejected{border-color:rgba(255,100,100,.45);background:rgba(255,100,100,.12)}
.sbcr3-pill.completed{border-color:rgba(37,197,138,.45);background:rgba(37,197,138,.12)}

/* pending slider */
.sbcr3-pending-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sbcr3-pending-slider{display:flex;gap:10px;overflow:auto;padding-bottom:4px;scroll-snap-type:x mandatory}
.sbcr3-pending-item{min-width:240px;scroll-snap-align:start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:12px}
.sbcr3-pending-item .sbcr3-pending-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.sbcr3-pending-item .sbcr3-pending-type{font-weight:900;font-size:13px}
.sbcr3-pending-item .sbcr3-pending-sub{color:rgba(255,255,255,.65);font-size:12px}

/* tighten nested headings */
.sbcr3-wrap h2,.sbcr3-wrap h4{margin:0}



.sbcr3-summary-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:8px 0 16px;}
@media (max-width: 900px){.sbcr3-summary-cards{grid-template-columns:1fr;}}
.sbcr3-scard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:12px 14px;}
.sbcr3-slabel{opacity:.8;font-size:12px;font-weight:700;letter-spacing:.2px;}
.sbcr3-svalue{font-size:20px;font-weight:900;margin-top:6px;}


/* --- Layout fixes: keep cards aligned inside container --- */
.sbcr3-grid.sbcr3-grid-2x2{grid-template-columns:repeat(2,minmax(260px,1fr));}
.sbcr3-span-all{grid-column:1/-1;}
@media (max-width: 820px){
  .sbcr3-grid.sbcr3-grid-2x2{grid-template-columns:1fr;}
  .sbcr3-span-all{grid-column:auto;}
}


/* === Flat dashboard surface (global): remove stacked panels, keep inner cards === */
:root{ --sbcr3-flat-gap: 14px; }

.sbcr3-shell{ background: transparent !important; }

/* Outer portal container card (login + main router wrapper) */
.sbcr3-shell > .sbcr3-card.sbcr3-center{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}

/* Per-tab wrapper card (the one that created the “panel-in-panel” look) */
.sbcr3-wrap > .sbcr3-card.sbcr3-soft{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}

/* Keep spacing consistent now that wrappers are flat */
.sbcr3-wrap{ padding-top: 6px; }


/* --------------------------------
   Renter dashboard: clean + mobile
---------------------------------- */

.sbcr3-apphead{margin:0 0 14px;}
.sbcr3-apptitle{font-size:16px;font-weight:800;color:var(--sbcr3-text);}

.sbcr3-cardhead-split{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;}

.sbcr3-upcoming{margin-top:14px;}
.sbcr3-upcoming-pad{padding:0 16px 16px;}
.sbcr3-upcoming-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.sbcr3-upcoming-item{min-width:0;}
.sbcr3-k-sub{opacity:.75;font-weight:700;font-size:12px;}
.sbcr3-payrow{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.sbcr3-paybig{margin-top:6px;font-size:20px;font-weight:950;letter-spacing:-.01em;}
.sbcr3-mt{margin-top:6px;}
.sbcr3-mt-lg{margin-top:10px;}

/* Inputs (filters/search/selects) */
.sbcr3-input,
.sbcr3-wrap input[type=text],
.sbcr3-wrap input[type=date],
.sbcr3-wrap input[type=password],
.sbcr3-wrap select{
  width:100%;
  height:46px;
  padding:0 14px;
  border-radius:var(--sbcr3-radius-btn);
  border:1px solid rgba(248,250,252,.18);
  background:rgba(248,250,252,.08);
  color:var(--sbcr3-text);
  outline:none;
}
.sbcr3-input:focus,
.sbcr3-wrap input[type=text]:focus,
.sbcr3-wrap input[type=date]:focus,
.sbcr3-wrap input[type=password]:focus,
.sbcr3-wrap select:focus{border-color:var(--sbcr3-accent-border);box-shadow:0 0 0 4px var(--sbcr3-accent-soft);}

/* Tables (Ledger) */
.sbcr3-table{width:100%;border-collapse:separate;border-spacing:0;}
.sbcr3-table th,
.sbcr3-table td{padding:12px 10px;border-bottom:1px solid rgba(248,250,252,.10);font-size:13px;vertical-align:top;}
.sbcr3-table th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--sbcr3-muted);font-weight:900;}
.sbcr3-table tr:hover td{background:rgba(248,250,252,.04);}

/* Make long tables usable on phones */
@media (max-width: 900px){
  .sbcr3-upcoming-grid{grid-template-columns:1fr;}
}

@media (max-width: 560px){
  .sbcr3-wrap{margin:18px auto;padding:0 12px;}
  .sbcr3-title{font-size:32px;}
  .sbcr3-topbar{flex-direction:column;align-items:flex-start;}
  .portal-actions{grid-template-columns:1fr !important;}
  .sbcr3-actions .sbcr3-btn{width:100%;min-width:0;}
  .sbcr3-upcoming-pad{padding:0 12px 12px;}
  .sbcr3-paybig{font-size:18px;}
}