:root{
  --sg365-bg: #0b1220;
  --sg365-card: rgba(255,255,255,0.06);
  --sg365-border: rgba(255,255,255,0.10);
  --sg365-text: rgba(255,255,255,0.92);
  --sg365-muted: rgba(255,255,255,0.62);
  --sg365-accent: #22c55e;
  --sg365-accent2: #38bdf8;
}
body.sg365-modal-open{ overflow:hidden; }
#sg365-shell{ display:flex; min-height: 70vh; color:var(--sg365-text); background:transparent; }
#sg365-nav{ width:260px; padding:18px; border-right:1px solid var(--sg365-border); }
#sg365-nav .sg365-brand{ font-weight:800; letter-spacing:.3px; margin-bottom:14px; display:flex; gap:10px; align-items:center; }
#sg365-nav .sg365-nav-item{ display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:14px; color:var(--sg365-text); text-decoration:none; cursor:pointer; }
#sg365-nav .sg365-nav-item:hover{ background:rgba(255,255,255,0.06); }
#sg365-nav .sg365-nav-item.is-active{ background:linear-gradient(90deg, rgba(34,197,94,0.22), rgba(56,189,248,0.10)); border:1px solid rgba(34,197,94,0.35); }
#sg365-main{ flex:1; padding:18px; }
.sg365-topbar{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }
.sg365-hero{ display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding:18px; border:1px solid var(--sg365-border); background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; }
.sg365-muted{ color:var(--sg365-muted); }
.sg365-strong{ font-weight:700; }
.sg365-btn{ border:1px solid var(--sg365-border); background:rgba(255,255,255,0.06); color:var(--sg365-text); padding:9px 12px; border-radius:14px; cursor:pointer; }
.sg365-btn:hover{ background:rgba(255,255,255,0.10); }
.sg365-btn-primary{ background:linear-gradient(90deg, rgba(34,197,94,0.85), rgba(56,189,248,0.55)); border:1px solid rgba(34,197,94,0.35); color:#04110a; font-weight:800; }
.sg365-table{ border:1px solid var(--sg365-border); border-radius:18px; overflow:hidden; background:rgba(255,255,255,0.03); }
.sg365-row{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:12px; padding:12px 14px; border-top:1px solid rgba(255,255,255,0.06); align-items:center; }
.sg365-row.sg365-head{ border-top:none; background:rgba(255,255,255,0.05); font-weight:700; color:var(--sg365-muted); }
.sg365-empty{ padding:16px; border:1px dashed var(--sg365-border); border-radius:18px; color:var(--sg365-muted); }
.sg365-badge{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; border:1px solid var(--sg365-border); background:rgba(255,255,255,0.05); font-size:12px; }
.sg365-badge-success{ border-color: rgba(34,197,94,0.45); background: rgba(34,197,94,0.15); }
.sg365-inline-loader{ display:flex; gap:10px; align-items:center; padding:14px; color:var(--sg365-muted); }
.sg365-spinner{ width:16px; height:16px; border-radius:999px; border:2px solid rgba(255,255,255,0.25); border-top-color: rgba(34,197,94,0.85); animation: sg365spin .8s linear infinite; }
@keyframes sg365spin{ to{ transform:rotate(360deg);} }
#sg365-global-loader{ position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,0.35); z-index:9998; }
#sg365-global-loader.is-active{ display:grid; }
#sg365-modal-root{ position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,0.55); z-index:9999; padding:16px; }
#sg365-modal-root[aria-hidden="false"]{ display:grid; }
.sg365-modal{ width:min(720px, 100%); border-radius:20px; border:1px solid var(--sg365-border); background:rgba(12,18,32,0.98); box-shadow:0 30px 80px rgba(0,0,0,0.5); overflow:hidden; }
.sg365-modal-header{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,0.06); }
.sg365-modal-title{ margin:0; font-size:16px; }
.sg365-modal-close{ background:transparent; border:none; color:var(--sg365-muted); font-size:24px; cursor:pointer; }
.sg365-modal-body{ padding:16px; }
.sg365-ajax-form label{ display:block; margin:10px 0 6px; color:var(--sg365-muted); font-size:13px; }
.sg365-ajax-form input, .sg365-ajax-form textarea, .sg365-ajax-form select{ width:100%; border-radius:14px; border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.04); color:var(--sg365-text); padding:10px 12px; }

/*
  Critical UX fix:
  Some environments override input colors inside modals.
  Ensure ticket/payment forms never render "invisible" text.
*/
#sg365-modal-root .sg365-ajax-form input,
#sg365-modal-root .sg365-ajax-form textarea,
#sg365-modal-root .sg365-ajax-form select{
  background: rgba(255,255,255,0.92) !important;
  color: #0b1220 !important;
  border: 1px solid rgba(15, 23, 42, 0.18) !important;
}
#sg365-modal-root .sg365-ajax-form input::placeholder,
#sg365-modal-root .sg365-ajax-form textarea::placeholder{
  color: rgba(15,23,42,0.55) !important;
}
#sg365-modal-root .sg365-ajax-form input:focus,
#sg365-modal-root .sg365-ajax-form textarea:focus,
#sg365-modal-root .sg365-ajax-form select:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.18);
}

/* Ticket create modal gets a lighter premium background */
#sg365-modal-root .sg365-ticket-create{
  background: linear-gradient(180deg, rgba(56,189,248,0.10), rgba(34,197,94,0.06));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 14px;
}

/* Legacy popups (Report Issue / Apply Client) are rendered as plain HTML and do not use .sg365-ajax-form.
   Force visible text + premium controls to prevent "typing but not visible" issue. */
#sg365-modal-root .sg365m-issue-form input,
#sg365-modal-root .sg365m-issue-form textarea,
#sg365-modal-root .sg365m-issue-form select,
#sg365-modal-root .sg365m-front-modal-inner input,
#sg365-modal-root .sg365m-front-modal-inner textarea,
#sg365-modal-root .sg365m-front-modal-inner select{
  background: rgba(255,255,255,0.92) !important;
  color: #0b1220 !important;
  border: 1px solid rgba(15, 23, 42, 0.18) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
}
#sg365-modal-root .sg365m-issue-form input::placeholder,
#sg365-modal-root .sg365m-issue-form textarea::placeholder,
#sg365-modal-root .sg365m-front-modal-inner input::placeholder,
#sg365-modal-root .sg365m-front-modal-inner textarea::placeholder{
  color: rgba(15,23,42,0.55) !important;
}
#sg365-modal-root .sg365m-front-modal-inner .button,
#sg365-modal-root .sg365m-issue-form .button,
#sg365-modal-root .sg365m-gate-actions .button{
  border-radius: 999px !important;
}
#sg365-modal-root .sg365m-front-modal-inner .button.button-primary,
#sg365-modal-root .sg365m-issue-form .button.button-primary{
  background: linear-gradient(90deg, #3b82f6, #10b981) !important;
  border: 0 !important;
  box-shadow: 0 10px 24px rgba(16,185,129,0.18) !important;
}
#sg365-modal-root .sg365m-front-modal-inner .button:not(.button-primary),
#sg365-modal-root .sg365m-issue-form .button:not(.button-primary){
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,0.18) !important;
}

/* Helpers used by upgraded modals */
.sg365m-modal-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.sg365m-kv-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
.sg365m-kv{ background:rgba(15,23,42,0.04); border:1px solid rgba(15,23,42,0.08); border-radius:14px; padding:10px 12px; }
.sg365m-k{ display:block; font-size:12px; color:rgba(15,23,42,0.55); margin-bottom:2px; }
.sg365m-v{ display:block; font-weight:700; color:#0f172a; }
.sg365m-split{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.sg365m-split-card{ background:rgba(15,23,42,0.03); border:1px solid rgba(15,23,42,0.08); border-radius:16px; padding:12px; }
.sg365m-badges{ display:flex; flex-wrap:wrap; gap:8px; }
.sg365m-badge-btn{ cursor:pointer; border-radius:999px; padding:8px 10px; border:1px solid rgba(15,23,42,0.14); background:#fff; color:#0f172a; font-weight:600; }

@media (max-width: 720px){
  .sg365m-kv-grid{ grid-template-columns: 1fr; }
  .sg365m-split{ grid-template-columns: 1fr; }
}
.sg365-form-actions{ display:flex; justify-content:flex-end; margin-top:12px; }
.sg365-success{ padding:10px 12px; border-radius:14px; border:1px solid rgba(34,197,94,0.35); background: rgba(34,197,94,0.12); margin-bottom:10px; }
.sg365-error{ padding:10px 12px; border-radius:14px; border:1px solid rgba(239,68,68,0.35); background: rgba(239,68,68,0.10); margin-bottom:10px; }
.sg365-kv{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.sg365-kv div{ border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:10px 12px; background:rgba(255,255,255,0.03); }
.sg365-kv span{ display:block; font-size:12px; color:var(--sg365-muted); }
.sg365-kv strong{ display:block; margin-top:4px; }
@media (max-width: 900px){
  #sg365-nav{ display:none; position:fixed; inset:0 auto 0 0; width:280px; background:rgba(12,18,32,0.98); z-index:9999; }
  #sg365-nav.is-open{ display:block; }
  #sg365-shell{ display:block; }
}

/* SG365 client dashboard redesign (v1.5.19.codex) */
.sg365x-home{background:#f7f9fc;border:1px solid #e4e8f3;border-radius:18px;padding:18px;color:#0f172a}
.sg365x-home__hero{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:12px}
.sg365x-kicker{margin:0;color:#6b7280;font-size:12px;letter-spacing:.12em;font-weight:800}
.sg365x-home h2{margin:2px 0 4px;font-size:44px;line-height:1.05;color:#0b1220}
.sg365x-home__hero p{margin:0;color:#4b5563;font-size:20px}
.sg365x-home__hero-actions{display:flex;gap:8px}
.sg365x-home__hero-actions button{border:1px solid #d1d8ea;background:#fff;border-radius:10px;padding:10px 12px;color:#1e40af;font-weight:700;cursor:pointer}
.sg365x-home__quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:10px 0}
.sg365x-home__quick a{text-decoration:none;background:#fff;border:1px solid #dde3ef;border-radius:14px;padding:12px;display:block}
.sg365x-home__quick strong{display:block;color:#1d4ed8;font-size:34px;line-height:1.1}
.sg365x-home__quick span{color:#1d4ed8;font-size:20px}

.sg365x-home__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
.sg365x-home__stats article{background:#fff;border:1px solid #dde3ef;border-radius:14px;padding:12px;box-shadow:0 8px 20px rgba(15,23,42,.05)}
.sg365x-home__stats h4{margin:0;color:#4b5563;font-size:34px;line-height:1.1}
.sg365x-home__stats strong{display:block;font-size:52px;line-height:1.05;margin:4px 0;color:#0f172a}
.sg365x-home__stats small{color:#6b7280;font-size:22px}

.sg365x-home__grid{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-bottom:12px}
.sg365x-panel{background:#fff;border:1px solid #dde3ef;border-radius:14px;padding:12px}
.sg365x-panel__head{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:8px}
.sg365x-panel__head h3{margin:0;font-size:38px;line-height:1.08;color:#0f172a}
.sg365x-panel__head span{color:#64748b;font-size:20px}
.sg365x-panel--alerts ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sg365x-panel--alerts li{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:10px}
.sg365x-panel--alerts li strong{display:block;font-size:26px}
.sg365x-panel--alerts li span{font-size:18px;color:#64748b}

.sg365x-project-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sg365x-project-list li{display:grid;grid-template-columns:1fr auto;grid-template-areas:'a c' 'b c';gap:6px 10px;padding:10px 0;border-bottom:1px solid #e5eaf3}
.sg365x-project-list li:last-child{border-bottom:0}
.sg365x-project-list li>div:first-child{grid-area:a}
.sg365x-project-list strong{display:block;font-size:30px}
.sg365x-project-list span{font-size:20px;color:#64748b}
.sg365x-progress{grid-area:b;height:10px;border-radius:999px;background:#e2e8f0;overflow:hidden}
.sg365x-progress i{display:block;height:100%;background:linear-gradient(90deg,#3b82f6,#10b981)}
.sg365x-project-list b{grid-area:c;font-size:22px;color:#334155}

@media (max-width: 1180px){
  .sg365x-home__quick,.sg365x-home__stats{grid-template-columns:1fr 1fr}
  .sg365x-home__grid{grid-template-columns:1fr}
  .sg365x-home h2{font-size:32px}
  .sg365x-home__hero p,.sg365x-panel__head h3{font-size:20px}
}


/* refinements based on screenshot feedback */
.sg365x-name{font-weight:800;color:#0f172a;border-bottom:2px solid #93c5fd}
.sg365x-home__hero{padding:6px 2px 8px;border-bottom:1px solid #e5e7eb;margin-bottom:14px}
.sg365x-home__hero p{font-size:16px;line-height:1.45}
.sg365x-home__stats h4{font-size:14px}
.sg365x-home__stats strong{font-size:44px}
.sg365x-home__stats small{font-size:13px}
.sg365x-panel__head h3{font-size:34px}
.sg365x-panel__head span{font-size:13px}
.sg365x-panel--alerts li strong{font-size:18px}
.sg365x-panel--alerts li span{font-size:12px}
.sg365x-project-list strong{font-size:20px}
.sg365x-project-list span{font-size:12px}
.sg365x-project-list b{font-size:14px}