/* Society admin design system. Scoped to this workspace to isolate other panels. */
:root { --sa-ink:#193235; --sa-muted:#6a7e80; --sa-teal:#087f74; --sa-line:#e2eae7; --sa-canvas:#f4f7f5; --sa-sidebar:258px; }
.sa-app,.sa-auth { margin:0; color:var(--sa-ink); background:var(--sa-canvas); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
.sa-app *,.sa-auth * { box-sizing:border-box; }
.sa-app a,.sa-auth a { text-decoration:none; }
.sa-app button,.sa-auth button { cursor:pointer; font:inherit; }
.sa-app :focus-visible,.sa-auth :focus-visible { outline:3px solid #2ab6a2; outline-offset:3px; }
.sa-app [hidden],.sa-auth [hidden] { display:none!important; }
.sa-skip { position:fixed; top:-60px; left:20px; z-index:100; padding:12px 20px; border-radius:8px; background:white; color:var(--sa-teal); }
.sa-skip:focus { top:12px; }
.sa-sidebar { position:fixed; inset:0 auto 0 0; z-index:50; width:var(--sa-sidebar); display:flex; flex-direction:column; color:#c4d4d3; background:#102d30; }
.sa-brand { display:flex; align-items:center; gap:11px; color:#fff; padding:28px 24px 24px; font-size:21px; font-weight:700; letter-spacing:-.6px; }
.sa-brand-mark { display:grid; place-items:center; width:48px; height:48px; flex-shrink:0; }
.sa-brand small { display:block; margin-top:2px; font-size:8px; letter-spacing:1.9px; color:#94b3af; font-weight:600; }
.sa-society { margin:0 17px 10px; padding:13px 12px; display:flex; gap:10px; align-items:center; border:1px solid #355053; border-radius:10px; background:#1b383b; }
.sa-society-icon { color:#b6c8c4; padding:8px; background:#2b484a; border-radius:7px; }
.sa-society>div { min-width:0; }
.sa-society strong { display:block; color:#edf5f1; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.sa-society span:not(.sa-society-icon) { font-size:10px; color:#a6bebb; }
.sa-nav { padding:0 14px 20px; flex:1; overflow:auto; scrollbar-width:thin; scrollbar-color:#49615f transparent; }
.sa-nav-label { color:#8caaa7; font-size:9px; text-transform:uppercase; letter-spacing:1.6px; margin:22px 12px 8px; font-weight:600; }
.sa-nav a { display:flex; gap:12px; align-items:center; padding:10px 13px; margin:3px 0; border-radius:7px; color:#b8cfca; font-size:12px; font-weight:500; transition:background .15s,color .15s; }
.sa-nav a i { width:17px; text-align:center; font-size:14px; opacity:.8; }
.sa-nav a:hover { color:white; background:#234245; }
.sa-nav a[aria-current=page] { background:#d4eee0; color:#173f36; font-weight:650; }
.sa-nav a[aria-current=page]::after { content:''; width:5px; height:5px; background:#26775f; border-radius:50%; margin-left:auto; }
.sa-sidebar-footer { display:flex; align-items:center; gap:10px; border-top:1px solid #2c4849; padding:17px; }
.sa-sidebar-footer>div { flex:1; min-width:0; }
.sa-sidebar-footer strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#eff6f4; font-size:12px; font-weight:500; }
.sa-sidebar-footer small { display:block; font-size:10px; color:#a1b8b4; }
.sa-sidebar-footer>a { color:#b8cfca; padding:7px; }
.sa-avatar { display:grid; place-items:center; flex-shrink:0; width:34px; height:34px; border-radius:50%; background:#e1ede7; color:#356455; font-size:12px; font-weight:700; }
.sa-workspace { margin-left:var(--sa-sidebar); min-height:100vh; display:flex; flex-direction:column; min-width:0; }
.sa-topbar { min-height:78px; padding:18px 36px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--sa-line); background:#fff; }
.sa-breadcrumb { display:flex; align-items:center; gap:14px; font-size:12px; min-width:0; }
.sa-breadcrumb-parent { color:#83918f; }
.sa-breadcrumb-divider { color:#bcc7c3; }
.sa-topbar-actions { display:flex; align-items:center; gap:20px; }
.sa-date { font-size:11px; color:#768481; }
.sa-icon-button { width:34px; height:34px; display:inline-grid; place-items:center; border:1px solid var(--sa-line); background:white; color:#586e69; border-radius:8px; flex-shrink:0; }
.sa-profile { position:relative; }
.sa-profile summary { display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none; font-size:12px; }
.sa-profile summary::-webkit-details-marker { display:none; }
.sa-profile summary>i { font-size:9px; color:#71847e; }
.sa-profile-menu { position:absolute; right:0; top:46px; z-index:40; width:218px; border:1px solid var(--sa-line); padding:12px; background:white; border-radius:12px; box-shadow:0 10px 30px #133e3214; }
.sa-profile-menu strong,.sa-profile-menu>span { display:block; padding:0 8px; overflow-wrap:anywhere; }
.sa-profile-menu>span { font-size:11px; color:var(--sa-muted); margin-bottom:12px; }
.sa-profile-menu a { display:block; padding:9px 8px; border-radius:6px; color:var(--sa-ink); font-size:12px; }
.sa-profile-menu a:hover { background:#edf6f1; }
.sa-content { flex:1; width:100%; max-width:1640px; margin:0 auto; padding:32px 36px 44px; min-width:0; }
.sa-footer { display:flex; justify-content:space-between; gap:16px; padding:18px 36px; border-top:1px solid var(--sa-line); font-size:10px; color:#7c8d88; }
.sa-footer-dot { padding:0 6px; }
.sa-menu-toggle,.sa-close { display:none; }
.sa-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:26px; }
.sa-eyebrow { font-size:10px; text-transform:uppercase; letter-spacing:1.8px; color:var(--sa-teal); font-weight:650; margin:0 0 8px; }
.sa-content h1 { color:var(--sa-ink); letter-spacing:-.8px; font-weight:650; line-height:1.25; }
.sa-heading h1 { font-size:29px; margin:0; }
.sa-subtitle { margin:9px 0 0; font-size:12px; color:var(--sa-muted); }
.sa-button { display:inline-flex; align-items:center; justify-content:center; gap:9px; border:1px solid var(--sa-teal); border-radius:8px; padding:11px 16px; color:white; background:var(--sa-teal); font-size:12px; font-weight:600; white-space:nowrap; }
.sa-button:hover { background:#076d63; }
.sa-button-secondary { background:white; border-color:var(--sa-line); color:var(--sa-ink); }
.sa-button-secondary:hover { background:#edf5f0; }
.sa-heading-actions { display:flex; gap:10px; flex-wrap:wrap; }
.sa-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-bottom:22px; }
.sa-metric { display:block; position:relative; background:white; border:1px solid var(--sa-line); border-radius:12px; padding:20px; color:var(--sa-ink); transition:border-color .15s,box-shadow .15s; }
.sa-metric:hover { border-color:#97bcb0; box-shadow:0 4px 15px #123e3108; }
.sa-metric-top { display:flex; align-items:center; justify-content:space-between; gap:8px; color:#657b75; font-size:12px; }
.sa-metric-icon { display:grid; place-items:center; width:33px; height:33px; background:#eaf4ef; color:#428570; border-radius:9px; }
.sa-metric:nth-child(2) .sa-metric-icon { background:#ecf0fc; color:#7080bb; }
.sa-metric:nth-child(3) .sa-metric-icon { background:#fff4df; color:#ac8439; }
.sa-metric:nth-child(4) .sa-metric-icon { background:#f0ebf8; color:#9873b7; }
.sa-metric-value { display:block; margin:9px 0 13px; font-size:34px; line-height:1.15; font-weight:600; letter-spacing:-1.5px; font-variant-numeric:tabular-nums; }
.sa-metric-bottom { display:flex; justify-content:space-between; align-items:center; font-size:10px; color:#94a29c; gap:8px; flex-wrap:wrap; }
.sa-active-badge { color:#36785c; background:#edf7f0; padding:3px 7px; border-radius:5px; font-size:10px; font-weight:500; white-space:nowrap; }
.sa-operations { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--sa-line); border-radius:12px; background:white; margin-bottom:26px; }
.sa-operation { display:flex; align-items:center; gap:13px; padding:19px 22px; color:var(--sa-ink); }
.sa-operation+.sa-operation { border-left:1px solid var(--sa-line); }
.sa-operation>i { color:#76978a; font-size:18px; }
.sa-operation>div { flex:1; }
.sa-operation strong { display:block; font-size:13px; font-weight:550; }
.sa-operation small { display:block; color:var(--sa-muted); font-size:10px; margin-top:3px; }
.sa-operation>b { font-size:24px; font-weight:600; font-variant-numeric:tabular-nums; }
.sa-dashboard-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:22px; align-items:start; }
.sa-panel { border:1px solid var(--sa-line); border-radius:12px; background:white; overflow:hidden; }
.sa-panel-heading { padding:21px 22px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.sa-panel-heading h2 { font-size:14px; font-weight:600; letter-spacing:-.2px; margin:0; }
.sa-panel-heading p { font-size:10px; color:var(--sa-muted); margin:4px 0 0; }
.sa-panel-heading>a { color:var(--sa-teal); font-size:11px; font-weight:600; white-space:nowrap; }
.sa-panel table { width:100%; border-collapse:collapse; }
.sa-panel th { text-align:left; }
.sa-person { white-space:nowrap; display:flex; align-items:center; gap:10px; }
.sa-person .sa-avatar { width:30px; height:30px; font-size:10px; }
.sa-person a { color:var(--sa-ink); font-weight:550; }
.sa-cell-note { font-size:10px; color:var(--sa-muted); margin-top:3px; }
.sa-status { display:inline-flex; align-items:center; gap:5px; padding:4px 7px; border-radius:5px; background:#edf7f0; color:#397960; font-size:10px; white-space:nowrap; }
.sa-status::before { content:''; width:4px; height:4px; border-radius:50%; background:currentColor; }
.sa-empty { text-align:center; padding:38px 16px!important; color:var(--sa-muted); font-size:12px; }
.sa-empty i { display:block; margin-bottom:12px; color:#9eb4ab; font-size:23px; }
.sa-empty strong { display:block; font-weight:550; color:var(--sa-ink); margin-bottom:5px; }
.sa-quick-actions { margin-top:22px; }
.sa-quick-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:0 22px 22px; }
.sa-quick-grid a { display:flex; align-items:center; gap:10px; padding:14px; border:1px solid var(--sa-line); border-radius:8px; color:#47635a; font-size:11px; }
.sa-quick-grid a:hover { border-color:#97bcb0; background:#f6faf7; }
.sa-quick-grid i { color:var(--sa-teal); }
.sa-alerts { display:grid; gap:10px; margin-bottom:20px; }
.sa-alert { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:13px 16px; border:1px solid #bcdad4; background:#edf7f4; border-radius:9px; color:#266d60; font-size:13px; }
.sa-alert-error { border-color:#efc5c5; background:#fff1f1; color:#a33737; }
.sa-alert-warning { border-color:#ead7a6; background:#fff8e7; color:#88611c; }
.sa-alert button { background:transparent; border:0; color:inherit; font-size:22px; }
/* Restyle existing lists, detail views and forms without changing their behavior. */
.sa-content>.container,.sa-content>div.container { max-width:none; padding:0; }
.sa-content>.max-w-7xl { max-width:none; }
.sa-content h2,.sa-content h3 { letter-spacing:-.25px; }
.sa-content .bg-white.rounded-lg,.sa-content .bg-white.rounded-xl { border:1px solid var(--sa-line); border-radius:12px; box-shadow:0 2px 3px #183d2c02; }
.sa-content .shadow,.sa-content .shadow-sm,.sa-content .shadow-md { box-shadow:0 2px 5px #183d2c05; }
.sa-content .bg-gradient-to-br { background-image:none; background-color:white; border-color:var(--sa-line); }
.sa-content .bg-blue-600,.sa-content .bg-indigo-600 { background-color:var(--sa-teal); }
.sa-content .hover\:bg-blue-700:hover,.sa-content .hover\:bg-indigo-700:hover { background-color:#076d63; }
.sa-content .text-blue-600,.sa-content .text-indigo-600 { color:var(--sa-teal); }
.sa-content .bg-blue-50 { background-color:#eff7f3; }
.sa-content .bg-blue-100 { background-color:#e0f0e7; }
.sa-content .border-blue-100,.sa-content .border-blue-200 { border-color:#cde4d9; }
.sa-content .text-gray-500 { color:#71817b; }
.sa-content .text-gray-800,.sa-content .text-gray-900 { color:var(--sa-ink); }
.sa-content input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),.sa-content select,.sa-content textarea { border:1px solid #d6e2dc; border-radius:7px; background-color:#fff; min-height:41px; padding-top:9px; padding-bottom:9px; font-size:13px; box-shadow:none; color:#344d43; }
.sa-content input:not([class*=pl-]):not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),.sa-content select:not([class*=pl-]),.sa-content textarea { padding-left:12px; padding-right:12px; }
.sa-content input:focus,.sa-content select:focus,.sa-content textarea:focus { border-color:#50a38a; --tw-ring-color:#50a38a; }
.sa-content input[type=checkbox],.sa-content input[type=radio] { accent-color:var(--sa-teal); }
.sa-content input:disabled,.sa-content select:disabled { background-color:#f2f5f3; color:#85918a; cursor:not-allowed; }
.sa-content label { color:#455f53; }
.sa-content button[type=submit],.sa-content a.bg-blue-600,.sa-content a.bg-indigo-600 { border-radius:7px; }
.sa-table-scroll { max-width:100%; overflow:auto; }
.sa-content table { font-size:12px; }
.sa-content th { background:#f7faf8; color:#73847b; font-size:9px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; padding:13px 17px; border-block:1px solid #e9efeb; }
.sa-content td { padding:15px 17px; border-bottom:1px solid #edf1ed; }
.sa-content tbody tr:last-child td { border-bottom:0; }
.sa-content tbody tr:hover { background:#fafcfb; }
.sa-content td .text-sm { font-size:12px; }
.sa-content td .text-xs { font-size:10px; }
.sa-content .border-l-4 { border-left-width:3px; }
.sa-content .sa-sync .mb-6 { margin-bottom:22px; border-radius:9px; }
.sa-content .sa-sync .p-4 { padding:12px 16px; }
.sa-content .sa-sync .text-sm { font-size:11px; }
.sa-content .sa-sync .text-xs { font-size:10px; }
/* Authentication */
.sa-auth { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.sa-auth-story { position:relative; background:#102d30; padding:20px 8% 50px; color:#d0e3dc; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.sa-auth-story .sa-brand { padding-left:0; }
.sa-auth-intro { max-width:470px; margin:55px 0; }
.sa-auth-intro h1 { color:#f3faf6; font-size:clamp(35px,4vw,56px); line-height:1.15; font-weight:550; letter-spacing:-2px; margin:16px 0 23px; }
.sa-auth-intro p { max-width:355px; font-size:14px; line-height:1.8; color:#a8c4bd; }
.sa-auth-story .sa-eyebrow { color:#98cfb6; }
.sa-auth-features { display:flex; flex-wrap:wrap; gap:12px; margin-top:35px; }
.sa-auth-features span { padding:9px 12px; border:1px solid #36564f; border-radius:7px; font-size:11px; color:#c9ddd4; }
.sa-auth-story footer { font-size:11px; color:#8fad9f; }
.sa-auth-main { display:flex; align-items:center; justify-content:center; padding:50px 28px; background:#fbfcfa; }
.sa-auth-card { width:100%; max-width:370px; }
.sa-auth-card h1 { font-size:28px; letter-spacing:-1px; font-weight:600; margin:10px 0; }
.sa-auth-card>p { font-size:13px; color:var(--sa-muted); margin-bottom:32px; }
.sa-auth-card label { display:block; font-size:12px; font-weight:600; margin-bottom:8px; }
.sa-auth-card input { width:100%; padding:13px; border:1px solid #d5e1da; border-radius:8px; font:inherit; color:var(--sa-ink); background:white; }
.sa-auth-field { margin-bottom:21px; }
.sa-password-wrap { position:relative; }
.sa-password-wrap input { padding-right:66px; }
.sa-password-wrap button { position:absolute; right:12px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:var(--sa-teal); font-size:11px; }
.sa-auth-card .sa-button { width:100%; margin-top:5px; padding:13px; }
.sa-auth-help { border-top:1px solid var(--sa-line); margin-top:30px; padding-top:20px; font-size:11px; color:var(--sa-muted); line-height:1.8; text-align:center; }
.sa-auth-mobile-brand { display:none; }
@media (min-width:1600px) { .sa-content { padding-top:42px; } .sa-metric { padding:25px; } }
@media (max-width:1279px) { :root { --sa-sidebar:230px; } .sa-topbar { padding-inline:26px; } .sa-content { padding:28px 24px; } .sa-metric { padding:16px; } .sa-dashboard-grid { grid-template-columns:minmax(0,1fr); } .sa-profile-name { display:none; } }
@media (max-width:1023px) { .sa-sidebar { width:258px; transform:translateX(-100%); transition:transform .2s ease; visibility:hidden; } .sa-navigation-open .sa-sidebar { transform:translateX(0); visibility:visible; } .sa-navigation-open { overflow:hidden; } .sa-workspace { margin-left:0; } .sa-menu-toggle { display:inline-grid; } .sa-close { display:inline-grid; position:absolute; right:12px; top:9px; width:24px; height:24px; border:0; background:#234245; color:#bdd6ce; } .sa-overlay { position:fixed; inset:0; background:#071d2566; z-index:45; } .sa-metrics { gap:12px; } }
@media (max-width:767px) { .sa-topbar { min-height:65px; padding:14px 18px; } .sa-topbar-actions { gap:12px; } .sa-date,.sa-breadcrumb-parent,.sa-breadcrumb-divider { display:none; } .sa-content { padding:24px 18px; } .sa-heading { align-items:flex-start; flex-direction:column; gap:18px; } .sa-heading h1 { font-size:25px; } .sa-heading-actions { width:100%; } .sa-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .sa-operations { grid-template-columns:1fr; } .sa-operation+.sa-operation { border-left:0; border-top:1px solid var(--sa-line); } .sa-operation { padding:15px 18px; } .sa-quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .sa-footer { padding:18px; } .sa-footer>span:last-child { display:none; } .sa-content .flex.justify-between:not(td *):not(.sa-panel *) { flex-wrap:wrap; gap:12px; } .sa-content .bg-white.p-6 { padding:18px; } .sa-content .container { max-width:100%; } .sa-auth { grid-template-columns:1fr; } .sa-auth-story { display:none; } .sa-auth-mobile-brand { display:block; color:var(--sa-teal); font-weight:700; font-size:18px; margin-bottom:38px; } }
@media (prefers-reduced-motion:reduce) { .sa-app *,.sa-auth * { transition:none!important; animation:none!important; scroll-behavior:auto!important; } }
@media print { .sa-sidebar,.sa-topbar,.sa-footer,.sa-heading-actions,.sa-quick-actions,.sa-overlay,.sa-skip { display:none!important; } .sa-workspace { margin:0; } .sa-content { padding:0; } .sa-app { background:white; } .sa-table-scroll { overflow:visible; } }
.sa-approval-badge{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:#f97316;color:#fff;font-size:12px;font-weight:700}
.ticket-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:24px}.ticket-metrics>div,.ticket-card{background:white;border:1px solid #e0e8e4;border-radius:14px;padding:22px}.ticket-metrics span{font-size:12px;color:#64748b}.ticket-metrics strong{display:block;font-size:30px;margin-top:12px}.ticket-filters{display:flex;gap:16px;align-items:end;flex-wrap:wrap;margin-bottom:24px}.ticket-filters label{display:grid;gap:8px;font-size:13px;flex:1;min-width:180px}.ticket-filters select{border:1px solid #d1d5db;border-radius:9px;padding:12px;background:white}.ticket-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.ticket-card{display:block;min-width:0;color:inherit}.ticket-card:hover{border-color:#76a995}.ticket-card-top,.ticket-bottom{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}.ticket-state,.ticket-escalated,.ticket-standard{font-size:12px;padding:5px 10px;border-radius:20px;background:#edf3ff;color:#285db8}.ticket-state.resolved{background:#e4f6ec;color:#187653}.ticket-state.closed{background:#eef0f3;color:#596577}.ticket-escalated{background:#fff0df;color:#ad5406}.ticket-standard{background:#f4f6f8;color:#64748b}.ticket-number{font-size:10px;color:#64748b;letter-spacing:1px;margin:18px 0 7px}.ticket-card h2{font-size:18px;font-weight:650;overflow-wrap:anywhere;margin-bottom:10px}.ticket-card>p:not(.ticket-number){font-size:13px;line-height:1.7;color:#64748b;overflow-wrap:anywhere}.ticket-location{font-size:12px;margin-top:18px}.ticket-bottom{border-top:1px solid #edf0f5;padding-top:15px;margin-top:18px;font-size:12px;color:#64748b}.ticket-bottom strong{color:#26775f}.ticket-escalation-note{padding:15px;background:#fff8ef;border-radius:8px;margin:16px 0}@media(max-width:650px){.ticket-grid{grid-template-columns:1fr}.ticket-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}