: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;
  /* Channel colors — must match styles.css :root exactly. These
     are brand identities, one per top-level nav button. */
  --color-sohbet-grad: linear-gradient(135deg, #a8e3ff 0%, #5cc6ff 45%, #1f9eff 100%);
  --color-sohbet-shadow: rgba(31, 158, 255, 0.35);
  --color-admin-grad: linear-gradient(135deg, #ffd99f 0%, #ffb866 45%, #f48a2a 100%);
  --color-admin-shadow: rgba(244, 138, 42, 0.35);
  --color-beyin-grad: linear-gradient(135deg, #b3f0c4 0%, #5fda94 45%, #1fb368 100%);
  --color-beyin-shadow: rgba(31, 179, 104, 0.35);
}

* { 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 {
  /* Full viewport width so the rail can hug the LEFT edge of the
     screen (previously the shell was centered, which left a gutter
     to the left of the rail on widescreen displays). The content
     area inside .admin-main owns the max-width / readable column
     concern instead. */
  --rail-left-w: 308px;
  --rail-anim-dur: 420ms;
  --rail-anim-ease: cubic-bezier(0.32, 0.72, 0, 1);
  padding: 1rem 0;
  position: relative;
  z-index: 1;
}

.admin-main {
  /* Both side lanes are permanently reserved:
       margin-left  = left rail (--rail-left-w)
       margin-right = notification panel (same 308px width as the rail)
     so opening either side never shifts the admin content sideways
     AND the notification panel never overlaps it. The max-width
     keeps the content readable on widescreens. */
  margin-left: var(--rail-left-w);
  margin-right: var(--rail-left-w);
  padding: 0.1rem 1.25rem 1.4rem 1.25rem;
  max-width: 1180px;
}

.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: var(--color-sohbet-grad);
}

#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; }

.btn.danger {
  border-color: rgba(255, 99, 99, 0.5);
  background: rgba(120, 24, 24, 0.92);
  color: #ffe9e9;
}
.btn.danger:not(:disabled):hover {
  background: rgba(160, 30, 30, 0.96);
  border-color: rgba(255, 120, 120, 0.7);
}

/* Offboarding modal: recipient picker + inline error */
.offboard-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.75rem 0 0.25rem;
  font-size: 0.9rem;
}
.offboard-field select {
  background: rgba(16, 31, 57, 0.92);
  color: #eaf3ff;
  border: 1px solid rgba(116, 170, 255, 0.3);
  border-radius: 10px;
  padding: 0.45rem 0.6rem;
}
.offboard-error {
  color: #ffb3b3;
  font-size: 0.85rem;
  margin: 0.4rem 0 0;
}

.chat-link-btn {
  border: 0;
  color: #041225;
  font-weight: 700;
  background: var(--color-sohbet-grad);
  box-shadow: 0 8px 22px var(--color-sohbet-shadow);
}

.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;
}

/* Cluster for the refresh + CSV buttons in the analytics panel head.
   Both sit to the right of the "Analitik" title with a small gap so
   neither hugs the other. */
.analytics-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

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

.analytics-refresh-icon {
  font-size: 1.05rem;
  line-height: 1;
  font-weight: 700;
  display: inline-block;
}

/* Subtle spin animation kicked on by JS during an in-flight refresh. */
.analytics-refresh-btn.is-refreshing .analytics-refresh-icon {
  animation: analytics-refresh-spin 0.8s linear infinite;
}

.analytics-refresh-btn[disabled] {
  opacity: 0.6;
  cursor: wait;
}

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

.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 names are always stored UPPERCASE (Turkish locale).
     CSS gives instant visual feedback while typing; JS in admin.js
     normalises the actual value so it stays in sync on submit. */
  text-transform: uppercase;
}

.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;
  /* Clamp + scroll from the very first paint so the menu never flashes at full
     height before JS sizes it. */
  max-height: 240px;
  overflow: auto;
  /* Stay invisible until positionDeptMenuPortal() has placed AND sized it. The
     <details> toggle event fires after the browser has already painted the open
     menu, so without this there is a one-frame full-height flash. JS reveals it. */
  visibility: hidden;
}

#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; }

/* Monthly usage bar (Claude-style). Sits between the analytics cards and
   the time-range controls. The fill width is driven by inline style from
   admin.js based on current-month spend vs. MONTHLY_USAGE_LIMIT_USD. */
.usage-bar-wrap {
  margin-top: 0.85rem;
  margin-bottom: 0.35rem;
  border: 1px solid rgba(116, 170, 255, 0.2);
  border-radius: 12px;
  padding: 0.75rem 0.95rem 0.85rem;
  background: rgba(12, 24, 48, 0.78);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.usage-bar-wrap:empty {
  display: none;
}

.usage-bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.usage-bar-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: #eaf3ff;
  letter-spacing: 0.01em;
}

.usage-bar-period {
  font-size: 0.76rem;
  color: #9db3d2;
}

.usage-bar-track {
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(116, 170, 255, 0.14);
  overflow: hidden;
}

.usage-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6fb6ff 0%, #7cf2ff 100%);
  transition: width 320ms ease;
  min-width: 0;
}

.usage-bar-track.is-warning .usage-bar-fill {
  background: linear-gradient(90deg, #f6c971 0%, #ffb454 100%);
}

.usage-bar-track.is-over .usage-bar-fill {
  background: linear-gradient(90deg, #ff8a8a 0%, #ff5a5a 100%);
}

.usage-bar-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: #b7d5ff;
}

.usage-bar-pct {
  font-weight: 600;
  color: #eaf3ff;
}

.usage-bar-limit {
  color: #9db3d2;
}

.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;
}

/* Çıkış çantası preview modal */
.modal-card.modal-card-wide {
  width: min(94vw, 820px);
}

.modal-card-wide h3::before {
  display: none;
}

.handover-preview-meta {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
}

.handover-preview-body {
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(116, 170, 255, 0.18);
  border-radius: 10px;
  background: rgba(8, 16, 32, 0.6);
  color: #dbe7ff;
  line-height: 1.55;
  font-size: 0.92rem;
}

.handover-preview-body h1,
.handover-preview-body h2,
.handover-preview-body h3 {
  color: #eaf4ff;
  margin: 1.1rem 0 0.5rem;
  line-height: 1.3;
}

.handover-preview-body h1 {
  font-size: 1.25rem;
}

.handover-preview-body h2 {
  font-size: 1.1rem;
}

.handover-preview-body h3 {
  font-size: 1rem;
}

.handover-preview-body h1:first-child,
.handover-preview-body h2:first-child,
.handover-preview-body h3:first-child {
  margin-top: 0;
}

.handover-preview-body p {
  margin: 0.5rem 0;
}

.handover-preview-body ul {
  margin: 0.5rem 0;
  padding-left: 1.25rem;
}

.handover-preview-body li {
  margin: 0.25rem 0;
}

.handover-preview-body strong {
  color: #ffffff;
}

/* 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;
  }
}

/* ============================================================
   Left rail — copied/adapted from styles.css so the admin
   page has the same collapsible navigation panel as index.html.
   The shell flexes between an open and a collapsed state; the
   rail itself is absolutely positioned and slides off via
   transform when the user collapses it.
   ============================================================ */

.admin-shell .left-rail {
  /* position: fixed (not absolute) so the rail's height is anchored
     to the viewport instead of the parent .admin-shell. Otherwise
     the rail follows the shell's intrinsic height — when the page
     first loads with little content, the shell is short and the
     rail visibly truncates until enough data arrives to push the
     shell down. Fixed positioning makes the rail full height from
     the very first paint. */
  position: fixed;
  top: 1rem;
  bottom: 1rem;
  left: 0;
  width: var(--rail-left-w);
  overflow: hidden;
  padding: 0;
  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);
  transition: opacity var(--rail-anim-dur) var(--rail-anim-ease),
              transform var(--rail-anim-dur) var(--rail-anim-ease);
  z-index: 5;
}

.admin-shell .left-rail .rail-inner {
  /* Locked width so the inside doesn't reflow while the outer
     rail's translateX animates. Flex column = scrollable middle
     + pinned account footer at the bottom (Çıkış yap stays put). */
  width: 308px;
  height: 100%;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Frozen top zone (left rail) — reserves 56px the left-rail toggle
   icon paints over. Empty by design; no border. */
.admin-shell .left-rail .rail-top-safe {
  flex: 0 0 56px;
  min-height: 56px;
}
/* Frozen middle block above the scroll — brand + the page-nav
   shortcuts stay visible even when ``.rail-inner-scroll`` below
   scrolls. Horizontal padding matches the scroll region. */
.admin-shell .left-rail .rail-top-fixed {
  flex: 0 0 auto;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.admin-shell .left-rail .rail-inner-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 1rem 1rem;
}
/* ============================================================
   Departmanları Yönet — left-rail pinned block.
   Sits between .rail-inner-scroll and .rail-account--pinned.
   The .department-create / .department-create-summary base styles
   above (around line 618) target the original in-tab placement;
   the .dept-manage-rail variant overrides them so the block fits
   the narrow rail and matches the rail's visual rhythm.
   ============================================================ */
.left-rail .dept-manage-rail {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.5rem 1rem 0.6rem;
  border-top: 1px solid var(--line);
  background: rgba(8, 18, 36, 0.45);
}
.left-rail .dept-manage-rail > .department-create-summary {
  /* Plain section heading (no caret, no hover state) — the block is
     always open now, not a toggle. */
  display: block;
  width: 100%;
  margin: 0 0 0.45rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #cfe7ff;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: default;
  user-select: none;
}
.left-rail .dept-manage-rail > .department-create-summary::before {
  /* Drop the pill "+" prefix inherited from the in-tab variant. */
  content: none;
}
.left-rail .dept-manage-rail .department-manage-body {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.left-rail .dept-manage-rail .department-list-heading {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8aa3c2;
}
.left-rail .dept-manage-rail .department-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Match the right-rail file list's row spacing (right-rail.css uses
     gap: 0.15rem on .right-rail .drive-list) so the two panels feel
     visually consistent. */
  gap: 0.15rem;
  max-height: 220px;
  overflow-y: auto;
}
.left-rail .dept-manage-rail .department-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.34rem 0.5rem;
  border-radius: 8px;
  border: 1px solid rgba(116, 170, 255, 0.12);
  background: rgba(10, 18, 36, 0.55);
  font-size: 0.82rem;
  color: #dbe9ff;
  min-height: 32px;
  /* The list is a flex column with a max-height + overflow scroll. Without
     flex-shrink:0 the browser squashes every row to fit when one row grows
     (the delete-confirm cluster), so the taller confirm row visually
     overlaps the rows below it. Pinning shrink to 0 keeps each row at its
     natural height and lets the confirm row push the rest down (the list
     scrolls if it runs out of room). */
  flex: 0 0 auto;
}
.left-rail .dept-manage-rail .department-row-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.left-rail .dept-manage-rail .department-row-actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}
.left-rail .dept-manage-rail .department-row-edit,
.left-rail .dept-manage-rail .department-row-delete,
.left-rail .dept-manage-rail .department-row-edit-save,
.left-rail .dept-manage-rail .department-row-edit-cancel {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #8aa3c2;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  padding: 0;
  transition: background 120ms ease, color 120ms ease;
}
.left-rail .dept-manage-rail .department-row-edit:hover {
  background: rgba(116, 170, 255, 0.18);
  color: #cfe7ff;
}
.left-rail .dept-manage-rail .department-row-edit:focus-visible {
  outline: 2px solid #6aa9ff;
  outline-offset: 1px;
}
.left-rail .dept-manage-rail .department-row-delete:hover {
  background: rgba(255, 120, 120, 0.16);
  color: #ff9b9b;
}
.left-rail .dept-manage-rail .department-row-delete:focus-visible {
  outline: 2px solid #ff9b9b;
  outline-offset: 1px;
}
/* Inline rename state — row swaps to [input] [✓] [×]. Same outer
   dimensions as a resting row so editing doesn't push other rows
   around or break out of the parent. Status is routed to the
   global departmentCreateStatus line below the form, not into the
   row itself. */
.left-rail .dept-manage-rail .department-row.is-editing {
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
  /* Keep the SAME padding as the resting row (defined on .department-row
     above: 0.34rem 0.5rem). Restating here so a future tweak to the
     resting row doesn't silently break alignment. */
  padding: 0.34rem 0.5rem;
  border-color: rgba(116, 170, 255, 0.45);
  background: rgba(14, 28, 56, 0.72);
}
.left-rail .dept-manage-rail .department-row-edit-input {
  flex: 1 1 auto;
  min-width: 0;
  /* Match the 22px square of the action buttons so total row height
     stays identical to the resting row. */
  height: 22px;
  padding: 0 0.4rem;
  border: 1px solid rgba(116, 170, 255, 0.4);
  border-radius: 6px;
  background: rgba(8, 14, 28, 0.85);
  color: #eaf3ff;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1;
  box-sizing: border-box;
  /* Match the create input — backend stores names UPPERCASE so we
     show the user the storage form while they type. */
  text-transform: uppercase;
}
.left-rail .dept-manage-rail .department-row-edit-input:focus-visible {
  outline: none;
  border-color: rgba(120, 196, 255, 0.85);
  box-shadow: 0 0 0 2px rgba(120, 196, 255, 0.2);
}
.left-rail .dept-manage-rail .department-row-edit-save:hover {
  background: rgba(120, 220, 160, 0.18);
  color: #b9f3cc;
}
.left-rail .dept-manage-rail .department-row-edit-cancel:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #cfe7ff;
}
/* Inline confirm state — the row morphs in place when × is clicked.
   We keep the same row height by hiding the name + × and showing the
   confirm cluster (warning text + Vazgeç / Sil). */
.left-rail .dept-manage-rail .department-row.is-confirming {
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  padding: 0.45rem 0.55rem;
  border-color: rgba(255, 155, 155, 0.45);
  background: rgba(40, 16, 22, 0.55);
}
.left-rail .dept-manage-rail .department-row.is-confirming .department-row-name,
.left-rail .dept-manage-rail .department-row.is-confirming .department-row-delete {
  display: none;
}
.left-rail .dept-manage-rail .department-row-confirm-text {
  font-size: 0.76rem;
  color: #ffd3d3;
  line-height: 1.35;
}
.left-rail .dept-manage-rail .department-row-confirm-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
}
.left-rail .dept-manage-rail .department-row-confirm-cancel,
.left-rail .dept-manage-rail .department-row-confirm-do {
  border: 1px solid var(--line);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.74rem;
  padding: 0.28rem 0.55rem;
  border-radius: 6px;
  cursor: pointer;
}
.left-rail .dept-manage-rail .department-row-confirm-cancel:hover {
  background: rgba(255, 255, 255, 0.05);
}
.left-rail .dept-manage-rail .department-row-confirm-do {
  border-color: rgba(255, 120, 120, 0.5);
  color: #ffb1b1;
}
.left-rail .dept-manage-rail .department-row-confirm-do:hover {
  background: rgba(255, 120, 120, 0.18);
}
.left-rail .dept-manage-rail .department-list-empty {
  padding: 0.4rem 0.5rem;
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
}
.left-rail .dept-manage-rail .department-create-form {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
}
.left-rail .dept-manage-rail .department-create-input {
  flex: 1 1 100%;
  width: 100%;
  padding: 0.4rem 0.55rem;
  font-size: 0.82rem;
}
.left-rail .dept-manage-rail .department-create-form .btn {
  width: 100%;
  padding: 0.4rem 0.6rem;
  font-size: 0.82rem;
}
.left-rail .dept-manage-rail .department-create-status {
  font-size: 0.74rem;
  min-height: 0.9rem;
  line-height: 1.2;
}

.admin-shell .left-rail .rail-account--pinned {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.65rem 1rem;
  border-radius: 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: rgba(8, 18, 36, 0.55);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.admin-shell.is-left-collapsed .left-rail {
  opacity: 0;
  transform: translateX(-100%);
  pointer-events: none;
}

/* ============================================================
   Right rail (unified across chat / admin / brain). Mounted by
   connectors/upload-card.js via injectRightRail. Mirrors the chat
   page's .right-rail positioning so the visual shell matches.
   ============================================================ */
.admin-shell {
  --rail-right-w: 352px;
}
/* Right rail — glass-box positioning + clipping container, matching
   the chat page. The outer rail owns the unifying border/background/
   shadow so the three section cards sit inside a single panel, and
   the bell + right-rail toggle icons land ON the panel rather than
   floating over empty air.
   position: fixed (not absolute) so the rail's height is anchored
   to the viewport instead of the parent .admin-shell — same reasoning
   as .admin-shell .left-rail above. Otherwise the rail follows the
   shell's intrinsic height and visibly truncates on first paint while
   .admin-main is still empty. */
.admin-shell .right-rail {
  position: fixed;
  top: 1rem;
  bottom: 1rem;
  right: 0;
  width: var(--rail-right-w);
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: 18px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  background: var(--panel);
  backdrop-filter: blur(18px);
  box-shadow: var(--glow);
  transition: opacity var(--rail-anim-dur) var(--rail-anim-ease),
              transform var(--rail-anim-dur) var(--rail-anim-ease);
  z-index: 5;
}
.admin-shell .right-rail .rail-inner {
  width: var(--rail-right-w);
  height: 100%;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Frozen top zone — keeps the bell + right-rail toggle icons clear
   of scrolling content. Empty by design. */
.admin-shell .right-rail .rail-top-safe {
  /* Tightened to 44px to match styles.css — just enough clearance for
     the bell + right-rail-toggle icons sitting at viewport y≈28-60. */
  flex: 0 0 44px;
  min-height: 44px;
}
.admin-shell .right-rail .rail-inner-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.admin-shell.is-right-collapsed .right-rail {
  opacity: 0;
  transform: translateX(100%);
  pointer-events: none;
}
/* Reserve room for the right rail in the main content area so a
   long table doesn't slide under it. */
.admin-main {
  margin-right: var(--rail-right-w);
}

/* Toggle button — fixed at top-left so it sits in place whether
   the rail is open or closed. */
.rail-toggle-btn {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 1rem + 12px);
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: #97adca;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease,
              border-color 160ms ease, transform 120ms ease;
  /* Higher than the notification panel (34) and bell (35) so the
     right-rail toggle stays clickable when the notification panel
     slides over the top-right corner. Without this the toggle gets
     visually buried under the panel and looks like it disappeared.
     Mirrors styles.css on the chat page. */
  z-index: 36;
}
.rail-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e6f0ff;
  border-color: var(--line);
}
.rail-toggle-btn:active { transform: scale(0.94); }
.rail-toggle-btn svg { display: block; }
.rail-toggle-btn--left  { left:  12px; }
.rail-toggle-btn--right { right: 12px; }

/* Brand block */
.left-rail .brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.left-rail .brand h1 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #dff5ff;
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
}
.left-rail .brand h1::before { content: none; }
.left-rail .brand-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #9ff6ff 0%, #27ceff 60%, #0f4f9f 100%);
  box-shadow: 0 0 18px rgba(29, 216, 255, 0.8);
}
.left-rail .brand-label {
  margin: 0;
  font-size: 0.74rem;
  color: #97adca;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Account row */
.left-rail .rail-account {
  margin-top: 0.7rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
}
.left-rail .rail-account-email {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  color: #97adca;
}
.left-rail .rail-account-signout {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.74rem;
  padding: 0.3rem 0.55rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.left-rail .rail-account-signout:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}
.left-rail .rail-account-signout:focus-visible {
  outline: 2px solid #6aa9ff;
  outline-offset: 2px;
}

/* Primary nav buttons inside the rail. Reuses the index.html
   gradient pill look. */
.left-rail .new-chat-btn {
  width: 100%;
  display: inline-block;
  text-align: center;
  border-radius: 12px;
  padding: 0.72rem 0.92rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: #041225;
  background: linear-gradient(135deg, #86f8ff 0%, #1dd8ff 45%, #27a6ff 100%);
  box-shadow: 0 8px 22px rgba(16, 163, 255, 0.4);
  text-decoration: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.left-rail .new-chat-btn + .new-chat-btn { margin-top: 0.35rem; }

/* Brand-color links — each top-level nav button owns one fixed
   color across all pages so users learn the association. */
.left-rail .chat-link-btn {
  background: var(--color-sohbet-grad);
  box-shadow: 0 8px 22px var(--color-sohbet-shadow);
}
.left-rail .admin-link-btn {
  background: var(--color-admin-grad);
  box-shadow: 0 8px 22px var(--color-admin-shadow);
}
.left-rail .brain-link-btn {
  background: var(--color-beyin-grad);
  box-shadow: 0 8px 22px var(--color-beyin-shadow);
}

/* Divider between the account/links block and the tab nav. */
.left-rail .rail-section-break {
  height: 1px;
  background: var(--line);
  opacity: 0.7;
  margin: 1.25rem 0 1rem;
}

/* Tab buttons inside the rail. They keep the `.tab` class so the
   existing admin.js handler (which matches `.tab` + dataset.tab)
   continues to work; we override the visual to look like a nav row
   rather than a pill. */
.left-rail .rail-tab-btn {
  background: rgba(20, 38, 70, 0.45);
  color: #b7d5ff;
  border: 1px solid transparent;
  box-shadow: none;
  text-align: left;
  font-weight: 600;
  padding: 0.6rem 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
/* Keep the per-tab ::before icons that .tab[data-tab="..."]::before
   defines globally. Just nudge their sizing so they sit nicely
   inside the rail row. */
.left-rail .rail-tab-btn::before {
  width: 18px;
  height: 18px;
  opacity: 0.85;
}
.left-rail .rail-tab-btn.active::before {
  opacity: 1;
}
.left-rail .rail-tab-btn + .rail-tab-btn { margin-top: 0.3rem; }
.left-rail .rail-tab-btn:hover {
  background: rgba(20, 38, 70, 0.75);
  border-color: rgba(116, 170, 255, 0.22);
  color: #dff5ff;
}
.left-rail .rail-tab-btn.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;
}

@media (prefers-reduced-motion: reduce) {
  .admin-shell .left-rail,
  .admin-main {
    transition: none;
  }
}

/* ================================================================== */
/*  Bildirim sistemi — Bell + Panel (shared across chat / admin /     */
/*  beyin). Selectors all prefixed .notif- so they don't collide with */
/*  page-specific styles. See notifications.js for the JS half.       */
/* ================================================================== */

.notif-bell-btn {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 1rem + 12px);
  right: 12px;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted, #95abc8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease,
              border-color 160ms ease, transform 120ms ease;
  z-index: 35;
}

.notif-bell-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e6f0ff;
  border-color: var(--line, rgba(116, 170, 255, 0.24));
}

.notif-bell-btn:active { transform: scale(0.94); }

.notif-bell-btn.is-active {
  background: rgba(29, 216, 255, 0.10);
  border-color: var(--line, rgba(116, 170, 255, 0.24));
  color: #e6f0ff;
}

.notif-bell-btn svg { display: block; }

.notif-bell-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent, #1dd8ff);
  color: #04121f;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px rgba(8, 16, 29, 0.95);
  pointer-events: none;
}

.notif-bell-badge[hidden] { display: none; }

/* ---- Panel ----------------------------------------------------- */
.notif-panel {
  position: fixed;
  /* Same vertical span as the left rail so both side
     surfaces mirror each other. The bell button has a
     higher z-index (35 vs 34), so it stays clickable on top
     of the panel — and the header padding-top below makes
     room so the title never sits underneath the bell. */
  top: 1rem;
  bottom: 1rem;
  right: 0;
  /* Same width as the left rail (--rail-left-w) so the
     panel feels like a mirrored sidebar rather than a popover. */
  width: 308px;
  max-width: calc(100vw - 24px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line, rgba(116, 170, 255, 0.24));
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
  background: var(--panel, rgba(12, 22, 43, 0.72));
  backdrop-filter: blur(18px);
  box-shadow: 0 0 0 1px rgba(81, 179, 255, 0.22),
              0 18px 48px rgba(5, 14, 30, 0.62);
  z-index: 34;
  opacity: 0;
  transform: translateX(100%);
  pointer-events: none;
  transition: opacity var(--rail-anim-dur, 420ms)
                var(--rail-anim-ease, cubic-bezier(0.32, 0.72, 0, 1)),
              transform var(--rail-anim-dur, 420ms)
                var(--rail-anim-ease, cubic-bezier(0.32, 0.72, 0, 1));
  overflow: hidden;
}

.notif-panel[hidden] { display: none; }

.notif-panel.is-open {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.notif-panel-header {
  /* Title sits on the same row as the bell (bell is
     position:fixed at the panel’s top-right corner); right
     padding reserves a 60px lane so the title text never
     runs under the bell. "Tümünü okundu işaretle" stacks
     directly below the title via the column flex. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 60px 12px 14px;
  border-bottom: 1px solid var(--line, rgba(116, 170, 255, 0.24));
}

.notif-panel-title {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--text, #ebf4ff);
  letter-spacing: 0.01em;
}

.notif-panel-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.notif-mark-all-btn {
  background: transparent;
  border: 0;
  color: var(--muted, #95abc8);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color 140ms ease, background 140ms ease;
}

.notif-mark-all-btn:hover {
  color: var(--accent, #1dd8ff);
  background: rgba(29, 216, 255, 0.08);
}

.notif-close-btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted, #95abc8);
  cursor: pointer;
  padding: 0;
  transition: background 140ms ease, color 140ms ease,
              border-color 140ms ease;
}

.notif-close-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e6f0ff;
  border-color: var(--line, rgba(116, 170, 255, 0.24));
}

.notif-list {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notif-empty {
  position: absolute;
  inset: 56px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted, #95abc8);
  font-size: 13px;
  pointer-events: none;
}

.notif-empty[hidden] { display: none; }

/* ---- Cards ----------------------------------------------------- */
.notif-card {
  position: relative;
  display: block;
  padding: 12px 30px 12px 18px;
  border: 1px solid var(--line, rgba(116, 170, 255, 0.24));
  border-radius: 12px;
  background: rgba(10, 18, 36, 0.55);
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  transition: background 160ms ease, border-color 160ms ease,
              max-height 320ms cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 96px;
}

/* Top-right gray delete (×) on every card. Sits in the right gutter
   reserved by the card's padding-right so it never overlaps the time. */
.notif-card-close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted, #95abc8);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 140ms ease, background 140ms ease, color 140ms ease;
}
.notif-card-close:hover {
  opacity: 1;
  background: rgba(127, 161, 212, 0.16);
  color: var(--text, #ebf4ff);
}

.notif-card:hover {
  background: rgba(15, 28, 56, 0.7);
  border-color: rgba(137, 213, 255, 0.42);
}

.notif-card.is-expanded {
  max-height: 480px;
}

.notif-stripe {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent, #1dd8ff);
  opacity: 1;
}

.notif-card.is-read .notif-stripe { opacity: 0.4; }
.notif-card.status-done    .notif-stripe { background: #5fda94; }
.notif-card.status-running .notif-stripe { background: #ffb866; }
.notif-card.status-started .notif-stripe { background: #7cf2ff; }
.notif-card.status-failed  .notif-stripe { background: #ff6e7a; }
.notif-card.status-problem .notif-stripe { background: #ff8b5c; }

.notif-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.notif-card-head {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.notif-card.is-unread .notif-card-head:hover {
  background: rgba(127, 161, 212, 0.08);
  border-radius: 6px;
}

.notif-card-icon {
  font-size: 13px;
  line-height: 1;
  color: var(--muted, #95abc8);
}

.notif-card.status-done    .notif-card-icon { color: #5fda94; }
.notif-card.status-running .notif-card-icon { color: #ffb866; }
.notif-card.status-failed  .notif-card-icon { color: #ff6e7a; }
.notif-card.status-problem .notif-card-icon { color: #ff8b5c; }

.notif-card-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text, #ebf4ff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* When the card is expanded, drop the single-line clamp so the full
   title wraps and stays readable — mirrors the body-text expansion. */
.notif-card.is-expanded .notif-card-title {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
}

.notif-card-time {
  font-size: 11px;
  color: var(--muted, #95abc8);
  white-space: nowrap;
}

.notif-card-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted, #95abc8);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.notif-card.is-expanded .notif-card-text {
  display: block;
  -webkit-line-clamp: unset;
  overflow: auto;
  max-height: 320px;
  color: var(--text, #ebf4ff);
}

.notif-card-goto {
  display: none;
  align-self: flex-start;
  margin-top: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(29, 216, 255, 0.14);
  color: var(--accent, #1dd8ff);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(29, 216, 255, 0.32);
  transition: background 140ms ease, color 140ms ease;
}

.notif-card.is-expanded .notif-card-goto {
  display: inline-flex;
}

.notif-card-goto:hover {
  background: rgba(29, 216, 255, 0.22);
}

/* Action row for backend-driven cards (triage notifications). Unlike
   the goto link, the primary action button stays visible whether or
   not the card is expanded — it's the whole point of the card. */
.notif-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.notif-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(95, 218, 148, 0.14);
  color: #5fda94;
  border: 1px solid rgba(95, 218, 148, 0.34);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.notif-card-action {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--accent, #1dd8ff);
  color: #04222b;
  font-size: 12.5px;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  transition: filter 140ms ease, transform 60ms ease;
}

.notif-card-action:hover { filter: brightness(1.08); }
.notif-card-action:active { transform: translateY(1px); }

/* Cards carrying an action row must never clip it. The collapsed 96px
   clamp hides everything past the first ~2 lines, so drop the clamp for
   action cards — the action button is the point of the card. */
.notif-card.has-action { max-height: none; }

@media (max-width: 480px) {
  .notif-panel {
    top: 0;
    bottom: 0;
    width: 100vw;
    border-radius: 0;
    border-left: 0;
  }
  .notif-bell-btn { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .notif-panel { transition: none; }
  .notif-card  { transition: none; }
}
/* ====================================================================
   Notification extras — bell attention state + toast popups.
   Append-only block; safe to duplicate identically across styles.css,
   admin.css and brain.css.
   ==================================================================== */

/* Bell goes RED whenever there are unread notifications. The
   .is-shaking keyframe is added briefly (~900 ms) on every new
   notification add/upsert so the user gets a side-to-side wiggle
   on top of the colour change. */
.notif-bell-btn.has-unread { color: #ff5d6c; }
.notif-bell-btn.has-unread .notif-bell-badge {
  background: #ff5d6c;
  border-color: rgba(255, 93, 108, 0.6);
  color: #fff;
}
@keyframes notif-bell-shake {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-3px) rotate(-8deg); }
  30%  { transform: translateX(3px)  rotate(8deg);  }
  45%  { transform: translateX(-2px) rotate(-5deg); }
  60%  { transform: translateX(2px)  rotate(5deg);  }
  75%  { transform: translateX(-1px) rotate(-2deg); }
  100% { transform: translateX(0); }
}
.notif-bell-btn.is-shaking {
  animation: notif-bell-shake 0.9s cubic-bezier(.36,.07,.19,.97) both;
  transform-origin: center 30%;
}

/* Toast pop-ups — appear top-center, stack downward, auto-dismiss.
   Wired to window.solvaraNotifications.toast({type,message}).
   .is-visible toggles the slide-in transition. */
.notif-toast-host {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 1rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  z-index: 50;
  pointer-events: none;
}
.notif-toast {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1rem 0.65rem 0.85rem;
  min-height: 38px;
  max-width: min(520px, calc(100vw - 32px));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(18, 28, 50, 0.92);
  color: #ebf4ff;
  font-size: 0.88rem;
  line-height: 1.3;
  box-shadow: 0 18px 48px rgba(2, 8, 22, 0.55), 0 0 0 1px rgba(81, 179, 255, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transition: opacity 220ms ease, transform 220ms cubic-bezier(.36,.07,.19,.97);
}
.notif-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.notif-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.78rem;
  flex-shrink: 0;
  color: #041225;
}
.notif-toast--success .notif-toast-icon { background: #5fda94; }
.notif-toast--error   .notif-toast-icon { background: #ff7a8a; color: #fff; }
.notif-toast--info    .notif-toast-icon { background: #5cc6ff; }
.notif-toast--success { border-color: rgba(95, 218, 148, 0.45); }
.notif-toast--error   { border-color: rgba(255, 122, 138, 0.55); }
.notif-toast--info    { border-color: rgba(92, 198, 255, 0.45); }
.notif-toast-msg { display: inline-block; }

/* ====================================================================
   Loading overlay — full-page blurred backdrop with a spinner card,
   shown during the initial admin data load (see admin.html #loading-overlay
   and admin.js showLoadingOverlay/hideLoadingOverlay). Mirrors the brain
   panel's overlay so the experience is consistent across pages. z-index sits
   above the modal backdrop (80) and toasts. */
.loading-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: rgba(6, 12, 24, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: all;
  /* Slight fade-in so it doesn't strobe on very fast responses. */
  animation: loading-overlay-fade 140ms ease-out;
}
.loading-overlay.hidden { display: none; }

.loading-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(13, 24, 46, 0.96);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
  min-width: 200px;
}
.loading-label {
  font-size: 0.92rem;
  color: var(--text, #ebf4ff);
  letter-spacing: 0.02em;
}
.loading-spinner {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--accent, #7cf2ff);
  border-right-color: var(--accent, #7cf2ff);
  animation: loading-spin 0.85s linear infinite;
}
@keyframes loading-spin {
  to { transform: rotate(360deg); }
}
@keyframes loading-overlay-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}