@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --ink:#241F1D;            /* near-black warm charcoal, matches logo emblem */
  --ink-soft:#6B625C;
  --paper:#FAF7F2;          /* bright warm-white backdrop */
  --panel:#FFFFFF;
  --red:#C6303E;            /* pulled straight from the logo crown */
  --red-dark:#9E2530;
  --red-soft:#FBE7E7;
  --gold:#C08A28;           /* secondary accent, financial figures */
  --gold-soft:#FBF0D9;
  --good:#2E7A4F; --good-soft:#E4F1E7;
  --line:#EDE7DC;
  --radius:12px;
  --shadow:0 4px 16px rgba(36,31,29,0.07);
}
*{box-sizing:border-box;}
body{margin:0;font-family:'IBM Plex Sans',sans-serif;color:var(--ink);background:var(--paper);}
h1,h2,h3{font-family:'Fraunces',serif;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:var(--red);}

/* ---------------- Login ---------------- */
.login-body{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 15% 10%, rgba(198,48,62,0.06), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(192,138,40,0.06), transparent 45%),
    var(--paper);
  padding:24px;
}
.login-card{
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);
  border-radius:18px;padding:38px 32px;max-width:360px;width:100%;text-align:center;color:var(--ink);
  border-top:4px solid var(--red);
}
.login-logo{width:66px;height:66px;object-fit:contain;margin-bottom:14px;}
.login-card h1{font-size:24px;margin:0 0 4px;color:var(--ink);}
.login-card .tag{color:var(--ink-soft);font-size:13px;margin:0 0 24px;}
.login-form{text-align:left;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:11.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.4px;font-weight:700;margin-bottom:6px;}
.field select,.field input{
  width:100%;padding:12px 14px;border-radius:9px;border:1.5px solid var(--line);
  background:#FCFAF6;color:var(--ink);font-size:14px;font-family:inherit;
}
.field select:focus,.field input:focus{outline:none;border-color:var(--red);}
.btn-primary{
  width:100%;padding:13px;border-radius:9px;border:none;background:var(--red);
  color:#fff;font-weight:700;font-size:14px;cursor:pointer;margin-top:4px;transition:.15s;
}
.btn-primary:hover{background:var(--red-dark);}
.alert-error{background:var(--red-soft);color:var(--red-dark);border-radius:8px;padding:10px 12px;font-size:13px;margin-bottom:16px;font-weight:600;}
.alert-success{background:var(--good-soft);color:var(--good);border-radius:8px;padding:10px 12px;font-size:13px;margin-bottom:16px;font-weight:600;}
.login-note{margin-top:18px;font-size:11px;color:var(--ink-soft);opacity:.8;}

/* ---------------- App shell ---------------- */
.shell{display:flex;min-height:100vh;}
.sidebar{
  width:216px;background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:20px 12px;flex-shrink:0;
}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:6px 10px 22px;font-family:'Fraunces',serif;font-weight:700;font-size:16px;}
.sidebar .brand img{width:26px;height:26px;object-fit:contain;}
.navitem{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;
  color:var(--ink-soft);font-size:13.5px;font-weight:600;cursor:pointer;margin-bottom:2px;
  text-decoration:none;
}
.navitem .ic{width:16px;height:16px;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;}
.navitem.active{background:var(--red-soft);color:var(--red-dark);}
.navitem:hover{color:var(--ink);}
.sidebar-foot{margin-top:auto;padding:14px 10px 4px;font-size:11px;color:var(--ink-soft);border-top:1px solid var(--line);}
.sidebar-foot .logout{color:var(--red);font-weight:700;text-decoration:none;}

.main{flex:1;display:flex;flex-direction:column;min-width:0;}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:var(--panel);border-bottom:1px solid var(--line);}
.topbar h2{margin:0;font-size:18px;font-weight:600;}
.who{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft);}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--gold-soft);display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:700;font-size:12px;color:var(--gold);}
.content{flex:1;padding:22px 24px 90px;overflow-y:auto;}

/* mobile bottom tab bar */
.tabbar{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--panel);border-top:1px solid var(--line);padding:8px 4px 12px;z-index:20;}
.tabitem{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--ink-soft);text-decoration:none;padding-top:4px;}
.tabitem .ic{width:19px;height:19px;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;}
.tabitem span{font-size:9.5px;font-weight:700;}
.tabitem.active{color:var(--red);}

@media (max-width:820px){
  .sidebar{display:none;}
  .tabbar{display:flex;}
  .content{padding-bottom:96px;}
}

/* ---------------- Cards / generic ---------------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media (max-width:820px){ .grid4{grid-template-columns:1fr 1fr;} }
.stat-label{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-soft);font-weight:700;margin-bottom:6px;}
.stat-value{font-family:'Fraunces',serif;font-size:22px;font-weight:600;}
.stat-value.red{color:var(--red);}
.stat-value.good{color:var(--good);}
.pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:700;}
.pill.church{background:var(--good-soft);color:var(--good);}
.pill.vendor{background:var(--red-soft);color:var(--red-dark);}
.pill.warn{background:var(--gold-soft);color:#8A5A0C;}
.section-title{font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-soft);font-weight:700;margin:22px 0 10px;}
.section-title:first-child{margin-top:0;}

/* ---------------- Buttons ---------------- */
.btn{padding:9px 16px;border-radius:8px;border:1px solid var(--line);background:var(--panel);font-size:12.5px;font-weight:700;cursor:pointer;color:var(--ink);text-decoration:none;display:inline-block;}
.btn.red{background:var(--red);color:#fff;border-color:var(--red);}
.btn.red:hover{background:var(--red-dark);}
.btn.gold{background:var(--gold);color:#fff;border-color:var(--gold);}
.btn.ghost{background:transparent;}
.btn.block{width:100%;text-align:center;}
.btn.sm{padding:6px 12px;font-size:11.5px;}

/* ---------------- Tables ---------------- */
table{width:100%;border-collapse:collapse;font-size:12.5px;}
th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.3px;color:var(--ink-soft);padding:9px 10px;border-bottom:1px solid var(--line);}
td{padding:10px;border-bottom:1px solid var(--line);}
tr:last-child td{border-bottom:none;}
.num{font-family:'IBM Plex Mono',monospace;text-align:right;}
.variance-bad{color:var(--red);font-weight:700;}
.variance-ok{color:var(--good);font-weight:700;}
.progress{height:6px;background:var(--line);border-radius:999px;overflow:hidden;margin-top:6px;}
.progress > div{height:100%;background:var(--red);}
.flag-box{display:flex;gap:10px;align-items:flex-start;background:var(--red-soft);border:1px solid #F0C9C9;border-radius:8px;padding:10px 12px;font-size:12px;color:var(--red-dark);margin-bottom:14px;font-weight:600;}

/* ---------------- Forms ---------------- */
.form-row{margin-bottom:14px;}
.form-row label{display:block;font-size:11.5px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.3px;margin-bottom:6px;}
.form-row input, .form-row select, .form-row textarea{
  width:100%;padding:10px 12px;border-radius:8px;border:1.5px solid var(--line);font-size:14px;font-family:inherit;background:#FCFAF6;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{outline:none;border-color:var(--red);}

/* ---------------- POS ---------------- */
.cat-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;margin-bottom:12px;}
.cat-tab{flex-shrink:0;padding:7px 14px;border-radius:999px;background:var(--panel);border:1px solid var(--line);font-size:12.5px;font-weight:700;cursor:pointer;color:var(--ink-soft);text-decoration:none;}
.cat-tab.active{background:var(--red);color:#fff;border-color:var(--red);}
.item-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
@media (min-width:820px){ .item-grid{grid-template-columns:repeat(4,1fr);} }
.item-tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px;cursor:pointer;position:relative;transition:.15s;text-align:left;}
.item-tile:hover{border-color:var(--red);transform:translateY(-1px);}
.item-tile .iname{font-weight:700;font-size:13px;margin-bottom:4px;}
.item-tile .iprice{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--ink-soft);}
.item-tile .istock{font-size:10.5px;color:var(--ink-soft);opacity:.75;margin-top:4px;}
.item-tile .qtybadge{position:absolute;top:-6px;right:-6px;background:var(--red);color:#fff;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,0.2);}

.cart-drawer{position:fixed;bottom:0;left:0;right:0;background:var(--ink);color:#F3EFDF;border-radius:16px 16px 0 0;padding:14px 16px 16px;box-shadow:0 -8px 24px rgba(0,0,0,0.25);z-index:15;}
@media (min-width:820px){ .cart-drawer{position:static;border-radius:var(--radius);margin-top:16px;color:var(--ink);background:var(--panel);border:1px solid var(--line);} }
.cart-row{display:flex;justify-content:space-between;font-size:12.5px;padding:5px 0;opacity:.85;}
.cart-row.total{border-top:1px dashed rgba(150,140,120,0.4);margin-top:6px;padding-top:10px;font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:700;opacity:1;}
.cart-cta{display:flex;gap:8px;margin-top:12px;}
.cart-cta button{flex:1;padding:11px;border-radius:8px;border:none;font-weight:700;font-size:13px;cursor:pointer;}
.cart-cta .checkout{background:var(--red);color:#fff;}
.cart-cta .owing{background:rgba(255,255,255,0.1);color:inherit;border:1px solid rgba(150,140,120,0.3);}

.hint{font-size:11px;color:var(--ink-soft);margin-top:16px;text-align:center;}

/* icon mask shapes reused across nav */
.ic-cart{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");}
.ic-grid{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E");}
.ic-box{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M21 8l-9-5-9 5v8l9 5 9-5V8z'/%3E%3Cpath d='M3.3 7.5l8.7 5 8.7-5M12 22V12'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M21 8l-9-5-9 5v8l9 5 9-5V8z'/%3E%3Cpath d='M3.3 7.5l8.7 5 8.7-5M12 22V12'/%3E%3C/svg%3E");}
.ic-handshake{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M2 12h4l3-3 3 3 3-3 3 3h4'/%3E%3Cpath d='M12 12v6'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M2 12h4l3-3 3 3 3-3 3 3h4'/%3E%3Cpath d='M12 12v6'/%3E%3C/svg%3E");}
.ic-user{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");}
.ic-check{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E");}
.ic-file{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E");}