:root {
  --panel: rgba(12, 22, 43, 0.72);
  --panel-strong: rgba(14, 26, 50, 0.82);
  --panel-soft: rgba(15, 28, 56, 0.55);
  --line: rgba(116, 170, 255, 0.24);
  --line-strong: rgba(137, 213, 255, 0.42);
  --muted: #95abc8;
  --accent: #7cf2ff;
  --accent-2: #3a8dff;
  --accent-soft: rgba(124, 242, 255, 0.16);
  --glow: 0 0 0 1px rgba(81, 179, 255, 0.22), 0 18px 48px rgba(5, 14, 30, 0.62);
  --glow-soft: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 36px rgba(2, 8, 22, 0.45);
  --glow-strong: 0 0 0 1px rgba(124, 242, 255, 0.45), 0 0 28px rgba(124, 242, 255, 0.22);
  --button-hover-filter: brightness(1.06);
  --button-hover-border: rgba(137, 213, 255, 0.56);
  --radius-md: 12px;
  --radius-lg: 16px;
}

* { box-sizing: border-box; }

/* Keep every interactive control on the same typeface as the body. Browsers
   default <button>, <input>, <select>, <textarea> to a UA system font, which
   was making some buttons look like Helvetica/system instead of Inter. */
button,
input,
select,
textarea,
summary,
optgroup,
option {
  font-family: inherit;
}

html {
  scrollbar-color: rgba(124, 242, 255, 0.32) transparent;
  scrollbar-width: thin;
}

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #eaf3ff;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background-color: #060c18;
  background-image:
    radial-gradient(1100px 620px at 8% 12%, rgba(52, 236, 255, 0.10) 0%, transparent 60%),
    radial-gradient(900px 540px at 92% 8%, rgba(111, 121, 255, 0.10) 0%, transparent 60%),
    radial-gradient(1200px 700px at 50% 110%, rgba(43, 125, 255, 0.13) 0%, transparent 65%),
    linear-gradient(160deg, #040816 0%, #08101d 42%, #0a1530 100%);
  background-attachment: fixed;
}

body::before,
body::after {
  content: "";
  position: fixed;
  border-radius: 999px;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

body::before {
  width: 520px;
  height: 520px;
  left: -180px;
  top: 14%;
  background: radial-gradient(circle, rgba(52, 236, 255, 0.45) 0%, rgba(52, 236, 255, 0.04) 65%);
  opacity: 0.32;
  animation: orbDriftA 22s ease-in-out infinite;
}

body::after {
  width: 460px;
  height: 460px;
  right: -160px;
  bottom: 6%;
  background: radial-gradient(circle, rgba(111, 121, 255, 0.55) 0%, rgba(111, 121, 255, 0.05) 68%);
  opacity: 0.34;
  animation: orbDriftB 28s ease-in-out infinite;
}

@keyframes orbDriftA {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(40px, -34px); }
}

@keyframes orbDriftB {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-46px, 28px); }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none;
  }
}

::selection {
  background: rgba(124, 242, 255, 0.32);
  color: #eaf3ff;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(124, 242, 255, 0.28), rgba(58, 141, 255, 0.32));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(124, 242, 255, 0.45), rgba(58, 141, 255, 0.5));
  background-clip: padding-box;
  border: 2px solid transparent;
}

.auth-gate {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  z-index: 60;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 12%, rgba(52, 236, 255, 0.2) 0%, transparent 36%),
    radial-gradient(circle at 85% 84%, rgba(43, 125, 255, 0.28) 0%, transparent 34%),
    linear-gradient(160deg, #040816 0%, #08101d 42%, #0a1530 100%);
}

.auth-gate::before,
.auth-gate::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(8px);
  pointer-events: none;
}

.auth-gate::before {
  width: 420px;
  height: 420px;
  left: -130px;
  bottom: -160px;
  background: radial-gradient(circle, rgba(23, 214, 255, 0.8) 0%, rgba(23, 214, 255, 0.06) 65%);
  opacity: 0.45;
}

.auth-gate::after {
  width: 340px;
  height: 340px;
  right: -100px;
  top: 20px;
  background: radial-gradient(circle, rgba(111, 121, 255, 0.7) 0%, rgba(111, 121, 255, 0.08) 68%);
  opacity: 0.5;
}

.auth-card {
  position: relative;
  z-index: 1;
  width: min(92vw, 420px);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.1rem;
  background: var(--panel);
  backdrop-filter: blur(18px);
  box-shadow: var(--glow);
  text-align: center;
}

.brand-label {
  margin: 0;
  font-size: 0.74rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-card h2 {
  margin: 0.28rem 0 0.5rem;
  font-weight: 700;
}

.auth-desc {
  margin: 0 0 0.85rem;
  color: #c4daf5;
  font-size: 0.92rem;
}

.auth-status {
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

#google-login-btn {
  display: inline-flex;
  justify-content: center;
}

.admin-shell.locked { display: none; }
.admin-shell {
  padding: 1.1rem 1.25rem 1.4rem;
  position: relative;
  z-index: 1;
  max-width: 1480px;
  margin: 0 auto;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(20, 38, 70, 0.55) 0%, rgba(10, 20, 38, 0.45) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--glow-soft);
}

.topbar h1 {
  margin: 0;
  font-size: 1.18rem;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, #d2f1ff 0%, #7cf2ff 50%, #6ba7ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.topbar h1::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: linear-gradient(135deg, #84f7ff 0%, #1dd8ff 45%, #1fa8ff 100%);
  box-shadow: 0 6px 18px rgba(31, 168, 255, 0.42), 0 0 0 1px rgba(124, 242, 255, 0.4) inset;
  flex-shrink: 0;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2 3 6v6c0 5 3.8 9.4 9 10 5.2-.6 9-5 9-10V6l-9-4z'/></svg>");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 14px 14px;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2 3 6v6c0 5 3.8 9.4 9 10 5.2-.6 9-5 9-10V6l-9-4z'/></svg>");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 14px 14px;
}

.topbar p { margin: 0.25rem 0 0; color: #97adca; }

#admin-who {
  display: block;
  margin-top: 0.3rem;
  color: #b3c7e5;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}

.top-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

/* Status text lives inline in the topbar's right-side action row so it
   doesn't push the page down. Truncate with ellipsis so a long message
   can't bump the buttons off the row. */
.topbar-status {
  margin: 0;
  padding: 0;
  color: #97adca;
  font-size: 0.85rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 28rem;
  text-align: right;
}

.topbar-status:empty {
  display: none;
}

.btn,
.chat-link-btn,
.file-input-btn,
button {
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, filter 150ms ease;
}

.btn:not(:disabled):hover,
.chat-link-btn:hover,
.file-input-btn:hover,
.tab:hover,
button:not(:disabled):hover {
  filter: var(--button-hover-filter);
  border-color: var(--button-hover-border);
}

.btn:not(:disabled):hover {
  background: rgba(23, 43, 76, 0.95);
}

.btn.ghost:not(:disabled):hover {
  background: rgba(20, 38, 68, 0.9);
}

.btn.chat-link-btn:hover {
  background: linear-gradient(135deg, #c6d7ff 0%, #94b7ff 45%, #779fff 100%);
}

#save-all-btn:hover,
#bulk-delete-btn:hover {
  filter: var(--button-hover-filter);
  border-color: var(--button-hover-border);
  background: rgba(25, 46, 82, 0.95);
}

.btn {
  border: 1px solid rgba(116, 170, 255, 0.3);
  background: rgba(16, 31, 57, 0.92);
  color: #eaf3ff;
  border-radius: 10px;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  text-decoration: none;
}

.btn.ghost { opacity: 0.9; }

.chat-link-btn {
  border: 0;
  color: #041225;
  font-weight: 700;
  background: linear-gradient(135deg, #c6d7ff 0%, #94b7ff 45%, #779fff 100%);
  box-shadow: 0 8px 22px rgba(87, 132, 255, 0.35);
}

.chat-link-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(124, 176, 255, 0.3), 0 8px 22px rgba(87, 132, 255, 0.35);
}

.refresh-btn-icon {
  display: inline-block;
  margin-right: 0.35rem;
  line-height: 1;
  font-size: 1.05rem;
}

#refresh-btn.is-loading {
  pointer-events: none;
  opacity: 0.8;
}

#refresh-btn.is-loading .refresh-btn-icon {
  animation: spin-refresh-admin 0.9s linear infinite;
}

@keyframes spin-refresh-admin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#refresh-btn {
  font-size: 0.96rem;
  font-weight: 700;
  padding: 0.58rem 0.95rem;
}

.tabs {
  margin-top: 1rem;
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(20, 38, 70, 0.55) 0%, rgba(10, 20, 38, 0.45) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  width: fit-content;
  max-width: 100%;
  box-shadow: var(--glow-soft);
}

.tab {
  border: 1px solid transparent;
  background: transparent;
  color: #b7d5ff;
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.tab:not(.active):hover {
  background: rgba(20, 38, 68, 0.55);
  border-color: rgba(116, 170, 255, 0.22);
  color: #dff5ff;
}

.tab.active {
  background: linear-gradient(135deg, #84f7ff 0%, #1dd8ff 45%, #1fa8ff 100%);
  color: #041225;
  border-color: rgba(124, 242, 255, 0.6);
  box-shadow: 0 8px 22px rgba(31, 168, 255, 0.35), 0 0 0 1px rgba(124, 242, 255, 0.4) inset;
}

.tab::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  opacity: 0.92;
}

.tab[data-tab="documents"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='16' y1='13' x2='8' y2='13'/><line x1='16' y1='17' x2='8' y2='17'/><polyline points='10 9 9 9 8 9'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='16' y1='13' x2='8' y2='13'/><line x1='16' y1='17' x2='8' y2='17'/><polyline points='10 9 9 9 8 9'/></svg>");
}

.tab[data-tab="users"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
}

.tab[data-tab="analytics"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3v18h18'/><path d='M7 14l4-4 4 4 5-6'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3v18h18'/><path d='M7 14l4-4 4 4 5-6'/></svg>");
}

.tab[data-tab="logs"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='8' y1='6' x2='21' y2='6'/><line x1='8' y1='12' x2='21' y2='12'/><line x1='8' y1='18' x2='21' y2='18'/><circle cx='3.5' cy='6' r='1.2'/><circle cx='3.5' cy='12' r='1.2'/><circle cx='3.5' cy='18' r='1.2'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='8' y1='6' x2='21' y2='6'/><line x1='8' y1='12' x2='21' y2='12'/><line x1='8' y1='18' x2='21' y2='18'/><circle cx='3.5' cy='6' r='1.2'/><circle cx='3.5' cy='12' r='1.2'/><circle cx='3.5' cy='18' r='1.2'/></svg>");
}

.panel { display: none; margin-top: 1rem; }
.panel.active {
  display: block;
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1rem 1.15rem 1.15rem;
  /* NOTE: deliberately no `backdrop-filter` here. The dept-dropdown menus
     inside table rows use `position: fixed` and get positioned via JS with
     viewport coordinates (getBoundingClientRect). Any backdrop-filter on
     an ancestor would establish a new containing block for those fixed-
     positioned descendants, breaking placement. The opaque gradient below
     keeps the panel readable on its own. */
  background:
    linear-gradient(180deg, rgba(16, 30, 58, 0.85) 0%, rgba(10, 20, 40, 0.78) 100%);
  box-shadow: var(--glow-soft);
  animation: panelFadeIn 240ms ease-out;
}

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

.panel h2 {
  margin: 0 0 0.85rem;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #d8eaff;
}

.panel h2::before {
  content: "";
  width: 4px;
  height: 18px;
  border-radius: 3px;
  background: linear-gradient(180deg, #84f7ff 0%, #1dd8ff 50%, #1fa8ff 100%);
  box-shadow: 0 0 12px rgba(124, 242, 255, 0.5);
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

.panel-head h2 { margin: 0; }

.analytics-head {
  align-items: center;
}

.analytics-csv-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.analytics-csv-icon {
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 900;
}

.inline-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  justify-content: flex-end;
}

.upload-department-dropdown {
  min-width: 220px;
  flex: 0 0 220px;
}

/* "Yeni departman ekle" inline form (sits below the upload form on the
   Dokümanlar tab). Closed it's just a small summary chip; opening it reveals
   the input + Oluştur button. */
.department-create {
  margin: 0.35rem 0 0.6rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.department-create-summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.7rem;
  border: 1px solid rgba(116, 170, 255, 0.34);
  border-radius: 999px;
  background: rgba(10, 18, 36, 0.78);
  color: #cfe7ff;
  font-size: 0.84rem;
  cursor: pointer;
  user-select: none;
}

.department-create-summary::-webkit-details-marker {
  display: none;
}

.department-create-summary::before {
  content: "+";
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  color: #9ce6ff;
}

.department-create[open] > .department-create-summary {
  border-color: rgba(120, 196, 255, 0.75);
  background: rgba(15, 28, 56, 0.92);
}

.department-create-form {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.department-create-input {
  flex: 0 1 260px;
  min-width: 0;
  padding: 0.42rem 0.6rem;
  border: 1px solid rgba(116, 170, 255, 0.34);
  border-radius: 10px;
  background: rgba(10, 18, 36, 0.92);
  color: #eaf3ff;
  font-size: 0.86rem;
}

.department-create-input:focus-visible {
  outline: none;
  border-color: rgba(120, 196, 255, 0.75);
  box-shadow: 0 0 0 2px rgba(120, 196, 255, 0.2);
}

.department-create-status {
  font-size: 0.82rem;
  color: var(--muted);
}

@media (max-width: 900px) {
  .department-create-form {
    width: 100%;
  }
  .department-create-input {
    flex: 1 1 100%;
  }
}
.file-input-wrap {
  width: fit-content;
  max-width: min(560px, 100%);
  min-width: 280px;
  flex: 0 1 auto;
  border: 1px solid rgba(116, 170, 255, 0.34);
  border-radius: 10px;
  background: rgba(10, 18, 36, 0.92);
  color: #d7ebff;
  padding: 0.35rem 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
}

.file-input-btn {
  border: 1px solid rgba(116, 170, 255, 0.42);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(124, 242, 255, 0.2) 0%, rgba(18, 202, 255, 0.16) 52%, rgba(58, 141, 255, 0.22) 100%);
  color: #dff5ff;
  font-weight: 600;
  padding: 0.35rem 0.65rem;
  cursor: pointer;
  flex: 0 0 auto;
}

.file-input-text {
  display: block;
  flex: 0 1 auto;
  max-width: 34ch;
  font-size: 0.88rem;
  color: #bad4f5;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .inline-form {
    flex: 1 1 100%;
    min-width: 0;
    justify-content: flex-start;
  }

  .file-input-wrap {
    width: 100%;
    max-width: none;
    min-width: 0;
    flex: 1 1 100%;
    /* Phone: stack the Dosya Seç button and the "Seçili dosya yok" label
       vertically inside the wrap (mirrors the Departman dropdown layout
       — the wrap is the outer rounded box, the button sits on top, the
       filename text appears below as a secondary line). */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
    padding: 0.4rem 0.5rem;
    gap: 0.32rem;
    box-sizing: border-box;
  }

  /* Smaller Dosya Seç button on phone, content-width so it doesn't fill
     the whole row. white-space: nowrap keeps "Dosya Seç" on one line even
     when the column flex parent is narrow. */
  .file-input-btn {
    align-self: flex-start;
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
    gap: 0.32rem;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .file-input-btn::before {
    width: 12px;
    height: 12px;
  }

  .file-input-text {
    width: 100%;
    max-width: none;
    font-size: 0.78rem;
    color: #bad4f5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .upload-department-dropdown {
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
  }
}

.inline-form input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.panel-actions { margin-top: 0.6rem; display: flex; justify-content: flex-start; }

.documents-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}

.users-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}

.filters-row-top {
  /* "1fr auto 1fr" with the buttons grouped on the left puts the search
     input in the auto-sized middle column. The mirrored 1fr tracks
     guarantee equal whitespace on both sides, so the input lands at the
     true horizontal center of the row regardless of which buttons are
     present on the left. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.7rem;
}

.filters-row-left {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  justify-self: start;
}

.filters-row-bottom {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.7rem;
}

.filters-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  flex: 0 1 auto;
  min-width: 0;
}

#documents-filters-wrap.filters-wrap {
  margin-left: 0;
}

.filters-toggle-btn[aria-expanded="true"] {
  background: rgba(20, 38, 68, 0.9);
  border-color: rgba(137, 213, 255, 0.56);
}

.filters-wrap[hidden] {
  display: none;
}

#users-filters-wrap.filters-wrap {
  margin-left: 0;
}

.documents-search-input,
.users-search-input {
  min-height: 38px;
  border: 1px solid rgba(116, 170, 255, 0.34);
  border-radius: 10px;
  background: rgba(10, 18, 36, 0.92);
  color: #eaf3ff;
  padding: 0.45rem 0.62rem;
}

.documents-search-input {
  /* Fixed width so the auto-sized center grid track resolves cleanly.
     Combined with parent grid `1fr auto 1fr`, this lands the input at
     the true horizontal center of the row. */
  width: 426px;
  min-width: 220px;
  max-width: 100%;
  justify-self: center;
}

.documents-search-input::placeholder {
  color: #8ea7c8;
}

.users-search-input {
  width: 600px;
  max-width: 100%;
  justify-self: center;
}

.users-search-input::placeholder {
  color: #8ea7c8;
}

.documents-filter-dropdown {
  position: relative;
  min-width: 250px;
}

.documents-filter-summary {
  list-style: none;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  width: 100%;
  border: 1px solid rgba(116, 170, 255, 0.34);
  border-radius: 10px;
  background: rgba(10, 18, 36, 0.92);
  color: #eaf3ff;
  padding: 0.45rem 0.62rem;
  cursor: pointer;
  font-size: 0.86rem;
}

.documents-filter-summary::-webkit-details-marker {
  display: none;
}

.documents-filter-dropdown[open] .documents-filter-summary {
  border-color: rgba(120, 196, 255, 0.75);
}

.documents-filter-menu {
  position: absolute;
  right: 0;
  z-index: 50;
  margin-top: 0.3rem;
  min-width: 250px;
  max-height: 240px;
  overflow: auto;
  border: 1px solid rgba(116, 170, 255, 0.34);
  border-radius: 10px;
  background: rgba(10, 18, 36, 0.98);
  color: #eaf3ff;
  padding: 0.4rem 0.5rem;
  display: grid;
  gap: 0.32rem;
}

.documents-filter-menu label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.84rem;
}

.muted { color: #95abc8; }

.table-wrap {
  margin-top: 0.7rem;
  border: 1px solid rgba(116, 170, 255, 0.24);
  border-radius: 12px;
  overflow: auto;
}

.table-scroll-x {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 960px;
}

#tab-documents table,
#tab-users table {
  border-collapse: separate;
  border-spacing: 0;
}

th, td {
  border-bottom: 1px solid rgba(116, 170, 255, 0.18);
  padding: 0.5rem;
  text-align: left;
  vertical-align: top;
  font-size: 0.9rem;
}

th { color: #b7d5ff; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; }

th[data-sort-key] {
  white-space: nowrap;
}

.th-label {
  vertical-align: middle;
}

.sort-toggle-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: 0.3rem;
  padding: 0.04rem 0.14rem;
  min-width: 16px;
  height: 16px;
  border: 1px solid rgba(116, 170, 255, 0.28);
  border-radius: 5px;
  background: rgba(8, 16, 31, 0.88);
  cursor: pointer;
  vertical-align: middle;
}

.sort-triangle {
  display: block;
  font-size: 7px;
  line-height: 0.7;
  color: #5f789a;
  transition: color 140ms ease;
}

.sort-toggle-btn[data-state="asc"] .sort-triangle-up {
  color: #9ce6ff;
}

.sort-toggle-btn[data-state="desc"] .sort-triangle-down {
  color: #9ce6ff;
}

/* Per-row Sil / İndir / Değiştir buttons — keep them on a single line so
   the document row stays compact and predictable. The cell will widen to
   fit, and the table-wrap already provides horizontal scroll on narrow
   viewports if needed. */
.row-actions { display: flex; flex-wrap: nowrap; gap: 0.35rem; align-items: center; }
.row-actions .btn { padding: 0.28rem 0.55rem; font-size: 0.8rem; white-space: nowrap; flex: 0 0 auto; }

.user-role-select {
  width: 160px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid rgba(116, 170, 255, 0.3);
  border-radius: 8px;
  background: rgba(10, 18, 36, 0.92);
  background-image:
    linear-gradient(45deg, transparent 50%, #a9c8ec 50%),
    linear-gradient(135deg, #a9c8ec 50%, transparent 50%);
  background-position:
    calc(100% - 14px) calc(50% - 3px),
    calc(100% - 8px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  color: #eaf3ff;
  padding: 0.35rem 1.65rem 0.35rem 0.5rem;
}

.dept-dropdown {
  position: relative;
  width: 220px;
}

.dept-summary {
  list-style: none;
  border: 1px solid rgba(116, 170, 255, 0.3);
  border-radius: 8px;
  background: rgba(10, 18, 36, 0.92);
  color: #eaf3ff;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dept-summary::-webkit-details-marker {
  display: none;
}

.dept-dropdown[open] .dept-summary {
  border-color: rgba(120, 196, 255, 0.75);
}

.dept-menu {
  position: absolute;
  z-index: 10;
  margin-top: 0.25rem;
  width: 100%;
  border: 1px solid rgba(116, 170, 255, 0.3);
  border-radius: 8px;
  background: rgba(10, 18, 36, 0.98);
  padding: 0.4rem 0.45rem;
  display: grid;
  gap: 0.28rem;
}

#tab-documents .table-wrap,
#tab-users .users-table-wrap {
  overflow: visible;
}

#tab-documents td,
#tab-users td {
  position: relative;
  overflow: visible;
}

#tab-documents tbody tr,
#tab-users tbody tr {
  position: relative;
  z-index: 0;
}

#tab-documents tbody tr.row-has-open-dept,
#tab-users tbody tr.row-has-open-dept {
  z-index: 320;
}

/* Audit logs table — mirrors the Analitik table look. */
#tab-logs .logs-table {
  margin-top: 0.5rem;
}

#tab-logs .logs-time-cell {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: #b7d5ff;
  font-size: 0.84rem;
}

#tab-logs .logs-actor-cell {
  white-space: nowrap;
  color: #d7ebff;
  font-size: 0.84rem;
}

#tab-logs .logs-action-cell {
  font-size: 0.84rem;
  vertical-align: top;
}

#tab-logs .logs-action-name {
  color: #9ce6ff;
  font-weight: 600;
  letter-spacing: 0.02em;
  word-break: break-word;
  overflow-wrap: anywhere;
}

#tab-logs .logs-action-target {
  margin-top: 0.18rem;
  color: #d7ebff;
  font-size: 0.82rem;
  word-break: break-word;
  overflow-wrap: anywhere;
}

#tab-logs .logs-details-cell {
  font-size: 0.82rem;
  color: #cfe1fb;
  word-break: break-word;
  overflow-wrap: anywhere;
  vertical-align: top;
}

#tab-logs .logs-details-empty {
  color: var(--muted);
}

#tab-logs .logs-empty-cell {
  text-align: center;
  color: var(--muted);
  padding: 1.1rem 0.6rem;
  font-size: 0.88rem;
}

#tab-documents .dept-dropdown,
#tab-users .dept-dropdown {
  position: relative;
  z-index: 2;
}

#tab-documents .dept-dropdown[open],
#tab-users .dept-dropdown[open] {
  z-index: 40;
}

#tab-documents .dept-menu,
#tab-users .dept-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  width: 100%;
  margin-top: 0;
  z-index: 400;
}

#tab-documents .dept-dropdown.menu-portal-open .dept-menu,
#tab-users .dept-dropdown.menu-portal-open .dept-menu {
  position: fixed !important;
}

.dept-menu label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: #d9ebff;
}

/* ---- Toplu Aksiyonlar (bulk actions) menu ---- */

.bulk-actions-dropdown {
  position: relative;
  display: inline-block;
  /* Lock the column track so it doesn't widen when the count text grows.
     Wide enough to fit "Toplu Aksiyonlar (999)" + caret comfortably. */
  min-width: 12rem;
}

/* Keep the bulk-actions cell in the grid even when nothing is selected,
   so the Filtreler/Search columns don't reflow. The control is invisible
   and non-interactive but still occupies its column track. */
.bulk-actions-dropdown[hidden] {
  display: inline-block !important;
  visibility: hidden;
  pointer-events: none;
}

.bulk-actions-summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  /* <summary> inherits body font-size (1rem); <button> uses a smaller UA
     default. Match the Filtreler button's apparent size so they look
     consistent side-by-side. */
  font-size: 0.85rem;
}

.bulk-actions-summary::-webkit-details-marker { display: none; }

.bulk-actions-summary-caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.85;
  transition: transform 140ms ease;
}

.bulk-actions-dropdown[open] > .bulk-actions-summary .bulk-actions-summary-caret {
  transform: rotate(180deg);
}

.bulk-actions-dropdown[open] > .bulk-actions-summary {
  border-color: rgba(120, 196, 255, 0.75);
  background: rgba(25, 46, 82, 0.92);
}

.bulk-actions-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 600;
  min-width: 220px;
  border: 1px solid rgba(116, 170, 255, 0.34);
  border-radius: 12px;
  background: rgba(10, 18, 36, 0.98);
  padding: 0.35rem;
  display: grid;
  gap: 0.25rem;
  box-shadow: 0 14px 32px rgba(2, 8, 22, 0.55);
}

.bulk-action-item {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: #eaf3ff;
  font-size: 0.86rem;
  font-family: inherit;
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
}

.bulk-action-item::-webkit-details-marker { display: none; }

.bulk-action-item:hover,
.bulk-action-item:focus-visible {
  background: rgba(25, 46, 82, 0.85);
  border-color: rgba(120, 196, 255, 0.4);
  outline: none;
}

.bulk-action-item:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

#bulk-delete-btn.bulk-action-item {
  color: #ffd4d4;
}
#bulk-delete-btn.bulk-action-item:hover,
#bulk-delete-btn.bulk-action-item:focus-visible {
  background: rgba(82, 25, 25, 0.65);
  border-color: rgba(255, 120, 120, 0.5);
  color: #fff;
}

.bulk-action-item--parent .bulk-action-item-caret {
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  opacity: 0.85;
  transition: transform 140ms ease;
}

.bulk-actions-dept-dropdown[open] > .bulk-action-item--parent .bulk-action-item-caret {
  transform: rotate(90deg);
}

.bulk-actions-dept-dropdown {
  position: relative;
  border-radius: 8px;
}

.bulk-actions-dept-dropdown[open] > .bulk-action-item--parent {
  background: rgba(25, 46, 82, 0.85);
  border-color: rgba(120, 196, 255, 0.4);
}

.bulk-actions-dept-menu {
  margin-top: 0.3rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid rgba(116, 170, 255, 0.34);
  border-radius: 10px;
  background: rgba(7, 14, 30, 0.95);
  display: grid;
  gap: 0.3rem;
  max-height: 240px;
  overflow: auto;
}

.bulk-actions-dept-menu label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.84rem;
  color: #d9ebff;
  cursor: pointer;
}

/* Single-select role menu — radio buttons styled to match the checkbox look,
   but with a circular indicator so users can tell at a glance that only one
   option can be active. */
.bulk-actions-role-menu input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(116, 170, 255, 0.45);
  border-radius: 50%;
  background: rgba(7, 17, 34, 0.92);
  display: grid;
  place-content: center;
  margin: 0;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.bulk-actions-role-menu input[type="radio"]::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: scale(0);
  transform-origin: center;
  transition: transform 0.12s ease-in-out;
  background: #041225;
}

.bulk-actions-role-menu input[type="radio"]:checked {
  border-color: rgba(124, 242, 255, 0.95);
  background: linear-gradient(135deg, #7cf2ff 0%, #12caff 52%, #3a8dff 100%);
}

.bulk-actions-role-menu input[type="radio"]:checked::before {
  transform: scale(1);
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(116, 170, 255, 0.45);
  border-radius: 5px;
  background: rgba(7, 17, 34, 0.92);
  display: grid;
  place-content: center;
  margin: 0;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="checkbox"]::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transform-origin: center;
  transition: transform 0.12s ease-in-out;
  clip-path: polygon(14% 52%, 0 67%, 44% 100%, 100% 20%, 84% 6%, 42% 70%);
  background: #041225;
}

input[type="checkbox"]:checked {
  border-color: rgba(124, 242, 255, 0.95);
  background: linear-gradient(135deg, #7cf2ff 0%, #12caff 52%, #3a8dff 100%);
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(71, 196, 255, 0.26);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.55rem;
}

.card {
  border: 1px solid rgba(116, 170, 255, 0.2);
  border-radius: 10px;
  padding: 0.65rem;
  background: rgba(12, 24, 48, 0.78);
}

.card-action {
  width: 100%;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, filter 150ms ease;
}

.card-action:hover {
  border-color: rgba(137, 213, 255, 0.56);
  background: rgba(20, 39, 68, 0.88);
}

.card-action.is-active {
  border-color: rgba(124, 242, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(124, 242, 255, 0.35) inset;
}

.card .label { font-size: 0.78rem; color: #9db3d2; }
.card .value { font-size: 1.18rem; font-weight: 700; margin-top: 0.2rem; }

.analytics-filter-controls {
  margin-top: 0.55rem;
  margin-bottom: 0.65rem;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.analytics-filter-controls.hidden {
  display: none;
}

.analytics-filter-controls label {
  font-size: 0.82rem;
  color: #b7d5ff;
}

.analytics-user-filter-select {
  border: 1px solid rgba(116, 170, 255, 0.3);
  border-radius: 8px;
  background: rgba(10, 18, 36, 0.92);
  color: #eaf3ff;
  padding: 0.35rem 0.45rem;
  min-width: 210px;
}

.analytics-date-group {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.analytics-date-select {
  min-width: 86px;
}

.analytics-filter-sep {
  color: #b7d5ff;
  opacity: 0.8;
}

/* Analytics rows: both "Mesaj" and "Yanıt" are clamped to a max height so
   long content doesn't flood the table. Yanıt additionally tracks Mesaj's
   actual rendered height (set in JS), so it never appears taller than
   Mesaj. Clicking the row toggles `.row-expanded` which lets both cells
   flow at full height. */
#tab-analytics .analytics-mesaj-cell .cell-content,
#tab-analytics .analytics-yanit-cell .cell-content {
  display: block;
  /* Both columns share the same width budget so "as long as Mesaj" matches
     visually. `max-width` on a wrapping div behaves predictably even when
     the surrounding table uses auto layout. */
  max-width: 32ch;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  position: relative;
  overflow: hidden;
}

#tab-analytics .analytics-mesaj-cell,
#tab-analytics .analytics-yanit-cell {
  cursor: pointer;
  vertical-align: top;
}

/* Default clamps. Mesaj has a fixed line cap; Yanıt's cap is set by JS to
   match Mesaj's rendered height, with this CSS value as a fallback for
   when JS hasn't run yet. */
#tab-analytics .analytics-mesaj-cell .cell-content {
  max-height: calc(1.45em * 6);
}
#tab-analytics .analytics-yanit-cell .cell-content {
  max-height: calc(1.45em * 6);
}

#tab-analytics tr.row-expanded .analytics-mesaj-cell .cell-content,
#tab-analytics tr.row-expanded .analytics-yanit-cell .cell-content {
  max-height: none;
  overflow: visible;
}

/* Subtle fade indicator so users notice the cell is truncated. */
#tab-analytics .analytics-mesaj-cell .cell-content::after,
#tab-analytics .analytics-yanit-cell .cell-content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.2em;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(8, 17, 34, 0) 0%, rgba(8, 17, 34, 0.85) 90%);
  opacity: 0.85;
}
#tab-analytics tr.row-expanded .analytics-mesaj-cell .cell-content::after,
#tab-analytics tr.row-expanded .analytics-yanit-cell .cell-content::after {
  display: none;
}

/* Hide the fade overlay on cells that aren't actually overflowing — no
   point in suggesting "more below" when there isn't more. We can't tell
   from CSS alone whether a cell overflows, so JS toggles this class. */
#tab-analytics .cell-content.is-not-clipped::after {
  display: none;
}

@media (max-width: 900px) {
  #tab-analytics .analytics-mesaj-cell .cell-content,
  #tab-analytics .analytics-yanit-cell .cell-content {
    max-width: 24ch;
  }
}

.analytics-chart-wrap {
  position: relative;
  margin-top: 0.7rem;
  margin-bottom: 0.55rem;
  border: 1px solid rgba(116, 170, 255, 0.24);
  border-radius: 12px;
  padding: 0.85rem 0.95rem 0.7rem;
  background:
    radial-gradient(circle at 12% 0%, rgba(52, 236, 255, 0.07) 0%, transparent 45%),
    radial-gradient(circle at 88% 100%, rgba(43, 125, 255, 0.08) 0%, transparent 50%),
    rgba(12, 24, 48, 0.78);
  box-shadow: 0 0 0 1px rgba(81, 179, 255, 0.05), 0 12px 32px rgba(5, 14, 30, 0.45);
}


.analytics-chart-wrap.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: var(--muted);
  font-size: 0.88rem;
  letter-spacing: 0.01em;
}

.analytics-chart-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.45rem;
  flex-wrap: wrap;
}

.analytics-chart-title {
  font-size: 0.86rem;
  color: #b7d5ff;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.analytics-chart-meta {
  font-size: 0.74rem;
  color: var(--muted);
}

.analytics-chart-svg {
  display: block;
  overflow: visible;
}

.analytics-chart-axis-text {
  fill: #95abc8;
  font-size: 11px;
  font-family: inherit;
}

.analytics-chart-grid {
  stroke: rgba(116, 170, 255, 0.12);
  stroke-width: 1;
}

.analytics-chart-baseline {
  stroke: rgba(116, 170, 255, 0.32);
  stroke-width: 1;
}

.analytics-chart-line {
  fill: none;
  stroke: #7cf2ff;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 4px rgba(124, 242, 255, 0.35));
}

.analytics-chart-area {
  fill: url(#analytics-chart-gradient);
  stroke: none;
}

.analytics-chart-cursor-line {
  stroke: rgba(124, 242, 255, 0.45);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  pointer-events: none;
}

.analytics-chart-cursor-dot {
  fill: #7cf2ff;
  stroke: #08101d;
  stroke-width: 2;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(124, 242, 255, 0.55));
}

.analytics-chart-hit {
  fill: transparent;
  cursor: crosshair;
}

.analytics-chart-tooltip {
  position: absolute;
  pointer-events: none;
  border: 1px solid rgba(124, 242, 255, 0.5);
  background: rgba(8, 16, 30, 0.95);
  color: #eaf3ff;
  border-radius: 8px;
  padding: 0.4rem 0.55rem;
  font-size: 0.78rem;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(5, 14, 30, 0.6);
  transform: translate(0, 0);
  z-index: 5;
}

.analytics-chart-tooltip-date {
  color: #95abc8;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.12rem;
}

.analytics-chart-tooltip-value {
  color: #7cf2ff;
  font-weight: 700;
  font-size: 0.9rem;
}

.columns {
  margin-top: 0.9rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

ul { margin: 0.45rem 0 0; padding-left: 1rem; }
li { margin: 0.35rem 0; }

.logs { list-style: none; padding: 0; display: none; }
.logs li {
  border: 1px solid rgba(116, 170, 255, 0.2);
  border-radius: 9px;
  padding: 0.55rem;
  margin-bottom: 0.45rem;
  background: rgba(12, 24, 48, 0.78);
}

.logs-pagination {
  margin: 0.45rem 0 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.logs-page-btn {
  min-width: 2rem;
  padding: 0.28rem 0.5rem;
  border: 1px solid rgba(116, 170, 255, 0.3);
  border-radius: 8px;
  background: rgba(10, 18, 36, 0.92);
  color: #eaf3ff;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.logs-page-btn:hover:not(:disabled) {
  background: rgba(24, 47, 82, 0.92);
  border-color: rgba(137, 213, 255, 0.56);
}

.logs-page-btn.is-active {
  border-color: rgba(124, 242, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(124, 242, 255, 0.35) inset;
}

.logs-page-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.logs-page-ellipsis {
  color: #9db3d2;
  padding: 0 0.18rem;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: rgba(6, 12, 24, 0.58);
  backdrop-filter: blur(2px);
  padding: 1rem;
}

.modal-backdrop.hidden {
  display: none;
}

.modal-card {
  width: min(92vw, 620px);
  border: 1px solid rgba(116, 170, 255, 0.32);
  border-radius: 14px;
  padding: 1rem;
  background: rgba(13, 24, 46, 0.95);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
}

.modal-card h3 {
  margin: 0 0 0.45rem;
}

.modal-card p {
  margin: 0;
  color: #c5dbf5;
  line-height: 1.45;
}

.modal-actions {
  margin-top: 0.9rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .admin-shell {
    padding: 0.75rem;
  }

  .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
  }

  .top-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .top-actions .btn,
  .top-actions .chat-link-btn {
    flex: 1 1 150px;
    text-align: center;
    justify-content: center;
  }

  /* Logs table on phone keeps its compact column widths; the table-wrap
     scroller already handles narrow viewports. */
  #tab-logs .logs-table th,
  #tab-logs .logs-table td {
    padding: 0.45rem 0.55rem;
    font-size: 0.8rem;
  }
  #tab-logs .logs-time-cell,
  #tab-logs .logs-actor-cell {
    font-size: 0.78rem;
  }

  .documents-actions {
    grid-template-columns: 1fr;
  }

  .users-actions {
    grid-template-columns: 1fr;
  }

  .filters-row-top {
    grid-template-columns: 1fr;
  }

  /* Mobile: keep `[hidden]` working. The id-prefixed selectors below would
     otherwise out-specificity `.filters-wrap[hidden] { display: none; }`,
     causing the Departman dropdown to stay visible regardless of the
     Filtreler toggle. The `:not([hidden])` guard makes the toggle work. */
  .filters-wrap:not([hidden]),
  #documents-filters-wrap.filters-wrap:not([hidden]),
  #users-filters-wrap.filters-wrap:not([hidden]) {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr;
  }

  .documents-search-input {
    width: 100%;
    max-width: none;
    /* Phone-only: the search bar comes first, the Filtreler button below. */
    order: 0;
  }

  .users-search-input {
    width: 100%;
    max-width: none;
    order: 0;
  }

  .filters-row-left {
    /* Phone: render the Filtreler button (and Toplu Aksiyonlar, when active)
       below the search input. On desktop the order is left → search; here we
       reorder so search comes first. */
    order: 1;
  }

  .documents-filter-dropdown {
    width: 100%;
    min-width: 0;
  }

  .documents-filter-menu {
    left: 0;
    right: auto;
    min-width: 100%;
  }

  .columns { grid-template-columns: 1fr; }

  .topbar { padding: 0.7rem 0.85rem; flex-direction: column; align-items: stretch; }
  .panel.active { padding: 0.85rem 0.95rem 1rem; }

  /* Analytics time filter: stack the "Zaman" label, the From group, and the
     To group onto their own rows. The dash separator is collapsed on mobile
     since the groups are now in distinct rows. */
  .analytics-filter-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .analytics-filter-controls > label,
  .analytics-filter-controls > .analytics-date-group,
  .analytics-filter-controls > .analytics-user-filter-select,
  .analytics-filter-controls > #analytics-time-reset-btn {
    width: 100%;
  }

  .analytics-filter-controls .analytics-date-group {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .analytics-filter-controls .analytics-filter-sep {
    display: none;
  }
}

/* =====================================================================
   Polish layer — non-structural enhancements (icons, micro-interactions,
   focus glow, table hover, modal entrance). All selectors below are pure
   visual additions; nothing here changes the JS-observed semantics.
   ===================================================================== */

.btn,
.tab,
.logs-page-btn,
.card-action,
.file-input-btn {
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    filter 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.btn:not(:disabled):active,
.tab:not(.active):active,
.logs-page-btn:not(:disabled):active,
.card-action:active {
  transform: translateY(1px);
}

.btn:not(:disabled):hover {
  box-shadow: 0 6px 18px rgba(5, 14, 30, 0.4), 0 0 0 1px rgba(137, 213, 255, 0.32) inset;
}

/* Icon-prefixed action buttons. Adds a 14px stroke icon before the label.
   Targets only static buttons that exist in admin.html. */
#save-all-btn,
#bulk-delete-btn,
#refresh-btn,
.filters-toggle-btn,
#upload-form > button.btn,
.chat-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

#save-all-btn::before,
#bulk-delete-btn::before,
.filters-toggle-btn::before,
#upload-form > button.btn::before,
.chat-link-btn::before {
  content: "";
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  opacity: 0.92;
}

/* Save (floppy / check-square) */
#save-all-btn::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/><polyline points='17 21 17 13 7 13 7 21'/><polyline points='7 3 7 8 15 8'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/><polyline points='17 21 17 13 7 13 7 21'/><polyline points='7 3 7 8 15 8'/></svg>");
}

/* Trash */
#bulk-delete-btn::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/><path d='M10 11v6'/><path d='M14 11v6'/><path d='M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/><path d='M10 11v6'/><path d='M14 11v6'/><path d='M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/></svg>");
}

/* Filter funnel */
.filters-toggle-btn::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/></svg>");
}

/* Upload (cloud-up arrow) */
#upload-form > button.btn::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='17 8 12 3 7 8'/><line x1='12' y1='3' x2='12' y2='15'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='17 8 12 3 7 8'/><line x1='12' y1='3' x2='12' y2='15'/></svg>");
}

/* Back-to-chat (message-circle) */
.chat-link-btn::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8A8.5 8.5 0 0 1 8.7 4a8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8v.4z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8A8.5 8.5 0 0 1 8.7 4a8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8v.4z'/></svg>");
}

/* Paperclip icon on the file picker button (.file-input-btn). */
.file-input-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.file-input-btn::before {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  opacity: 0.95;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/></svg>");
}

/* Filter toggle icon already gets the funnel; rotate slightly when open. */
.filters-toggle-btn[aria-expanded="true"]::before {
  transform: rotate(180deg);
  transition: transform 220ms ease;
}
.filters-toggle-btn::before {
  transition: transform 220ms ease;
}

/* Card hover gleam — subtle gradient sheen on hover for clickable cards. */
.card-action {
  position: relative;
  overflow: hidden;
}

.card-action::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(124, 242, 255, 0.0) 0%, rgba(124, 242, 255, 0.0) 50%, rgba(124, 242, 255, 0.08) 100%);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}

.card-action:hover::after {
  opacity: 1;
}

.card-action.is-active {
  background: linear-gradient(135deg, rgba(40, 80, 140, 0.6) 0%, rgba(20, 50, 100, 0.7) 100%);
}

.card-action.is-active::after {
  opacity: 1;
  background: linear-gradient(135deg, rgba(124, 242, 255, 0.12) 0%, rgba(58, 141, 255, 0.06) 100%);
}

/* Slight elevation when hovering a card for tactile feedback */
.card-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(5, 14, 30, 0.5), 0 0 0 1px rgba(137, 213, 255, 0.32) inset;
}

/* Table header strip + zebra hover */
.table-wrap thead tr {
  background: linear-gradient(180deg, rgba(20, 38, 70, 0.55) 0%, rgba(14, 28, 52, 0.4) 100%);
}

.table-wrap tbody tr {
  transition: background-color 140ms ease;
}

.table-wrap tbody tr:hover {
  background: rgba(20, 38, 68, 0.45);
}

#tab-documents tbody tr:hover,
#tab-users tbody tr:hover {
  background: rgba(20, 38, 68, 0.5);
}

.table-wrap td,
.table-wrap th {
  border-bottom-color: rgba(116, 170, 255, 0.14);
}

/* Logs list: bring rows to life on hover */
.logs li {
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.logs li:hover {
  border-color: rgba(137, 213, 255, 0.42);
  background: rgba(20, 38, 68, 0.58);
}

/* Modals: smooth entrance */
.modal-backdrop:not(.hidden) .modal-card {
  animation: modalIn 200ms ease-out;
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-card {
  background: linear-gradient(180deg, rgba(18, 32, 60, 0.85) 0%, rgba(10, 20, 38, 0.85) 100%);
  border: 1px solid rgba(137, 213, 255, 0.32);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.modal-card h3 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #dff5ff;
}

.modal-card h3::before {
  content: "";
  width: 18px;
  height: 18px;
  background-color: #ffd166;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* Inputs/selects: focus-visible glow */
.documents-search-input:focus-visible,
.users-search-input:focus-visible,
.analytics-user-filter-select:focus-visible,
.analytics-date-select:focus-visible,
.user-role-select:focus-visible,
.documents-filter-summary:focus-visible,
.dept-summary:focus-visible {
  outline: none;
  border-color: rgba(124, 242, 255, 0.7);
  box-shadow: 0 0 0 3px rgba(124, 242, 255, 0.18);
}

.documents-search-input,
.users-search-input {
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

/* Pagination: refined active glow */
.logs-page-btn.is-active {
  background: linear-gradient(135deg, rgba(124, 242, 255, 0.18) 0%, rgba(58, 141, 255, 0.18) 100%);
  border-color: rgba(124, 242, 255, 0.78);
  color: #eaf6ff;
  box-shadow: 0 0 0 1px rgba(124, 242, 255, 0.45) inset, 0 6px 16px rgba(31, 168, 255, 0.18);
}

/* Section dividers above each block of filters/actions */
.panel-actions {
  position: relative;
}

/* Subtle hover for filter dropdown summaries */
.documents-filter-summary {
  transition: border-color 160ms ease, background-color 160ms ease;
}

.documents-filter-summary:hover {
  border-color: rgba(137, 213, 255, 0.42);
}

/* Auth gate card — slightly stronger glow */
.auth-card {
  box-shadow: var(--glow), 0 28px 60px rgba(2, 8, 22, 0.6);
}

/* Small visual flourish: keep auth-gate orbs animated subtly */
@keyframes authOrbDrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(20px, -16px); }
}

.auth-gate::before {
  animation: authOrbDrift 18s ease-in-out infinite;
}

.auth-gate::after {
  animation: authOrbDrift 22s ease-in-out infinite reverse;
}

@media (prefers-reduced-motion: reduce) {
  .auth-gate::before,
  .auth-gate::after,
  .panel.active,
  .modal-backdrop:not(.hidden) .modal-card {
    animation: none;
  }
}