/* GraceRace customer workspace v24 — approved web/mobile customer experience */
:root{
  --grc-green:#007a43;
  --grc-green-strong:#006238;
  --grc-green-soft:#eaf7f0;
  --grc-green-pale:#f1fbf5;
  --grc-blue:#1683e8;
  --grc-blue-soft:#edf6ff;
  --grc-orange:#ef650a;
  --grc-orange-soft:#fff3e9;
  --grc-red:#e51414;
  --grc-red-soft:#fff0f0;
  --grc-ink:#12233d;
  --grc-muted:#68768a;
  --grc-line:#e4eaf0;
  --grc-bg:#f5f8fa;
  --grc-shadow:0 6px 20px rgba(21,42,73,.055);
}

.grc-customer-shell{min-height:100vh;background:var(--grc-bg);color:var(--grc-ink);font-family:Inter,system-ui,sans-serif}
.grc-customer-shell button{font-family:inherit}
.grc-customer-sidebar{position:fixed;inset:0 auto 0 0;z-index:60;width:248px;display:flex;flex-direction:column;background:#fff;border-right:1px solid var(--grc-line);box-shadow:3px 0 16px rgba(27,45,75,.035)}
.grc-sidebar-brand{height:72px;display:flex;align-items:center;justify-content:space-between;padding:9px 16px 8px;border-bottom:1px solid #edf1f4}
.grc-brand-lockup,.grc-mobile-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--grc-green-strong);min-width:0}
.grc-brand-lockup img,.grc-mobile-brand img{width:43px;height:43px;object-fit:contain;flex:0 0 auto}
.grc-brand-lockup span,.grc-mobile-brand span{display:flex;flex-direction:column;line-height:1.02;min-width:0}
.grc-brand-lockup b,.grc-mobile-brand b{font-family:Inter,system-ui,sans-serif;font-size:15px;line-height:1.05;letter-spacing:-.02em}
.grc-brand-lockup small,.grc-mobile-brand small{font-size:8.5px;margin-top:4px;color:#2c6d52;white-space:nowrap}
.grc-sidebar-close{display:none;border:0;background:transparent;color:#536174;width:36px;height:36px;align-items:center;justify-content:center;border-radius:9px}
.grc-sidebar-close svg{width:20px;height:20px}
.grc-sidebar-nav{flex:1;overflow:auto;padding:14px 12px 10px}
.grc-sidebar-nav button{width:100%;min-height:43px;border:0;background:transparent;border-radius:8px;padding:0 11px;display:flex;align-items:center;gap:12px;color:#24364f;font-size:13.5px;font-weight:500;text-align:left;transition:.18s ease}
.grc-sidebar-nav button+button{margin-top:2px}
.grc-sidebar-nav button:hover{background:#f4f7f8;color:var(--grc-green)}
.grc-sidebar-nav button.is-active{background:#e5f5ed;color:var(--grc-green);font-weight:650}
.grc-sidebar-nav svg{width:18px;height:18px;stroke-width:1.9;flex:0 0 auto}
.grc-nav-badge{margin-left:auto;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--grc-red);color:#fff;font-size:10px;line-height:19px;text-align:center;font-weight:800}
.grc-sidebar-account{display:flex;align-items:center;gap:10px;margin:0 14px;padding:14px 4px;border-top:1px solid #edf1f4}
.grc-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#dceee5;color:var(--grc-green-strong);font-weight:800;font-size:13px;flex:0 0 auto}
.grc-sidebar-account-copy{display:flex;flex-direction:column;min-width:0}
.grc-sidebar-account-copy b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grc-sidebar-account-copy span{font-size:10.5px;color:var(--grc-muted);margin-top:2px}
.grc-signout{margin:0 12px 14px;padding:10px 11px;border:0;background:transparent;border-radius:8px;display:flex;align-items:center;gap:10px;color:#24364f;font-size:13px;text-align:left}
.grc-signout:hover{background:#fff2f2;color:#b91c1c}
.grc-signout svg{width:17px;height:17px}

.grc-customer-main{min-height:100vh;margin-left:248px;padding-bottom:26px}
.grc-customer-topbar{height:72px;position:sticky;top:0;z-index:45;display:flex;align-items:center;justify-content:flex-end;padding:0 22px;background:rgba(255,255,255,.96);border-bottom:1px solid #edf1f4;backdrop-filter:blur(12px)}
.grc-topbar-actions{display:flex;align-items:center;gap:10px}
.grc-notification-button,.grc-mobile-menu{position:relative;width:38px;height:38px;border:0;background:transparent;border-radius:9px;display:grid;place-items:center;color:#132640}
.grc-notification-button:hover,.grc-mobile-menu:hover,.grc-notification-button.is-active{background:#edf7f1;color:var(--grc-green)}
.grc-notification-button svg,.grc-mobile-menu svg{width:21px;height:21px;stroke-width:2}
.grc-notification-button>span{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;border-radius:999px;background:#e11d1d;color:#fff;border:2px solid #fff;font-size:9px;font-weight:800;line-height:14px;text-align:center;padding:0 3px}
.grc-mobile-menu,.grc-mobile-brand{display:none}
/* Desktop customer navigation is sidebar-only. */
.grc-desktop-menu,.grc-bottom-nav-desktop{display:none!important}

.grc-customer-content{width:min(100%,1120px);margin:0 auto;padding:0 16px 26px}
.grc-customer-content>[data-slot="card"],.grc-customer-content .grid>[data-slot="card"]{border-color:var(--grc-line);box-shadow:var(--grc-shadow);border-radius:13px}
.grc-customer-content [data-slot="card-title"]{font-family:Inter,system-ui,sans-serif;color:var(--grc-ink)}

.grc-dashboard{display:grid;gap:10px;padding-top:0}
.grc-dashboard-hero{height:145px;border-radius:0 0 12px 12px;background-size:cover;background-position:center 55%;display:flex;align-items:center;padding:18px 22px;color:#fff;box-shadow:var(--grc-shadow);overflow:hidden}
.grc-dashboard-hero>div{max-width:430px}
.grc-dashboard-hero span{display:block;font-size:18px;font-weight:600;line-height:1.1}
.grc-dashboard-hero h1{font-family:Inter,system-ui,sans-serif;margin:2px 0 4px;font-size:31px;line-height:1.02;font-weight:800;letter-spacing:-.035em;color:#fff}
.grc-dashboard-hero p{font-size:13px;line-height:1.35;margin:0;color:rgba(255,255,255,.94);max-width:310px}

.grc-account-status{min-height:88px;border:1px solid var(--grc-line);background:#fff;border-radius:11px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:13px 16px;box-shadow:var(--grc-shadow)}
.grc-account-status.is-new{background:#eef7ff;border-color:#dcecf8}
.grc-account-status.is-due,.grc-account-status.is-overdue{background:var(--grc-red-soft);border-color:#ffd9d9}
.grc-account-status.is-paid{background:var(--grc-green-pale);border-color:#d3efdf}
.grc-status-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#dcecff;color:#186fbd;flex:0 0 auto}
.grc-account-status.is-due .grc-status-icon,.grc-account-status.is-overdue .grc-status-icon{background:#f01818;color:#fff}
.grc-account-status.is-paid .grc-status-icon{background:#17ae65;color:#fff}
.grc-status-icon svg{width:23px;height:23px;stroke-width:2.4}
.grc-status-copy{display:flex;flex-direction:column;min-width:0}
.grc-status-copy strong{font-size:16px;color:var(--grc-green);line-height:1.15}
.grc-account-status.is-due .grc-status-copy strong,.grc-account-status.is-overdue .grc-status-copy strong{color:var(--grc-red)}
.grc-account-status.is-new .grc-status-copy strong{color:#1c68a8}
.grc-status-copy small{font-size:11.5px;line-height:1.38;color:#5c6b7c;margin-top:4px}
.grc-status-side{min-width:150px;padding-left:18px;border-left:1px solid rgba(104,118,138,.16);display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.grc-status-side>span{font-size:10px;color:#5f6c7e}
.grc-status-side>b{font-size:20px;line-height:1.05;color:var(--grc-green);white-space:nowrap}
.grc-account-status.is-due .grc-status-side>b,.grc-account-status.is-overdue .grc-status-side>b{color:var(--grc-red)}
.grc-pay-button{border:0;border-radius:7px;background:var(--grc-green);color:#fff;min-height:36px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:12px;font-weight:700;box-shadow:none;white-space:nowrap}
.grc-pay-button:hover{background:var(--grc-green-strong)}
.grc-account-status.is-due .grc-pay-button,.grc-account-status.is-overdue .grc-pay-button{background:var(--grc-red)}
.grc-pay-button svg{width:15px;height:15px}
.grc-mobile-balance{display:none}

.grc-schedule-card{position:relative;width:100%;min-height:101px;border:1px solid var(--grc-line);background:#fff;border-radius:11px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;padding:12px 15px 29px;text-align:left;box-shadow:var(--grc-shadow);color:var(--grc-ink)}
.grc-schedule-card:hover{border-color:#c6dce8;background:#fefefe}
.grc-schedule-icon{width:44px;height:44px;border-radius:9px;display:grid;place-items:center;background:#e6f3ff;color:#087bef;align-self:start;margin-top:3px}
.grc-schedule-icon svg{width:25px;height:25px}
.grc-schedule-copy{display:flex;flex-direction:column;min-width:0;align-self:start;padding-top:2px}
.grc-schedule-copy>span{font-size:11px;font-weight:700;color:#24364f}
.grc-schedule-copy>strong{font-size:17px;line-height:1.15;margin-top:3px;color:#17283f}
.grc-schedule-copy>small{display:flex;align-items:center;gap:4px;font-size:11px;color:#56677d;margin-top:4px}
.grc-schedule-copy>small svg{width:13px;height:13px;color:#0d75dd;fill:#0d75dd}
.grc-schedule-arrow{width:18px;height:18px;color:#30435b}
.grc-next-collection{position:absolute;left:0;right:0;bottom:0;height:26px;border-radius:0 0 10px 10px;background:#eef7ff;display:flex;align-items:center;padding-left:80px;font-size:10px;color:#65758a}

.grc-dashboard-section{background:#fff;border:1px solid var(--grc-line);border-radius:11px;box-shadow:var(--grc-shadow);padding:11px 12px}
.grc-section-heading{height:26px;display:flex;align-items:center;justify-content:space-between;padding:0 2px 7px}
.grc-section-heading h2{font-family:Inter,system-ui,sans-serif;margin:0;font-size:13px;font-weight:800;letter-spacing:-.01em;color:#1b293d}
.grc-section-heading button{border:0;background:transparent;padding:2px 0;color:var(--grc-green);font-size:10.5px;font-weight:650}
.grc-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.grc-quick-grid>[data-slot="dialog-trigger"]{display:contents}
.grc-action-card{min-height:68px;border:0;border-radius:9px;display:flex;align-items:center;gap:11px;padding:10px 12px;text-align:left;color:#1d2b40;background:#f3f7fa;transition:transform .15s ease,filter .15s ease}
.grc-action-card:hover{transform:translateY(-1px);filter:brightness(.985)}
.grc-action-card.is-pay{background:linear-gradient(135deg,#08a960,#008d4d);color:#fff}
.grc-action-card.is-invoice{background:#edf6ff}
.grc-action-card.is-receipt{background:var(--grc-orange-soft)}
.grc-action-card.is-service{background:#ecfaf2}
.grc-action-icon{width:34px;height:34px;border-radius:6px;background:rgba(255,255,255,.65);display:grid;place-items:center;color:var(--grc-green)}
.grc-action-card.is-pay .grc-action-icon{background:rgba(255,255,255,.14);color:#fff}
.grc-action-card.is-invoice .grc-action-icon{color:var(--grc-blue)}
.grc-action-card.is-receipt .grc-action-icon{color:var(--grc-orange)}
.grc-action-card.is-service .grc-action-icon{color:#09a158}
.grc-action-icon svg{width:20px;height:20px}
.grc-action-card>span:last-child{display:flex;flex-direction:column;min-width:0}
.grc-action-card b{font-size:12.5px;line-height:1.15;font-weight:750}
.grc-action-card small{font-size:10px;line-height:1.2;margin-top:3px;color:#617086}
.grc-action-card.is-pay small{color:rgba(255,255,255,.88)}

.grc-activity-list{display:grid}
.grc-activity-row{min-height:50px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;border-top:1px solid #edf1f4;padding:7px 4px}
.grc-activity-row:first-child{border-top:0}
.grc-activity-icon{width:28px;height:28px;border-radius:5px;display:grid;place-items:center;background:#edf8f1;color:#0ca257}
.grc-activity-row.is-invoice .grc-activity-icon{background:#eaf4ff;color:#0e7cdf}
.grc-activity-row.is-collection .grc-activity-icon{background:#fff2e8;color:#e65f08}
.grc-activity-icon svg{width:16px;height:16px}
.grc-activity-copy{display:flex;flex-direction:column;min-width:0}
.grc-activity-copy b{font-size:11.5px;line-height:1.15}
.grc-activity-copy small{font-size:10px;color:#65758a;margin-top:2px}
.grc-activity-row time{font-size:9.5px;color:#728095;white-space:nowrap}
.grc-activity-empty{padding:20px 6px 14px;text-align:center;font-size:11px;color:#758399}
.grc-community-card{min-height:62px;border-radius:10px;background:#e9f8f0;display:flex;align-items:center;gap:12px;padding:9px 16px;color:#12643f}
.grc-community-card img{width:43px;height:43px;object-fit:contain}
.grc-community-card strong{font-size:12px;line-height:1.22}
.grc-dashboard-loading{display:grid;gap:10px;padding-top:0}
.grc-dashboard-loading div{height:92px;border-radius:11px;background:linear-gradient(90deg,#eef2f4,#f8fafb,#eef2f4);background-size:200% 100%;animation:grc-shimmer 1.3s linear infinite}
.grc-dashboard-loading div:first-child{height:145px}
@keyframes grc-shimmer{to{background-position:-200% 0}}

.grc-bottom-nav{position:fixed;z-index:50;bottom:0;right:0;left:248px;height:64px;background:rgba(255,255,255,.98);border-top:1px solid var(--grc-line);display:flex;align-items:stretch;justify-content:center;backdrop-filter:blur(10px)}
.grc-bottom-nav button{min-width:86px;border:0;background:transparent;padding:7px 15px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#263950;font-size:9.5px;font-weight:550}
.grc-bottom-nav button svg{width:20px;height:20px;stroke-width:1.9}
.grc-bottom-nav button.is-active{color:var(--grc-green);font-weight:750}
.grc-bottom-nav-mobile{display:none}
.grc-drawer-backdrop{display:none}

/* Bring all secondary customer pages into the same visual system. */
.grc-customer-content>.grid,.grc-customer-content>[data-slot="card"]{margin-top:16px}
.grc-customer-content table{background:#fff}
.grc-customer-content table thead{background:#f7fafb}
.grc-customer-content table th{color:#65758a!important;font-size:11px!important;font-weight:700!important}
.grc-customer-content table td{font-size:12px!important;color:#24364f}
.grc-customer-content [data-slot="card-header"]{border-bottom:1px solid #edf1f4}
.grc-customer-content [data-slot="card-content"]{padding-top:1rem}
.grc-customer-content [data-slot="card"] button:not(.grc-action-card):not(.grc-pay-button){border-radius:8px}

@media(max-width:900px){
  .grc-customer-sidebar{transform:translateX(-105%);width:min(280px,86vw);box-shadow:12px 0 40px rgba(10,35,55,.18);transition:transform .22s ease}
  .grc-customer-sidebar.is-open{transform:translateX(0)}
  .grc-sidebar-close{display:inline-flex}
  .grc-drawer-backdrop{display:block;position:fixed;inset:0;z-index:55;border:0;background:rgba(5,23,36,.42)}
  .grc-customer-main{margin-left:0;padding-bottom:73px}
  .grc-customer-topbar{height:66px;padding:0 10px 0 9px;justify-content:space-between}
  .grc-mobile-menu{display:grid;order:3}
  .grc-desktop-menu{display:none}
  .grc-mobile-brand{display:flex;order:1;margin-right:auto}
  .grc-topbar-actions{order:2;margin-right:2px}
  .grc-customer-content{padding:0 10px 18px}
  .grc-bottom-nav-desktop{display:none}
  .grc-bottom-nav-mobile{display:flex;left:0;height:66px}
  .grc-bottom-nav-mobile button{min-width:0;flex:1;padding:7px 3px 5px;font-size:9px}
  .grc-bottom-nav-mobile button svg{width:20px;height:20px}
}

@media(max-width:700px){
  .grc-dashboard{gap:8px}
  .grc-dashboard-hero{height:119px;border-radius:0 0 10px 10px;padding:14px 16px;background-position:center 52%!important}
  .grc-dashboard-hero>div{max-width:58%}
  .grc-dashboard-hero span{font-size:15px}
  .grc-dashboard-hero h1{font-size:26px;margin:1px 0 3px}
  .grc-dashboard-hero p{font-size:10.5px;line-height:1.25}
  .grc-account-status{min-height:57px;grid-template-columns:auto minmax(0,1fr) auto;padding:8px 10px;gap:9px;border-radius:9px}
  .grc-status-icon{width:29px;height:29px}
  .grc-status-icon svg{width:18px;height:18px}
  .grc-status-copy strong{font-size:12.5px}
  .grc-status-copy small{font-size:9.5px;line-height:1.25;margin-top:2px}
  .grc-status-side{min-width:auto;padding-left:10px}
  .grc-status-side>span{font-size:8.5px}
  .grc-status-side>b{font-size:13px}
  .grc-status-side .grc-pay-button{min-height:30px;padding:0 10px;font-size:10px}
  .grc-account-status.is-new .grc-status-side{display:none}
  .grc-mobile-balance{min-height:67px;background:#fff;border:1px solid var(--grc-line);border-radius:9px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;box-shadow:var(--grc-shadow)}
  .grc-mobile-balance>div:first-child{display:flex;flex-direction:column}
  .grc-mobile-balance span{font-size:9.5px;color:#26384f}
  .grc-mobile-balance strong{font-size:20px;line-height:1.1;color:var(--grc-green);margin-top:1px}
  .grc-mobile-balance strong.is-due{color:var(--grc-red)}
  .grc-mobile-balance small{font-size:8.5px;color:#718097;margin-top:2px}
  .grc-mobile-balance>button{border:0;background:#edf8f2;color:#164d36;border-radius:7px;min-height:33px;padding:0 10px;font-size:9.5px;font-weight:700;display:flex;gap:4px;align-items:center}
  .grc-mobile-balance>button svg{width:13px;height:13px}
  .grc-mobile-balance .grc-pay-button{min-height:34px;padding:0 12px;font-size:10.5px}
  .grc-schedule-card{min-height:84px;padding:9px 10px 24px;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;border-radius:9px}
  .grc-schedule-icon{width:37px;height:37px;border-radius:7px;margin-top:1px}
  .grc-schedule-icon svg{width:21px;height:21px}
  .grc-schedule-copy{padding-top:0}
  .grc-schedule-copy>span{font-size:9.5px}
  .grc-schedule-copy>strong{font-size:14px;margin-top:1px}
  .grc-schedule-copy>small{font-size:9px;margin-top:2px}
  .grc-next-collection{height:22px;padding-left:56px;font-size:8.5px;border-radius:0 0 8px 8px}
  .grc-dashboard-section{border-radius:9px;padding:8px}
  .grc-section-heading{height:24px;padding:0 1px 5px}
  .grc-section-heading h2{font-size:11.5px}
  .grc-section-heading button{font-size:9px}
  .grc-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .grc-action-card{min-height:56px;padding:8px 9px;gap:9px;border-radius:8px}
  .grc-action-icon{width:29px;height:29px}
  .grc-action-icon svg{width:17px;height:17px}
  .grc-action-card b{font-size:10.5px}
  .grc-action-card small{font-size:8.5px;margin-top:2px}
  .grc-activity-row{min-height:42px;padding:5px 2px;gap:8px}
  .grc-activity-icon{width:25px;height:25px}
  .grc-activity-icon svg{width:14px;height:14px}
  .grc-activity-copy b{font-size:10px}
  .grc-activity-copy small,.grc-activity-row time{font-size:8.5px}
  .grc-community-card{min-height:52px;padding:7px 10px}
  .grc-community-card img{width:36px;height:36px}
  .grc-community-card strong{font-size:10.5px}
  .grc-customer-content>.grid,.grc-customer-content>[data-slot="card"]{margin-top:10px}
}

@media(max-width:420px){
  .grc-mobile-brand img{width:38px;height:38px}
  .grc-mobile-brand b{font-size:13px}
  .grc-mobile-brand small{font-size:7px}
  .grc-customer-topbar{height:62px}
  .grc-dashboard-hero>div{max-width:62%}
  .grc-dashboard-hero h1{font-size:23px}
  .grc-status-side>span{display:none}
  .grc-status-side>b{font-size:11px}
  .grc-account-status.is-paid .grc-status-side{padding-left:8px}
  .grc-bottom-nav-mobile{height:64px}
}

/* GraceRace billing/payment methods */
.grc-payment-methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.grc-payment-method{appearance:none;border:1px solid #dce7e2;background:#fff;border-radius:12px;min-height:72px;padding:12px 14px;display:flex;align-items:center;gap:11px;text-align:left;color:#16273b;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.grc-payment-method>svg{width:23px;height:23px;color:#008b52;flex:0 0 auto}
.grc-payment-method>span{display:flex;min-width:0;flex-direction:column}
.grc-payment-method b{font-size:13px;line-height:1.2}
.grc-payment-method small{margin-top:3px;font-size:10px;line-height:1.25;color:#6d7b8d}
.grc-payment-method:hover:not(:disabled){border-color:#7dcaaa;box-shadow:0 5px 16px rgba(7,86,54,.08)}
.grc-payment-method.is-selected{border-color:#00a662;background:#eefaf4;box-shadow:0 0 0 2px rgba(0,166,98,.09)}
.grc-payment-method:disabled{cursor:not-allowed;opacity:.5;background:#f7f8f8}
@media(max-width:520px){.grc-payment-methods{grid-template-columns:1fr}.grc-payment-method{min-height:62px;padding:10px 12px}}

/* v32.5: desktop uses the sidebar Notifications entry as the single customer bell. */

/* v32.7 customer dashboard billing-cycle section */
.grc-billing-cycle-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.grc-billing-cycle-item{min-width:0;border:1px solid #e2ebe7;background:#fff;border-radius:13px;padding:15px 16px;box-shadow:0 3px 12px rgba(24,55,42,.035)}
.grc-billing-cycle-item>span{display:block;font-size:10px;font-weight:800;letter-spacing:.045em;text-transform:uppercase;color:#738196}
.grc-billing-cycle-item>strong{display:block;margin-top:6px;color:#16273b;font-size:13px;line-height:1.35;word-break:break-word}
.grc-billing-cycle-item>small{display:block;margin-top:5px;color:#7a8797;font-size:10px;line-height:1.4}
@media(max-width:1100px){.grc-billing-cycle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.grc-billing-cycle-grid{grid-template-columns:1fr}.grc-billing-cycle-item{padding:13px 14px}}