/* Path: /home/cool/public_html/songtrends/assets/css/style.css
   Purpose: Core styling (dark theme, responsive) + simetričan Add Song / Details layout.
   Added: published-cell & age-bar classes for vertical color line in Published column (requested).
*/
:root {
  --color-bg: #0f172a;
  --color-surface: #1e293b;
  --color-surface-alt: #24334b;
  --color-surface-soft: #1a2537;
  --color-primary: #2563eb;
  --color-secondary: #22c55e;
  --color-text: #e2e8f0;
  --color-danger: #dc2626;
  --color-warning: #f59e0b;
  --color-border: #334155;
  --radius: 8px;
  --transition: .15s ease;
  --font-stack: 'Inter','Segoe UI',Roboto,Arial,sans-serif;
  --strip-height: 4px;
  --strip-gradient: linear-gradient(to right,
        rgba(37,99,235,0) 0%,
        rgba(37,99,235,1) 10%,
        rgba(34,197,94,1) 90%,
        rgba(34,197,94,0) 100%);
}

* { box-sizing: border-box; }

body {
  margin:0;
  font-family:var(--font-stack);
  background:var(--color-bg);
  color:var(--color-text);
  -webkit-font-smoothing:antialiased;
}

a { color:var(--color-primary); text-decoration:none; }
a:hover { text-decoration:underline; }

/* Scrollbars */
body, .main-content, .modal, .modal-body {
  scrollbar-width: thin;
  scrollbar-color: #24334b #0f172a;
}
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:#0f172a; }
::-webkit-scrollbar-thumb {
  background:#24334b;
  border-radius:8px;
  border:2px solid #0f172a;
}
::-webkit-scrollbar-thumb:hover { background:#334155; }

/* Login */
.login-body {
  display:flex; min-height:100vh; align-items:center; justify-content:center;
  background: radial-gradient(circle at 30% 30%, #1e3a8a, #0f172a);
}
.login-container { width:100%; max-width:420px; padding:1rem; }
.login-card {
  background:var(--color-surface);
  padding:1.4rem 1.4rem 1.6rem;
  border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  overflow:hidden;
}

/* Logo strip */
.logo-box {
  display:grid; grid-template-columns:40px 1fr;
  align-items:center; column-gap:10px; width:100%;
  margin-bottom:2.2rem; line-height:0;
}
.logo-box img { display:block; height:auto; width:auto; max-width:100%; }
.logo { height:36px; }
.logotype { height:28px; }

@media (max-width:420px){
  .logo-box { grid-template-columns:34px 1fr; column-gap:8px; }
  .logo { height:30px; }
  .logotype { height:24px; }
}

h1,h2,h3,h4 { margin:.5rem 0; font-weight:600; }
.form-group { margin-bottom:1rem; }
.form-group label { display:block; font-size:.85rem; margin-bottom:.35rem; }
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:.6rem .75rem;
  border:1px solid var(--color-border);
  background:var(--color-surface-alt);
  color:var(--color-text);
  border-radius:var(--radius);
}
.form-group input:focus { outline:2px solid var(--color-primary); }

.btn {
  cursor:pointer; border:none;
  background:var(--color-surface-alt); color:var(--color-text);
  padding:.6rem 1rem; border-radius:var(--radius);
  font-size:.9rem; display:inline-flex; align-items:center; gap:.35rem;
  transition:var(--transition);
}
.btn.primary { background:linear-gradient(90deg,var(--color-primary),var(--color-secondary)); font-weight:600; }
.btn.primary:hover { filter:brightness(1.1); }
.btn.secondary { background:var(--color-secondary); font-weight:600; }
.btn.danger { background:var(--color-danger); }
.btn.tiny { padding:.35rem .6rem; font-size:.7rem; }
.btn.w-100 { width:100%; justify-content:center; }
.actions-bar { margin-top:.9rem; display:flex; justify-content:flex-end; gap:.6rem; }
.actions-bar .btn { min-height:34px; }

/* Settings modal actions bar spacing */
#settingsModal .actions-bar {
  padding: 0.9rem 1.2rem 1rem;
  margin: 0;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
}

/* Header */
.app-header {
  position:fixed; top:0; left:0; right:0; height:70px;
  background:var(--color-surface);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 .75rem; z-index:30;
  border-bottom:1px solid var(--color-border);
}
.logo-area { display:flex; align-items:center; gap:.75rem; }
.header-logo { height:42px; }
.header-logotype { height:30px; }

.main-menu { display:flex; align-items:center; gap:.75rem; }
.menu-btn { background:transparent; border:0; padding:.2rem; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.menu-btn img { width:24px; height:24px; display:block; }
.menu-btn:hover img { transform:translateY(-1px); opacity:.95; }

.filter-box input {
  background:var(--color-surface-alt);
  border:1px solid var(--color-border);
  padding:.45rem .6rem;
  color:var(--color-text);
  border-radius:var(--radius);
  width:240px;
}
.filter-box input:focus { outline:2px solid var(--color-primary); }

@media (max-width:860px){
  .main-menu { flex-wrap:wrap; }
  .filter-box input { width:180px; }
}
@media (max-width:520px){
  .app-header { height:auto; flex-direction:column; align-items:stretch; padding:.5rem; }
  .main-content { top: calc(120px + var(--strip_height)); }
  .filter-box input { width:140px; }
}

/* Avatar dropdown */
.avatar-wrapper { position:relative; }
.avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; cursor:pointer; background:transparent; }

.avatar-menu {
  position:absolute; right:0; top:44px;
  background:var(--color-surface-alt);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  min-width:240px;
  display:flex; flex-direction:column;
  box-shadow:0 10px 24px rgba(0,0,0,.45);
  padding:.6rem; z-index:50;
}
.avatar-menu.hidden { display:none !important; }
.avatar-menu::before {
  content:""; position:absolute; top:-8px; right:14px;
  border:8px solid transparent; border-bottom-color:var(--color-surface-alt);
}
.avatar-menu::after {
  content:""; position:absolute; top:-9px; right:14px;
  border:9px solid transparent; border-bottom-color:var(--color-border);
  z-index:-1;
}
.avatar-menu .user-row {
  display:grid; grid-template-columns:52px 1fr; gap:12px; align-items:center;
  padding:.2rem .2rem .6rem;
  border-bottom:1px solid var(--color-border);
  margin-bottom:.35rem;
}
.avatar-menu .avatar-lg { width:52px; height:52px; border-radius:50%; object-fit:cover; display:block; box-shadow:0 0 0 1px rgba(0,0,0,.15); }
.avatar-menu .user-name { font-weight:700; color:#fff; line-height:1.1; }
.avatar-menu .user-role { font-size:.75rem; color:#9fb0c8; }
.avatar-menu .menu-link {
  display:block; padding:.5rem .55rem; border-radius:6px;
  color:var(--color-text); text-decoration:none; transition:var(--transition);
}
.avatar-menu .menu-link:hover { background:var(--color-surface-soft); text-decoration:none; }
.avatar-menu .menu-link.danger:hover { background:rgba(220,38,38,.15); color:#ffb3b3; }

/* Gradient strips */
.gradient-strip {
  position:fixed; left:0; right:0; height:var(--strip-height);
  background:var(--strip-gradient); pointer-events:none; z-index:25;
}
.gradient-top { top:70px; }
.gradient-bottom { bottom:40px; }

/* Main content & status bar */
.main-content {
  position:fixed;
  top: calc(70px + var(--strip-height));
  bottom: calc(40px + var(--strip-height));
  left:0; right:0;
  overflow:auto;
  padding:0 .75rem .75rem;
  background:var(--color-bg);
}
.status-bar {
  position:fixed; bottom:0; left:0; right:0; height:40px;
  background:var(--color-surface);
  border-top:1px solid var(--color-border);
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; padding:0 .75rem; z-index:30;
}
.status-item { color:#9fb0c8; }
.status-item strong { color:#fff; }

/* Table */
.songs-table { width:100%; border-collapse:collapse; font-size:.75rem; }
.songs-table thead th {
  position:sticky; top:0; background:var(--color-surface-alt);
  padding:.55rem .5rem; text-align:center;
  border-bottom:1px solid var(--color-border);
  font-weight:600; font-size:.75rem; z-index:5;
}
.songs-table tbody td {
  padding:.45rem .5rem;
  border-bottom:1px solid #1a2537;
  vertical-align:middle;
}
.songs-table tbody tr:hover { background:#1e293b; }

/* Rank cells */
.rank-cell { display:flex; flex-direction:column; align-items:center; gap:2px; margin:0 auto; }
.rank-number { font-size:1.3rem; font-weight:700; color:#fff; line-height:1; }
.rank-status { font-size:.7rem; font-weight:600; line-height:1; }
.rank-status.up { color: var(--color-secondary); }
.rank-status.down { color: var(--color-danger); }
.rank-status.new { color: var(--color-primary); }
.rank-status.neutral { color:#ffffff; }

/* Thumbnail (table) */
.thumb-sm { width:48px; height:27px; object-fit:cover; border-radius:4px; display:block; }

/* Video title link */
a.video-title { font-weight:500; color:#fff; text-decoration:none; }
a.video-title:hover { color:#fff; text-decoration:none; }

/* Checked rows */
.song-check { width:16px; height:16px; cursor:pointer; }
.songs-table tbody tr.checked-row { background:#2b3a55 !important; }
.songs-table tbody tr.checked-row:hover { background:#2b3a55 !important; }

/* Modals */
.modal {
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.55);
  display:flex; align-items:flex-start; justify-content:center;
  padding:1rem; z-index:200; overflow:auto;
}
.modal.hidden { display:none !important; }

.modal-content {
  background:var(--color-surface);
  width:100%;
  max-width:860px;
  border-radius:var(--radius);
  box-shadow:0 20px 40px rgba(0,0,0,.45);
  position:relative;
  display:flex; flex-direction:column;
  max-height: calc(100vh - 2rem);
  overflow:hidden;
  padding:0;
  margin:1rem auto;
}
.modal-content.large { max-width:900px; }

.modal-header {
  position:relative; z-index:20;
  display:flex; align-items:center; gap:.5rem;
  justify-content:flex-start;
  background:#2563eb;
  padding:.75rem 1rem;
  margin:0;
  border-bottom:1px solid var(--color-border);
  border-top-left-radius:var(--radius);
  border-top-right-radius:var(--radius);
  padding-right:2.25rem;
}
.modal-header .modal-icon { width:22px; height:22px; display:block; opacity:.95; filter:drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.modal-header .modal-title { margin:0; font-size:1rem; font-weight:700; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.35); }

.modal-close {
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:transparent; border:none; color:#ffffff; font-size:1.4rem;
  cursor:pointer; padding:.1rem .2rem;
}
.modal-close:hover { opacity:.9; }
.modal-close:focus { outline:2px solid rgba(255,255,255,.35); outline-offset:2px; }

.modal-body {
  padding:1rem 1.2rem 1.5rem;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  flex:1 1 auto;
  min-height:0;
  border-bottom-left-radius:var(--radius);
  border-bottom-right-radius:var(--radius);
}

/* Settings modal revised layout */
.settings-modal-body {
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:0;
  max-height: calc(100vh - 2rem - 60px); /* Full viewport minus modal padding and header */
}
.settings-form {
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}
.settings-scroll {
  flex:1 1 auto;
  overflow-y:auto;
  overflow-x:hidden;
  padding:0;
  margin:0;
  scrollbar-width: thin;
  scrollbar-color: #24334b #0f172a;
}
.settings-scroll::-webkit-scrollbar { width:8px; }
.settings-scroll::-webkit-scrollbar-track { background:#0f172a; }
.settings-scroll::-webkit-scrollbar-thumb { 
  background:#24334b; 
  border-radius:8px;
  border:2px solid #0f172a;
}
.settings-scroll::-webkit-scrollbar-thumb:hover { background:#334155; }
/* Inner padding for content */
.settings-inner { 
  padding:1rem 1.2rem 1.5rem;
}

.thumb-large { width:100%; max-width:520px; display:block; margin:0 auto; border-radius:10px; box-shadow:0 0 0 1px var(--color-border); }
.info-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; margin-top:.9rem; }
.info-item { background:var(--color-surface-alt); border:1px solid var(--color-border); border-radius:8px; padding:.6rem .7rem; }
.info-item .label { display:block; font-size:.65rem; color:#9fb0c8; margin-bottom:.2rem; letter-spacing:.3px; }
.info-item .value { font-weight:600; color:#fff; word-break:break-word; }

.details-thumb {
  max-width:320px;
  width:100%;
  border-radius:10px;
  display:block;
  margin:.5rem auto;
  box-shadow:0 0 0 1px var(--color-border);
}

/* Stat cards (legacy) */
.stat-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-top:.9rem; }
.stat-card { background:var(--color-surface-soft); border:1px solid var(--color-border); border-radius:12px; padding:.7rem .9rem; text-align:center; }
.stat-card .big { font-size:1.3rem; font-weight:700; color:var(--color-primary); line-height:1.1; }
.stat-card .small { font-size:.7rem; color:#9fb0c8; }

/* Tags */
.tag-chip {
  background:#24334b;
  padding:3px 6px;
  border-radius:12px;
  margin:2px;
  display:inline-block;
  font-size:.65rem;
  line-height:1;
}

/* Shared Add/Details layout */
.add-grid.fixed {
  display:flex;
  gap:16px;
  align-items:stretch;
  margin-top:.3rem;
}
.cover-box {
  width:560px;
  height:315px;
  border-radius:12px;
  overflow:hidden;
  background:#000;
  box-shadow:0 0 0 1px var(--color-border);
  position:relative;
  display:flex;
}
.cover-img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.yt-stats-panel {
  width:280px;
  height:315px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:10px;
}
.yt-stat-item {
  height:calc((315px - 20px) / 3);
  background:#2563eb;
  color:#fff;
  border-radius:16px;
  padding:10px 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow:0 4px 10px rgba(0,0,0,.25);
}
.yt-stat-item .stat-text { display:flex; flex-direction:column; line-height:1.05; }
.yt-stat-item .stat-value {
  font-size:32px;
  font-weight:800;
  line-height:1;
  letter-spacing:.3px;
  white-space:nowrap;
  font-variant-numeric: tabular-nums;
}
.yt-stat-item .stat-label {
  font-size:12px;
  font-weight:600;
  text-transform:lowercase;
  margin-top:.3rem;
  opacity:.98;
}
.yt-stat-item .stat-icon {
  width:30px; height:30px; object-fit:contain; flex-shrink:0;
  filter:brightness(0) invert(1);
}

/* Responsive layout */
@media (max-width:900px){
  .add-grid.fixed { flex-direction:column; }
  .cover-box { width:100%; height:auto; aspect-ratio:16/9; }
  .yt-stats-panel { width:100%; height:auto; gap:10px; }
  .yt-stat-item { height:88px; padding:10px 12px; }
  .yt-stat-item .stat-value { font-size:28px; }
  .yt-stat-item .stat-label { font-size:11px; }
}

.chart-container {
  position:relative;
  width:100%;
  height:300px;
  margin-top:1rem;
  background:var(--color-surface-alt);
  border:1px solid var(--color-border);
  border-radius:10px;
  padding:.5rem;
}

.details-chart-container {
  position:relative;
  width:100%;
  height:300px;
  margin-top:.9rem;
  background:var(--color-surface-alt);
  border:1px solid var(--color-border);
  border-radius:10px;
  padding:.6rem .7rem;
}

/* Inline YouTube link input */
.inline-link-input {
  display:flex;
  align-items:center;
  gap:.45rem;
  margin-top:.25rem;
}
.inline-link-input input {
  flex:1;
  background:var(--color-surface-alt);
  border:1px solid var(--color-border);
  color:var(--color-text);
  padding:.55rem .7rem;
  font-size:.8rem;
  border-radius:8px;
}
.inline-link-input input[readonly] { opacity:.85; }

/* Open link icon button - transparent */
.open-link-btn {
  width:42px;
  min-width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:none;
  cursor:pointer;
  transition:.15s;
  padding:0;
}
.open-link-btn:hover { opacity:.85; }
.open-link-btn img { width:22px; height:22px; display:block; filter:brightness(0) invert(1); }

/* History range select */
.form-group.history-range label {
  display:block;
  font-size:.65rem;
  color:#9fb0c8;
  margin-bottom:.25rem;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.form-group.history-range select {
  width:160px;
  background:var(--color-surface-alt);
  border:1px solid var(--color-border);
  color:var(--color-text);
  border-radius:8px;
  padding:.5rem .6rem;
  font-size:.75rem;
  cursor:pointer;
}

/* Color rules (settings) */
.color-rule-row input[type="number"],
.color-rule-row select {
  background:var(--color-surface-alt);
  border:1px solid var(--color-border);
  color:var(--color-text);
  border-radius:6px;
  padding:.3rem .4rem;
  font-size:.65rem;
}

/* Published column - removed age-bar, now uses full cell background color */

/* Settings Modal - Card-based Layout */
.settings-body {
  display: grid;
  gap: .9rem;
  margin-bottom: 1rem;
}

.settings-card {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .9rem;
  transition: var(--transition);
}

.settings-card:hover {
  background: var(--color-surface-soft);
}

.settings-card .card-head {
  margin-bottom: .7rem;
}

.settings-card .card-head h3 {
  font-size: .95rem;
  font-weight: 600;
  margin: 0 0 .3rem 0;
  color: var(--color-text);
}

.settings-card .card-hint {
  font-size: .6rem;
  line-height: 1.3;
  color: #9fb0c8;
  margin: .3rem 0 0 0;
}

/* NEW footer (no sticky scroll overlap) */
.settings-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: .9rem 0 1rem 0;
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  margin: 0;
}

/* Form row for two-column layout */
.form-row.two {
  display: flex;
  gap: .75rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.form-row.two .form-group {
  flex: 1;
  min-width: 200px;
}

/* Form row for three-column layout (WEEKLY SYNC) */
.form-row.three {
  display: flex;
  gap: .75rem;
  align-items: flex-end;
  flex-wrap: wrap; /* na užim širinama će se prelomiti */
}
.form-row.three .form-group {
  flex: 1 1 calc(33.333% - .5rem);
  min-width: 220px;
}

/* Live preview */
.live-preview {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: .5rem .7rem;
  font-size: .75rem;
  color: #9fb0c8;
  margin-top: .5rem;
}

.live-preview strong {
  color: var(--color-text);
  font-weight: 600;
}

/* Columns grid - responsive */
.columns-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .35rem .75rem;
}

.columns-grid label {
  font-size: .7rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
}

.columns-grid label.locked {
  opacity: .6;
  cursor: not-allowed;
}

.columns-grid input[type="checkbox"] {
  cursor: pointer;
}

.columns-grid label.locked input[type="checkbox"] {
  cursor: not-allowed;
}

@media (max-width: 780px) {
  .columns-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .columns-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Date format grid - radio buttons */
.date-format-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin-top: .5rem;
}

.date-format-grid label {
  background: #1a2537;
  border: 1px solid #1f3047;
  border-radius: 6px;
  padding: .5rem .6rem;
  font-size: .7rem;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: .4rem;
}

.date-format-grid label:hover {
  background: #1f3047;
  border-color: var(--color-primary);
}

.date-format-grid input[type="radio"] {
  accent-color: var(--color-primary);
  cursor: pointer;
}

.date-format-grid input[type="radio"]:checked + span {
  color: var(--color-text);
  font-weight: 600;
}

@media (max-width: 780px) {
  .date-format-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .date-format-grid {
    grid-template-columns: 1fr;
  }
}

/* Age color rules */
.rules-actions {
  margin-top: .7rem;
}

.color-rule-row {
  display: flex;
  gap: .4rem;
  align-items: center;
  margin: .4rem 0;
  padding: .4rem;
  background: var(--color-surface-soft);
  border-radius: 6px;
}

.color-rule-row input[type="checkbox"] {
  cursor: pointer;
}

.color-rule-row input[type="color"] {
  width: 40px;
  height: 28px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
}

.color-rule-row input[type="number"] {
  width: 70px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 6px;
  padding: .3rem .4rem;
  font-size: .7rem;
}

.color-rule-row select {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 6px;
  padding: .3rem .4rem;
  font-size: .7rem;
  cursor: pointer;
}

.color-rule-row span {
  font-size: .7rem;
  color: #9fb0c8;
}

.color-rule-row .btn.tiny {
  margin-left: auto;
}

/* Age preview bar */
.age-preview-bar {
  height: 12px;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  margin-top: .5rem;
  overflow: hidden;
}

/* Cleanup status */
.cleanup-status {
  margin-top: .6rem;
}

.cleanup-status .spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #94a3b8;
  border-top-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: spin .8s linear infinite;
}

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

.cleanup-status .status-text {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
}

/* Alert messages */
.alert {
  padding: .6rem .8rem;
  border-radius: 6px;
  font-size: .75rem;
  margin: .5rem 0;
}

.alert.error {
  background: rgba(220, 38, 38, .15);
  color: #ffb3b3;
  border: 1px solid rgba(220, 38, 38, .3);
}

.alert.success {
  background: rgba(34, 197, 94, .15);
  color: #a7f3d0;
  border: 1px solid rgba(34, 197, 94, .3);
}

.alert.warning {
  background: #472b00;
  color: #ffd08a;
  border: 1px solid rgba(245, 158, 11, .3);
}

/* Utilities */
.hidden { display:none !important; }
.text-center { text-align:center; }
.mt-1 { margin-top:.25rem; }
.mt-2 { margin-top:.5rem; }
.mt-3 { margin-top:1rem; }
.mb-0 { margin-bottom:0; }

/* Media tweaks */
@media (max-width:860px){
  .info-grid { grid-template-columns:repeat(2,1fr); }
  .stat-cards { grid-template-columns:1fr; }
}
@media (max-width:520px){
  .status-bar { font-size:.6rem; }
  .songs-table thead th, .songs-table tbody td { padding:.35rem .35rem; }
  .rank-number { font-size:.85rem; }
  .login-card { padding:1.2rem; }
  .modal-content { max-height: calc(100vh - 1rem); }
  .modal-body { padding-bottom:1rem; }
}

/* Account Settings Modal - Card-based Layout */
.account-card {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: .9rem;
}

.account-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: .5rem;
}

.account-avatar-preview {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-border);
  background: var(--color-surface-soft);
}

.form-row-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

@media (max-width: 600px) {
  .form-row-two {
    grid-template-columns: 1fr;
  }
}

.password-section {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .9rem;
  margin-top: .5rem;
}

.password-section h4 {
  font-size: .85rem;
  margin: 0 0 .6rem 0;
  color: var(--color-text);
}

.validation-error {
  color: #ffb3b3;
  font-size: .7rem;
  margin-top: .25rem;
  display: block;
}

/* DODATAK: proširenje za scroll u Settings modalu */
#settingsModal .settings-scroll {
  scrollbar-width: thin;
  scrollbar-color: #24334b #0f172a;
}
#settingsModal .settings-scroll::-webkit-scrollbar {
  width:8px;
  height:8px;
}
#settingsModal .settings-scroll::-webkit-scrollbar-track {
  background:#0f172a;
}
#settingsModal .settings-scroll::-webkit-scrollbar-thumb {
  background:#24334b;
  border-radius:8px;
  border:2px solid #0f172a;
}
#settingsModal .settings-scroll::-webkit-scrollbar-thumb:hover {
  background:#334155;
}