/* ======================================================
  MICROSOFT OFFICE (FLUENT UI) + KHMER FONT FULL CSS (CORRECTED)
====================================================== */

/* ---------- Google Khmer Fonts (backup) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Battambang:wght@300;400;700&family=Noto+Sans+Khmer:wght@300;400;600;700&display=swap');

/* ---------- Local Khmer Fonts ---------- */
/* If css is /assets/css/style.css and fonts are /assets/fonts/ => ../fonts/... */
@font-face{
  font-family:'Khmer OS Siemreap';
  src:
    url('../fonts/KhmerOSsiemreap.ttf') format('truetype'),
    url('../fonts/KhmerOSSiemreap.ttf') format('truetype'); /* fallback if filename differs */
  font-display:swap;
}
@font-face{
  font-family:'Khmer OS Muol Light';
  src:
    url('../fonts/KhmerOSmuollight.ttf') format('truetype'),
    url('../fonts/KhmerOSMuolLight.ttf') format('truetype'); /* fallback if filename differs */
  font-display:swap;
}

:root{
  /* Backgrounds */
  --bg:#f3f2f1;
  --bg2:#faf9f8;
  --panel:#ffffff;
  --panel2:#ffffff;

  /* Borders */
  --line:#edebe9;

  /* Text */
  --text:#323130;
  --muted:#605e5c;

  /* Accent */
  --primary:#0078d4;
  --primary2:#106ebe;
  --focus: rgba(0,120,212,.22);

  /* Status */
  --success:#107c10;
  --danger:#d13438;
  --warning:#ffb900;
  --info:#005a9e;

  /* Radius & shadow */
  --radius:12px;
  --radius2:8px;
  --shadow: 0 6px 18px rgba(0,0,0,.08);
  --shadow2: 0 2px 8px rgba(0,0,0,.06);
}

/* =================== RESET =================== */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:"Khmer OS Siemreap","Noto Sans Khmer","Battambang","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 18% 0%, rgba(0,120,212,.10), transparent 60%),
    radial-gradient(900px 520px at 85% 12%, rgba(16,124,16,.06), transparent 65%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  line-height:1.85;
  text-rendering:optimizeLegibility;
}

body, button, input, select, textarea{
  font-feature-settings:"kern" 1,"liga" 1;
}

a{ color:var(--primary); text-decoration:none; }
a:hover{ color:var(--primary2); }

/* =================== APP LAYOUT =================== */
.app{
  display:grid;
  grid-template-columns:260px 1fr;
  min-height:100vh;
}
.app.collapsed{ grid-template-columns:86px 1fr; }
.main{ padding:18px 18px 28px; }

/* =================== SIDEBAR =================== */
.sidebar{
  height:100vh;
  position:sticky;
  top:0;
  padding:14px;
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border-right:1px solid var(--line);
  box-shadow:6px 0 18px rgba(0,0,0,.04);
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px 10px 14px;
  border-bottom:1px solid var(--line);
  margin-bottom:10px;
}
.logo{
  width:44px;
  height:44px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg,var(--primary),#60a5fa);
}


.dashboard-title{
    font-size:20px;
    color:#1f2937;
}

.dashboard-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.action-btn{
    width:48px;
    height:48px;
    border-radius:16px;
    border:1px solid #e5e7eb;
    background:#fff;
    color:#374151;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    transition:all .18s ease;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
    font-size:20px;
}

.action-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(0,0,0,.12);
}

.action-btn.primary{
    background:#0d6efd;
    color:#fff;
    border-color:#0d6efd;
}

.action-btn.warning{
    background:#fff7e6;
    color:#b7791f;
    border-color:#f6d58d;
}

.action-btn.info{
    background:#eef6ff;
    color:#2563eb;
    border-color:#bfdbfe;
}

.action-btn.primary:hover{
    background:#0b5ed7;
    color:#fff;
}

.action-btn.warning:hover{
    background:#fef3c7;
    color:#92400e;
}

.action-btn.info:hover{
    background:#dbeafe;
    color:#1d4ed8;
}
.brand .t1{
  font-family:"Khmer OS Muol Light","Noto Sans Khmer","Battambang","Segoe UI",sans-serif;
  font-weight:900;
  line-height:1.2;
  font-size:15px;
}
.brand .t2{
  font-size:12px;
  color:var(--muted);
  line-height:1.3;
}

.menu{ margin-top:8px; }

.navlink{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:8px;
  color:var(--text);
  margin:6px 0;
  border:1px solid transparent;
  transition:.15s ease;
}
.navlink i{ font-size:18px; color:var(--muted); }
.navlink:hover{
  background:rgba(50,49,48,.05);
  border-color:var(--line);
}
.navlink.active{
  background:#e5f1fb;
  border-color:#c7e0f4;
  color:#004578;
}
.navlink.active i{ color:#004578; }

.sidebar-bottom{
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid var(--line);
}

.app.collapsed .brand .text,
.app.collapsed .navlink span{ display:none; }
.app.collapsed .navlink{ justify-content:center; }

.badge-new{
  margin-left:auto;
  min-width:22px;
  height:22px;
  padding:0 6px;
  background:#ff3b30;
  color:#fff;
  border-radius:50px;
  font-size:12px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:pulse 1.5s infinite;
}

@keyframes pulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.15); }
  100%{ transform:scale(1); }
}

/* =================== TOPBAR =================== */
.topbar{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  box-shadow:var(--shadow2);
  margin-bottom:16px;
}

.page-title{
  font-family:"Khmer OS Muol Light","Noto Sans Khmer","Battambang","Segoe UI",sans-serif;
  font-weight:900;
  font-size:16px;
  line-height:1.25;
}
.page-subtitle{ font-size:12px; color:var(--muted); }

.btn-ghost{
  border:1px solid var(--line);
  background:#ffffff;
  color:var(--text);
  border-radius:8px;
  padding:8px 10px;
  transition:.15s ease;
  box-shadow:var(--shadow2);
}
.btn-ghost:hover{
  background:rgba(50,49,48,.03);
  transform:translateY(-1px);
}
.btn-ghost:active{ transform:translateY(0); }

.toggle-icon{ font-size:20px; transition:transform .25s ease; }
.app.collapsed .toggle-icon{ transform:rotate(180deg); }

/* =================== WIDE SEARCH =================== */
.topbar-center{ flex:1; display:flex; justify-content:center; }

.search-box{
  position:relative;
  width:100%;
  max-width:640px;
  transition:max-width .25s ease;
}
.search-box:focus-within{ max-width:760px; }

.search-box input{
  width:100%;
  padding:12px 16px 12px 46px;
  border-radius:999px;
  border:1px solid rgba(237,235,233,1);
  background:#ffffff;
  color:var(--text);
  outline:none;
  font-size:15px;
  transition:.15s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.search-box input::placeholder{ color:#8a8886; }
.search-box input:focus{
  border-color:rgba(0,120,212,.55);
  box-shadow:0 0 0 3px var(--focus);
}

/* HTML uses: <i class="bi bi-search search-inside-icon"></i> */
.search-inside-icon{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  color:#8a8886;
  font-size:18px;
  pointer-events:none;
}

/* =================== SUGGEST DROPDOWN =================== */
.suggest-box{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 8px);
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  overflow:hidden;
  z-index:50;
}
.suggest-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  cursor:pointer;
  transition:.12s ease;
}
.suggest-item i{
  margin-top:2px;
  color:#8a8886;
}
.suggest-item:hover{ background:rgba(50,49,48,.05); }
.suggest-muted{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:min(540px, 100%);
}

/* =================== PANELS =================== */
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:var(--shadow2);
}

.muted{ color:var(--muted); }

/* =================== TABLE =================== */
.table-responsive{
  border-radius:12px;
  overflow:hidden; /* ✅ actually clips rounded corners */
}

.table-darkx{
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--line);
  margin-bottom:0;
}

.table-darkx thead th{
  color:var(--muted);
  font-weight:700;
  font-size:0.95rem;          /* ✅ your bigger head */
  border-bottom:1px solid var(--line);
  letter-spacing:.2px;
  text-transform:none;        /* ✅ avoid forced uppercase if Khmer */
}

.table-darkx tbody tr:hover{ background:rgba(50,49,48,.03); }

/* =================== FORMS =================== */
.form-control,
.form-select{
  background:#ffffff !important;
  border:1px solid rgba(237,235,233,1) !important;
  color:var(--text) !important;
  border-radius:8px !important;
  box-shadow:none !important;
}
.form-control::placeholder{ color:rgba(96,94,92,.75) !important; }
.form-control:focus,
.form-select:focus{
  border-color:rgba(0,120,212,.65) !important;
  box-shadow:0 0 0 3px var(--focus) !important;
  outline:none !important;
}

/* =================== BUTTONS =================== */
.btn{ border-radius:8px !important; }

.btn-primary{
  background:var(--primary) !important;
  border:1px solid transparent !important;
  box-shadow:none !important;
}
.btn-primary:hover{ background:var(--primary2) !important; }

.btn-outline-secondary{ border-color:#c8c6c4 !important; }
.btn-outline-secondary:hover{ background:rgba(50,49,48,.04) !important; }

.btn-outline-danger{ border-color:rgba(209,52,56,.35) !important; }
.btn-outline-danger:hover{ background:rgba(209,52,56,.08) !important; }

/* =================== PAGINATION =================== */
.pagination .page-link{
  border:1px solid var(--line);
  color:var(--text);
  background:#fff;
  border-radius:8px;
  margin:0 3px;
  padding:8px 12px;
}
.pagination .page-link:hover{ background:rgba(50,49,48,.04); }
.pagination .page-item.active .page-link{
  background:#e5f1fb;
  border-color:#c7e0f4;
  color:#004578;
}
.pagination .page-item.disabled .page-link{ opacity:.6; }

/* === Donations mini summary cards (Office Fluent) === */
.summary-cards{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}

.mini-card{
  min-width: 150px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: var(--shadow2);
  display:flex;
  align-items:center;
  gap:10px;
}

.mini-card .mc-icon{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(0,120,212,.08);
  color: var(--primary);
  flex: 0 0 auto;
}

.mini-card.green .mc-icon{
  background: rgba(16,124,16,.08);
  color: var(--success);
}
.mini-card.orange .mc-icon{
  background: rgba(255,185,0,.16);
  color: #8a5a00;
}

.mini-card .mc-meta{
  min-width: 0;
  line-height: 1.2;
}

.mini-card .mc-label{
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.mini-card .mc-value{
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
}





/* =================== MODAL =================== */
.modal-content{
  background:#ffffff !important;
  color:var(--text) !important;
  border:1px solid rgba(237,235,233,1) !important;
  border-radius:12px !important;
  box-shadow:var(--shadow);
}
.modal-header,
.modal-footer{
  border-color:rgba(237,235,233,1) !important;
}

/* =================== NICE SCROLLBAR =================== */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{
  background:rgba(96,94,92,.25);
  border-radius:999px;
  border:2px solid rgba(0,0,0,0);
  background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{ background:rgba(96,94,92,.35); }

/* =================== RESPONSIVE =================== */
@media (max-width: 992px){
  .topbar-center{ display:none; }
  .app{ grid-template-columns:86px 1fr; }
  .sidebar .brand .text, .sidebar .navlink span{ display:none; }
  .sidebar .navlink{ justify-content:center; }
}