/* Global layout safety: prevent horizontal overflow and enforce sane sizing */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important; /* stop content from spilling off the left/right */
}
/* System-wide visual nudge: move all pages 3mm to the right (except pages that override it locally) */
body {
  padding-left: 3mm !important;
}
*, *::before, *::after { box-sizing: border-box; }

/* Ensure common UI elements (which sometimes do not inherit on some browsers) also use the same font */
button, input, select, textarea,
.btn,
.form-control, .form-select, label,
table, th, td,
.nav, .nav-tabs .nav-link, .dropdown-menu, .dropdown-item,
.badge, .alert, .modal, .popover, .tooltip,
.pagination, .breadcrumb {
  font-family: inherit !important;
}

/* Explicitly ensure English-marked content also uses the same font stack */
:lang(en), [lang="en"], [lang^="en-"] {
  font-family: inherit !important;
}

/* Preserve monospace contexts (e.g., code blocks); keep as monospace regardless */
pre, code, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; }

/* Ensure embedded modules (e.g., Team Chat) inherit the system default */
.tc-root { font-family: inherit !important; }

/* The actual triangle (::before) positioned on the left side of the card */
.triangle-card::before {
    content: "";
    position: absolute;
    top: 50%; /* Center vertically */
    left: -20px; /* Position outside the card */
    margin-top: -10px; /* Adjust for vertical centering */
    /* Create the triangle using border trickery */
    border-width: 10px 20px 10px 0; /* Top | Right (Pointer Length) | Bottom | Left */
    border-style: solid;
    border-color: transparent #fff transparent transparent; /* White border to match card background */
}

/* Font size for headers related to Khum and Phum names */
h1.page-title,
th,
.headers-khum-name {
    font-size: 20px !important;
}

/* Normalize page header alignment (remove accidental negative offsets) */
h1.page-title, h2.page-title, .page-title,
h1, h2, h3 {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* System-wide: shift page headers' text 3mm to the right without changing layout */
h1, h2, h3,
.page-title,
.list-header-title {
  text-indent: 3mm !important;
}
/* Also shift the base template's top-left header block */
.page-header-text {
  text-indent: 3mm !important;
}

/* Prevent common wide elements from overflowing viewport */
.data-table,
.table,
.member-list-container,
.member-search-form,
.table-responsive,
.table-responsive-wrapper {
  max-width: 100% !important;
}
.table-responsive, .table-responsive-wrapper { overflow-x: auto; }

/* System-wide fix: ensure the Age column header wraps within its cell
   The Khmer label "អាយុ (ឆ្នាំ)" is longer than very narrow columns
   in some tables where headers are forced to nowrap. */
th.col-age {
  white-space: normal !important; /* override page-level header nowrap */
  overflow-wrap: anywhere;        /* allow wrapping at any point if needed */
  word-break: keep-all;           /* prefer not to break Khmer words arbitrarily */
  line-height: 1.15;
}
/* Slightly widen the Age column across the app to better fit the header */
.col-age {
  width: 64px !important; /* override pages that fix it too narrow (e.g., 40px) */
}

/* Inputs: keep within viewport and make placeholder visible properly */
input[type="text"], input[type="number"], input[type="email"], input[type="password"],
select, textarea, .form-control {
  max-width: 100% !important;
}
input::placeholder, textarea::placeholder { opacity: .7; }

/* System-wide: move placeholder text 3mm to the right, but keep typed text aligned normally */
input:placeholder-shown,
textarea:placeholder-shown,
.form-control:placeholder-shown {
  text-indent: 3mm !important;
}
/* Also indent placeholder pseudo-element for broader browser support */
input::placeholder,
textarea::placeholder {
  text-indent: 3mm !important;
}
input:not(:placeholder-shown),
textarea:not(:placeholder-shown),
.form-control:not(:placeholder-shown) {
  text-indent: 0 !important;
}

/* Utility: opt-out of the 3mm indent (for specific pages/elements) */
.no-indent { text-indent: 0 !important; }
.no-indent::placeholder { text-indent: 0 !important; }
.no-indent:placeholder-shown { text-indent: 0 !important; }

/* ---------------------------------------------- */
/* Targeted overrides to stop left overflow       */
/* ---------------------------------------------- */
/* Some pages used viewport hacks (100vw + negative margins) that cause the
   whole layout to shift off-screen on the left. Normalize them here. */
.full-width-split {
  width: 100% !important;          /* avoid 100vw which includes scrollbar */
  position: relative !important;
  left: 0 !important;
  right: auto !important;
  margin-left: 0 !important;       /* cancel margin-left: -50vw */
  margin-right: 0 !important;      /* cancel margin-right: -50vw */
  padding-left: 16px !important;   /* reasonable gutter */
  padding-right: 16px !important;
  overflow-x: auto !important;     /* if inner content is wider, scroll that area */
}

/* Ensure the split columns don’t force overflow on narrow screens */
.full-width-split .split-column {
  flex: 1 1 0 !important;
  max-width: 100% !important;
}
@media (min-width: 992px) {
  .full-width-split .split-column { flex: 0 0 50% !important; max-width: 50% !important; }
}

/* Dashboard row using negative outer margins — neutralize to prevent left bleed */
.dashboard-split-row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Utility: force text to stay on a single line */
.nowrap {
  white-space: nowrap !important;
}

/* Life status highlight colors */
.status-alive {
    color: #0d6efd !important; /* Bootstrap primary blue */
    font-weight: 600;
}
.status-deceased {
    color: #dc3545 !important; /* Bootstrap danger red */
    font-weight: 600;
}

/* ----------------------------------------------------- */
/* Global button consistency styles (system-wide)        */
/* ----------------------------------------------------- */

/*
  System-wide standard font size for ALL buttons (floating, fixed, inline)
  - Define a single variable and apply to all button elements and Bootstrap .btn variants.
  - Force uniform size across custom button classes and size modifiers (btn-sm, btn-lg).
*/
:root {
  --btn-font-size: 0.8rem; /* standardized to match "ចាកចេញ" button on Add Member page */
}

/* Apply to native buttons, inputs, and Bootstrap buttons */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
a.btn,
.btn {
  font-size: var(--btn-font-size) !important;
  line-height: 1.1; /* compact, readable for Khmer */
}

/* Ensure Bootstrap size modifiers do NOT change font size (uniform across the system) */
.btn-sm,
.btn-lg,
.btn-xl {
  font-size: var(--btn-font-size) !important;
}

/* Neutral grey action button */
.btn-custom-grey {
  background-color: #6c757d !important;
  color: #fff !important;
  border: 1px solid #5a6268 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
  text-decoration: none !important;
}
.btn-custom-grey:hover {
  background-color: #5a6268 !important;
}

/* Red logout button */
.btn-oval-logout-lg {
  background-color: #dc3545 !important;
  color: #fff !important;
  border: 1px solid #c82333 !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  font-size: inherit !important; /* inherit the system-wide standard */
  padding: 8px 18px !important;
}
.btn-oval-logout-lg:hover { background-color: #c82333 !important; }

/* Unified large oval size */
.btn-oval-lg {
  border-radius: 50px !important;
  font-size: inherit !important; /* inherit the system-wide standard */
  padding: 8px 18px !important;
}

/* Subtle elevation to match Reports buttons */
.btn-elevated {
  box-shadow: 0 2px 4px rgba(0,0,0,0.12) !important;
}

/* Burgundy rectangular button for primary actions on My Desk */
.btn-burgundy {
  background-color: #800020 !important; /* burgundy */
  color: #ffffff !important;
  border: 1px solid #6a001a !important;
  border-radius: 6px !important; /* rectangular (slight radius) */
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  line-height: 1.4 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  text-decoration: none !important;
}
.btn-burgundy:hover {
  background-color: #6e001b !important;
  border-color: #5a0016 !important;
}
.btn-burgundy:focus {
  box-shadow: 0 0 0 0.2rem rgba(128, 0, 32, 0.35) !important;
}

/* Ensure My Desk action buttons use fixed physical size */
.mydesk-actions .btn {
  flex: none; /* grid will manage placement; no flex growth */
  min-height: 0; /* reset previous rule */
}

/* Enforce fixed size: width=60mm, height=15mm; center labels */
.mydesk-actions {
  /* Stack buttons vertically (one per row) */
  display: grid !important;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(15mm, 15mm);
  gap: 8px;
  width: 100%;
  justify-content: start; /* align items to the left */
}
.mydesk-actions .btn {
  width: 60mm !important;
  height: 15mm !important;
  box-sizing: border-box !important;
  padding: 0 4px !important; /* prevent height overflow */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.2 !important;
  white-space: normal !important; /* allow wrapping Khmer labels */
}

/* Ensure left-side action menu buttons (e.g., Dashboard) have consistent layout */
.action-list {
  list-style: none;
  padding-left: 0;
  margin: 15px 0 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  align-items: start;
}
.action-list li { list-style: none; margin: 0; padding: 0; }
.action-list .btn {
  /* Do NOT force a fixed height so it matches Reports’ natural height from padding */
  display: inline-flex;         /* center vertically like Reports */
  align-items: center;          /* vertical alignment */
  white-space: nowrap;          /* labels on one line */
  width: 100%;                  /* fill grid cell width responsively */
  max-width: 100%;
}

/* On small screens keep vertical layout (one per row) */
@media (max-width: 576px) {
  .mydesk-actions { grid-template-columns: 1fr; }
}

/* Unified small button size (for table action buttons) */
.btn-small {
  font-size: inherit !important; /* keep system-wide uniform button label size */
  padding: 4px 8px !important;
  border-radius: 4px !important;
}

/* Floating footer utility (bottom-left) */
.footer-actions-fixed {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 1000;
  display: flex;
  gap: 10px;
  align-items: center;
}
.margin-right-lg { margin-right: 10px !important; }

/* Ensure buttons/links never show underline and keep label in one line */
.footer-actions-fixed a,
.btn,
.btn:hover,
.btn:focus,
a.btn,
a.btn:hover,
a.btn:focus {
  text-decoration: none !important;
  white-space: nowrap;
}

/* ---------------------------------------------- */
/* Top-right actions (Back/Logout) container      */
/* ---------------------------------------------- */
.top-right-actions {
  position: fixed;
  top: 3mm;
  right: 3mm;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 2mm;
}
@media (max-width: 480px) {
  .top-right-actions { top: 2mm; right: 2mm; gap: 2mm; }
}

/* ---------------------------------------------- */
/* Floating back button (bottom-left)             */
/* ---------------------------------------------- */
.btn-oval-grey {
  background-color: #6c757d !important; /* Bootstrap secondary grey */
  color: #fff !important;
  border: 1px solid #5a6268 !important;
  border-radius: 999px !important; /* full oval */
  padding: 8px 18px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
.btn-oval-grey:hover { background-color: #5a6268 !important; }

.floating-back {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 1100;
}

/* ---------------------------------------------- */
/* Fallback layout utilities (Bootstrap-independent) */
/* ---------------------------------------------- */
/* Ensure two inputs align side-by-side with equal width */
.two-col-flex {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.two-col-flex .col-half {
  flex: 1 1 320px; /* grow, shrink, basis */
  min-width: 280px;
}
/* Make sure inputs stretch full width inside custom columns */
.two-col-flex .col-half input[type="text"],
.two-col-flex .col-half input[type="email"],
.two-col-flex .col-half input[type="password"],
.two-col-flex .col-half select,
.two-col-flex .col-half textarea {
  width: 100% !important;
}

/* ---------------------------------------------- */
/* Utility: push content 4cm from top              */
/* ---------------------------------------------- */
.top-margin-4cm {
  margin-top: 4cm !important;
}

/* ---------------------------------------------- */
/* Professional form card layout for utility pages */
/* ---------------------------------------------- */
.form-card {
  background-color: #fff;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  padding: 18px 18px 16px 18px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}
.form-card__header {
  margin-bottom: 14px;
}
.form-card__title {
  margin: 0 0 6px 0;
  font-size: 1.15rem;
  color: #343a40;
}
.form-card__subtitle {
  margin: 0;
  font-size: 0.92rem;
  color: #6c757d;
}

/* Fallback utilities if Bootstrap not present */
.d-flex { display: flex; }
.gap-2 { gap: 0.5rem; }
.mt-2 { margin-top: 0.5rem; }
.mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: 1rem; }
.small { font-size: 0.875rem; }
.text-danger { color: #dc3545 !important; }
.alert { padding: .5rem .75rem; border: 1px solid transparent; border-radius: .25rem; }
.alert-danger { color: #842029; background-color: #f8d7da; border-color: #f5c2c7; }

/* ---------------------------------------------- */
/* Banner link (legacy, still used in some places) */
/* ---------------------------------------------- */
.link-banner {
  background: #eef3f7;
  border: 1px solid #d6e0e7;
  border-left: 4px solid #6c757d;
  padding: 10px 12px;
  border-radius: 8px;
}
.link-banner a { color: #343a40; text-decoration: none !important; display: inline-block; }
.link-banner a:hover { color: #000; }
.link-banner .banner-label { font-weight: 600; }

/* ---------------------------------------------- */
/* New: Professional banner card (full-width link) */
.banner-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, #f4f7fb 0%, #eef3f7 100%);
  border: 1px solid #d6e0e7;
  border-left: 5px solid #6c757d; /* match app grey */
  padding: 12px 14px;
  border-radius: 10px;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.banner-card:hover {
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
  transform: translateY(-1px);
  border-left-color: #5a6268;
}
.banner-card__icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  background: #6c757d;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.banner-card__text {
  display: flex;
  flex-direction: column;
}
.banner-card__title {
  margin: 0;
  font-weight: 700;
  color: #2f3941;
  line-height: 1.2;
}
.banner-card__subtitle {
  margin: 2px 0 0 0;
  font-size: 0.9rem;
  color: #5f6b72;
}
.banner-card-link {
  text-decoration: none !important;
  color: inherit !important;
  display: block;
}

/* Inline, compact banner variant to sit next to buttons */
.banner-card--inline {
  padding: 10px 12px;
  border-left-width: 4px;
  align-items: center;
}
.banner-card--inline .banner-card__icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  font-size: 16px;
}
.banner-card--inline .banner-card__title {
  font-size: 0.98rem;
}
.banner-card--inline .banner-card__subtitle {
  font-size: 0.82rem;
}

/* ------------------------------------------------------------ */
/* System-wide: Dark green theme for fixed Back/Logout buttons  */
/* Ensure this wins over .btn-burgundy and page-scoped styles   */
/* ------------------------------------------------------------ */
/* Base state */
.btn.fixed-back-btn,
.btn.fixed-logout-btn,
.btn-burgundy.fixed-back-btn,
.btn-burgundy.fixed-logout-btn,
.mydesk-page .btn.fixed-back-btn,
.mydesk-page .btn.fixed-logout-btn,
.mydesk-page .btn-burgundy.fixed-back-btn,
.mydesk-page .btn-burgundy.fixed-logout-btn {
  background-color: #0f5132 !important; /* dark green */
  border-color: #0b3d26 !important;
  color: #ffffff !important;
}
.btn.fixed-back-btn i,
.btn.fixed-logout-btn i,
.mydesk-page .btn.fixed-back-btn i,
.mydesk-page .btn.fixed-logout-btn i { color: #ffffff !important; }

/* Hover state */
.btn.fixed-back-btn:hover,
.btn.fixed-logout-btn:hover,
.btn-burgundy.fixed-back-btn:hover,
.btn-burgundy.fixed-logout-btn:hover,
.mydesk-page .btn.fixed-back-btn:hover,
.mydesk-page .btn.fixed-logout-btn:hover,
.mydesk-page .btn-burgundy.fixed-back-btn:hover,
.mydesk-page .btn-burgundy.fixed-logout-btn:hover {
  background-color: #0b3d26 !important;
  border-color: #072a1b !important;
}

/* Focus state */
.btn.fixed-back-btn:focus,
.btn.fixed-logout-btn:focus,
.btn-burgundy.fixed-back-btn:focus,
.btn-burgundy.fixed-logout-btn:focus,
.mydesk-page .btn.fixed-back-btn:focus,
.mydesk-page .btn.fixed-logout-btn:focus,
.mydesk-page .btn-burgundy.fixed-back-btn:focus,
.mydesk-page .btn-burgundy.fixed-logout-btn:focus {
  box-shadow: 0 0 0 0.2rem rgba(15,81,50,0.35) !important;
}

/* ------------------------------------------------------------ */
/* My Desk page: enforce dark green for its local Back/Logout   */
/* These buttons do not use .fixed-* classes; target by ID      */
/* ------------------------------------------------------------ */
.mydesk-page #mydeskBackBtn.btn,
.mydesk-page #mydeskLogoutBtn.btn,
.mydesk-page #mydeskBackBtn.btn-burgundy,
.mydesk-page #mydeskLogoutBtn.btn-burgundy {
  background-color: #0f5132 !important; /* dark green */
  border-color: #0b3d26 !important;
  color: #ffffff !important;
}
.mydesk-page #mydeskBackBtn.btn i,
.mydesk-page #mydeskLogoutBtn.btn i {
  color: #ffffff !important;
}
.mydesk-page #mydeskBackBtn.btn:hover,
.mydesk-page #mydeskLogoutBtn.btn:hover,
.mydesk-page #mydeskBackBtn.btn-burgundy:hover,
.mydesk-page #mydeskLogoutBtn.btn-burgundy:hover {
  background-color: #0b3d26 !important;
  border-color: #072a1b !important;
}
.mydesk-page #mydeskBackBtn.btn:focus,
.mydesk-page #mydeskLogoutBtn.btn:focus,
.mydesk-page #mydeskBackBtn.btn-burgundy:focus,
.mydesk-page #mydeskLogoutBtn.btn-burgundy:focus {
  box-shadow: 0 0 0 0.2rem rgba(15,81,50,0.35) !important;
}