/* /assets/theme.css */
:root{
  --color-primary:#006341;
  --color-bg:#F2E8DC;
  --color-surface:#FFFFFF;
  --color-text:#0f172a;
  --color-secondary-text:#6C757D;
  --color-accent:#FF5E5B;
  --color-border:#E0E0E0;
  --radius:12px;
  --shadow:0 1px 2px rgba(0,0,0,.04);
}

/* base */
*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--color-bg); color:var(--color-text);
  font-family:"PT Serif", serif; font-weight:400;
}
h1,h2,h3{ font-family:"PT Serif", serif; font-weight:700; margin:0 0 8px 0 }
.title{ font-family:"PT Serif", serif; font-weight:700; font-size:22px; margin:0; color:var(--color-primary) }
.muted{ color:var(--color-secondary-text); font-size:14px }
.wrap{ max-width:1000px; margin:24px auto; padding:0 20px }

/* header */
header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; background:var(--color-surface);
  border-bottom:1px solid var(--color-border); box-shadow:var(--shadow);
  position:sticky; top:0; z-index:10;
}
.brand{ display:flex; align-items:center; gap:12px }
.brand img{ height:44px; width:auto; display:block }
.brand-link{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit }
.brand-link .title{ color:var(--color-primary) !important }
.nav{ display:flex; gap:14px; align-items:center; flex-wrap:wrap }
.nav a{
  text-decoration:none; color:var(--color-text); padding:6px 8px; border-radius:8px;
  font-family:"PT Serif", serif; font-weight:700;
}
.nav a:hover{ background:rgba(0,0,0,.03) }
.nav a.active{ color:var(--color-primary); background:rgba(0,99,65,.08) }
.iconbtn{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; border:1px solid var(--color-border); background:#fff; cursor:pointer; padding:0 }
.iconbtn:hover{ border-color:var(--color-primary) }
.icon{ width:18px; height:18px; display:block }
.badge{ position:relative }
.badge::after{ content:''; position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%; background:var(--color-accent) }

/* cards, buttons, form */
.card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px }
.btn{
  display:inline-block; border:1px solid var(--color-primary); background:var(--color-primary); color:#fff;
  border-radius:10px; padding:10px 14px; text-decoration:none; cursor:pointer;
  font-family:"PT Serif", serif; font-weight:700;
}
.btn.outline{ background:transparent; color:var(--color-primary) }
.row{ display:flex; gap:10px; flex-wrap:wrap }

label{ display:block; font-size:13px; color:var(--color-secondary-text); margin:8px 0 4px 0 }
input,select{
  width:100%; max-width:480px; padding:10px 12px; border:1px solid var(--color-border);
  border-radius:10px; font-size:16px; appearance:none; background:#fff;
}
input[readonly], input[aria-readonly="true"]{ background:#f5f7fa; color:var(--color-secondary-text); cursor:not-allowed }

/* table */
.table{ width:100%; border-collapse:collapse; margin-top:8px }
.table th,.table td{ border:1px solid var(--color-border); padding:8px 12px; text-align:left; background:var(--color-surface); color:var(--color-text) }
.table th{ font-family:"PT Serif", serif; font-weight:700 }
.table tr:nth-child(even) td{ background:#f9f9f9 }

/* tab bar */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; background:var(--color-surface);
  border-top:1px solid var(--color-border); box-shadow:0 -1px 2px rgba(0,0,0,.04);
  display:none; padding-bottom:env(safe-area-inset-bottom); z-index:20;
}
.tabbar .tabs{ display:grid; grid-template-columns:repeat(5,1fr); align-items:center; justify-items:center; gap:0; padding:8px 8px 6px 8px }
.tabbar .tabs:has(a[aria-hidden="true"]){ grid-template-columns:repeat(4,1fr) }
.tabbar .tabs.no-settings{ grid-template-columns:repeat(4,1fr) }
.tabbar a{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  height:36px; min-width:36px; text-decoration:none; color:var(--color-secondary-text); font-size:11px;
  font-family:"PT Serif", serif; font-weight:700;
}
.tabbar a .icon{ width:18px; height:18px }
.tabbar a.active{ color:var(--color-primary) }

@media (max-width:640px){
  .tabbar{ display:block }
  .nav{ display:none }
  .wrap{ padding-bottom:76px }
  .title{ display:none }
}

/* Hide global top header on pages that provide their own local back bar */
.no-topbar #app-header { display: none; }

/* Theme alert styles */
.alert{ 
  margin:10px 0; padding:10px 12px; border-radius:10px; border:1px solid var(--color-border); 
  background:#fff; box-shadow:var(--shadow); font-weight:600; font-family:"PT Serif", serif;
  border-left:6px solid var(--color-primary);
}
.alert.hidden{ display:none }
.alert.success{ border-left:6px solid var(--color-primary); border-color:var(--color-border); background:#fff; color:var(--color-text) }
.alert.error{ border-left:6px solid var(--color-primary); border-color:var(--color-border); color:var(--color-text); background:#fff }
.alert.warning{ border-left:6px solid var(--color-primary); border-color:var(--color-border); color:var(--color-text); background:#fff }
.alert.info{ border-left:6px solid var(--color-primary); border-color:var(--color-border); color:var(--color-text); background:#fff }

/* Standard modal styles for alerts and confirmations */
.standard-modal-overlay{ position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:1001 }
.standard-modal{ background:#fff; border-radius:12px; max-width:500px; width:90%; max-height:80vh; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,0.15) }
.standard-modal-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--color-border) }
.standard-modal-header h3{ margin:0; font-size:18px; font-weight:700; font-family:"PT Serif", serif }
.standard-modal-close{ background:none; border:none; font-size:24px; cursor:pointer; color:var(--color-secondary-text); padding:0; width:24px; height:24px; display:flex; align-items:center; justify-content:center }
.standard-modal-body{ padding:20px; max-height:60vh; overflow-y:auto; font-family:"PT Serif", serif }
.standard-modal-actions{ display:flex; gap:10px; padding:16px 20px; border-top:1px solid var(--color-border); justify-content:flex-end }

/* Button variants */
.btn.warn{ background:#dc3545; border-color:#dc3545; color:#fff }
.btn.warn.outline{ background:transparent; color:#dc3545 }
.btn.secondary{ background:var(--color-secondary-text); border-color:var(--color-secondary-text); color:#fff }
.btn.secondary.outline{ background:transparent; color:var(--color-secondary-text) }

/* PWA install button styling */
.install-app-btn {
  position: fixed;
  right: 16px;
  bottom: 16px;
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  z-index: 1000;
  font-family: "PT Serif", serif;
  font-weight: 700;
  font-size: 14px;
  transition: all 0.2s ease;
  box-shadow: var(--shadow);
}

.install-app-btn:hover {
  background: #004d30;
  border-color: #004d30;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.install-app-btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow);
}

/* Position above bottom navigation on mobile */
@media (max-width: 640px) {
  .install-app-btn {
    bottom: 84px; /* 68px for tabbar + 16px margin */
    right: 16px;
  }
}