/* JamiiSafe — vanilla design system, ported from React app */
:root{
/* JamiiSafe brand palette — aligned with marketing site */
--primary:#0E6B35; --primary-dark:#074D24; --primary-light:#2E9B5A; --primary-glow:rgba(14,107,53,.12);
--background:#FAFBF7; --surface:#ffffff; --surface-alt:#F0F4EA;
--foreground:#1B2215; --text:#1B2215; --muted:#F1F5EE; --muted-fg:#5B6A4E;
--border:#E1E8D6; --input:#E1E8D6;
--success:#0E6B35; --success-bg:rgba(14,107,53,.12);
--warning:#D4880F; --warning-bg:rgba(212,136,15,.14);
--destructive:#C0392B; --destructive-bg:rgba(192,57,43,.12);
--accent:#F5A623; --accent-bg:rgba(245,166,35,.14);
--radius:0.875rem;
--shadow-soft:0 1px 2px rgba(0,0,0,.05),0 4px 12px rgba(14,107,53,.08);
--shadow-glow:0 12px 32px -8px rgba(14,107,53,.35);
--gradient-primary:linear-gradient(135deg,#0E6B35,#2E9B5A);
--gradient-hero:linear-gradient(160deg,#074D24 0%,#0E6B35 50%,#2E9B5A 100%);
--safe-top:env(safe-area-inset-top,0px);
--safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--background);color:var(--foreground);-webkit-tap-highlight-color:transparent}
body{min-height:100dvh}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,textarea,select{font:inherit;color:inherit}
img{display:block;max-width:100%}
/* Layout */
.shell{margin:0 auto;max-width:560px;min-height:100dvh;background:var(--background);display:flex;flex-direction:column}
.main{flex:1;padding-bottom:84px}
.main.no-tabs{padding-bottom:24px}
.safe-top{padding-top:var(--safe-top)}
.safe-bottom{padding-bottom:var(--safe-bottom)}
.container{padding:16px}
.muted{color:var(--muted-fg)}
.hidden{display:none!important}
.row{display:flex;gap:8px}
.row.center{align-items:center}
.row.between{justify-content:space-between}
.col{display:flex;flex-direction:column}
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.grid{display:grid}
.grid-2{grid-template-columns:1fr 1fr;gap:12px}
.grid-3{grid-template-columns:1fr 1fr 1fr;gap:12px}
.text-xs{font-size:11px}.text-sm{font-size:13px}.text-base{font-size:15px}
.text-lg{font-size:18px}.text-xl{font-size:22px;font-weight:700}.text-2xl{font-size:26px;font-weight:800}
.text-3xl{font-size:32px;font-weight:800;letter-spacing:-.5px}
.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}
/* Hero */
.hero{background:var(--gradient-hero);color:#fff;padding:32px 20px 40px;padding-top:calc(var(--safe-top) + 32px)}
.hero .balance{margin-top:24px;background:rgba(255,255,255,.15);backdrop-filter:blur(10px);padding:16px;border-radius:16px}
/* Cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-soft)}
.card.flat{box-shadow:none}
.cards{background:var(--surface);border:1px solid var(--border);}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 20px;margin-top:-24px}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:var(--shadow-soft)}
.stat-card .icon{width:36px;height:36px;border-radius:12px;background:rgba(14,107,53,.12);color:var(--primary);display:inline-flex;align-items:center;justify-content:center}
.stat-card.warn .icon{background:var(--warning-bg);color:var(--warning)}
.stat-value{font-size:24px;font-weight:800}
/* Forms */
label{display:block;font-size:12px;font-weight:600;margin-bottom:6px;color:var(--foreground)}
.input,select,textarea{width:100%;height:42px;padding:0 12px;border:1px solid var(--input);border-radius:10px;background:var(--surface);outline:none;transition:border .15s}
textarea{height:auto;padding:10px 12px;resize:vertical;min-height:90px}
.input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(14,107,53,.15)}
.field{margin-bottom:14px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 16px;border-radius:10px;font-weight:600;font-size:14px;line-height:1;transition:opacity .15s,transform .1s}
.btn svg{width:18px;height:18px;flex:0 0 18px;display:inline-block;vertical-align:middle}
.btn-sm svg{width:14px;height:14px;flex:0 0 14px}
.icon-inline{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;vertical-align:-3px;margin-right:6px;color:var(--primary)}
.icon-inline svg{width:100%;height:100%}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.btn-primary{background:var(--gradient-primary);color:#fff}
.btn-secondary{background:var(--muted);color:var(--foreground)}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--foreground)}
.btn-ghost{background:transparent;color:var(--foreground)}
.btn-destructive{background:var(--destructive);color:#fff}
.btn-success{background:var(--success);color:#fff}
.btn-sm{height:34px;padding:0 12px;font-size:12px;border-radius:8px}
.btn-block{width:100%}
/* Badges */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600;background:var(--muted);color:var(--muted-fg)}
.badge.success{background:var(--success-bg);color:var(--success)}
.badge.warning{background:var(--warning-bg);color:var(--warning)}
.badge.destructive{background:var(--destructive-bg);color:var(--destructive)}
.badge.primary{background:rgba(14,107,53,.12);color:var(--primary)}
/* Tabs (segmented) */
.seg{display:flex;background:var(--muted);border-radius:10px;padding:4px;margin-bottom:14px}
.seg button{flex:1;padding:8px;border-radius:8px;font-weight:600;font-size:13px;color:var(--muted-fg)}
.seg button.active{background:var(--surface);color:var(--foreground);box-shadow:0 1px 3px rgba(0,0,0,.06)}
/* Filter chips */
.chips{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px}
.chips button{white-space:nowrap;padding:6px 12px;border-radius:999px;background:var(--muted);color:var(--muted-fg);font-size:12px;font-weight:500}
.chips button.active{background:var(--primary);color:#fff}
/* Page header */
.pageheader{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);padding-top:var(--safe-top)}
.pageheader-row{display:flex;align-items:center;gap:12px;padding:12px 16px}
.pageheader h1{margin:0;font-size:16px;font-weight:600}
.pageheader p{margin:0;font-size:11px;color:var(--muted-fg)}
.iconbtn{width:36px;height:36px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:var(--foreground)}
.iconbtn:hover{background:var(--muted)}
/* Bottom tabs */
.tabs{position:fixed;bottom:0;left:0;right:0;z-index:40;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-top:1px solid var(--border);padding-bottom:var(--safe-bottom)}
.tabs-inner{margin:0 auto;max-width:560px;display:grid;grid-template-columns:repeat(5,1fr);padding:6px 4px}
.tab{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;font-size:11px;font-weight:500;color:var(--muted-fg);position:relative}
.tab.active{color:var(--primary)}
.tab svg{width:22px;height:22px;transition:transform .15s}
.tab.active svg{transform:scale(1.1)}
.tab .badge-dot{position:absolute;top:2px;right:calc(50% - 16px);min-width:16px;height:16px;background:var(--destructive);color:#fff;font-size:10px;font-weight:700;border-radius:999px;padding:0 4px;display:inline-flex;align-items:center;justify-content:center}
/* Avatar */
.avatar{border-radius:999px;object-fit:cover;background:var(--muted)}
.av-sm{width:36px;height:36px}.av-md{width:44px;height:44px}.av-lg{width:56px;height:56px}
.av-xl{width:96px;height:96px;ring:4px solid rgba(14,107,53,.2)}
/* User list rows */
.user-row{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid var(--border);background:var(--surface);border-radius:14px;margin-bottom:8px;box-shadow:var(--shadow-soft)}
.user-row > a{display:flex;gap:12px;align-items:center;width:100%;min-width:0}
.user-row .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.user-row .info .row{width:100%}
.user-row .name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.user-row .meta{font-size:11px;color:var(--muted-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-row .actions{display:flex;flex-wrap:wrap;gap:6px;border-top:1px solid var(--border);padding-top:10px;width:100%}
/* Responsive: tablet/desktop widen the shell */
@media (min-width: 768px){
.shell{max-width:760px}
.tabs-inner{max-width:760px}
.grid-2,.field-row{grid-template-columns:1fr 1fr}
}
@media (min-width: 1024px){
.shell{max-width:960px}
.tabs-inner{max-width:960px}
.stat-grid{grid-template-columns:repeat(4,1fr)}
}
/* Toasts */
.toasts{position:fixed;top:calc(var(--safe-top) + 12px);left:0;right:0;z-index:100;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 16px}
.toast{pointer-events:auto;background:var(--surface);color:var(--foreground);padding:12px 16px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.15);border-left:4px solid var(--primary);font-size:13px;max-width:420px;width:100%;animation:tin .25s ease-out}
.toast.success{border-color:var(--success)}.toast.error{border-color:var(--destructive)}.toast.warning{border-color:var(--warning)}
@keyframes tin{from{transform:translateY(-20px);opacity:0}to{transform:none;opacity:1}}
/* Dialog */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:80;display:flex;align-items:center;justify-content:center;padding:16px;animation:fade .15s}
.modal{background:var(--surface);border-radius:16px;max-width:380px;width:100%;padding:20px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.modal h3{margin:0 0 4px}
.modal p.desc{margin:0 0 16px;font-size:13px;color:var(--muted-fg)}
@keyframes fade{from{opacity:0}to{opacity:1}}
/* Spinner */
.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:999px;animation:spin .7s linear infinite;display:inline-block}
.spinner.dark{border:2px solid var(--muted);border-top-color:var(--primary)}
@keyframes spin{to{transform:rotate(360deg)}}
.center-screen{min-height:100dvh;display:flex;align-items:center;justify-content:center}
.notice{padding:12px 14px;border-radius:12px;font-size:13px}
.notice.warn{background:var(--warning-bg);color:var(--warning);border:1px solid #fde68a}
.notice.info{background:rgba(14,107,53,.08);color:var(--primary);border:1px solid rgba(14,107,53,.2)}
.notice.error{background:var(--destructive-bg);color:var(--destructive)}
/* Switch */
.switch{position:relative;display:inline-block;width:44px;height:26px}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;cursor:pointer;inset:0;background:var(--input);border-radius:999px;transition:.2s}
.switch span::before{content:"";position:absolute;height:20px;width:20px;left:3px;top:3px;background:#fff;border-radius:999px;transition:.2s}
.switch input:checked + span{background:var(--primary)}
.switch input:checked + span::before{transform:translateX(18px)}
/* Empty */
.empty{padding:40px 20px;text-align:center;color:var(--muted-fg);font-size:13px;background:var(--surface);border:1px dashed var(--border);border-radius:14px}
.notif-card{padding:12px;border:1px solid var(--border);border-radius:14px;margin-bottom:8px;background:var(--surface);box-shadow:var(--shadow-soft);text-align:left;width:100%;display:block}
.notif-card.unread{border-color:rgba(14,107,53,.3);background:rgba(14,107,53,.05)}
.notif-card .title{font-weight:600;display:flex;justify-content:space-between;gap:8px}
.notif-card .body{margin-top:4px;font-size:13px;color:var(--muted-fg)}
.notif-card .when{margin-top:6px;font-size:11px;color:var(--muted-fg)}
.dot{display:inline-block;width:8px;height:8px;background:var(--primary);border-radius:999px}
/* Quick actions */
.qa-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.qa{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-soft)}
.qa .icon{width:40px;height:40px;border-radius:12px;background:rgba(14,107,53,.1);color:var(--primary);display:flex;align-items:center;justify-content:center}
.qa .label{font-size:12px;font-weight:500}
/* Smooth nav tap */
.tab,.btn,.iconbtn,.user-row > a,.qa{transition:transform .1s ease, background .15s ease, color .15s ease, box-shadow .15s ease}
.tab:active{transform:scale(.94)}
.qa:active{transform:scale(.97)}
/* Styled file upload (drop area with preview) */
.file-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px;border:2px dashed var(--input);border-radius:14px;background:linear-gradient(180deg,#fff,var(--surface-alt));cursor:pointer;transition:border-color .15s,background .15s,transform .1s;text-align:center;min-height:120px}
.file-drop:hover{border-color:var(--primary);background:rgba(14,107,53,.04)}
.file-drop.dragover{border-color:var(--primary);background:rgba(14,107,53,.08);transform:scale(1.01)}
.file-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.file-drop .fd-icon{width:44px;height:44px;border-radius:12px;background:rgba(14,107,53,.12);color:var(--primary);display:flex;align-items:center;justify-content:center}
.file-drop .fd-title{font-weight:600;font-size:13px}
.file-drop .fd-sub{font-size:11px;color:var(--muted-fg)}
.file-drop.has-file{padding:8px;border-style:solid;border-color:var(--primary);background:#fff}
.file-drop .fd-preview{width:100%;max-height:200px;object-fit:cover;border-radius:10px}
.file-drop .fd-clear{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;z-index:2}
.file-drop .fd-meta{font-size:11px;color:var(--muted-fg);margin-top:4px}
/* Avatar uploader (round, shows on top of avatar) */
.avatar-uploader{position:relative;display:inline-block}
.avatar-uploader input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;border-radius:999px}
.avatar-uploader .au-overlay{position:absolute;right:-2px;bottom:-2px;width:34px;height:34px;border-radius:999px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;border:3px solid #fff;box-shadow:var(--shadow-soft);transition:transform .15s}
.avatar-uploader:hover .au-overlay{transform:scale(1.08)}
.avatar-uploader.uploading .au-overlay{background:var(--muted-fg)}
/* Welcome / pending banner */
.welcome-banner{position:relative;background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;padding:14px 44px 14px 16px;border-radius:14px;margin:12px 16px 0;border:1px solid #fcd34d;box-shadow:var(--shadow-soft);animation:slideDown .35s ease-out}
.welcome-banner.success{background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#065f46;border-color:#86efac}
.welcome-banner h4{margin:0 0 2px;font-size:14px;font-weight:700}
.welcome-banner p{margin:0;font-size:12px;line-height:1.4}
.welcome-banner .wb-close{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:999px;background:rgba(0,0,0,.08);color:inherit;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s}
.welcome-banner .wb-close:hover{background:rgba(0,0,0,.15)}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* ===== Styled DOB picker (Siku / Mwezi / Mwaka) ===== */
.dob-picker{
display:grid;
grid-template-columns:1fr 1.6fr 1fr;
gap:10px;
margin-top:6px;
}
.dob-picker select{
height:44px;
padding:0 12px;
border:1px solid var(--input);
border-radius:12px;
background:var(--surface)
url("data:image/svg+xml;utf8,")
no-repeat right 12px center;
font-size:14px;
font-weight:500;
color:var(--foreground);
appearance:none;-webkit-appearance:none;-moz-appearance:none;
padding-right:34px;
transition:border-color .15s, box-shadow .15s, transform .05s;
cursor:pointer;
}
.dob-picker select:hover{ border-color:var(--primary); }
.dob-picker select:focus{
border-color:var(--primary);
box-shadow:0 0 0 3px rgba(20,184,166,.18);
outline:none;
}
.dob-picker select:invalid,
.dob-picker select option[value=""]{ color:var(--muted-fg); }
/* ===== Styled Mkoa / Kata selects ===== */
select[data-tz-region],
select[data-tz-ward]{
height:44px;
padding:0 36px 0 14px;
border:1px solid var(--input);
border-radius:12px;
background:var(--surface)
url("data:image/svg+xml;utf8,")
no-repeat right 12px center;
font-size:14px;
font-weight:500;
color:var(--foreground);
appearance:none;-webkit-appearance:none;-moz-appearance:none;
transition:border-color .15s, box-shadow .15s;
cursor:pointer;
width:100%;
}
select[data-tz-region]:hover:not([disabled]),
select[data-tz-ward]:hover:not([disabled]){ border-color:var(--primary); }
select[data-tz-region]:focus,
select[data-tz-ward]:focus{
border-color:var(--primary);
box-shadow:0 0 0 3px rgba(20,184,166,.18);
outline:none;
}
select[data-tz-ward][disabled]{
background-color:var(--muted);
color:var(--muted-fg);
cursor:not-allowed;
opacity:.75;
}
/* Wrap Mkoa + Kata side-by-side on wider screens */
.field-row > .field{ margin-bottom:0; }
@media (max-width:420px){
.dob-picker{ grid-template-columns:1fr 1.4fr 1fr; gap:8px; }
.field-row{ grid-template-columns:1fr; }
}