:root {
  --primary: #0d6efd;
  --primary-dark: #0b5ed7;
  --page: #f6f7fb;
  --card-bg: #ffffff;
  --radius: 16px;
  --transition: 0.25s ease;

  /* Shared width for TOP + LOWER sections: nearly full width, with 16px padding on each side */
  --content-max: min(1800px, calc(100vw - 32px));
}


/* Reset & base */
* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  min-height: 100svh;

  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--page);
  display: grid;
  place-items: center;
  /* centers the card */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Card ---------- */
.card {
  width: 100%;
  max-width: 420px;
  padding: 32px 28px 36px;
  background: var(--card-bg);
  /* solid white, no frosted blur */
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.08);
  text-align: center;
  animation: fade-in 0.45s ease both;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.logo {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--primary);
}

.subtitle {
  font-size: 0.95rem;
  color: #6b7280;
  margin-bottom: 24px;
}

/* ---------- Form ---------- */
.field {
  position: relative;
  margin-bottom: 14px;
}

.field input {
  width: 100%;
  padding: 14px 44px 14px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.field input:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.12);
}

.toggle-password {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1rem;
  color: #9ca3af;
  padding: 2px 6px;
  border-radius: 8px;
}

.toggle-password:hover {
  color: var(--primary);
}

/* ---------- Button ---------- */
.btn {
  width: 100%;
  padding: 14px;
  margin-top: 6px;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: var(--primary);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background var(--transition), transform 0.05s ease;
}

.btn:hover,
.btn:focus-visible {
  background: var(--primary-dark);
}

.btn:active {
  transform: translateY(1px);
}

/* ---------- Messages ---------- */
#message {
  margin-top: 14px;
  font-size: 0.93rem;
  font-weight: 500;
  min-height: 1.2em;
}

.error {
  color: #d52731;
}

.success {
  color: #269f53;
}

/* ---------- Logout button ---------- */
/* Tiny logout icon (top-left of the page) */
.logout-icon {
  position: fixed;
  top: 12px;
  right: 12px;
  /* move to top-right so it doesn't cover labels */
  left: auto;
  /* ensure left is not used */
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(16, 24, 40, 0.12);
  transition: background var(--transition), transform 0.05s ease;
  z-index: 1600;
  /* higher than the penalty bar (1300) */
}

.logout-icon i {
  font-size: 14px;
  /* slightly larger than before */
  line-height: 1;
}

.logout-icon:hover {
  background: var(--primary-dark);
}

.logout-icon:active {
  transform: translateY(1px);
}

/* ---------- Floating action button (bottom-left, slender pill) ---------- */
.fab {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(20px, env(safe-area-inset-bottom));

  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 8px;

  height: 42px;
  padding: 0 14px;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;

  background: #ffffff;
  color: #0f172a;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;

  box-shadow: 0 8px 14px rgba(16, 24, 40, .12);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, background .12s ease;
  z-index: 1100;
}

.fab i { font-size: 16px; line-height: 1; }
.fab .fab-label { display: inline-block; white-space: nowrap; }

/* Strong reset for the bottom-left FAB label (fix uppercase + spacing + diacritics) */
#openJobPopupBtn,
#openJobPopupBtn .fab-label {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-variant-caps: normal !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif !important;
  line-height: 1.2;
}


/* Fix Vietnamese rendering on the FAB label */
.fab,
.fab .fab-label {
  text-transform: none !important;  /* stop forced UPPERCASE */
  letter-spacing: 0 !important;     /* remove global tracking */
  font-variant-caps: normal;        /* avoid small-caps from any reset */
}


.fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(16, 24, 40, .16);
  background: #fdfefe;
}
.fab:active { transform: translateY(0); filter: brightness(.98); }
.fab:focus-visible {
  outline: none;
  box-shadow:
    0 12px 22px rgba(16,24,40,.16),
    0 0 0 4px rgba(13,110,253,.25),
    0 0 0 6px #fff;
}

/* On very small screens, keep it compact */
@media (max-width: 480px) {
  .fab { padding: 0 12px; }
  .fab .fab-label { display: inline-block; } /* keep label visible */
}


/* ---------- Modal / Popup ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.58);
  display: none;
  place-items: center;
  z-index: 20000; /* above penalty bar (1300), logout icon (1600) and Watch (9999) */
  padding: 16px;
}


.modal-overlay.open {
  display: grid;
}

/* Prevent background scroll/clicks confusion when a modal is open */
body.modal-open { overflow: hidden; }


.modal {
  width: min(820px, 96vw);
  /* wider */
  max-height: min(92vh, 900px);
  /* never taller than viewport */
  background: var(--card-bg);
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(16, 24, 40, 0.25);
  display: flex;
  /* header / body / footer stack */
  flex-direction: column;
  overflow: hidden;
  animation: fade-in 0.25s ease both;
}



.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid #eef1f5;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.125rem;
}

.modal-close {
  border: none;
  background: none;
  cursor: pointer;
  color: #6b7280;
  font-size: 1.1rem;
  padding: 6px 8px;
  border-radius: 8px;
}

.modal-close:hover {
  color: var(--primary);
}

.modal-body {
  padding: 20px 22px;
  display: grid;
  gap: 14px;
  /* row gap (we’ll add column gap below) */
  flex: 1 1 auto;
  /* body takes remaining space */
  overflow: auto;
  /* only the body scrolls */
  -webkit-overflow-scrolling: touch;
}


/* 2-column form inside the modal (auto falls back to 1 col on small screens) */
.modal-body.grid-2 {
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .modal-body.grid-2 {
    grid-template-columns: 1fr 1fr;
  }

  .modal-body.grid-2 .full {
    grid-column: 1 / -1;
  }

  /* make wide rows span both columns */
}


/* 2-column layout that collapses to 1 on small screens */
.modal-body.grid-2 {
  grid-template-columns: 1fr;
  column-gap: 22px;
}

@media (min-width: 720px) {
  .modal-body.grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

.field.full {
  grid-column: 1 / -1;
}

/* make a row span both columns */

/* Cleaner labels */
.field label {
  display: block;
  font-weight: 600;
  color: #334155;
  margin-bottom: 8px;
}

/* Slightly taller textarea */
.field textarea {
  min-height: 130px;
}


/* Make textarea match your input style */
.field textarea {
  width: 100%;
  min-height: 110px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
  resize: vertical;
}

/* Match select to input look */
.field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.field select:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.12);
}

.field textarea:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.12);
}

.input-with-addon {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
}

.input-with-addon .addon {
  display: inline-block;
  padding: 10px 12px;
  background: #eef1f5;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  color: #475569;
}

.input-with-addon input {
  padding: 12px 14px;
}

.help {
  display: block;
  margin-top: 6px;
  color: #6b7280;
  font-size: 0.85rem;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 22px 14px;
  border-top: 1px solid #eef1f5;
  background: var(--card-bg);
  /* cover content when body scrolls */
  flex-shrink: 0;
  /* keep footer visible */
}


/* Secondary button to pair with your .btn */
.btn-secondary {
  padding: 12px 16px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #334155;
  background: #eef1f5;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background var(--transition), transform 0.05s ease;
}

.btn-secondary:hover {
  background: #e4e7ec;
}

.btn-secondary:active {
  transform: translateY(1px);
}

/* === small popup polish additions === */
.field label.required::after {
  content: " *";
  color: #d52731;
}

.help {
  margin-top: 4px;
  color: #6b7280;
}


/* ===== Reminders page ===== */
.reminders-wrap {
  /* widen the page to nearly full width on large screens */
  width: min(1800px, 98vw);
  margin: 28px auto;
  display: grid;
  gap: 14px;
}


/* Reminders page: keep the app hidden until we're in app-mode (logged in) */
#remindersApp { display: none; }
body.app-mode #remindersApp { display: grid; }


.reminders-header h1 {
  margin: 0 0 4px;
  font-size: 1.35rem;
}

.reminders-header .muted {
  margin: 0;
  color: #6b7280;
  font-size: 0.95rem;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  justify-content: space-between;
}

.toolbar-left {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
}

.control {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 8px;
}

.control input[type="search"] {
  width: clamp(220px, 36vw, 420px);
  padding: 12px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.control input[type="search"]:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.12);
}

.control select {
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
  font-size: 0.95rem;
}

.control label {
  font-size: 0.9rem;
  color: #475569;
  font-weight: 600;
}

.table-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.08);
  overflow: hidden;
}

.table-scroll {
  overflow-x: auto;    /* show a scrollbar if needed */
}



.nice-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* optional: enforces the widths above */
}




.nice-table thead th {
  text-align: left;
  font-size: 0.85rem;
  color: #64748b;
  font-weight: 700;
  padding: 12px 14px;
  border-bottom: 1px solid #eef1f5;
  white-space: nowrap;
    position: sticky;
  top: 0;
  background: var(--card-bg);

}

.nice-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f3f6;
  vertical-align: top;
  font-size: 0.95rem;
}

.nice-table tbody tr:hover {
  background: #fafbff;
}

/* === Reminders table (5 cols) — prioritize Yêu cầu + Chi tiết === */
#remindersTable { table-layout: fixed; }

/* Give width to the first two columns */
#remindersTable thead th:nth-child(1),
#remindersTable tbody td:nth-child(1) { width: 32%; }

#remindersTable thead th:nth-child(2),
#remindersTable tbody td:nth-child(2) { width: 42%; }

/* Keep the rest compact */
#remindersTable thead th:nth-child(3),
#remindersTable tbody td:nth-child(3) { width: 10%; white-space: nowrap; }

#remindersTable thead th:nth-child(4),
#remindersTable tbody td:nth-child(4) { width: 6%; text-align: right; white-space: nowrap; }

#remindersTable thead th:nth-child(5),
#remindersTable tbody td:nth-child(5) {
  width: 10%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Make Yêu cầu stand out + allow multi-line preview */
#remindersTable tbody td:nth-child(1){
  font-weight: 700;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.45;
  max-height: 4.8em;         /* ~3 lines */
  overflow: hidden;
  position: relative;
}
#remindersTable tbody td:nth-child(1)::after{
  content:"";
  position: absolute; left:0; right:0; bottom:0; height:1.6em;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--card-bg));
  pointer-events: none;
}

/* Chi tiết: larger multi-line preview + soft fade */
#remindersTable tbody td:nth-child(2){
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  line-height: 1.45;
  max-height: 6.2em;         /* ~4 lines */
  overflow: hidden;
  position: relative;
}
#remindersTable tbody td:nth-child(2)::after{
  content:"";
  position: absolute; left:0; right:0; bottom:0; height:1.6em;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--card-bg));
  pointer-events: none;
}

/* Expand both on row hover */
#remindersTable tbody tr:hover td:nth-child(1),
#remindersTable tbody tr:hover td:nth-child(2){
  max-height: 16em;
  overflow: auto;
}
#remindersTable tbody tr:hover td:nth-child(1)::after,
#remindersTable tbody tr:hover td:nth-child(2)::after{
  display: none;
}

/* Clip very long URLs nicely in the Link column */
#remindersTable tbody td:nth-child(5) a{
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.yc-cell {
  font-weight: 600;
}


/* Reminders main table — Chi tiết cell behavior */
.reminders-wrap .nice-table tbody td:nth-child(4){
  white-space: pre-wrap;       /* respect \n, wrap long text */
  overflow-wrap: anywhere;     /* break long tokens */
  word-break: break-word;
  hyphens: auto;
  line-height: 1.45;

  /* show a 2-line preview with a soft fade */
  max-height: 3.9em;
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
}
.reminders-wrap .nice-table tbody td:nth-child(4)::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:1.6em;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--card-bg));
  pointer-events:none;
}

/* expand on row hover */
.reminders-wrap .nice-table tbody tr:hover td:nth-child(4){
  max-height: 12em;
  overflow: auto;
  cursor: auto;
}
.reminders-wrap .nice-table tbody tr:hover td:nth-child(4)::after{ display:none }

/* if inner text uses a clamp/truncate utility, cancel it here */
.reminders-wrap .nice-table tbody td:nth-child(4) .clamp-2,
.reminders-wrap .nice-table tbody td:nth-child(4) .truncate{
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}


.ct-cell {
  color: #374151;
  opacity: 0.9;
}

.clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;

  /* Modern syntax (some tools recognize this) */
  line-clamp: 2;

  /* Vendor alias used by Chrome/Safari */
  -webkit-line-clamp: 2;
  /* stylelint-disable-line property-no-unknown */
}


/* row hover – expand & scroll if still long */
#gvListSection .nice-table tbody tr:hover td:nth-child(4){
  max-height:12em;
  overflow:auto;
  cursor:auto;
}
#gvListSection .nice-table tbody tr:hover td:nth-child(4)::after{
  display:none;              /* remove fade when expanded */
}

/* also un-clamp any nested .clamp-2 inside Chi tiết on hover */
#gvListSection .nice-table tbody tr:hover td:nth-child(4) .clamp-2{
  display:block;             /* cancel -webkit-box */
  -webkit-line-clamp:unset;
  line-clamp:unset;
  overflow:visible;
}


.badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-weight: 700;
  font-size: 0.8rem;
}

.chip {
  display: inline-block;
  min-width: 28px;
  text-align: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e6f4ff;
  color: #0b5ed7;
  font-weight: 700;
  font-size: 0.8rem;
}

.chip-muted {
  background: #f1f5f9;
  color: #64748b;
}

.link-btn {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 10px;
  background: #eef1f5;
  color: #111827;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  margin-right: 6px;
}

.link-btn:hover {
  background: #e4e7ec;
}

.icon-btn {
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
}

.icon-btn:hover {
  background: #f9fafb;
}

.busy-bar {
  height: 3px;
  background: linear-gradient(90deg, rgba(13, 110, 253, .2), rgba(13, 110, 253, .65));
  animation: busy 1s linear infinite;
}

@keyframes busy {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.empty {
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 22px;
  color: #6b7280;
}

.empty i {
  font-size: 28px;
}

.pager {
  display: grid;
  place-items: center;
  padding: 12px;
}


/* Floating "ND yêu cầu" button — colorful + standout */
.fab-watch{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;

  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 8px;

  height: 46px;
  padding: 0 18px;
  border-radius: 9999px;
  border: 0;

  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .2px;

  /* animated gradient */
  background: linear-gradient(135deg,#ff6a88 0%,#ff99ac 25%,#7c3aed 55%,#2dd4bf 100%);
  background-size: 200% 200%;
  box-shadow:
    0 14px 28px rgba(124,58,237,.35),
    0 2px 0 rgba(255,255,255,.18) inset;
  animation:
    watchGradient 6s ease infinite,
    watchPop .5s ease-out .1s both;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.fab-watch i,
.fab-watch .fab-label{
  color:#fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  display: inline-block;            /* keep the label visible */
}

/* soft outer glow on hover */
.fab-watch::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:inherit;
  background: radial-gradient(closest-side, rgba(255,255,255,.65), rgba(255,255,255,0));
  filter: blur(8px);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events:none;
}

/* subtle “shine” sweep */
.fab-watch::after{
  content:"";
  position:absolute;
  top:0; left:-120%;
  width:70%; height:100%;
  background: linear-gradient(120deg, rgba(255,255,255,.15), rgba(255,255,255,.55), rgba(255,255,255,0));
  transform: skewX(-22deg);
  animation: watchShine 4.2s linear infinite;
  pointer-events:none;
}

.fab-watch:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 18px 34px rgba(124,58,237,.42),
    0 2px 0 rgba(255,255,255,.22) inset;
}
.fab-watch:hover::before{ opacity: 1; }

.fab-watch:active{
  transform: translateY(0) scale(0.99);
  filter: brightness(.98);
}

.fab-watch:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 4px rgba(255,255,255,.6),
    0 0 0 7px rgba(124,58,237,.45);
}

/* animations */
@keyframes watchGradient{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
@keyframes watchShine{
  0%{ left:-120%; }
  70%{ left:140%; }
  100%{ left:140%; }
}
@keyframes watchPop{
  0%{ transform: translateY(8px) scale(.96); opacity:0; }
  100%{ transform: translateY(0) scale(1); opacity:1; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  .fab-watch{ animation: none; }
  .fab-watch::after{ display:none; }
}


/* Auto-compact on very small screens */
@media (max-width: 480px) {
  .fab-watch { padding: 0 12px; }
}

/* Hide the floating Watch button until the app is in logged-in mode */
.fab-watch { display: none; }
body.app-mode .fab-watch { display: inline-grid; }

  .fab-watch .fab-label {
    display: none;
  }

  .fab-watch .fab-label { display: inline-block; }



/* === App mode: remove login centering when user is logged in === */
body.app-mode {
  display: block;
  /* stop using the centered grid */
  place-items: initial;
  /* has no effect on block, but resets intention */
}

/* ===== Penalty Top Bar (compact, sticky) ===== */
.penalty-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1300;
  /* make the outer wrapper invisible; let the inner card (.penalty-row) be the only layer */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  box-shadow: none;
  padding: 16px;
  /* keep some breathing room around the inner card */
}


.penalty-row {
max-width: var(--content-max);
  margin: 0 auto;
  padding: 12px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.3fr 1.4fr auto;
  gap: 14px;
  align-items: end;

  background: #fff;
  border: 1px solid #eef1f5;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(16, 24, 40, .08);
}

.pctl label {
  display: block;
  font-weight: 700;
  font-size: .85rem;
  color: #0f172a;
  letter-spacing: .2px;
  margin: 0 0 6px;
}


.penalty-bar input[type="text"],
.penalty-bar select {
  height: 40px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: linear-gradient(#fff, #fff), linear-gradient(120deg, #f8fafc, #f1f5f9);
  background-clip: padding-box, border-box;
  box-shadow: 0 1px 0 rgba(16, 24, 40, .04) inset;
  font-size: .95rem;
  outline: none;
  transition: box-shadow var(--transition), border-color var(--transition), background var(--transition), transform .06s ease;
}

.penalty-bar input[type="text"]:focus,
.penalty-bar select:focus {
  border-color: transparent;
  box-shadow: 0 0 0 4px rgba(13, 110, 253, .18), 0 1px 0 rgba(16, 24, 40, .04) inset;
  background: #fff;
  transform: translateY(-1px);
}

.penalty-bar ::placeholder {
  color: #9ca3af;
}

.penalty-row .btn-remind {
  justify-self: end;
  align-self: end;
}

/* give the bar a bit more breathing room below */
.penalty-spacer {
  height: 96px;
}

/* optional: visually hidden label utility (used next in HTML) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* keep it usable on small screens (stacked) */
@media (max-width: 840px) {
  .penalty-row {
    grid-template-columns: 1fr;
  }
}



.btn-remind {
  height: 38px;
  padding: 0 14px;
  border: none;
  border-radius: 10px;
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary), #6ea8fe);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(13, 110, 253, .25);
  transition: transform .06s ease, filter .15s ease, box-shadow .15s ease;
}

.btn-remind:hover {
  filter: brightness(1.05);
  box-shadow: 0 10px 22px rgba(13, 110, 253, .30);
}

.btn-remind:active {
  transform: translateY(1px);
}

.remind-textarea {
  min-height: 160px;
}

/* ==== Pretty autocomplete dropdown for Giáo viên ==== */
.autocomplete {
  position: relative;
}

.auto-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow: auto;

  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(16, 24, 40, .12);
  z-index: 1400;
  /* above the sticky bar */
}

.auto-item {
  padding: 10px 12px;
  font-size: .95rem;
  line-height: 1.3;
  cursor: pointer;
  color: #0f172a;
}

.auto-item+.auto-item {
  border-top: 1px solid #f1f5f9;
}

.auto-item:hover,
.auto-item[aria-selected="true"] {
  background: #f3f4f6;
}


.records {
  max-width: var(--content-max);
  margin: 0 auto;
  /* keep top/bottom space, remove left/right so width matches the top bar */
  padding: 16px 0;
}




.records-title {
  font-weight: 600;
  font-size: 18px;
  margin: 8px 4px 12px;
}

.record-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.record-card {
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

.record-title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 6px;
}

.record-meta {
  font-size: 12px;
  color: #555;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.meta-badge {
  background: #f1f5f9;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
}

.meta-dot {
  opacity: .5;
}

.record-body {
  font-size: 14px;
  margin: 6px 0 8px;
  white-space: pre-wrap;
}

.record-foot {
  font-size: 12px;
  color: #444;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.record-links a {
  text-decoration: underline;
}

.loading,
.empty,
.error {
  padding: 8px 0;
  color: #555;
}


/* ===== GV list (row-by-row table helpers) ===== */
.gv-teacher {
  font-weight: 700;
}


/* === GV list: column sizing & link clipping === */

/* === GV list: column sizing (no horizontal scroll) === */

/* 1) Giáo viên — wider */
#gvListSection .nice-table thead th:nth-child(1),
#gvListSection .nice-table tbody td:nth-child(1){
  width: 14%;
  word-break: break-word;
}



#gvListSection .nice-table thead th:nth-child(2),
#gvListSection .nice-table tbody td:nth-child(2){
  width: 8%;
  white-space: nowrap;
}



#gvListSection .nice-table thead th:nth-child(3),
#gvListSection .nice-table tbody td:nth-child(3){
  width: 20%;
  word-break: break-word;
}




/* === Chi tiết column: improved clamp & hover expand === */
#gvListSection .nice-table thead th:nth-child(4),
#gvListSection .nice-table tbody td:nth-child(4){
  width:35%;            /* 14+8+20+35+6+8+9 = 100% */
}


/* default view – 2-line clamp with fade */
#gvListSection .nice-table tbody td:nth-child(4){
  white-space:pre-line;      /* keep manual line breaks */
  overflow-wrap:anywhere;    /* break very long words */
  word-break:break-word;
  hyphens:auto;
  line-height:1.45;

  max-height:3.9em;          /* about 2 lines */
  overflow:hidden;
  position:relative;
  cursor:zoom-in;            /* hint that you can expand */
}
#gvListSection .nice-table tbody td:nth-child(4)::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1.6em;
background:linear-gradient(to bottom, rgba(255,255,255,0), var(--card-bg));
  pointer-events:none;       /* fade-out */
}

/* row hover – expand & scroll if still long */
#gvListSection .nice-table tbody tr:hover td:nth-child(4){
  max-height:12em;
  overflow:auto;
  cursor:auto;
}
#gvListSection .nice-table tbody tr:hover td:nth-child(4)::after{
  display:none;              /* remove fade when expanded */
}


/* Remove extra margins if the detail is wrapped in p/divs */
#gvListSection td:nth-child(4) p,
#gvListSection td:nth-child(4) div{
  margin: 0;
}




/* 5) Link/Ảnh — narrow + ellipsis */
#gvListSection .nice-table thead th:nth-child(5),
#gvListSection .nice-table tbody td:nth-child(5){
  width: 6%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



/* 6) Mức phạt — compact, right aligned */
#gvListSection .nice-table thead th:nth-child(6),
#gvListSection .nice-table tbody td:nth-child(6){
  width: 8%;
  text-align: right;
  white-space: nowrap;
}

/* 7) Người nhắc — compact + ellipsis for long emails */
#gvListSection .nice-table thead th:nth-child(7),
#gvListSection .nice-table tbody td:nth-child(7){
  width: 9%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



/* Ensure link and email text clip nicely */
#gvListSection .nice-table tbody td:nth-child(5) a{
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Clip long URLs inside the Link/Ảnh column */
#gvListSection .nice-table tbody td:nth-child(5) a{
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;     /* shows … */
}


.gv-links a {
  text-decoration: underline;
}


/* Reminders: Link column tweaks */
.nice-table thead th.link-col{ width:260px; }            /* a bit wider */
.link-cell a{ text-decoration: underline; word-break: break-all; }
.link-cell .link-wrap{ display:inline-grid; grid-auto-flow:column; align-items:center; gap:8px; }
.copy-btn{
  border:none; background:transparent; padding:2px 4px; cursor:pointer;
  opacity:0; transition:opacity .15s ease;
}
.link-cell:hover .copy-btn{ opacity:1; }                  /* show on hover */

/* Money column */
.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


/* Popup content styling (improved) */
#ruleModal {
  width: min(720px, 96vw);
}

#ruleModal .modal-header h2 { margin: 0; }

.rule-section {
  padding: 12px 0;
  display: grid;
  gap: 8px;
  border-top: 1px dashed #eef1f5;
}

.rule-section:first-child {
  border-top: none;
}

.rule-label {
  font-weight: 700;
  color: #0f172a;
  letter-spacing: .2px;
}

.rule-text {
  font-size: 1.05rem;
  line-height: 1.5;
  color: #0b1324;
}

.rule-box {
  background: #f8fafc;
  border: 1px solid #e8edf4;
  padding: 14px;
  border-radius: 14px;
  white-space: pre-wrap;
}

/* pretty pill link */
.pill-link {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(16, 24, 40, .04) inset;
}

.pill-link:hover {
  background: #e0e7ff;
}

.pill-link i {
  font-size: 14px;
}


/* Make "Nội dung nhắc nhở" clickable, without underline */
.as-text {
  background: none;
  border: none;
  padding: 0;
  color: #0d6efd;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  /* was underline */
}

.as-text:hover,
.as-text:focus {
  filter: brightness(0.95);
  text-decoration: none;
  /* keep it off on hover/focus */
  outline: none;
}

/* --- Reminders page: simple Home FAB --- */
.fab-home{
  position:fixed; left:20px; bottom:20px;
  width:44px; height:44px; border-radius:9999px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:#111827; text-decoration:none;
  border:1px solid #e5e7eb; box-shadow:0 6px 16px rgba(16,24,40,.12);
  z-index:999; transition:transform .12s ease;
}
.fab-home:hover{ transform:translateY(-2px); }
.fab-home i{ font-size:18px; line-height:1; display:block; }

/* polish for the Home FAB */
.fab-home { -webkit-tap-highlight-color: transparent; }
.fab-home:hover { box-shadow: 0 12px 22px rgba(16,24,40,.15); }
.fab-home:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(13,110,253,.25), 0 6px 16px rgba(16,24,40,.12);
}


/* Hide the floating Watch button until the app is in logged-in mode */
.fab-watch { display: none; }
body.app-mode .fab-watch { display: inline-grid; }

/* Reminders (5-col table): ensure Chi tiết (col 2) is never clamped */
#remindersTable tbody td:nth-child(2) .clamp-2,
#remindersTable tbody td:nth-child(2) .truncate{
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  white-space: inherit;
  overflow: visible;
  text-overflow: clip;
}


/* Mini section: clamp to 3 lines */
#gvMiniSection .record-body{
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 3;                 /* modern syntax (safe no-op where unsupported) */
  -webkit-line-clamp: 3; /* stylelint-disable-line property-no-unknown */
  overflow: hidden;
}

/* On hover: remove the clamp without using vendor props */
#gvMiniSection .record-card:hover .record-body{
  display: block;                 /* break out of -webkit-box so clamp no longer applies */
  max-height: 14em;
  overflow: auto;
}



/* === Lower "Nhắc nhở gần đây" card/table polish === */
#gvMiniSection .table-card{
  border: 1px solid #eef1f5;     /* match the top bar border look */
}

#gvMiniSection .records-title{
  margin: 8px 16px 10px; /* match the 16px page gutter */
  font-weight: 700;
  color: #0f172a;
}


/* column sizing (shrink col 1, grow the 3 new cols) */
#gvMiniTable { table-layout: fixed; }

/* 1) Giáo viên — a bit smaller + ellipsis */
#gvMiniTable thead th:nth-child(1),
#gvMiniTable tbody td:nth-child(1){
  width: 12%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 2) Nội dung phạt */
#gvMiniTable thead th:nth-child(2),
#gvMiniTable tbody td:nth-child(2){ width: 24%; }

/* 3) Chi tiết */
#gvMiniTable thead th:nth-child(3),
#gvMiniTable tbody td:nth-child(3){ width: 28%; }

/* 4) Link/ảnh — compact */
#gvMiniTable thead th:nth-child(4),
#gvMiniTable tbody td:nth-child(4){
  width: 8%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 5) GV bị nhắc (email) */
#gvMiniTable thead th:nth-child(5),
#gvMiniTable tbody td:nth-child(5){
  width: 10%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 6) Bộ phận */
#gvMiniTable thead th:nth-child(6),
#gvMiniTable tbody td:nth-child(6){
  width: 8%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 8) GV kiểm soát */
#gvMiniTable thead th:nth-child(8),
#gvMiniTable tbody td:nth-child(8){
  width: 10%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* 7) Mức phạt (VNĐ) */
#gvMiniTable thead th:nth-child(7),
#gvMiniTable tbody td:nth-child(7){
  width: 10%;
  text-align: right;
  white-space: nowrap;
}






/* teacher column bold like a title */
#gvMiniTable tbody td:nth-child(1){ font-weight: 700; }

.mini-link-cell i{ font-size:14px; }

/* Chi tiết — 4-line preview with soft fade, expand on hover */
#gvMiniTable tbody td:nth-child(3){
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.5;
  max-height: 6em;              /* ~4 lines */
  overflow: hidden;
  position: relative;
}
#gvMiniTable tbody td:nth-child(3)::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1.6em;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--card-bg));
  pointer-events: none;
}
#gvMiniTable tbody tr:hover td:nth-child(3){
  max-height: 16em;
  overflow: auto;
}
#gvMiniTable tbody tr:hover td:nth-child(3)::after{
  display: none;
}


/* === Lower table: Filter bar === */
.mini-filters{
  max-width: var(--content-max);
  margin: 0 auto 10px;
  padding: 8px 12px;
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 1.2fr auto;
  gap: 10px 12px;
}
.mini-filters .mf-item label{
  display:block; font-weight:700; font-size:.85rem; color:#0f172a; margin:0 0 6px;
}
.mini-filters input[type="search"],
.mini-filters select{
  height:38px; padding:10px 12px;
  border:1px solid #e5e7eb; border-radius:12px; background:#fff; font-size:.95rem;
}
.mini-filters .mf-actions{ align-self:end; }

@media (max-width: 840px){
  .mini-filters{ grid-template-columns: 1fr; }
  .mini-filters .mf-actions{ justify-self:start; }
}


/* --- ND yêu cầu: force bottom-right + make it slender --- */
:root { --fab-watch-h: 38px; }     /* tweakable */

.fab-watch{
  position: fixed !important;
  /* pin to bottom-right and ignore any earlier left positioning */
  left: auto !important;
  right: max(16px, env(safe-area-inset-right)) !important;
  bottom: max(16px, env(safe-area-inset-bottom)) !important;

  height: var(--fab-watch-h) !important;
  padding: 0 12px !important;   /* slimmer */
  gap: 6px !important;
  border-radius: 9999px !important;

  /* keep Vietnamese accents clean */
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.fab-watch i{ font-size: 14px !important; }
.fab-watch .fab-label{ font-size: 13px !important; font-weight: 800; }

/* optional: shrink the halo so it doesn't “push” visually */
.fab-watch::before{ inset: -5px; }


/* === Inline labels for the mini filters (lower table filters) === */
#gvMiniFilters .mf-item {
  display: flex;
  align-items: center;
  gap: 12px;              /* space between label and input */
}

#gvMiniFilters .mf-item label {
  margin: 0;              /* kill the top/bottom spacing that pushed labels above */
  white-space: nowrap;    /* keep label on one line */
  font-weight: 600;
}

#gvMiniFilters .mf-item input,
#gvMiniFilters .mf-item select {
  flex: 1;                /* input grows to fill the row */
  min-width: 220px;       /* keeps a reasonable width */
}

/* keep the "Xóa lọc" button aligned in the row */
#gvMiniFilters .mf-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Optional: on small screens, stack label over input again for comfort */
@media (max-width: 700px) {
  #gvMiniFilters .mf-item { flex-direction: column; align-items: stretch; }
  #gvMiniFilters .mf-item input,
  #gvMiniFilters .mf-item select { min-width: 0; width: 100%; }
}


/* Header row for the lower section */
.records-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;   /* space before the filters */
}

/* Keep the section title tight */
.records-header .records-title {
  margin: 0;
}

/* Total chip on the right */
.mini-total {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #f6f8fc;          /* subtle */
  border: 1px solid #e8ecf5;
  font-weight: 600;
  color: #1f2937;
}

.mini-total .label {
  opacity: .8;
  font-weight: 500;
}

.mini-total strong {
  font-variant-numeric: tabular-nums; /* nicer aligned digits */
}

/* Optional: on very small screens, stack them */
@media (max-width: 600px) {
  .records-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* Kill any leftover old total bar if it ever appears */
#miniTotalBar,
#gvMiniFilters .mini-total { display: none !important; }


/* --- Rich text editor --- */
.rte-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 10px 10px 0 0;
  background: #f8fafc;
}

.rte-btn {
  border: 1px solid #e5e7eb;
  background: white;
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
  cursor: pointer;
}
.rte-btn:active { transform: translateY(1px); }
.rte-sep { width: 1px; height: 20px; background: #e5e7eb; }

.rte-size-label { margin-left: 2px; color: #64748b; font-size: .9rem; }
.rte-size { padding: 4px 6px; border-radius: 8px; border: 1px solid #e5e7eb; background: #fff; }

/* Vùng nhập – làm to để dễ gõ */
.rte-editor {
  min-height: 260px;          /* cao hơn một chút */
  max-height: 60vh;
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 14px 16px;         /* rộng rãi hơn */
  background: #fff;
  line-height: 1.6;           /* thoáng hơn khi đọc/gõ */
  font-size: 15px;            /* dễ đọc hơn */
  outline: none;
}
.rte-editor:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(13,110,253,.12);
}


/* Map kích cỡ fontSize 1..7 của execCommand sang px */
.rte-editor font[size="1"] { font-size: 12px; }
.rte-editor font[size="2"] { font-size: 13px; }
.rte-editor font[size="3"] { font-size: 14px; }
.rte-editor font[size="4"] { font-size: 16px; }
.rte-editor font[size="5"] { font-size: 18px; }
.rte-editor font[size="6"] { font-size: 24px; }
.rte-editor font[size="7"] { font-size: 32px; }