html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* Scaled laptop screens (2026-10-22): Windows' recommended 125%/150% display scale turns a 1920-pixel
   laptop panel into a 1536/1280px-wide page, where the desktop sizes look oversized. On such a screen
   (pixel ratio 1.25+, mouse/trackpad, 992–1599px wide) shrink the root font, which Bootstrap and this
   file size almost everything in, plus the app bar's few fixed-pixel parts. A 100% screen, 1600px+ and
   touch devices keep the sizes above. Browser zoom (Ctrl +/-) changes the pixel ratio and width too, so
   it still works, in slightly smaller steps inside this range. */
@media (min-width: 992px) and (max-width: 1599.98px) and (min-resolution: 1.25dppx) and (hover: hover) and (pointer: fine) {
  html {
    font-size: 15px;
  }
}

@media (min-width: 992px) and (max-width: 1399.98px) and (min-resolution: 1.25dppx) and (hover: hover) and (pointer: fine) {
  html {
    font-size: 13px;
  }

  /* `nav.`-prefixed so they beat _Layout's own app-bar rules, which load after this file */
  nav.app-bar,
  nav.app-bar .container-fluid {
    min-height: 46px;
  }

  nav.app-bar .appbar-apps,
  nav.app-bar .appbar-bell {
    width: 38px;
    height: 38px;
  }

  nav.app-bar #profilePhotoSmall {
    width: 36px;
    height: 36px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Button load animation */
[data-load-anim].btn-loading {
    pointer-events: none;
    opacity: 0.75;
}
[data-load-anim].btn-loading::before {
    content: '';
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btnLoadSpin 0.65s linear infinite;
    margin-right: 0.4em;
    vertical-align: middle;
}
@keyframes btnLoadSpin {
    to { transform: rotate(360deg); }
}









/*อันใหม่ */
:root{
  --teal:#036986;
  --teal-dark:#024f63;
  --teal-deep:#013642;
}

/* พื้นหลังหน้าเว็บ: ไล่เฉดเบา ๆ + ลาย dot-grid แบบ blueprint */
body{
  background:
    radial-gradient(1100px 650px at 50% -12%, rgba(3,105,134,0.07), transparent 60%),
    linear-gradient(160deg, #F8FAFB 0%, #EEF3F6 100%);
  background-attachment: fixed;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background-image:radial-gradient(rgba(3,105,134,0.08) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.05) 70%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.05) 70%);
  pointer-events:none;
}

/* blob ตกแต่งมุมจอ ลอยอยู่หลังเนื้อหาเสมอ ไม่กระทบ layout การ์ด */
.bg-decor{
  position:fixed;
  right:-70px;
  bottom:-70px;
  width:360px;
  height:360px;
  z-index:-1;
  pointer-events:none;
}
.bg-decor .blob{
  position:absolute;
  inset:0;
  background:linear-gradient(150deg, var(--teal) 0%, var(--teal-deep) 100%);
  border-radius:42% 58% 65% 35% / 45% 45% 55% 55%;
  opacity:.10;
}

/* การ์ดเมนูหน้า Home */
.app-card{
  position:relative;
  overflow:hidden;
  border-radius:20px !important;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  border:1px solid rgba(3,105,134,0.08) !important;
}
.app-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:var(--accent-fg, var(--teal));
  opacity:.85;
}
.app-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 34px var(--accent-shadow, rgba(3,105,134,0.16)) !important;
  border-color:var(--accent-fg, rgba(3,105,134,0.25));
}
.app-card .card-title{
  display:flex;
  align-items:center;
  gap:10px;
}
.icon-badge{
  flex-shrink:0;
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(160deg, rgba(3,105,134,0.14), rgba(3,105,134,0.06));
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--teal-dark);
  font-size:1rem;
  line-height:1;
}
.icon-badge i{ margin:0 !important; line-height:1; display:inline-flex; align-items:center; justify-content:center; }

.icon-badge-lg{
  position:relative;
  width:72px;height:72px;border-radius:20px;
  font-size:2.1rem;
  background:var(--accent-bg, linear-gradient(160deg, rgba(3,105,134,0.14), rgba(3,105,134,0.06)));
  color:var(--accent-fg, var(--teal-dark));
  transition:transform .2s ease;
}
.app-card:hover .icon-badge-lg{
  transform:scale(1.06) rotate(-2deg);
}
.icon-badge-text{
  font-size:1.4rem;
  font-weight:700;
  letter-spacing:.02em;
}
.icon-badge-text-md{
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.01em;
}
.icon-badge-text-sm{
  font-size:.62rem;
  font-weight:700;
  line-height:1.15;
  text-align:center;
  padding:0 4px;
  word-break:break-word;
}
.app-noti-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  font-size:.65rem;
}

.app-card-link{ text-decoration:none; display:block; border-radius:20px; }
/* Tile grid shared by the Home page (modules) and the SharePoint department page: cards stay
   190px wide and pack tightly, capped at 4 per row and centered, instead of being stretched
   inside wide Bootstrap columns — so a tile is the same size on both pages. */
.sp-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 190px));
  justify-content:center;
  gap:1.5rem;
  max-width:calc(4 * 190px + 3 * 1.5rem);
  margin-inline:auto;
}
.app-card-link:focus-visible{
  outline:2px solid var(--accent-fg, var(--teal));
  outline-offset:4px;
}
.app-card-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
  padding:1.5rem .75rem;
}
.app-card-label{
  position:relative;
  display:inline-block;
  font-weight:600;
  font-size:.92rem;
  line-height:1.25;
  color:#1E293B;
}
.app-card-arrow{
  position:absolute;
  left:100%;
  top:50%;
  margin-left:2px;
  transform:translate(-4px, -50%);
  font-size:1.15rem;
  color:var(--accent-fg, var(--teal));
  opacity:0;
  transition:opacity .18s ease, transform .18s ease;
}
.app-card:hover .app-card-arrow{
  opacity:1;
  transform:translate(0, -50%);
}

/* "Coming soon" module card — visible but not clickable */
.app-card-disabled{
  cursor:not-allowed;
  filter:grayscale(55%);
}
.app-card-disabled .app-card{
  transition:none;
}
.app-card-disabled:hover .app-card{
  transform:none;
  box-shadow:0 1px 2px rgba(0,0,0,.05) !important;
  border-color:rgba(3,105,134,0.08) !important;
}
.app-card-disabled:hover .icon-badge-lg{
  transform:none;
}
.app-card-disabled .app-card-arrow{ display:none; }
.app-card-disabled-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:inherit;
  background:rgba(255,255,255,0);
  backdrop-filter:blur(0px);
  -webkit-backdrop-filter:blur(0px);
  opacity:0;
  transition:opacity .2s ease, backdrop-filter .2s ease, -webkit-backdrop-filter .2s ease;
  pointer-events:none;
}
.app-card-disabled:hover .app-card-disabled-overlay{
  opacity:1;
  background:rgba(255,255,255,.45);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.app-card-disabled-badge{
  background:#036986;
  color:#fff;
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.03em;
  padding:.35rem .9rem;
  border-radius:999px;
  box-shadow:0 6px 16px rgba(3,105,134,.35);
  white-space:nowrap;
}

/* Friendly accent palette, cycled per module tile */
.app-accent-1{ --accent-bg:linear-gradient(160deg, #DCEBFF, #EFF6FF); --accent-fg:#2563EB; --accent-shadow:rgba(37,99,235,.18); }
.app-accent-2{ --accent-bg:linear-gradient(160deg, rgba(3,105,134,.20), rgba(3,105,134,.08)); --accent-fg:#036986; --accent-shadow:rgba(3,105,134,.18); }
.app-accent-3{ --accent-bg:linear-gradient(160deg, #EAE1FF, #F5F3FF); --accent-fg:#7C3AED; --accent-shadow:rgba(124,58,237,.18); }
.app-accent-4{ --accent-bg:linear-gradient(160deg, #FFE7C2, #FFF7ED); --accent-fg:#D97706; --accent-shadow:rgba(217,119,6,.18); }
.app-accent-5{ --accent-bg:linear-gradient(160deg, #FCDCEC, #FDF2F8); --accent-fg:#DB2777; --accent-shadow:rgba(219,39,119,.18); }
.app-accent-6{ --accent-bg:linear-gradient(160deg, #D2F4DD, #F0FDF4); --accent-fg:#16A34A; --accent-shadow:rgba(22,163,74,.18); }

.list-group-item-action:hover{
  background:rgba(3,105,134,0.05);
  border-radius:8px;
}

/* ================= Mobile polish (phones / small tablets) =================
   Global, so every page benefits; pages with their own layouts keep their own media queries.
   NOTE: _Layout loads Bootstrap from the CDN *after* this file, so a rule here needs higher
   specificity than Bootstrap's single-class rule (hence `.x .y` / `body .x`) to win. */

/* a tap fires immediately: no double-tap-to-zoom delay on controls */
a, button, .btn, input, select, textarea, label, .page-link, .dropdown-item {
  touch-action: manipulation;
}

.table-responsive {
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
  /* iOS Safari zooms the whole page when a focused field is under 16px. The root font-size is
     14px on phones, so Bootstrap's 1rem inputs are 14px — pin them to 16px. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
  select, select.form-select,
  textarea, textarea.form-control {
    font-size: 16px;
  }

  /* tighter page chrome */
  main h4, main .h4 { font-size: 1.15rem; }
  main h5, main .h5 { font-size: 1.05rem; }
  .card > .card-body { padding: .9rem; }
  .breadcrumb { font-size: .8rem; }

  /* bigger tap targets */
  .dropdown-menu .dropdown-item { padding-top: .55rem; padding-bottom: .55rem; }
  .pagination .page-link { padding: .4rem .65rem; }
  body .btn-sm { --bs-btn-padding-y: .35rem; }

  /* long emails / URLs / codes wrap instead of pushing the page sideways
     (break-word, not anywhere, so table min-content widths are untouched) */
  main { overflow-wrap: break-word; }

  /* mobile card view of the datatables (.card-view is what the table becomes under 768px) */
  .card-view .data-card { padding: .75rem; margin-bottom: .75rem; }
  .card-view .card-row { gap: .75rem; align-items: flex-start; }
  .card-view .card-label { flex: 0 0 38%; }
  .card-view .card-value { min-width: 0; overflow-wrap: anywhere; }
}