/* ==============================================================
   Suanmon Budget Tracker - Global Styles (Bootstrap 5)
   Last update: 2025-08-20
   Key fixes:
   - Prevent horizontal scroll on any page
   - Responsive navbar (desktop + offcanvas mobile)
   - Tighter dropdown styles, safe text wrapping
   - Card/Table polish
   ============================================================== */

/*--------------------------------------------------------------
# 1. Base Styles & Typography
--------------------------------------------------------------*/
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  height: 100%;
  overflow-x: hidden;         /* 🔧 ป้องกันหน้ากว้างเกินจอ */
}

body {
  font-family: 'Open Sans', 'Kanit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background-color: #f8f9fa;
  color: #343a40;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; } /* รูปภาพไม่ดันเลเอาต์ */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Kanit', sans-serif;
  color: #004d40;             /* Dark Teal */
  font-weight: 600;
  line-height: 1.25;
  word-break: normal;
}

a {
  text-decoration: none;
  color: #007bff;
  transition: color .2s ease;
}
a:hover { color: #0056b3; text-decoration: underline; }

main { flex: 1; padding: 20px 0; }

/* Utility */
.text-nowrap { white-space: nowrap; }
.shadow-sm { box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; }
.shadow-lg { box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important; }

/* Emphasis colors (align to Bootstrap) */
.text-primary  { color:#007bff!important; }
.text-success  { color:#28a745!important; }
.text-info     { color:#17a2b8!important; }
.text-danger   { color:#dc3545!important; }
.text-secondary{ color:#6c757d!important; }
.text-muted    { color:#6c757d!important; }
.text-warning-custom { color:#ffc107!important; }
.text-success-custom { color:#28a745!important; }
.text-danger-custom  { color:#dc3545!important; }

/*--------------------------------------------------------------
# 2. Navbar & Header
--------------------------------------------------------------*/
.navbar.bg-primary { background-color:#004d40 !important; }

.navbar { min-height: 56px; }
.navbar .container-fluid { padding-left: 1rem; padding-right: 1rem; }

.navbar-brand {
  font-size: 1.5rem;
  display: flex;
  align-items: center;
}
.navbar-brand img {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.3);
}
.brand-text {
  max-width: 360px;             /* 🔧 ป้องกันชื่อยาวดันเมนู */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.navbar-brand strong { color:#fff; font-size:1.25rem; }
.navbar-brand small  { color:rgba(255,255,255,.75); font-size:.85rem; display:block; }

/* เมนูไม่ตัดคำกลางคำ แต่ให้ย้ายทั้งรายการลงบรรทัดถ้าพื้นที่ไม่พอ */
.navbar-nav { gap: .25rem .75rem; align-items:center; flex-wrap: wrap; }
.navbar .nav-link,
.navbar .dropdown-toggle,
.navbar .dropdown-item { white-space: nowrap; }

/* Hover/Active */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color:#fff !important;
  background-color: rgba(255,255,255,.1);
  border-radius: .4rem;
}

/* Dropdown */
.dropdown-menu {
  background-color:#004d40;
  border: none;
  box-shadow: 0 8px 16px rgba(0,0,0,.2);
  border-radius: 8px;
  overflow: hidden;
}
.dropdown-menu .dropdown-item {
  color: rgba(255,255,255,.85);
  padding: .75rem 1rem;
  transition: background-color .15s ease, color .15s ease;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: rgba(255,255,255,.15);
  color:#fff;
}
.dropdown-menu .dropdown-divider { border-top-color:rgba(255,255,255,.2); }

/* Offcanvas (mobile menu) */
.offcanvas { max-width: 85%; }  /* เมนูสไลด์ไม่กินจอเกินไป */

/* ซ่อน offcanvas บนหน้าจอใหญ่ */
@media (min-width: 992px) {
  #mainNavOffcanvas { display:none !important; visibility:hidden !important; }
}

/*--------------------------------------------------------------
# 3. Cards
--------------------------------------------------------------*/
.card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0,0,0,.1);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0,0,0,.15);
}
.card-body {
  padding: 1.5rem;
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  text-align:center;
}
.card-title { font-weight:600; margin-bottom:.5rem; }

/* Accent borders */
.border-primary-light  { border-left:5px solid #a7d9d0 !important; }
.border-success-light  { border-left:5px solid #b3e6b3 !important; }
.border-info-light     { border-left:5px solid #a7d9f2 !important; }
.border-danger-light   { border-left:5px solid #f5b3b3 !important; }
.border-secondary-light{ border-left:5px solid #e0e0e0 !important; }

/* Clickable card overlay */
.btn-card-link {
  display:block; width:100%; height:100%;
  color:inherit; background:transparent; border:none; text-align:inherit;
  border-radius:12px;
}
.btn-card-link:hover { background-color: rgba(0,0,0,.03); text-decoration:none; }

/*--------------------------------------------------------------
# 4. Forms
--------------------------------------------------------------*/
.custom-select {
  border-radius:.5rem; padding:.75rem 1.25rem;
  border:1px solid #ced4da;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.075);
  transition: all .2s ease;
  font-size:1rem;
}
.custom-select:focus {
  border-color:#80bdff;
  box-shadow: 0 0 0 .25rem rgba(0,123,255,.25);
  outline:0;
}

/* Primary round button (e.g., back-to-top) */
.btn-primary-custom {
  background-color:#004d40; border-color:#004d40; color:#fff;
  width:50px; height:50px; border-radius:50%!important;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
  transition: background-color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.btn-primary-custom:hover {
  background-color:#00332c; border-color:#00332c;
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0,0,0,.3);
}
.btn-primary-custom i { font-size:1.5rem; }

/*--------------------------------------------------------------
# 5. Tables
--------------------------------------------------------------*/
.table {
  border-radius:12px;
  overflow:hidden;
  border-collapse:separate;
  border-spacing:0;
  margin-bottom:2rem;
}
.table thead th {
  background:#004d40; color:#fff; padding:1rem;
  border-bottom:none; font-weight:600; vertical-align:middle;
}
.table tbody tr:nth-of-type(odd){ background:#f2f2f2; }
.table tbody tr:hover{ background:#e9ecef; cursor:pointer; }
.table tbody td {
  padding:1rem; border-top:1px solid #dee2e6; vertical-align:middle;
}
.table tfoot { background:#e9ecef; font-weight:700; }
.table tfoot td { padding:1rem; border-top:2px solid #dee2e6; }

/*--------------------------------------------------------------
# 6. Layout helpers
--------------------------------------------------------------*/
.container, .container-fluid { /* ป้องกันสกรอลล์แนวนอนจาก padding ซ้อน */
  overflow-x: clip;
}

/*--------------------------------------------------------------
# 7. Responsive
--------------------------------------------------------------*/
@media (max-width: 1199.98px) {
  .brand-text { max-width: 300px; }
}
@media (max-width: 991.98px) { /* Tablets & down */
  .navbar-collapse {
    background-color:#004d40;
    border-radius: 0 0 8px 8px;
    padding: 1rem; margin-top: 5px;
  }
  .navbar-nav .nav-link { margin:0; padding:.75rem 1rem; }
  .dropdown-menu {
    position: static !important;
    float:none; width:100%; margin:0; border-radius:0; box-shadow:none;
  }
  .brand-text { max-width: 260px; }
  .navbar-brand strong { font-size:1.1rem; }
  .navbar-brand small  { font-size:.75rem; }
  h2 { font-size:1.8rem; }
  .fs-4 { font-size:1.5rem !important; }
  .fs-5 { font-size:1.1rem !important; }
  .card-body { padding:1rem; }
}
@media (max-width: 576px) { /* Phones */
  .navbar .nav-link { font-size: .95rem; }
  .brand-text { max-width: 210px; }
  .container { padding-left: 15px; padding-right: 15px; }
  .table-responsive-lg { overflow-x: auto; }
  .responsible-col { display: none; }       /* ซ่อนคอลัมน์ยาวบนจอเล็ก */
  .text-md-start, .text-md-end { text-align:center!important; }
}

/*--------------------------------------------------------------
# 8. Misc (compatibility)
--------------------------------------------------------------*/
/* หากธีมอื่นตั้ง word-break ไว้แรงเกิน ให้ยกเลิก */
a, .nav-link, .dropdown-item { word-break: normal; }