:root{
  --bg:#f7f1e8;
  --card:#fffaf2;
  --ink:#2d2520;
  --muted:#7b6f66;
  --primary:#7b1f2a;
  --primary-dark:#55141d;
  --gold:#b8903b;
  --line:#eadbc7;
  --green:#26764f;
  --red:#a42323;
  --blue:#1d4d7a;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#fffaf2,#f4eadb);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif;min-height:100vh}
body.rtl{direction:rtl}.container{width:min(1180px,94vw);margin:0 auto}.topbar{background:#fff7ec;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;box-shadow:0 4px 16px rgba(90,57,23,.06)}
.topbar-inner{display:flex;align-items:center;gap:16px;padding:10px 0}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-weight:800}.brand img{width:54px;height:54px;object-fit:contain}.brand small{display:block;font-weight:500;color:var(--muted);font-size:12px;margin-top:3px}.nav{margin-inline-start:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.nav a{color:var(--primary);text-decoration:none;font-weight:700;padding:8px 12px;border-radius:12px}.nav a:hover{background:#f1e2ce}.hero{padding:28px 0 16px;text-align:center}.hero-logo{width:160px;max-width:45vw;object-fit:contain;filter:drop-shadow(0 12px 20px rgba(60,30,10,.14))}.hero h1{font-size:26px;margin:10px auto 6px;line-height:1.4;max-width:900px}.hero p{color:var(--muted);margin:0}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin:24px 0}.card{background:rgba(255,250,242,.96);border:1px solid var(--line);border-radius:22px;box-shadow:0 14px 35px rgba(80,45,12,.08);padding:20px}.module-card{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);min-height:110px;transition:.18s transform,.18s box-shadow}.module-card:hover{transform:translateY(-2px);box-shadow:0 18px 35px rgba(80,45,12,.13)}.module-icon{font-size:34px;width:58px;height:58px;display:flex;align-items:center;justify-content:center;border-radius:18px;background:#f4e3ca}.module-title{font-size:20px;font-weight:900}.module-status{font-size:13px;color:var(--muted);margin-top:5px}.active-status{color:var(--green);font-weight:800}.inactive{opacity:.72}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;background:var(--primary);color:white;text-decoration:none;font-weight:900;padding:11px 16px;cursor:pointer;font-size:15px}.btn:hover{background:var(--primary-dark)}.btn.secondary{background:#eee2d2;color:var(--primary)}.btn.gold{background:var(--gold);color:#21180b}.btn.danger{background:var(--red)}.btn.small{padding:7px 10px;font-size:13px;border-radius:10px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field{margin-bottom:12px}.field label{display:block;font-weight:800;margin-bottom:7px}.field .hint{color:var(--muted);font-size:12px;margin-top:4px}input,select,textarea{width:100%;border:1px solid var(--line);background:white;border-radius:14px;padding:11px 12px;font-size:15px;color:var(--ink)}textarea{min-height:90px;resize:vertical}.full{grid-column:1/-1}.section-title{font-size:20px;border-bottom:1px solid var(--line);padding-bottom:10px;margin:22px 0 14px;color:var(--primary)}.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}.auth-card{width:min(440px,94vw);text-align:center}.auth-card img{width:150px;object-fit:contain}.alert{padding:12px 14px;border-radius:14px;margin:12px 0;font-weight:700}.alert.error{background:#fde8e8;color:#7e1d1d}.alert.success{background:#e3f7eb;color:#155d37}.alert.warning{background:#fff3cd;color:#795c00}.alert.info{background:#e8f1ff;color:#1d4d7a}.table-wrap{overflow:auto;border-radius:16px;border:1px solid var(--line)}table{width:100%;border-collapse:collapse;background:white}th,td{padding:11px 12px;border-bottom:1px solid #f0e5d8;text-align:start;white-space:nowrap}th{background:#f5e6d0;color:#5f1a23}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}.stat{padding:18px;border-radius:20px;background:#fff;border:1px solid var(--line)}.stat .num{font-size:32px;font-weight:900;color:var(--primary)}.stat .label{color:var(--muted);font-weight:700}.profile-head{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}.badge{display:inline-block;background:#f1e1ca;color:#61212a;border-radius:999px;padding:6px 10px;font-weight:800;font-size:13px}.muted{color:var(--muted)}.footer{text-align:center;color:var(--muted);font-size:13px;padding:30px 0}.print-only{display:none}
@media(max-width:760px){.form-grid{grid-template-columns:1fr}.brand small{display:none}.hero h1{font-size:20px}.topbar-inner{align-items:flex-start}.nav{justify-content:flex-start}.card{padding:15px}}
@media print{.topbar,.actions,.no-print,.footer{display:none!important}.print-only{display:block}body{background:white}.card{box-shadow:none;border:1px solid #ddd}.container{width:100%;}}
.hero-subtitle{display:block;font-size:.72em;font-weight:700;color:var(--muted);margin-top:4px}.brand small b{color:var(--ink);font-weight:800}.attachments-grid .field{background:#fff;border:1px dashed var(--line);border-radius:16px;padding:12px}.attachment-current{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 14px}.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:50;display:flex;align-items:center;justify-content:center;padding:18px}.modal-backdrop[hidden]{display:none}.modal-card{width:min(760px,96vw);max-height:86vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:0 24px 80px rgba(0,0,0,.22);padding:22px}.preview-content{background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px;margin:14px 0}.preview-row{display:grid;grid-template-columns:210px 1fr;gap:8px;padding:8px;border-bottom:1px solid #f1e5d8}.preview-row:last-child{border-bottom:0}.preview-label{font-weight:900;color:var(--primary)}.date-picker{cursor:pointer;background:#fff}.calendar-modal{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:18px}.calendar-card{width:min(390px,94vw);background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:0 22px 70px rgba(0,0,0,.22);padding:16px}.calendar-head{display:flex;gap:8px;align-items:center;margin-bottom:12px}.calendar-head select{padding:9px;border-radius:12px}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}.cal-day-name{font-weight:900;color:var(--muted);font-size:12px;padding:5px}.cal-day{border:1px solid var(--line);background:#fff;border-radius:12px;padding:9px 0;cursor:pointer;font-weight:800}.cal-day:hover,.cal-day.selected{background:var(--primary);color:#fff}.cal-day.empty{visibility:hidden}.calendar-actions{display:flex;gap:8px;justify-content:space-between;margin-top:14px;flex-wrap:wrap}
@media(max-width:760px){.preview-row{grid-template-columns:1fr}.modal-card{padding:15px}}

.profile-head-with-photo{justify-content:flex-start;align-items:center}.profile-photo-box{width:150px;height:150px;border:2px solid var(--line);background:#fff;border-radius:18px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 150px}.profile-photo-box img{width:100%;height:100%;object-fit:cover}.profile-photo-empty{color:var(--muted);font-weight:800;text-align:center}.profile-title{flex:1}.person-name-print{font-size:22px;font-weight:900;margin:4px 0 10px}.row-actions{white-space:nowrap}.print-report-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}.print-report-head img{width:80px;height:80px;object-fit:contain}.report-card h2{margin:0 0 4px}.danger-zone{border-color:#f1b8b8;background:#fff5f5}@media print{.print-report-head img{width:70px;height:70px}.profile-photo-box{width:120px;height:120px;flex-basis:120px}.grid{grid-template-columns:1fr;gap:10px;margin:10px 0}.card{break-inside:avoid;margin-bottom:10px;padding:12px}th,td{padding:7px 8px;white-space:normal}.hero{padding:8px 0}.hero h1{font-size:22px}}

/* v0.2.6 - Fix clipped action buttons in RTL tables */
.table-wrap{
  padding-inline: 12px;
  overflow-x: auto;
}
.table-wrap table{
  min-width: 100%;
}
.row-actions{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 160px;
  padding-inline: 18px !important;
  white-space: nowrap;
}
.row-actions form{
  display: inline-flex !important;
  margin: 0;
}
.row-actions .btn,
.btn.tiny{
  min-width: 72px;
  padding: 10px 14px;
  line-height: 1.1;
}
body.rtl .row-actions{
  direction: rtl;
}
@media(max-width:760px){
  .row-actions{min-width: 150px; padding-inline: 14px !important;}
  .row-actions .btn,.btn.tiny{min-width: 68px; padding: 9px 12px;}
}

/* v0.2.7 - Reservation table action buttons fix */
.actions-head,
.actions-cell{
  min-width: 180px;
  width: 180px;
  text-align: center;
  white-space: nowrap;
}
.actions-cell{
  padding-inline: 14px !important;
}
.actions-cell .row-actions,
.row-actions{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  width: auto;
  padding: 0 !important;
  white-space: nowrap;
}
.actions-cell .row-actions form,
.row-actions form{
  display: inline-flex !important;
  margin: 0;
}
.actions-cell .btn.tiny,
.row-actions .btn.tiny{
  min-width: 70px;
  padding: 9px 12px;
  line-height: 1.1;
}

/* v0.2.8 - Wider reservations table/card and visible notes column */
.reservations-card{
  width: min(1500px, calc(100vw - 56px));
  max-width: none;
  margin-inline: calc((1180px - min(1500px, calc(100vw - 56px))) / 2);
  padding: 20px 26px;
}
.reservations-table-wrap{
  width: 100%;
  overflow-x: auto;
  padding-inline: 0;
}
.reservations-table{
  min-width: 1240px;
  width: 100%;
  table-layout: auto;
}
.reservations-table th,
.reservations-table td{
  vertical-align: middle;
}
.reservations-table .notes-head,
.reservations-table .notes-cell{
  min-width: 210px;
  max-width: 320px;
  white-space: normal;
  line-height: 1.55;
}
.reservations-table .actions-head,
.reservations-table .actions-cell{
  min-width: 190px;
  width: 190px;
}
@media(max-width:1300px){
  .reservations-card{
    width: calc(100vw - 28px);
    margin-inline: calc((1180px - (100vw - 28px)) / 2);
    padding: 18px;
  }
  .reservations-table{min-width: 1240px;}
}
@media(max-width:760px){
  .reservations-card{
    width: 96vw;
    margin-inline: calc((94vw - 96vw) / 2);
    padding: 14px;
  }
}

.app-version{display:inline-block;margin-top:6px;font-size:14px;font-weight:700;color:#8a1f2d;letter-spacing:.2px}

/* v0.3.0 - Put reservation actions at the end after notes and prevent clipping */
.reservations-card{
  width: min(1760px, 96vw);
  max-width: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-inline: 0;
  padding: 22px 28px;
}
body.rtl .reservations-card{
  left: auto;
  right: 50%;
  transform: translateX(50%);
}
.reservations-table-wrap{
  width: 100%;
  overflow-x: auto;
  padding-inline: 0;
}
.reservations-table{
  min-width: 1420px;
  width: 100%;
  table-layout: auto;
}
.reservations-table .notes-head,
.reservations-table .notes-cell{
  min-width: 260px;
  max-width: 420px;
  white-space: normal;
  line-height: 1.55;
}
.reservations-table .actions-head,
.reservations-table .actions-cell{
  min-width: 190px;
  width: 190px;
  text-align: center;
  white-space: nowrap;
}
.reservations-table .actions-cell .row-actions{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 170px;
  padding: 0 !important;
  white-space: nowrap;
}
.reservations-table .actions-cell .btn.tiny{
  min-width: 74px;
  padding: 9px 13px;
}
@media(max-width:760px){
  .reservations-card{
    width: 96vw;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    padding: 14px;
  }
  body.rtl .reservations-card{
    left: auto;
    right: 50%;
    transform: translateX(50%);
  }
  .reservations-table{min-width: 1380px;}
}


/* v0.3.1 - Make reservation Notes column same size as Actions column */
.reservations-table .notes-head,
.reservations-table .notes-cell{
  min-width: 190px !important;
  width: 190px !important;
  max-width: 190px !important;
  white-space: normal;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.reservations-table .actions-head,
.reservations-table .actions-cell{
  min-width: 190px !important;
  width: 190px !important;
  max-width: 190px !important;
}
.reservations-table{
  min-width: 1290px;
}
@media(max-width:760px){
  .reservations-table{min-width:1290px;}
}


/* v0.3.2 - Make reservation Notes column compact (yellow-marked area) */
.reservations-table .notes-head,
.reservations-table .notes-cell{
  min-width: 100px !important;
  width: 100px !important;
  max-width: 100px !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
}
.reservations-table .actions-head,
.reservations-table .actions-cell{
  min-width: 190px !important;
  width: 190px !important;
  max-width: 190px !important;
}
.reservations-table{
  min-width: 1200px !important;
}


/* v0.3.3 - Reduce left/right empty space around reservations card */
.reservations-card{
  width: min(1980px, calc(100vw - 10px)) !important;
  max-width: none !important;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-inline: 0 !important;
  padding: 18px 16px !important;
}
body.rtl .reservations-card{
  left: auto;
  right: 50%;
  transform: translateX(50%);
}
.reservations-table-wrap{
  margin-inline: 0 !important;
}
@media(max-width:760px){
  .reservations-card{
    width: calc(100vw - 8px) !important;
    padding: 12px 10px !important;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  body.rtl .reservations-card{
    left: auto;
    right: 50%;
    transform: translateX(50%);
  }
}


/* v0.3.4 - Slightly reduce the width of Add/Edit Reservation form */
.reservation-form-card{
  width: min(980px, 92vw);
  max-width: 980px;
  margin-inline: auto;
}
.reservation-form-card select[data-person-select]{
  max-width: 100%;
}
@media(max-width:760px){
  .reservation-form-card{
    width: 96vw;
    max-width: 96vw;
  }
}


/* v0.3.5 - Further reduce side gaps around reservations table card */
.reservations-card{
  width: calc(100vw - 6px) !important;
  max-width: calc(100vw - 6px) !important;
  margin-left: calc(50% - 50vw + 3px) !important;
  margin-right: calc(50% - 50vw + 3px) !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  padding: 16px 12px !important;
}
body.rtl .reservations-card{
  margin-right: calc(50% - 50vw + 3px) !important;
  margin-left: calc(50% - 50vw + 3px) !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}
@media(max-width:760px){
  .reservations-card{
    width: calc(100vw - 4px) !important;
    max-width: calc(100vw - 4px) !important;
    margin-left: calc(50% - 50vw + 2px) !important;
    margin-right: calc(50% - 50vw + 2px) !important;
    padding: 12px 8px !important;
  }
}


/* v0.3.7 - Make reservations card 90% width and centered */
.reservations-card{
  width: min(1500px, 90vw) !important;
  max-width: min(1500px, 90vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  padding: 18px 18px !important;
}
body.rtl .reservations-card{
  margin-left: auto !important;
  margin-right: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}
@media(max-width:760px){
  .reservations-card{
    width: 94vw !important;
    max-width: 94vw !important;
    padding: 12px 10px !important;
  }
}


/* v0.3.8 - Center reservations card exactly in the page/viewport */
.reservations-card{
  width: min(1500px, 90vw) !important;
  max-width: min(1500px, 90vw) !important;
  margin-left: calc(50% - min(750px, 45vw)) !important;
  margin-right: calc(50% - min(750px, 45vw)) !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  padding: 18px 18px !important;
  box-sizing: border-box;
}
body.rtl .reservations-card{
  margin-left: calc(50% - min(750px, 45vw)) !important;
  margin-right: calc(50% - min(750px, 45vw)) !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}
@media(max-width:760px){
  .reservations-card{
    width: 94vw !important;
    max-width: 94vw !important;
    margin-left: 3vw !important;
    margin-right: 3vw !important;
    padding: 12px 10px !important;
  }
  body.rtl .reservations-card{
    margin-left: 3vw !important;
    margin-right: 3vw !important;
  }
}


/* v0.3.9 - Footer developer credit */
.developer-credit{
  display:inline-block;
  margin-top:6px;
  font-size:14px;
  font-weight:700;
  color:#6f5d4b;
}


/* v0.4.1 - Reservation person autocomplete and attachment previews */
.person-suggestions{
  display:none;
  margin-top:8px;
  max-height:230px;
  overflow:auto;
  border:1px solid var(--line);
  background:#fff;
  border-radius:16px;
  box-shadow:0 14px 35px rgba(80,45,12,.10);
  padding:6px;
}
.person-suggestions.open{display:block;}
.person-suggestion{
  display:block;
  width:100%;
  border:0;
  border-radius:12px;
  background:#fff;
  padding:10px 12px;
  text-align:start;
  font-weight:800;
  color:var(--ink);
  cursor:pointer;
}
.person-suggestion:hover{background:#f5e6d0;color:var(--primary);}
input[readonly]{background:#f8f1e8;color:#5d5146;font-weight:700;}
.attachments-preview-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
  margin-top:12px;
}
.attachment-preview-item{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px;
  min-height:190px;
}
.attachment-preview-head{margin-bottom:8px;}
.attachment-thumb{
  width:100%;
  height:140px;
  object-fit:cover;
  border-radius:14px;
  border:1px solid #f0e5d8;
  background:#fafafa;
}
.attachment-pdf{
  width:100%;
  height:180px;
  border:1px solid #f0e5d8;
  border-radius:14px;
  background:#fafafa;
}
.attachment-file-box{
  height:140px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed var(--line);
  border-radius:14px;
  font-size:38px;
  background:#fffaf2;
}
.attachment-name{
  display:block;
  margin-top:8px;
  font-size:13px;
  font-weight:800;
  color:var(--primary);
  text-decoration:none;
  overflow-wrap:anywhere;
}


/* v0.4.5 - Ensure unmatched person suggestions are truly hidden */
.person-suggestion[hidden]{
  display:none !important;
}


/* v0.4.6 - Person search rows hidden by prefix live filter */
[data-person-row][hidden],
[data-person-no-results][hidden]{
  display:none !important;
}


/* v0.4.8 - Monastic Candidates module */
.candidate-form-card textarea{
  min-height: 86px;
}
.attachments-preview-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin-top:14px;
}
.attachment-preview-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px;
  overflow:hidden;
}
.attachment-preview-title{
  font-weight:900;
  color:var(--primary);
  margin-bottom:10px;
  line-height:1.45;
}
.attachment-preview-title span{
  font-weight:600;
  color:var(--muted);
  font-size:12px;
}
.attachment-preview-card img{
  width:100%;
  height:220px;
  object-fit:contain;
  background:#f8f0e6;
  border-radius:14px;
  border:1px solid #f0e5d8;
}
.attachment-preview-card object{
  width:100%;
  height:260px;
  border:1px solid #f0e5d8;
  border-radius:14px;
}
@media print{
  .attachments-preview-grid{grid-template-columns:repeat(2,1fr);}
  .attachment-preview-card object{height:220px;}
}

/* v0.4.9 - Top site sections dropdown and candidate form refinements */
.nav-dropdown{position:relative;display:inline-flex;align-items:center;}
.nav-dropdown-btn{border:0;background:transparent;color:var(--primary);font-weight:900;padding:8px 12px;border-radius:12px;cursor:pointer;font-size:15px;font-family:inherit;}
.nav-dropdown-btn:hover,.nav-dropdown:focus-within .nav-dropdown-btn{background:#f1e2ce;}
.nav-dropdown-menu{display:none;position:absolute;top:100%;inset-inline-start:0;min-width:240px;background:#fffaf2;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 44px rgba(80,45,12,.16);padding:8px;z-index:20;}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{display:block;}
.nav-dropdown-menu a{display:block;white-space:nowrap;padding:10px 12px;border-radius:12px;color:var(--primary);text-decoration:none;font-weight:800;}
.nav-dropdown-menu a:hover{background:#f1e2ce;}
.nav-dropdown-menu .nav-disabled{opacity:.65;}
.candidate-form-card input:not([type="file"]),.candidate-form-card select{min-height:46px;}
.candidate-form-card input[name="full_name"],.candidate-form-card input[name="phone"],.candidate-form-card input[name="national_id"]{font-weight:800;}
@media(max-width:900px){.nav-dropdown-menu{inset-inline-start:auto;inset-inline-end:0;}.topbar-inner{gap:10px}.nav{gap:4px}}

/* v0.5.0 - Sync page helpers */
.nav a, .nav-dropdown-btn{white-space:nowrap}
code{background:#fff;border:1px solid var(--line);padding:4px 6px;border-radius:8px;display:inline-block;margin-top:5px}


/* v0.5.5 - password visibility toggle */
.password-toggle-wrap{position:relative;display:flex;align-items:center}.password-toggle-wrap input{padding-inline-end:48px}.password-toggle-btn{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:18px;line-height:1;padding:4px 6px;border-radius:8px}.password-toggle-btn:hover{color:var(--primary);background:#f5ecdf}.password-toggle-btn:focus{outline:2px solid #d8c2a0;outline-offset:2px}.password-toggle-btn[aria-pressed="true"]{color:var(--primary)}