@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --ink-950: #0F1519;
  --ink-800: #1A2328;
  --ink-700: #232E34;
  --ink-600: #2C3941;
  --paper: #EDE6D6;
  --paper-dim: #C9C2B2;
  --muted: #8A9BA3;
  --brass: #C08D3F;
  --brass-hi: #E0B368;
  --sage: #6F9077;
  --brick: #B85C46;
  --radius: 6px;
  --font-display: 'Roboto Slab', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; }

/* regulile de mai jos seteaza `display` pe elemente care pot fi ascunse
   cu atributul `hidden`, asa ca acesta are nevoie de prioritate explicita */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink-950);
  color: var(--paper);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brass-hi); }

::selection { background: var(--brass); color: var(--ink-950); }

:focus-visible {
  outline: 2px solid var(--brass-hi);
  outline-offset: 2px;
}

/* ---------- Wordmark ---------- */
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--paper);
  margin: 0;
}
.wordmark .dot { color: var(--brass); }

/* ---------- Pagini de autentificare ---------- */
.auth-shell {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 20%, rgba(192, 141, 63, 0.06), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(111, 144, 119, 0.05), transparent 45%),
    var(--ink-950);
}

.auth-footer {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.auth-footer a { color: var(--brass-hi); text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  border-top: 3px solid var(--brass);
  border-radius: var(--radius);
  padding: 36px 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.auth-card .wordmark {
  font-size: 28px;
  text-align: center;
}

.auth-tag {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 4px 0 28px;
}

.field { margin-bottom: 18px; }

.field label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 6px;
}

.field input {
  width: 100%;
  padding: 11px 12px;
  background: var(--ink-700);
  border: 1px solid var(--ink-600);
  border-radius: 4px;
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 14px;
}

.field input:focus { border-color: var(--brass); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: var(--brass);
  color: var(--ink-950);
  border: none;
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn:hover { background: var(--brass-hi); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--ink-600);
  color: var(--paper);
}
.btn-ghost:hover { border-color: var(--brass); background: transparent; color: var(--paper); }

.btn-ghost.btn-danger { border-color: var(--brick); color: #E3A897; }
.btn-ghost.btn-danger:hover { background: rgba(184, 92, 70, 0.12); border-color: var(--brick); color: #E3A897; }

.btn-sm { width: auto; padding: 8px 14px; font-size: 13px; }

.auth-switch {
  margin-top: 22px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

.error-box {
  background: rgba(184, 92, 70, 0.12);
  border: 1px solid rgba(184, 92, 70, 0.4);
  color: #E3A897;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 4px;
  margin-bottom: 18px;
  display: none;
}
.error-box.show { display: block; }

/* ---------- Dashboard ---------- */

/* Bara de sus e o suprafata distincta, ridicata deasupra continutului: navy
   sensibil mai deschis, umbra proprie si un fir teal dedesubt. Ramane in tema,
   dar se citeste clar ca zona separata. */
.topbar {
  position: relative;
  /* Panourile din bara trebuie sa treaca peste continutul paginii (altfel linia
     de redimensionare dintre coloane apare peste ele). Valoarea sta insa sub
     ferestrele modale (20) si sub cea de incarcare (40), ca acelea sa acopere
     bara cum trebuie. */
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 32px;
  /* Suprafata proprie, sensibil mai deschisa decat fundalul paginii, ca bara sa
     se citeasca clar ca o zona separata - dar tot in gama navy a aplicatiei. */
  background: linear-gradient(180deg, rgb(19, 26, 66), rgb(13, 18, 52));
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  /* umbra o desprinde de continut, nu doar o linie */
  box-shadow: 0 6px 22px rgba(0, 0, 12, 0.55);
}
/* firul de accent, mai intens sub logo si stins spre dreapta */
.topbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg,
    rgb(0, 153, 153) 0%,
    rgba(0, 153, 153, 0.45) 28%,
    rgba(0, 153, 153, 0) 62%);
  pointer-events: none;
}

.topbar .wordmark {
  font-size: 26px;
  color: rgba(255, 255, 255, 0.96);
  letter-spacing: 0.03em;
}
.topbar .wordmark .dot {
  color: rgb(0, 191, 191);
  text-shadow: 0 0 14px rgba(0, 191, 191, 0.65);
}
.topbar .btn-ghost { border-color: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.85); }

.topbar-left { display: flex; align-items: center; gap: 30px; }

.topbar-nav { display: flex; align-items: center; gap: 4px; }
.nav-link {
  font-size: 13px;
  font-weight: 600;
  padding: 7px 15px;
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.nav-link:hover { color: rgb(0, 191, 191); background: rgba(0, 153, 153, 0.12); }
.nav-link.is-active {
  color: rgb(0, 191, 191);
  background: rgba(0, 153, 153, 0.16);
  box-shadow: inset 0 0 0 1px rgba(0, 153, 153, 0.4);
}

.topbar-right { display: flex; align-items: center; gap: 10px; }

/* ---------- Istoric activitate ---------- */
.history-menu { position: relative; }

.history-trigger {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  padding: 6px 14px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.history-trigger:hover {
  border-color: rgba(0, 153, 153, 0.7);
  background: rgba(0, 153, 153, 0.14);
  color: rgb(0, 191, 191);
}
.history-menu.open .history-trigger {
  border-color: rgb(0, 153, 153);
  background: rgba(0, 153, 153, 0.18);
  color: rgb(0, 191, 191);
}
.history-icon { font-size: 13px; line-height: 1; }

/* Panoul continua tema barei de sus. */
.history-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 420px;
  max-width: calc(100vw - 32px);
  max-height: 470px;
  background: rgb(10, 14, 48);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 3px solid rgb(0, 153, 153);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(0, 0, 20, 0.55);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 30;
}
.history-menu.open .history-panel { display: flex; }

.history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  flex-shrink: 0;
}
.history-scope {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  color: rgb(0, 191, 191);
}
.history-scope input { accent-color: rgb(0, 153, 153); cursor: pointer; }

.history-list { overflow-y: auto; padding: 8px; }

.history-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  padding: 9px 10px;
  margin-bottom: 4px;
  border-radius: 5px;
  align-items: start;
  /* dunga din stanga arata categoria evenimentului */
  border-left: 2px solid transparent;
  background: rgba(255, 255, 255, 0.03);
}
.history-item:hover { background: rgba(255, 255, 255, 0.07); }

/* Fisierele - actiunile pe continutul tau - sunt scoase in evidenta cu teal.
   Partajarile si actiunile pe conturi au alte culori, ca sa se distinga rapid. */
.history-item.cat-fisier    { border-left-color: rgb(0, 153, 153); }
.history-item.cat-partajare { border-left-color: var(--brass); }
.history-item.cat-cont      { border-left-color: rgba(255, 255, 255, 0.3); }
.history-item.cat-stergere  { border-left-color: var(--brick); }

.history-item-icon { font-size: 14px; line-height: 1.35; text-align: center; }
.history-item-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  overflow-wrap: anywhere;
  line-height: 1.4;
}

/* numele fisierului, ca o eticheta - se vede imediat despre ce fisier e vorba */
.history-item-file {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 153, 153, 0.16);
  border: 1px solid rgba(0, 153, 153, 0.35);
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 1px;
  vertical-align: baseline;
}
.cat-partajare .history-item-file {
  background: rgba(192, 141, 63, 0.16);
  border-color: rgba(192, 141, 63, 0.4);
}
.cat-cont .history-item-file {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}
.cat-stergere .history-item-file {
  background: rgba(184, 92, 70, 0.16);
  border-color: rgba(184, 92, 70, 0.4);
}

.history-item-meta {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 3px;
}
.history-item-user { color: rgb(0, 191, 191); font-family: var(--font-mono); }

.history-empty {
  padding: 36px 16px;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 640px) {
  .history-label { display: none; }
  .history-trigger { padding: 6px 10px; }
}

.user-menu { position: relative; }
.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  padding: 3px 14px 3px 3px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.user-menu-trigger:hover { border-color: rgba(0, 153, 153, 0.7); background: rgba(0, 153, 153, 0.14); }
.user-avatar {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgb(0, 153, 153);
  color: rgb(255, 255, 255);
  box-shadow: 0 0 12px rgba(0, 153, 153, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-mono);
  text-transform: uppercase;
}
.user-name { font-size: 13px; color: rgba(255, 255, 255, 0.9); font-family: var(--font-mono); font-weight: 600; }
.chevron { font-size: 10px; color: rgba(255, 255, 255, 0.5); transition: transform 0.15s ease; }
.user-menu.open .chevron { transform: rotate(180deg); }
.user-menu.open .user-menu-trigger {
  border-color: rgb(0, 153, 153);
  background: rgba(0, 153, 153, 0.18);
}

.user-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 230px;
  background: rgb(10, 14, 48);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 3px solid rgb(0, 153, 153);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(0, 0, 20, 0.55);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 30;
}
.user-menu.open .user-menu-panel { display: flex; }
.user-menu-header {
  padding: 8px 10px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.user-menu-name {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.role-badge {
  align-self: flex-start;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 3px;
  background: rgba(0, 153, 153, 0.2);
  color: rgb(0, 191, 191);
}
.role-badge.role-user { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); }

.user-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 9px 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-body);
  text-decoration: none;
  box-sizing: border-box;
}
.user-menu-item:hover { background: rgba(0, 153, 153, 0.18); color: rgb(0, 191, 191); }
.user-menu-item.danger:hover { background: rgba(184, 92, 70, 0.18); color: #E3A897; }

@media (max-width: 640px) {
  .topbar-left { gap: 14px; }
  .user-name { display: none; }
  .nav-link { padding: 6px 10px; }
}

body.shell-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.shell-page .topbar { flex-shrink: 0; }

.app-shell { display: flex; flex: 1; min-height: 0; overflow: hidden; }

.sidebar {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--ink-800);
  border-right: 1px solid var(--ink-600);
  overflow: hidden;
}
.sidebar-folder-create { padding: 18px 16px 12px; flex-shrink: 0; }
.sidebar-folder-create .btn { width: 100%; }

.dropzone {
  border: 1.5px dashed var(--ink-600);
  border-radius: var(--radius);
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  background: var(--ink-800);
}
.dropzone:hover, .dropzone.drag { border-color: var(--brass); background: var(--ink-700); }
.dropzone p { margin: 0; color: var(--muted); font-size: 14px; }
.dropzone .dz-title { font-family: var(--font-display); font-size: 17px; color: var(--paper); margin-bottom: 6px; }
.dropzone input { display: none; }

.compact-dropzone { margin: 16px 20px 14px; padding: 16px 14px; flex-shrink: 0; }
.compact-dropzone .dz-title { font-size: 13px; margin-bottom: 2px; }
.compact-dropzone p:not(.dz-title) { font-size: 11px; }

/* ---------- Notificari (incarcari neterminate) ---------- */
.notifications {
  margin: 16px 20px 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notif-card {
  border: 1px solid rgba(0, 153, 153, 0.45);
  border-left: 3px solid rgb(0, 153, 153);
  background: rgba(0, 153, 153, 0.08);
  border-radius: var(--radius);
  padding: 12px 14px;
  animation: fadeIn 0.25s ease;
}
.notif-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.notif-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(0, 191, 191);
}
.notif-file {
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  overflow-wrap: anywhere;
  margin: 0 0 8px;
}
.notif-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}

.notif-bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  margin-bottom: 12px;
}
.notif-bar span {
  display: block;
  height: 100%;
  background: rgb(0, 153, 153);
  border-radius: 3px;
}

.notif-actions { display: flex; gap: 8px; }
.notif-actions .btn { width: auto; }

.search-input {
  padding: 8px 12px;
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  border-radius: 4px;
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 13px;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
/* Butonul nativ de golire exista doar in Chrome/Safari si e negru pe fundal
   inchis, deci il ascundem si punem unul propriu, identic in toate browserele. */
.search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.search-wrap { position: relative; width: 100%; }
.search-wrap .search-input { padding-right: 32px; }

.search-clear {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, background 0.15s ease;
}
.search-clear:hover {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.1);
}

.sidebar-files-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px 8px;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.sidebar-files-count {
  background: var(--ink-700);
  color: var(--muted);
  border-radius: 10px;
  padding: 1px 9px;
  font-family: var(--font-mono);
  font-size: 11px;
}

.folder-list { flex: 1; overflow-y: auto; padding: 0 10px 16px; border-top: 1px solid var(--ink-700); }
.folder-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  margin-top: 4px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  animation: fadeIn 0.25s ease;
}
.folder-row:hover { background: var(--ink-700); }
.folder-row.selected { background: var(--ink-700); border-left: 2px solid var(--brass); padding-left: 8px; }
.folder-name {
  flex: 1;
  min-width: 0;
  color: var(--paper);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.folder-count {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}
.folder-delete {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.folder-row:hover .folder-delete { opacity: 1; }
.folder-delete:hover { color: var(--brick); }

.file-column {
  flex: 0 0 460px;
  min-width: 280px;
  max-width: 70%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.col-resizer {
  flex-shrink: 0;
  width: 7px;
  cursor: col-resize;
  position: relative;
  background: var(--ink-800);
  border-right: 1px solid var(--ink-600);
}
.col-resizer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 1px;
  background: var(--ink-600);
}
.col-resizer:hover, .col-resizer.dragging { background: rgba(192, 141, 63, 0.15); }
.col-resizer:hover::after, .col-resizer.dragging::after { background: var(--brass); }
body.resizing-columns { cursor: col-resize; user-select: none; }
body.resizing-columns .preview-panel { pointer-events: none; }
.file-column-header {
  padding: 18px 20px 14px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--ink-700);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.file-column-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.file-column-title-row h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--paper);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-list { flex: 1; overflow-y: auto; padding: 0 10px 16px; }
.file-list .ledger-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name name"
    "size date"
    "actions actions";
  row-gap: 4px;
  column-gap: 8px;
  padding: 10px;
  margin-top: 4px;
  border-bottom: none;
  border-radius: 6px;
  animation: fadeIn 0.25s ease;
}
.file-list .ledger-row:hover { background: var(--ink-700); }
.file-list .ledger-row.selected {
  background: var(--ink-700);
  border-left: 2px solid var(--brass);
  padding-left: 8px;
}
.file-list .file-name { grid-area: name; overflow-wrap: anywhere; white-space: normal; }
.file-list .file-size { grid-area: size; }
.file-list .file-date { grid-area: date; justify-self: end; }
.file-list .row-actions {
  grid-area: actions;
  justify-content: flex-start;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.file-list .ledger-row:hover .row-actions,
.file-list .ledger-row.selected .row-actions { opacity: 1; }
.file-list .row-actions button { padding: 4px 8px; font-size: 11px; }
.file-list .empty-state { padding: 40px 16px; }
.ledger-row.stamped { animation: stampIn 0.5s ease; }

.preview-panel {
  flex: 1;
  min-height: 0;
  border: none;
  border-radius: 0;
  position: static;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.preview-panel .preview-body { flex: 1; max-height: none; overflow: auto; }
.preview-panel .preview-empty,
.preview-panel .preview-loading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes stampIn {
  0% { opacity: 0; transform: scale(1.04); }
  50% { opacity: 1; }
  100% { transform: scale(1); }
}

/* ---------- Animatii de interactiune ----------
   Scurte si discrete: doar cat sa se simta ca actiunea a fost inregistrata.
   Toate sunt dezactivate automat daca sistemul cere miscare redusa. */

@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes modalIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* randul care dispare: se stinge si aluneca, in loc sa sara brusc */
@keyframes rowOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateX(-14px); }
}

.modal-overlay.show { animation: overlayIn 0.16s ease-out; }
.modal-overlay.show .modal-card,
.modal-overlay.show .upload-card,
.modal-overlay.show .preview-modal-card { animation: modalIn 0.2s cubic-bezier(0.2, 0.8, 0.3, 1); }

.history-menu.open .history-panel,
.user-menu.open .user-menu-panel { animation: dropIn 0.16s cubic-bezier(0.2, 0.8, 0.3, 1); }

.ledger-row.removing,
.folder-row.removing,
.notif-card.removing,
.user-row.removing {
  animation: rowOut 0.22s ease forwards;
  pointer-events: none;
}

/* raspuns tactil la apasare */
.btn, .row-actions button, .nav-link, .user-menu-item,
.history-trigger, .user-menu-trigger, .folder-row, .ledger-row {
  transition: background 0.15s ease, color 0.15s ease,
              border-color 0.15s ease, transform 0.08s ease;
}
.btn:active:not(:disabled),
.row-actions button:active:not(:disabled),
.history-trigger:active,
.user-menu-trigger:active { transform: translateY(1px) scale(0.985); }
.nav-link:active, .user-menu-item:active { transform: translateY(1px); }

.file-name {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--paper);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-size, .file-date { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.row-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.row-actions button {
  background: transparent;
  border: 1px solid var(--ink-600);
  color: var(--paper-dim);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  font-family: var(--font-body);
}
.row-actions button:hover { border-color: var(--brass); color: var(--brass-hi); }
.row-actions button.del:hover { border-color: var(--brick); color: #E3A897; }

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}
.empty-state .dz-title { font-family: var(--font-display); color: var(--paper); font-size: 16px; margin-bottom: 6px; }

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink-700);
  border: 1px solid var(--brass);
  color: var(--paper);
  padding: 10px 18px;
  border-radius: 4px;
  font-size: 13px;
  opacity: 0;
  transition: all 0.25s ease;
  pointer-events: none;
  z-index: 10;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Mesaj cu anulare ---------- */
/* Ramane mai mult decat un mesaj obisnuit si accepta clic, ca sa se poata
   apasa "Anulează". Bara de dedesubt arata cat timp a mai ramas. */
.toast-undo {
  display: none;
  align-items: center;
  gap: 14px;
  padding: 11px 14px 13px 16px;
  background: rgb(13, 18, 52);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-left: 3px solid rgb(0, 153, 153);
  box-shadow: 0 14px 34px rgba(0, 0, 14, 0.55);
  overflow: hidden;
  z-index: 45; /* peste ferestrele modale, ca anularea sa fie mereu la indemana */
}
.toast-undo.show { display: flex; pointer-events: auto; }

.undo-text { color: rgba(255, 255, 255, 0.88); }
.undo-text b { font-family: var(--font-mono); font-weight: 600; }

.undo-btn {
  flex-shrink: 0;
  background: rgba(0, 153, 153, 0.18);
  border: 1px solid rgba(0, 153, 153, 0.55);
  color: rgb(0, 191, 191);
  border-radius: 4px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.08s ease;
}
.undo-btn:hover { background: rgba(0, 153, 153, 0.32); }
.undo-btn:active { transform: translateY(1px); }

.undo-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
}
.undo-bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: rgb(0, 153, 153);
  transform-origin: left center;
}
.toast-undo.show .undo-bar i { animation: undoScurge var(--undo-durata, 8s) linear forwards; }
@keyframes undoScurge { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------- Modal partajare ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 21, 25, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 20;
}
.modal-overlay.show { display: flex; }

/* ---------- Progres incarcare ---------- */
.upload-overlay {
  /* mai opac si peste orice alt modal: cat timp se incarca, nimic altceva nu e accesibil */
  background: rgba(0, 0, 40, 0.88);
  z-index: 40;
}
.upload-card { text-align: center; }
.upload-card h3 { text-align: center; }
.upload-card .modal-sub {
  text-align: center;
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
  margin-bottom: 22px;
}

.upload-ring {
  position: relative;
  width: 148px;
  height: 148px;
  margin: 0 auto 18px;
}
.upload-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.upload-ring circle {
  fill: none;
  stroke-width: 8;
  /* 2 * PI * 52 */
  stroke-dasharray: 326.73;
}
.ring-track { stroke: rgba(255, 255, 255, 0.12); }
.ring-progress {
  stroke: rgb(0, 153, 153);
  stroke-linecap: round;
  stroke-dashoffset: 326.73;
  transition: stroke-dashoffset 0.2s ease;
}
.upload-percent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 28px;
  color: rgba(255, 255, 255, 0.95);
}

.upload-detail {
  font-size: 12px;
  font-family: var(--font-mono);
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 20px;
  min-height: 16px;
}

.modal-card {
  width: 100%;
  max-width: 360px;
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  border-top: 3px solid var(--brass);
  border-radius: var(--radius);
  padding: 28px 26px;
}
.modal-card h3 {
  font-family: var(--font-display);
  font-size: 16px;
  margin: 0 0 4px;
  color: var(--paper);
}
.modal-sub { font-size: 12px; color: var(--muted); margin: 0 0 20px; }

.modal-close {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  margin-top: 12px;
  width: 100%;
  text-align: center;
}

.share-link-box {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.share-link-box input {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  background: var(--ink-700);
  border: 1px solid var(--ink-600);
  border-radius: 4px;
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 12px;
}

.badge-shared {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sage);
  border: 1px solid var(--sage);
  border-radius: 3px;
  padding: 1px 6px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ---------- Panou de previzualizare ---------- */
.preview-empty, .preview-loading {
  text-align: center;
  padding: 80px 24px;
  color: var(--muted);
}
.preview-empty .dz-title, .preview-loading .dz-title {
  font-family: var(--font-display);
  color: var(--paper);
  font-size: 16px;
  margin-bottom: 6px;
}

.preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ink-700);
}
.preview-filename {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--paper);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preview-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.preview-body {
  padding: 20px;
  max-height: 760px;
  overflow: auto;
}
.preview-body img:hover { cursor: zoom-in; }

.text-preview {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--paper-dim);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.docx-preview {
  background: var(--paper);
  color: #23201a;
  border-radius: 4px;
  padding: 24px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.6;
}
.docx-preview img { max-width: 100%; }

.ledger-row { cursor: pointer; }
.ledger-row.selected { background: var(--ink-700); border-left: 2px solid var(--brass); padding-left: 2px; }

/* ---------- Previzualizare extinsă (lightbox) ---------- */
.preview-modal-card {
  width: 94vw;
  height: 90vh;
  max-width: 1500px;
  background: rgb(10, 14, 48);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.preview-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}
.preview-modal-filename {
  font-family: var(--font-mono);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preview-modal-controls { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.zoom-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 4px 6px;
}
.zoom-controls button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zoom-controls button:hover { background: rgb(0, 153, 153); color: rgb(255, 255, 255); }
#zoomLevel { font-size: 11px; color: rgba(255, 255, 255, 0.6); font-family: var(--font-mono); min-width: 38px; text-align: center; }

.modal-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-icon-btn:hover { border-color: var(--brick); color: #E3A897; }

.preview-modal-body {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  position: relative;
}
.preview-modal-body .docx-preview { max-width: 820px; width: 100%; margin: 0 auto; }
.preview-modal-body .text-preview { max-width: 900px; width: 100%; }
.preview-modal-body iframe { width: 100%; height: 100%; }
.preview-modal-body img.zoomable {
  transition: transform 0.12s ease;
  cursor: zoom-in;
  max-width: none;
  max-height: 100%;
  border-radius: 4px;
}

.preview-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 40, 0.65);
  color: rgba(255, 255, 255, 0.85);
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.preview-nav-btn:hover { border-color: rgb(0, 153, 153); color: rgb(0, 191, 191); }
.preview-nav-btn:disabled { opacity: 0.25; cursor: not-allowed; }
.preview-nav-btn.prev { left: 16px; }
.preview-nav-btn.next { right: 16px; }

@media (max-width: 640px) {
  .preview-modal-card { width: 100vw; height: 100vh; border-radius: 0; }
  .preview-nav-btn { width: 36px; height: 36px; font-size: 18px; }
  .preview-modal-body { padding: 16px; }
}

@media (max-width: 900px) {
  body.shell-page { height: auto; overflow: visible; }
  .app-shell { flex-direction: column; min-height: 0; }
  .sidebar { width: 100%; max-height: 220px; border-right: none; border-bottom: 1px solid var(--ink-600); }
  .file-column { flex-basis: auto; max-width: 100%; min-height: 45vh; border-bottom: 1px solid var(--ink-600); }
  .col-resizer { display: none; }
  .preview-panel { min-height: 55vh; }
}

@media (max-width: 640px) {
  .topbar { padding: 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Paleta tpv-automation.ro (dashboard) ---------- */
body.dashboard-page {
  background: rgb(0, 0, 40);
  color: rgba(255, 255, 255, 0.72);
}

body.dashboard-page .dropzone {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}
body.dashboard-page .dropzone:hover,
body.dashboard-page .dropzone.drag {
  border-color: rgb(0, 153, 153);
  background: rgba(0, 153, 153, 0.08);
}
body.dashboard-page .dropzone p { color: rgba(255, 255, 255, 0.55); }
body.dashboard-page .dropzone .dz-title { color: rgba(255, 255, 255, 0.9); }

body.dashboard-page .search-input {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
}

body.dashboard-page .sidebar {
  background: rgba(255, 255, 255, 0.02);
  border-right-color: rgba(255, 255, 255, 0.1);
}
body.dashboard-page .file-column-header { border-bottom-color: rgba(255, 255, 255, 0.1); }
body.dashboard-page .col-resizer { background: transparent; border-right-color: rgba(255, 255, 255, 0.1); }
body.dashboard-page .col-resizer::after { background: rgba(255, 255, 255, 0.12); }
body.dashboard-page .col-resizer:hover, body.dashboard-page .col-resizer.dragging { background: rgba(0, 153, 153, 0.1); }
body.dashboard-page .col-resizer:hover::after, body.dashboard-page .col-resizer.dragging::after { background: rgb(0, 153, 153); }
body.dashboard-page .file-column-title-row h2 { color: rgba(255, 255, 255, 0.9); }
body.dashboard-page .sidebar-files-header { color: rgba(255, 255, 255, 0.5); }
body.dashboard-page .sidebar-files-count {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.65);
}

body.dashboard-page .folder-list { border-top-color: rgba(255, 255, 255, 0.1); }
body.dashboard-page .folder-row:hover { background: rgba(255, 255, 255, 0.05); }
body.dashboard-page .folder-row.selected {
  background: rgba(0, 153, 153, 0.14);
  border-left-color: rgb(0, 153, 153);
}
body.dashboard-page .folder-name { color: rgba(255, 255, 255, 0.85); }
body.dashboard-page .folder-count { color: rgba(255, 255, 255, 0.5); }
body.dashboard-page .folder-delete:hover { color: var(--brick); }

body.dashboard-page .file-list .ledger-row:hover { background: rgba(255, 255, 255, 0.05); }
body.dashboard-page .file-list .ledger-row.selected {
  background: rgba(0, 153, 153, 0.14);
  border-left-color: rgb(0, 153, 153);
}
body.dashboard-page .file-name { color: rgba(255, 255, 255, 0.9); }
body.dashboard-page .file-size,
body.dashboard-page .file-date { color: rgba(255, 255, 255, 0.5); }

body.dashboard-page .row-actions button {
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.6);
}
body.dashboard-page .row-actions button:hover {
  border-color: rgb(0, 153, 153);
  color: rgb(0, 191, 191);
}
body.dashboard-page .row-actions button.del:hover {
  border-color: var(--brick);
  color: var(--brick);
}

body.dashboard-page .empty-state { color: rgba(255, 255, 255, 0.5); }
body.dashboard-page .empty-state .dz-title { color: rgba(255, 255, 255, 0.85); }

body.dashboard-page .preview-panel {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.12);
}
body.dashboard-page .preview-empty,
body.dashboard-page .preview-loading { color: rgba(255, 255, 255, 0.5); }
body.dashboard-page .preview-empty .dz-title,
body.dashboard-page .preview-loading .dz-title { color: rgba(255, 255, 255, 0.85); }
body.dashboard-page .preview-header { border-bottom-color: rgba(255, 255, 255, 0.12); }
body.dashboard-page .preview-filename { color: rgba(255, 255, 255, 0.85); }
body.dashboard-page .text-preview { color: rgba(255, 255, 255, 0.7); }

body.dashboard-page .btn {
  background: rgb(0, 153, 153);
  color: rgb(255, 255, 255);
}
body.dashboard-page .btn:hover { background: rgb(0, 179, 179); }
body.dashboard-page .btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
}
body.dashboard-page .btn-ghost:hover {
  border-color: rgb(0, 153, 153);
  color: rgb(0, 191, 191);
  background: transparent;
}
body.dashboard-page .btn-ghost.btn-danger { border-color: var(--brick); color: #E3A897; }
body.dashboard-page .btn-ghost.btn-danger:hover {
  background: rgba(184, 92, 70, 0.14);
  border-color: var(--brick);
  color: #E3A897;
}

.share-expiry-status {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  margin: -6px 0 14px;
}
.share-expiry-status.expired { color: #E3A897; }

body.dashboard-page .toast {
  background: rgb(15, 20, 55);
  border-color: rgb(0, 153, 153);
  color: rgb(255, 255, 255);
}

body.dashboard-page .modal-card {
  background: rgb(10, 14, 48);
  border-color: rgba(255, 255, 255, 0.12);
  border-top-color: rgb(0, 153, 153);
}
body.dashboard-page .modal-card h3 { color: rgba(255, 255, 255, 0.9); }
body.dashboard-page .modal-sub { color: rgba(255, 255, 255, 0.55); }
body.dashboard-page .field label { color: rgba(255, 255, 255, 0.55); }
body.dashboard-page .field input {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
}
body.dashboard-page .field input:focus { border-color: rgb(0, 153, 153); }
body.dashboard-page .share-link-box input {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
}
body.dashboard-page .modal-close { color: rgba(255, 255, 255, 0.5); }
body.dashboard-page .badge-shared {
  color: rgb(0, 191, 191);
  border-color: rgb(0, 153, 153);
}
.badge-expired { color: var(--brick); border-color: var(--brick); }
body.dashboard-page .badge-expired { color: #E3A897; border-color: var(--brick); }

.badge-folder {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--muted);
  border: 1px solid var(--ink-600);
  border-radius: 3px;
  padding: 1px 6px;
  margin-left: 8px;
  vertical-align: middle;
  white-space: nowrap;
}
body.dashboard-page .badge-folder {
  color: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.18);
}

/* ---------- Panou de administrare ---------- */
.admin-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 24px 80px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.admin-stats { display: flex; gap: 16px; flex-wrap: wrap; }
.admin-stat {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
}
.admin-stat-value { font-family: var(--font-display); font-size: 22px; color: rgba(255, 255, 255, 0.92); }
.admin-stat-label { font-size: 11px; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; letter-spacing: 0.05em; }

.admin-panel {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 24px;
}
.admin-panel h2 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 18px;
}

.admin-create-form {
  display: grid;
  grid-template-columns: 1fr 1fr 160px 190px auto;
  gap: 16px;
  align-items: end;
}
.admin-create-form .field { margin-bottom: 0; }

.admin-main .field select {
  width: 100%;
  padding: 11px 34px 11px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-body);
  font-size: 14px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23009999' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.admin-main .field select:hover { border-color: rgb(0, 153, 153); }
.admin-main .field select:focus { border-color: rgb(0, 153, 153); outline: none; }
.admin-main select option { background: rgb(10, 14, 48); color: rgba(255, 255, 255, 0.9); }

.user-table { display: flex; flex-direction: column; }
.user-row {
  display: grid;
  /* ultima coloana are latime fixa: pe randul de titluri e goala, iar cu `auto`
     s-ar ingusta la 0 si ar decala toate etichetele fata de datele de dedesubt */
  grid-template-columns: minmax(0, 1.3fr) 150px 110px 120px 90px 215px;
  gap: 12px;
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
}
.user-row-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.user-col-name { color: rgba(255, 255, 255, 0.9); font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-col-usage, .user-col-date { color: rgba(255, 255, 255, 0.6); font-family: var(--font-mono); font-size: 12px; }
.role-select, .quota-input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 12px;
  font-family: var(--font-body);
  width: 100%;
  transition: border-color 0.15s ease;
}
.role-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23009999' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}
.role-select option { background: rgb(10, 14, 48); color: rgba(255, 255, 255, 0.9); }
.quota-input { font-family: var(--font-mono); }
.role-select:hover, .quota-input:hover { border-color: rgb(0, 153, 153); }
.role-select:focus, .quota-input:focus { border-color: rgb(0, 153, 153); outline: none; }
.role-select:disabled, .quota-input:disabled { opacity: 0.4; cursor: not-allowed; }
.role-select:disabled:hover, .quota-input:disabled:hover { border-color: rgba(255, 255, 255, 0.15); }
.quota-input::placeholder,
.admin-main .field input::placeholder { color: rgba(255, 255, 255, 0.35); }
.user-row .row-actions button {
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  font-family: var(--font-body);
}
.user-row .row-actions button:hover { border-color: rgb(0, 153, 153); color: rgb(0, 191, 191); }
.user-row .row-actions button.del:hover { border-color: var(--brick); color: #E3A897; }
.user-row .row-actions button:disabled { opacity: 0.35; cursor: not-allowed; }

@media (max-width: 900px) {
  .admin-create-form { grid-template-columns: 1fr; }
  .user-row { grid-template-columns: 1fr; gap: 6px; }
  .user-row-head { display: none; }
  .user-row .row-actions { justify-content: flex-start; margin-top: 6px; }
}

/* ---------- Paleta tpv-automation.ro (autentificare) ---------- */
body.auth-page .auth-shell {
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 153, 153, 0.10), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(0, 153, 153, 0.06), transparent 45%),
    rgb(0, 0, 40);
}
body.auth-page .auth-card {
  background: rgb(10, 14, 48);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 3px solid rgb(0, 153, 153);
}
body.auth-page .wordmark { color: rgba(255, 255, 255, 0.92); }
body.auth-page .wordmark .dot { color: rgb(0, 191, 191); }
body.auth-page .auth-tag { color: rgba(255, 255, 255, 0.55); }
body.auth-page .field label { color: rgba(255, 255, 255, 0.55); }
body.auth-page .field input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
}
body.auth-page .field input:focus { border-color: rgb(0, 153, 153); }
body.auth-page .btn {
  background: rgb(0, 153, 153);
  color: rgb(255, 255, 255);
}
body.auth-page .btn:hover { background: rgb(0, 179, 179); }
body.auth-page .auth-switch { color: rgba(255, 255, 255, 0.55); }
body.auth-page .auth-switch a { color: rgb(0, 191, 191); }
body.auth-page .auth-footer { color: rgba(255, 255, 255, 0.4); }
body.auth-page .auth-footer a { color: rgb(0, 191, 191); }

.share-loading { text-align: center; font-size: 14px; }
.share-file-box {
  border-radius: 4px;
  padding: 14px;
  margin-bottom: 20px;
}
.share-file-name {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 14px;
  word-break: break-all;
}
.share-file-size { margin: 0; font-size: 12px; }

body.auth-page .share-loading { color: rgba(255, 255, 255, 0.55); }
body.auth-page .share-file-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
body.auth-page .share-file-name { color: rgba(255, 255, 255, 0.9); }
body.auth-page .share-file-size { color: rgba(255, 255, 255, 0.55); }