/* CSAMEMO — Internal Memo Management System */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --font-sans: 'Kanit', 'Prompt', 'Sarabun', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* ── Teal-blue accent (replaces the old indigo scale) — same variable
     names as before so every rule that already references --blue-* picks
     this up automatically, no need to touch each one individually. ── */
  --blue-900: #0d2f38;
  --blue-800: #123f4b;
  --blue-700: #17586a;
  --blue-600: #1b6e85;
  --blue-500: #22839c;
  --blue-400: #4fa3b8;
  --blue-300: #8ec4d3;
  --blue-200: #bfe0e9;
  --blue-100: #e3f2f6;
  --blue-50:  #f1f9fb;

  /* Warm gold — secondary accent for icon chips / trend badges, kept
     separate from the primary teal so stat cards can read as distinct
     categories rather than four copies of the same color. */
  --gold-600: #b9822a;
  --gold-100: #f7ecd8;

  /* Neutrals carry a faint sage tint toward the accent rather than pure
     grey — chosen, not the default. */
  --gray-900: #16221e;
  --gray-800: #2b3a35;
  --gray-700: #46564f;
  --gray-600: #5f716a;
  --gray-500: #7c8d86;
  --gray-400: #a3b3ac;
  --gray-300: #c7d4ce;
  --gray-200: #dde8e3;
  --gray-100: #eef4f1;
  --gray-50:  #f5f9f7;

  --green-600: #1e9a66;
  --green-100: #dcf2e7;
  --green-700: #157a51;

  --yellow-600: #c9821c;
  --yellow-100: #faecd6;
  --yellow-700: #9c6414;

  --red-600:  #c9463c;
  --red-100:  #f9e2e0;
  --red-700:  #a3352c;

  --orange-600: #c9821c;
  --orange-100: #faecd6;

  --purple-600: #7a5aa8;
  --purple-100: #ece6f5;

  --white: #ffffff;

  /* Semantic tokens */
  --sidebar-bg: rgba(255,255,255,0.55);
  --sidebar-border: rgba(255,255,255,0.7);
  --sidebar-text: var(--gray-700);
  --sidebar-active-bg: var(--blue-600);
  --sidebar-active-text: #ffffff;
  --sidebar-hover-bg: rgba(255,255,255,0.55);
  --sidebar-width: 240px;

  --header-bg: rgba(255,255,255,0.6);
  --header-border: rgba(255,255,255,0.7);

  --content-bg: #eef3f1;
  --content-bg-2: #e4ece8;
  --card-bg: rgba(255,255,255,0.62);
  --card-border: rgba(255,255,255,0.8);
  --card-radius: 18px;
  --card-shadow: 0 18px 40px -22px rgba(23,45,38,0.16);
  --glass-blur: blur(20px) saturate(150%);
  --panel-bg: rgba(255,255,255,0.96);

  --input-border: var(--gray-300);
  --input-focus: var(--blue-600);
  --input-radius: 9px;

  --btn-primary-bg: var(--blue-600);
  --btn-primary-text: var(--white);
  --btn-primary-hover: var(--blue-700);

  --btn-secondary-bg: rgba(255,255,255,0.7);
  --btn-secondary-text: var(--gray-700);
  --btn-secondary-border: rgba(255,255,255,0.9);

  --transition: 150ms ease;
}

/* Dark mode */
[data-theme="dark"] {
  --blue-600: #5fc4e0;
  --blue-500: #4fb2cf;
  --blue-700: #86d3e8;
  --blue-100: rgba(95,196,224,0.16);
  --gold-600: #e0ab5f;
  --gold-100: rgba(224,171,95,0.16);

  --sidebar-bg: rgba(255,255,255,0.045);
  --sidebar-border: rgba(255,255,255,0.09);
  --sidebar-text: var(--gray-600);
  --sidebar-active-bg: var(--blue-600);
  --sidebar-active-text: #06222b;
  --sidebar-hover-bg: rgba(255,255,255,0.06);

  --header-bg: rgba(255,255,255,0.045);
  --header-border: rgba(255,255,255,0.09);

  --content-bg: #0c1512;
  --content-bg-2: #101c17;
  --card-bg: rgba(255,255,255,0.045);
  --card-border: rgba(255,255,255,0.09);
  --card-shadow: 0 18px 40px -22px rgba(0,0,0,0.5);
  --panel-bg: rgba(14,23,19,0.96);

  --input-border: rgba(255,255,255,0.14);
  --gray-900: #e7f0ec;
  --gray-800: #c9dad4;
  --gray-700: #a9beb6;
  --gray-600: #93a8a0;
  --gray-500: #7c9188;
  --gray-300: rgba(255,255,255,0.14);
  --gray-200: rgba(255,255,255,0.09);
  --gray-100: rgba(255,255,255,0.055);
  --gray-50:  rgba(255,255,255,0.03);

  --green-600: #3fc088; --green-100: rgba(63,192,136,0.16); --green-700: #6bd6a6;
  --yellow-600: #e0a83f; --yellow-100: rgba(224,168,63,0.16); --yellow-700: #eec27a;
  --red-600: #e0685e; --red-100: rgba(224,104,94,0.16); --red-700: #ec9187;
  --orange-600: #e0a83f; --orange-100: rgba(224,168,63,0.16);

  --btn-secondary-bg: rgba(255,255,255,0.06);
  --btn-secondary-text: var(--gray-700);
  --btn-secondary-border: rgba(255,255,255,0.12);
}

html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--gray-900);
  background: var(--content-bg);
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Soft ambient corner glow instead of a flat fill — subtle, ties the page
   to the accent + secondary gold without reading as a "hero" gradient. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(640px 480px at 6% -8%, var(--blue-100), transparent 60%),
    radial-gradient(560px 460px at 106% 16%, var(--gold-100), transparent 60%);
}

/* ── Layout ─────────────────────────────── */
.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--sidebar-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width var(--transition);
  z-index: 100;
}

.sidebar.collapsed {
  width: 60px;
  min-width: 60px;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--sidebar-border);
  cursor: pointer;
  user-select: none;
}

.sidebar-logo-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(155deg, var(--blue-600), var(--gold-600));
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  box-shadow: 0 8px 18px -8px var(--blue-600);
}

.sidebar-logo-text {
  color: var(--gray-900);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-logo-sub {
  color: var(--gray-500);
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 10px 8px;
}

.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 2px; }

.sidebar-section-label {
  color: var(--gray-500);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 14px 10px 6px;
  white-space: nowrap;
  overflow: hidden;
  opacity: 1;
  transition: opacity var(--transition);
  font-family: var(--font-mono);
}

.sidebar.collapsed .sidebar-section-label { opacity: 0; }

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 2px;
  color: var(--sidebar-text);
  cursor: pointer;
  border-radius: 10px;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

.sidebar-item:hover {
  background: var(--sidebar-hover-bg);
  color: var(--gray-900);
}

.sidebar-item.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  box-shadow: 0 8px 18px -10px var(--blue-600);
}
.sidebar-item.active:hover { color: var(--sidebar-active-text); }

.sidebar-item-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-item-label {
  font-size: 14px;
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-item-badge {
  background: var(--blue-500);
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  flex-shrink: 0;
}

.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--sidebar-border);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 8px;
  border-radius: 10px;
  transition: background var(--transition);
}

.sidebar-user:hover { background: var(--sidebar-hover-bg); }

.sidebar-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(155deg, var(--gold-600), var(--blue-600));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.sidebar-user-info {
  overflow: hidden;
  flex: 1;
}

.sidebar-user-name {
  color: var(--gray-900);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  color: var(--gray-500);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Main content ──────────────────────── */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent; /* lets body's ambient corner glow show through */
}

.page-header {
  background: var(--header-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--header-border);
  padding: 0 28px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 20;
}

.page-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
}

.page-subtitle {
  font-size: 12px;
  color: var(--gray-500);
  font-family: var(--font-mono);
}

.page-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.page-body::-webkit-scrollbar { width: 6px; }
.page-body::-webkit-scrollbar-track { background: transparent; }
.page-body::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }

/* ── Cards ──────────────────────────────── */
.card {
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-800);
}

.card-body { padding: 20px; }

/* ── Buttons ────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--input-radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  font-family: var(--font-sans);
  white-space: nowrap;
  text-decoration: none;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
}
.btn-primary:hover:not(:disabled) { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); }

.btn-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}
.btn-secondary:hover:not(:disabled) { background: var(--gray-100); }

.btn-danger {
  background: var(--red-100);
  color: var(--red-700);
  border-color: #fca5a5;
}
.btn-danger:hover:not(:disabled) { background: #fecaca; }

.btn-success {
  background: var(--green-100);
  color: var(--green-700);
  border-color: #6ee7b7;
}
.btn-success:hover:not(:disabled) { background: #a7f3d0; }

.btn-sm { padding: 5px 11px; font-size: 13px; }
.btn-lg { padding: 11px 22px; font-size: 15px; }
.btn-icon { padding: 8px; border-radius: var(--input-radius); }

/* ── Form elements ──────────────────────── */
.form-group { margin-bottom: 16px; }

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 5px;
}

.form-label .required { color: var(--red-600); margin-left: 3px; }

.form-control {
  width: 100%;
  padding: 9px 13px;
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  font-size: 14px;
  font-family: var(--font-sans);
  color: var(--gray-900);
  background: var(--card-bg);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

.form-control:focus {
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

.form-control::placeholder { color: var(--gray-400); }

textarea.form-control { resize: vertical; min-height: 100px; line-height: 1.65; }

select.form-control { cursor: pointer; }

/* ── Stat cards ─────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 20px;
  box-shadow: var(--card-shadow);
}

.stat-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.stat-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.stat-card-trend {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}

.stat-card-value {
  font-size: 30px;
  font-weight: 700;
  color: var(--gray-900);
  font-family: var(--font-mono);
  line-height: 1;
  margin-bottom: 4px;
}

.stat-card-label {
  font-size: 13px;
  color: var(--gray-500);
}

/* ── Table ──────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--card-radius);
  border: 1px solid var(--card-border);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

thead th {
  background: var(--gray-50);
  padding: 11px 15px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--card-border);
  white-space: nowrap;
}

tbody tr {
  border-bottom: 1px solid var(--gray-100);
  transition: background var(--transition);
}
[data-theme="dark"] tbody tr { border-bottom-color: var(--gray-200); }

tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--gray-50); }
[data-theme="dark"] tbody tr:hover { background: var(--gray-100); }

tbody td { padding: 13px 15px; color: var(--gray-800); vertical-align: middle; }

/* ── Status pills ───────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.pill-draft    { background: var(--gray-100);   color: var(--gray-600); }
.pill-pending  { background: var(--yellow-100); color: var(--yellow-700); }
.pill-approved { background: var(--green-100);  color: var(--green-700); }
.pill-rejected { background: var(--red-100);    color: var(--red-700); }
.pill-sent     { background: var(--blue-50);    color: var(--blue-600); }
.pill-cancelled{ background: var(--orange-100); color: var(--orange-600); }

/* ── Search & filter bar ────────────────── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.search-input-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
}

.search-input-wrap .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 9px 13px 9px 36px;
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  font-size: 14px;
  background: var(--card-bg);
  color: var(--gray-900);
  outline: none;
  font-family: var(--font-sans);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.search-input:focus {
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px rgba(22,163,74,0.15);
}

/* ── Filter chips (dept / status quick filters) ──────────── */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: 99px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  border: 1.5px solid var(--card-border);
  background: var(--card-bg);
  color: var(--gray-700);
  transition: all var(--transition);
}
.filter-chip:hover { border-color: var(--blue-300); }
.filter-chip.active {
  border-color: transparent;
  background: var(--blue-600);
  color: var(--white);
  font-weight: 600;
}
.filter-chip-count {
  background: var(--gray-100);
  color: var(--gray-600);
  border-radius: 99px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
}
.filter-chip.active .filter-chip-count { background: rgba(255,255,255,0.25); color: var(--white); }

/* ── Memo list ──────────────────────────── */
.memo-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 17px 22px;
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  transition: background var(--transition);
}
[data-theme="dark"] .memo-item { border-bottom-color: var(--gray-200); }
.memo-item:last-child { border-bottom: none; }
.memo-item:hover { background: var(--gray-50); }
[data-theme="dark"] .memo-item:hover { background: var(--gray-100); }
.memo-item.selected { background: var(--blue-50); }
[data-theme="dark"] .memo-item.selected { background: #0d2b1e; }

.memo-item-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--blue-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-600);
  font-size: 17px;
  flex-shrink: 0;
  margin-top: 1px;
}

.memo-item-body { flex: 1; min-width: 0; }

.memo-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}

.memo-item-ref {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gray-500);
}

.memo-item-date {
  font-size: 12px;
  color: var(--gray-400);
  white-space: nowrap;
}

.memo-item-subject {
  font-weight: 600;
  font-size: 15px;
  color: var(--gray-900);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.memo-item-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--gray-500);
}

.memo-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Two-panel layout ───────────────────── */
.two-panel {
  display: flex;
  gap: 0;
  height: 100%;
  overflow: hidden;
  border-radius: var(--card-radius);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

.two-panel-list {
  width: 340px;
  min-width: 280px;
  border-right: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.two-panel-list-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 10px;
}

.two-panel-list-search {
  padding: 10px 14px;
  border-bottom: 1px solid var(--card-border);
  flex-shrink: 0;
}

.two-panel-list-body {
  flex: 1;
  overflow-y: auto;
}

.two-panel-list-body::-webkit-scrollbar { width: 4px; }
.two-panel-list-body::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 2px; }

.two-panel-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Document preview ───────────────────── */
.doc-preview-wrap {
  flex: 1;
  overflow: auto;
  background: #525659;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
}

.doc-preview-paper {
  background: white;
  width: 210mm;
  min-height: 297mm;
  padding: 25mm 20mm;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25);
  color: #111;
  font-family: 'Sarabun', 'TH Sarabun New', serif;
  font-size: 14pt;
  line-height: 1.8;
  position: relative;
}

.doc-preview-toolbar {
  padding: 10px 16px;
  border-bottom: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--card-bg);
  flex-shrink: 0;
}

.doc-header {
  text-align: center;
  margin-bottom: 24px;
  border-bottom: 2px solid #16a34a;
  padding-bottom: 16px;
}

.doc-header-org {
  font-size: 16pt;
  font-weight: 700;
  color: #16a34a;
  margin-bottom: 4px;
}

.doc-header-type {
  font-size: 14pt;
  font-weight: 600;
  margin-bottom: 8px;
}

.doc-meta-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin-bottom: 20px;
  font-size: 13pt;
}

.doc-meta-key { font-weight: 600; white-space: nowrap; }

.doc-section { margin-bottom: 16px; }
.doc-section-title { font-weight: 700; text-decoration: underline; margin-bottom: 8px; }
.doc-body { text-align: justify; }

.doc-signature {
  margin-top: 60px;
  text-align: center;
}

.doc-sign-line {
  display: inline-block;
  width: 200px;
  border-bottom: 1px solid #111;
  margin-bottom: 6px;
}

/* ── Approval panel ─────────────────────── */
.approval-steps { display: flex; flex-direction: column; gap: 0; }

.approval-step {
  display: flex;
  gap: 14px;
  padding: 16px 20px;
  position: relative;
}

.approval-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 33px;
  top: 52px;
  bottom: 0;
  width: 2px;
  background: var(--gray-200);
}

.approval-step-indicator {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--card-bg);
  z-index: 1;
  margin-top: 5px;
  color: var(--gray-500);
}

.approval-step-indicator.approved {
  background: var(--blue-100);
  border-color: var(--blue-600);
  color: var(--blue-600);
}

.approval-step-indicator.rejected {
  background: var(--red-100);
  border-color: var(--red-600);
  color: var(--red-600);
}

.approval-step-indicator.pending {
  background: var(--yellow-100);
  border-color: var(--yellow-600);
  color: var(--yellow-600);
}

.approval-step-body { flex: 1; }

.approval-step-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--gray-900);
  margin-bottom: 2px;
}

.approval-step-role {
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 6px;
}

.approval-step-comment {
  background: var(--gray-50);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--gray-700);
  border-left: 3px solid var(--gray-300);
  margin-top: 6px;
}

.approval-step-comment.approved { border-left-color: var(--blue-600); }
.approval-step-comment.rejected { border-left-color: var(--red-600); }

.approval-step-time {
  font-size: 11px;
  color: var(--gray-400);
  font-family: var(--font-mono);
  margin-top: 4px;
}

.approval-actions {
  padding: 16px 20px;
  border-top: 1px solid var(--card-border);
  display: flex;
  gap: 8px;
}

/* ── Memo editor ────────────────────────── */
.editor-layout {
  display: flex;
  height: 100%;
  overflow: hidden;
}

.editor-form {
  width: 360px;
  min-width: 300px;
  border-right: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.editor-form-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--card-border);
  font-weight: 700;
  font-size: 15px;
  color: var(--gray-800);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.editor-form-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.editor-form-body::-webkit-scrollbar { width: 4px; }
.editor-form-body::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 2px; }

.editor-form-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--card-border);
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.editor-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Dashboard chart placeholder ─────────── */
.chart-placeholder {
  background: var(--gray-50);
  border: 2px dashed var(--gray-200);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  font-size: 13px;
  gap: 8px;
}

/* ── Activity feed ──────────────────────── */
.activity-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-100);
}
[data-theme="dark"] .activity-item { border-bottom-color: var(--gray-200); }
.activity-item:last-child { border-bottom: none; }

.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue-500);
  margin-top: 6px;
  flex-shrink: 0;
}

.activity-text {
  font-size: 14px;
  color: var(--gray-700);
  line-height: 1.55;
  flex: 1;
}

.activity-time {
  font-size: 12px;
  color: var(--gray-400);
  white-space: nowrap;
  font-family: var(--font-mono);
}

/* ── Tweaks panel ───────────────────────── */
.tweaks-trigger {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blue-600);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(22,163,74,0.4);
  transition: transform var(--transition), box-shadow var(--transition);
  z-index: 200;
  font-size: 18px;
}

.tweaks-trigger:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(22,163,74,0.5);
}

.tweaks-panel {
  position: fixed;
  bottom: 80px;
  right: 24px;
  width: 300px;
  /* Deliberately its own near-opaque background, NOT var(--card-bg) — that
     token is now user-adjustable (ความเข้มพื้นหลัง slider below), and a
     floating settings popover sitting over arbitrary page content needs to
     stay legible no matter how transparent the user sets everything else
     to. Was the cause of the sidebar user name bleeding through behind
     this panel before this fix. */
  background: var(--panel-bg);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.15);
  z-index: 199;
  overflow: hidden;
  animation: slideUp 0.2s ease;
}

@keyframes slideUp {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.tweaks-panel-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--card-border);
  font-weight: 700;
  font-size: 14px;
  color: var(--gray-800);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tweaks-panel-body { padding: 16px; display: flex; flex-direction: column; gap: 16px; }

.tweak-group-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  font-family: var(--font-mono);
}

.tweak-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tweak-label {
  font-size: 14px;
  color: var(--gray-700);
}

/* Toggle switch */
.toggle {
  position: relative;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

.toggle input { opacity: 0; width: 0; height: 0; }

.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--gray-300);
  border-radius: 11px;
  cursor: pointer;
  transition: background var(--transition);
}

.toggle input:checked + .toggle-track { background: var(--blue-600); }

.toggle-track::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  transition: transform var(--transition);
}

.toggle input:checked + .toggle-track::after { transform: translateX(18px); }

/* Color swatch picker */
.color-swatches {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--transition), transform var(--transition);
}

.color-swatch:hover { transform: scale(1.15); }
.color-swatch.selected { border-color: var(--gray-900); }

/* Slider */
.tweak-slider {
  -webkit-appearance: none;
  width: 120px;
  height: 4px;
  border-radius: 2px;
  background: var(--gray-200);
  outline: none;
}

.tweak-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--blue-600);
  cursor: pointer;
}

/* ── Responsive ─────────────────────────── */
/* Tablet (iPad portrait and similar, ≤900px): sidebar shrinks to a
   permanent icon rail — still one tap away, no drawer needed since there's
   enough width to keep it on-screen. */
@media (max-width: 900px) {
  .sidebar { width: 60px; min-width: 60px; }
  .sidebar .sidebar-item-label,
  .sidebar .sidebar-logo-text,
  .sidebar .sidebar-section-label,
  .sidebar .sidebar-user-info { display: none; }
  .two-panel { flex-direction: column; }
  .two-panel-list { width: 100%; border-right: none; border-bottom: 1px solid var(--card-border); max-height: 300px; }
  .editor-layout { flex-direction: column; }
  .editor-form { width: 100%; border-right: none; border-bottom: 1px solid var(--card-border); max-height: 50%; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .bento-stats { flex-wrap: wrap; }
  .bento-stats > * { flex-basis: calc(50% - 8px); }
}

/* Hamburger button — hidden on desktop/tablet, shown only on true phones.
   Placed inside PageHeader (dashboard.jsx) plus MemoEditor's and
   MemoApprovePage's own custom headers (they don't use PageHeader), all
   calling window.CSAMEMO_MOBILE_NAV.toggle() (see api.js) so none of them
   need collapsed/setCollapsed threaded down as props. */
.mobile-menu-btn {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  border: 1px solid var(--card-border); border-radius: 8px;
  background: var(--card-bg); color: var(--gray-700);
  cursor: pointer;
}

/* Phone (≤640px): sidebar becomes an off-canvas drawer instead of a
   permanent rail — every pixel of width matters at this size. Overrides
   the 900px tablet rule's width:60px with !important since specificity
   alone won't reliably win (both are max-width media queries; whichever
   is declared later in the cascade applies at widths where both match,
   which happens to already be the case here — !important makes it robust
   even if these blocks get reordered later). */
@media (max-width: 640px) {
  .mobile-menu-btn { display: inline-flex; }

  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 260px !important; min-width: 260px !important;
    transform: translateX(0);
    transition: transform var(--transition);
    box-shadow: 16px 0 48px rgba(0,0,0,0.3);
  }
  .sidebar.collapsed { transform: translateX(-100%); }
  /* Full drawer shows real labels, not the tablet icon rail */
  .sidebar .sidebar-item-label,
  .sidebar .sidebar-logo-text,
  .sidebar .sidebar-section-label,
  .sidebar .sidebar-user-info { display: block !important; opacity: 1 !important; }

  .page-header { padding: 0 14px; height: 56px; }
  .page-header-right { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
  .page-body { padding: 14px; }
  .card-body { padding: 14px; }
  .card-header { padding: 12px 14px; }

  /* iOS Safari auto-zooms the page on focusing any input under 16px —
     bump form controls to 16px only on phones, desktop keeps the tighter
     14px sizing. */
  .form-control, .search-input, select.form-control { font-size: 16px; }

  /* Bigger tap targets */
  .btn { min-height: 40px; }
  .sidebar-item { padding: 12px; }

  .stats-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }

  .modal-overlay { padding: 12px; }

  .tweaks-panel { left: 12px; right: 12px; width: auto; bottom: 76px; }
  .tweaks-trigger { right: 16px; bottom: 16px; }

  table { font-size: 13px; }
  thead th, tbody td { padding: 9px 10px; }
}

/* ── Utility ────────────────────────────── */
.text-mono { font-family: var(--font-mono); }
.text-sm { font-size: 13px; }
.text-xs { font-size: 11px; }
.text-muted { color: var(--gray-500); }
.text-bold { font-weight: 600; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.w-full { width: 100%; }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--gray-400);
  gap: 12px;
}

.empty-state-icon { font-size: 40px; }
.empty-state-title { font-size: 16px; font-weight: 600; color: var(--gray-600); }
.empty-state-desc { font-size: 14px; }

.divider {
  height: 1px;
  background: var(--card-border);
  margin: 12px 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.badge-blue { background: var(--blue-100); color: var(--blue-700); }
.badge-gray { background: var(--gray-100); color: var(--gray-600); }

.tooltip-wrap { position: relative; display: inline-flex; }

/* ── Rich-text editor: inserted images ──────────────────────────
   Part of RichTextEditor's own "always light, paper-like" chrome (see
   memo-editor.jsx) — literal colors on purpose, not theme tokens, same as
   the rest of that toolbar. */
.rte-img-wrap {
  position: relative; display: inline-block; max-width: 100%; vertical-align: bottom; cursor: grab;
  /* บอกเบราว์เซอร์ล่วงหน้าว่าอย่ายึด touchstart บนรูปนี้ไปทำ scroll/pan เอง —
     ต้องประกาศผ่าน CSS ก่อน touchstart จะเกิดขึ้นด้วยซ้ำ ประกาศตอน touchmove
     ทีหลัง (แค่เรียก preventDefault ใน JS) ไม่ทันแล้ว เบราว์เซอร์ตัดสินใจไปแล้ว
     ว่าเป็น scroll gesture — ดู onEditorTouchStart ใน memo-editor.jsx */
  touch-action: none;
}
.rte-img-wrap:active { cursor: grabbing; }
.rte-img-handle {
  position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px;
  background: rgba(37,99,235,.85); border: 2px solid #fff; border-radius: 3px;
  cursor: nwse-resize; opacity: 0; transition: opacity .15s;
  touch-action: none;
}
.rte-img-wrap:hover .rte-img-handle { opacity: 1; }
/* ทัชสกรีน (มือถือ/แท็บเล็ต/iPad) ไม่มีสถานะ hover เลย — ปุ่มที่ซ่อนไว้จนกว่าจะ
   hover เลยมองไม่เห็น/แตะไม่โดนเลย แสดงไว้ตลอดแทน พร้อมขยายพื้นที่แตะให้ใหญ่
   ขึ้น (นิ้วเล็งจุด 14px แม่นยำยากกว่าเมาส์มาก) */
@media (hover: none) {
  .rte-img-handle { opacity: 1; width: 24px; height: 24px; }
}

/* ── Print styles ────────────────────────────────────────────── */
@media print {
  html, body { overflow: visible !important; height: auto !important; position: relative !important; }
  body > * { visibility: hidden !important; }

  #print-area {
    visibility: visible !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important;
    overflow: visible !important;
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #print-area * {
    visibility: visible !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  #print-area > * { height: auto !important; }

  .memo-paper-wrap {
    padding: 0 !important;
    overflow: visible !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
  }

  .memo-paper {
    transform: none !important;
    min-height: 0 !important;
    box-shadow: none !important;
    margin: 0 auto !important;
    page-break-after: always;
  }

  .memo-preview-toolbar,
  .sig-resize-handle,
  .sig-seq-badge { display: none !important; visibility: hidden !important; }
}

@page {
  size: A4 portrait;
  margin: 0;
}

/* ── Template Library ─────────────────────────────────────────── */
.tl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 15px;
}
.tl-card {
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 18px;
  position: relative;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s, border-color .2s;
  box-shadow: 0 1px 4px rgba(26,39,68,.07);
}
.tl-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--blue-500);
  transform: scaleX(0); transform-origin: left;
  transition: transform .2s;
}
.tl-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(26,39,68,.12); border-color: var(--blue-300); }
.tl-card:hover::before { transform: scaleX(1); }

.tl-card-actions {
  position: absolute; top: 12px; right: 12px;
  display: flex; gap: 5px;
  opacity: 0; pointer-events: none;
  transition: opacity .15s;
}
.tl-card:hover .tl-card-actions { opacity: 1; pointer-events: all; }
/* pointer-events:none ไม่ใช่แค่มองไม่เห็น — บนทัชสกรีนที่ไม่มี hover เลย ปุ่ม
   แก้ไข/ลบ พวกนี้จะแตะไม่โดนเด็ดขาด (ไม่ใช่แค่จางๆ แต่กดไม่ติดจริงๆ) ต่างจาก
   .rte-img-handle ที่แค่โปร่งใส — บังคับให้ทัชสกรีนเห็น+กดได้เสมอ */
@media (hover: none) {
  .tl-card-actions { opacity: 1; pointer-events: all; }
}

.tl-ca-btn {
  width: 30px; height: 30px; border-radius: 7px;
  border: 1px solid var(--card-border); background: var(--card-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--gray-400);
  cursor: pointer; transition: all .12s;
}
.tl-ca-btn:hover     { background: var(--gray-50); border-color: var(--blue-300); }
.tl-ca-del:hover     { background: var(--red-100); border-color: var(--red-600); color: var(--red-600); }

.tl-use-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 13px;
  background: var(--blue-100); color: var(--blue-700);
  border: none; border-radius: 7px;
  font-size: 13px; font-weight: 600;
  opacity: 0; pointer-events: none;
  transition: opacity .15s, background .12s;
  cursor: pointer; white-space: nowrap; font-family: var(--font-sans);
}
.tl-card:hover .tl-use-btn { opacity: 1; pointer-events: all; }
.tl-use-btn:hover { background: var(--blue-600); color: #fff; }
@media (hover: none) {
  .tl-use-btn { opacity: 1; pointer-events: all; }
}

.tl-icon-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
}
.tl-icon-opt {
  aspect-ratio: 1; border-radius: 8px;
  border: 1.5px solid var(--gray-200);
  background: var(--gray-50);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer; transition: all .12s;
}
.tl-icon-opt:hover  { border-color: var(--blue-500); background: var(--blue-50); }
.tl-icon-opt.active { border-color: var(--blue-500); background: var(--blue-50); box-shadow: 0 0 0 2px var(--blue-500); }

.tl-color-opt {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer; transition: transform .12s, border-color .12s;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.07);
}
.tl-color-opt:hover  { transform: scale(1.15); }
.tl-color-opt.active { border-color: var(--gray-900); transform: scale(1.18); }

.tl-list-row { transition: background var(--transition); }
.tl-list-row:hover { background: var(--gray-50); }

.tl-compact-card {
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 14px 12px;
  transition: box-shadow .15s, border-color .15s;
}
.tl-compact-card:hover { box-shadow: 0 4px 16px rgba(26,39,68,.1); border-color: var(--blue-300); }

/* ── Shared modal chrome (dialogs across admin pages) ────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15,25,50,0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}

.modal-card {
  background: var(--panel-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(26,39,68,.18);
  color: var(--gray-900);
}

.modal-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--card-border);
  position: sticky; top: 0;
  background: var(--panel-bg);
  border-radius: 14px 14px 0 0;
}

.modal-card-footer {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--card-border);
}

.modal-close-btn {
  width: 32px; height: 32px; border-radius: 7px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-400);
  cursor: pointer;
  transition: all var(--transition);
}
.modal-close-btn:hover { background: var(--gray-100); color: var(--gray-700); }