/* =========================================================================
   CaddyTrack — stylesheet
   Design language: a quiet, warm nod to analog tape decks — condensed
   display type like deck LCD labels, monospace time codes like a tape
   counter, an amber VU-meter accent, and a spinning reel as the one
   signature motif (used sparingly: nav mark + now-playing indicator).
   ========================================================================= */

:root {
    --color-bg:        #1B1F24;
    --color-bg-alt:    #1F252C;
    --color-panel:     #242A31;
    --color-inset:     #14171B;
    --color-border:    #333B44;
    --color-border-lo: #2A3038;

    --color-text:      #EDEAE3;
    --color-text-dim:  #9AA1A9;
    --color-text-faint:#6C7480;

    --color-accent:      #E8A23D;
    --color-accent-dim:  #B97D2E;
    --color-accent-glow: rgba(232, 162, 61, 0.35);

    --color-teal:      #5B8C86;
    --color-danger:    #C4483B;
    --color-danger-dim:#8F332A;

    --font-display: 'Barlow Condensed', sans-serif;
    --font-body:    'Work Sans', sans-serif;
    --font-mono:    'JetBrains Mono', monospace;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    --shadow-panel: 0 10px 30px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
	overflow-x:hidden;
}

body { min-height: 100vh; }

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0;
}

a { color: inherit; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.muted-note { color: var(--color-text-dim); font-size: 0.85rem; }
.hint-note   { color: var(--color-text-faint); font-size: 0.8rem; margin: 10px 2px 0; }

button { font-family: inherit; }

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}
.btn:active { transform: translateY(1px); }

.btn-accent {
    background: var(--color-accent);
    color: #201603;
}
.btn-accent:hover { background: #F0AE52; }

.btn-ghost {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text-dim);
}
.btn-ghost:hover { color: var(--color-text); border-color: var(--color-accent-dim); }

img.btn-icon {display:block; position:relative; width:24px; height:24px; margin:0 auto; padding:0; -webkit-transition:all .5s; -webkit-transition-timing-function:ease-in-out; transition:all .5s; transition-timing-function:ease-in-out; }

.btn-logout { color: var(--color-danger); border-color: var(--color-danger-dim); }
.btn-logout:hover { color: #F2897C; border-color: var(--color-danger); }

.btn-block { width: 100%; }

.btn-link {
    background: none;
    border: none;
    color: var(--color-teal);
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 6px 0;
}
.btn-link:hover { color: var(--color-accent); }

.btn-danger-icon {
    background: transparent;
    border: 1px solid var(--color-danger-dim);
    color: var(--color-danger);
    border-radius: var(--radius-sm);
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.btn-danger-icon:hover { background: var(--color-danger-dim); color: #fff; }
.btn-danger-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ---------------------------------------------------------------------
   Reel icon — the signature motif. Spins while audio plays.
   --------------------------------------------------------------------- */
.reel-icon {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid var(--color-accent-dim);
    position: relative;
    flex: none;
}
.reel-icon::before, .reel-icon::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-accent-dim);
    top: 50%;
    left: 50%;
}
.reel-icon::before { transform: translate(-50%, -50%) translate(0, -9px); }
.reel-icon::after  { transform: translate(-50%, -50%) rotate(120deg) translate(0, -9px); }
.reel-hub {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--color-accent);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.reel-icon-sm { width: 22px; height: 22px; border-width: 2px; }
.reel-icon-lg { width: 92px; height: 92px; border-width: 6px; border-color: var(--color-accent-dim); }
.reel-icon-lg::before, .reel-icon-lg::after { width: 10px; height: 10px; }
.reel-icon-lg::before { transform: translate(-50%, -50%) translate(0, -32px); }
.reel-icon-lg::after  { transform: translate(-50%, -50%) rotate(120deg) translate(0, -32px); }
.reel-icon-lg .reel-hub { width: 16px; height: 16px; }

.reel-icon.spinning { animation: reel-spin 3.2s linear infinite; }
@keyframes reel-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------
   Welcome / login / register / reset ("gate") pages
   --------------------------------------------------------------------- */
.gate-body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 20% 15%, rgba(232, 162, 61, 0.07), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(91, 140, 134, 0.08), transparent 40%),
        var(--color-bg);
}

.gate-wrap { width: 100%; max-width: 400px; }

.gate-card {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    box-shadow: var(--shadow-panel);
}

.gate-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
	.gate-brand img.nav-brand-icon { width:100%; max-width:100%;}
.gate-brand h1 { font-size: 2rem; text-transform: uppercase; }
.gate-tagline { color: var(--color-text-dim); margin: 2px 0 22px; font-size: 0.9rem; }

.gate-tabs {
    display: flex;
    background: var(--color-inset);
    border-radius: var(--radius-sm);
    padding: 4px;
    margin-bottom: 20px;
    gap: 4px;
}
.gate-tab {
    flex: 1;
    background: none;
    border: none;
    color: var(--color-text-dim);
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 9px 0;
    border-radius: 4px;
    cursor: pointer;
}
.gate-tab.is-active { background: var(--color-accent); color: #201603; }

.gate-panel { display: none; flex-direction: column; gap: 14px; }
.gate-panel.is-active { display: flex; }
.gate-hint { color: var(--color-text-dim); font-size: 0.85rem; margin: -4px 0 0; }

.field { display: flex; flex-direction: column; gap: 5px; font-size: 0.85rem; color: var(--color-text-dim); }
.field input, .field select {
    background: var(--color-inset);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    color: var(--color-text);
    font-size: 0.95rem;
    font-family: var(--font-body);
}
.field input:focus, .field select:focus { border-color: var(--color-accent); }
.field small { color: var(--color-text-faint); }
.field-inline { flex-direction: row; align-items: center; gap: 10px; }
.field-inline select { flex: none; }

.gate-alert {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: rgba(196, 72, 59, 0.12);
    border: 1px solid var(--color-danger-dim);
    color: #F2A79C;
    font-size: 0.85rem;
    margin-bottom: 16px;
}
.gate-alert.is-success {
    background: rgba(91, 140, 134, 0.15);
    border-color: var(--color-teal);
    color: #BFE1DC;
}

/* ---------------------------------------------------------------------
   App shell (topbar shared by player / playlist editor / account pages)
   --------------------------------------------------------------------- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 28px;
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border-lo);
}
.topbar-brand { display: flex; align-items: center; gap: 10px; }
.topbar-title { font-family: var(--font-display); font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.03em; }
.topbar-nav { display: flex; gap: 10px; }
.topbar-welcome {}
	p.topbar-note { font-size:.85rem; line-height:1; margin:0 auto; padding:0; font-weight:400; color:var(--color-text);}

a.nav-brand { -webkit-transition:all .35s; -webkit-transition-timing-function:ease-in-out; transition:all .35s; transition-timing-function:ease-in-out; }	
a.nav-brand:hover, a.nav-brand:focus {}	
	img.nav-brand-icon {display:block; position:relative; margin:0 auto; padding:0; width:175px; max-width:100%; height:auto; -webkit-transition:all .35s; -webkit-transition-timing-function:ease-in-out; transition:all .35s; transition-timing-function:ease-in-out; }
	a.nav-brand:hover img.nav-brand-icon, a.nav-brand:focus img.nav-brand-icon {}	
	
/* ---------------------------------------------------------------------
   Player page
   --------------------------------------------------------------------- */
.player-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    grid-template-columns: 360px auto;
    gap: 22px;
    padding: 24px 28px 48px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

.library-pane {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
}
.library-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

.song-table-wrap { max-height: 65vh; overflow-y: auto; }

/* SCROLLBAR */
.song-table-wrap::-webkit-scrollbar { width:8px; }
.song-table-wrap::-webkit-scrollbar-track { background:#f1f1f1; background:rgba(0,0,0,.185); border-radius:10px; }
.song-table-wrap::-webkit-scrollbar-thumb { cursor:pointer; background:var(--color-inset); background:#666; border-radius:10px; -webkit-transition:all .35s; -webkit-transition-timing-function:ease-in-out; transition:all .35s; transition-timing-function:ease-in-out; }
.song-table-wrap::-webkit-scrollbar-thumb:hover { background:var(--color-accent); background:var(--color-inset); background:#666; }

.song-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.song-table thead th {
    text-align: left;
    color: var(--color-text-faint);
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 6px 10px;
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top:-2px;
    background: var(--color-panel);
}
.song-table tbody td { padding: 9px 10px; border-bottom: 1px solid var(--color-border-lo); vertical-align: middle; }
.song-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.song-table tbody tr.is-current { background: rgba(232, 162, 61, 0.08); }
.song-table tbody tr.is-current .song-title { color: var(--color-accent); }
.song-table .col-now { width: 26px; }
.song-table .col-duration { width: 70px; color: var(--color-text-dim); }
.song-table .col-remove { width: 40px; }
.song-row-play-btn {
    background: none; border: none; color: var(--color-text-faint); cursor: pointer;
    width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
}
.song-row-play-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
tr.is-current .song-row-play-btn { color: var(--color-accent); }
.song-title { display: block; color: var(--color-text); }
.song-artist { color: var(--color-text-dim); }
.remove-row-btn {
    background: none; border: none; color: var(--color-text-faint); cursor: pointer; font-size: 1.1rem; line-height: 1;
    width: 26px; height: 26px; border-radius: 50%;
}
.remove-row-btn:hover { color: var(--color-danger); background: rgba(196,72,59,0.12); }

.empty-row { text-align: center; color: var(--color-text-faint); padding: 24px 10px; list-style: none; }

.deck-pane { position: sticky; top: 24px; }
.deck {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
.deck-reels { padding: 10px 0 4px; }
.deck-info { text-align: center; width: 100%; }
.deck-title { font-family: var(--font-display); font-size:1.3rem; text-transform:uppercase; letter-spacing: 0.02em; /*white-space: nowrap; overflow: hidden; text-overflow: ellipsis;*/ text-transform:none; white-space:wrap; overflow:visible;  }
.deck-artist { color: var(--color-text-dim); font-size: 0.9rem; margin-top: 2px; }

.deck-progress { width: 100%; }
.seek-bar {
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    border-radius: 3px;
    background: var(--color-inset);
    outline: none;
    cursor: pointer;
}
.seek-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px; height: 13px; border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-accent-glow);
    cursor: pointer;
}
.seek-bar::-moz-range-thumb {
    width: 13px; height: 13px; border-radius: 50%; border: none;
    background: var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-accent-glow);
    cursor: pointer;
}
.deck-times { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--color-text-dim); margin-top: 6px; }

.deck-controls { display: flex; align-items: center; gap: 14px; }
.ctrl-btn {
    background: var(--color-inset);
    border: 1px solid var(--color-border);
    color: var(--color-text-dim);
    width: 42px; height: 42px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.ctrl-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ctrl-btn:hover { color: var(--color-text); border-color: var(--color-accent-dim); }
.ctrl-btn.is-active { color: var(--color-accent); border-color: var(--color-accent); background: rgba(232,162,61,0.1); }
.ctrl-btn-main { width: 56px; height: 56px; background: var(--color-accent); border-color: var(--color-accent); color: #201603; }
.ctrl-btn-main svg { width: 22px; height: 22px; }
.ctrl-btn-main:hover { background: #F0AE52; color: #201603; }
	.is-paused #icon-play {display:block;}
	.is-paused #icon-pause {display:none;}
	.is-playing #icon-play {display:none;}
	.is-playing #icon-pause {display:block;}
	.not-muted #icon-vol {display:none;}
	.not-muted #icon-mute {display:block;}
	.is-muted #icon-vol {display:block;}
	.is-muted #icon-mute {display:none;}

.vu-meter { display: flex; align-items: flex-end; gap: 3px; height: 16px; opacity: 0.35; }
.vu-meter span { width: 4px; height: 4px; background: var(--color-accent); border-radius: 1px; }
.vu-meter.is-playing { opacity: 1; }
.vu-meter.is-playing span { animation: vu-bounce 1.1s ease-in-out infinite; }
.vu-meter.is-playing span:nth-child(1) { animation-delay: 0s; }
.vu-meter.is-playing span:nth-child(2) { animation-delay: 0.12s; }
.vu-meter.is-playing span:nth-child(3) { animation-delay: 0.24s; }
.vu-meter.is-playing span:nth-child(4) { animation-delay: 0.36s; }
.vu-meter.is-playing span:nth-child(5) { animation-delay: 0.48s; }
@keyframes vu-bounce { 0%, 100% { height: 4px; } 50% { height: 16px; } }

/* ---------------------------------------------------------------------
   Edit playlists page
   --------------------------------------------------------------------- */
.editor-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 22px;
    padding: 24px 28px 48px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}
.library-editor-pane, .playlists-pane {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
}
.pane-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 10px; }
.pane-header h2, .pane-header h3 { font-size: 1.1rem; text-transform: uppercase; }

.reorder-list { list-style: none; margin: 0; padding: 0; }
.reorder-list li.song-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border-lo);
    border-radius: var(--radius-sm);
    padding: 9px 10px;
    margin-bottom: 8px;
}
.drag-handle { color: var(--color-text-faint); cursor: grab; font-family: var(--font-mono); letter-spacing: 2px; padding: 0 2px; }
.reorder-list li.ui-sortable-helper { box-shadow: var(--shadow-panel); }
.reorder-list .placeholder-row { border: 1px dashed var(--color-accent-dim); border-radius: var(--radius-sm); margin-bottom: 8px; background: rgba(232,162,61,0.05); }

.song-item-info { flex: 1; min-width: 0; }
.song-item-title { display: block; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-item-sub { color: var(--color-text-dim); font-size: 0.78rem; }
.song-item-duration { color: var(--color-text-dim); font-size: 0.82rem; }
.song-item-actions { display: flex; align-items: center; gap: 6px; position: relative; }

.upload-status-line { margin: 4px 0 12px; }

.inline-form { display: flex; gap: 8px; margin-bottom: 14px; }
.inline-form input[type="text"] {
    flex: 1;
    background: var(--color-inset);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    color: var(--color-text);
}

.playlist-list { list-style: none; margin: 0 0 18px; padding: 0; }
.playlist-list li.playlist-item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 1px solid transparent;
}
.playlist-list li.playlist-item:hover { background: var(--color-bg-alt); }
.playlist-list li.playlist-item.is-active { border-color: var(--color-accent-dim); background: rgba(232,162,61,0.08); }
.playlist-item-name { font-size: 0.95rem; }
.playlist-item-count { color: var(--color-text-faint); font-size: 0.78rem; }

.active-playlist-block { margin-top: 8px; border-top: 1px solid var(--color-border); padding-top: 14px; }

.playlist-popover {
    position: absolute;
    right: 0;
    top: 32px;
    z-index: 20;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px;
    width: 220px;
    box-shadow: var(--shadow-panel);
}
.playlist-popover-title { font-size: 0.75rem; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 8px; letter-spacing: 0.04em; }
.playlist-popover-list { list-style: none; margin: 0; padding: 0; max-height: 200px; overflow-y: auto; }
.playlist-popover-list li { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-size: 0.88rem; }
.playlist-popover-empty { color: var(--color-text-faint); font-size: 0.82rem; padding: 4px 2px; }

/* ---------------------------------------------------------------------
   Account page
   --------------------------------------------------------------------- */
.account-layout { display: flex; justify-content: center; padding: 40px 20px; }
.account-card {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 28px;
    width: 100%;
    max-width: 420px;
}
.account-card h2 { text-transform: uppercase; margin-bottom: 4px; }
#account-form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
    .player-layout, .editor-layout { grid-template-columns: 1fr; }
    .deck-pane { position: static; }
    .topbar { flex-wrap: wrap; gap: 10px; }
}

@media (max-width: 720px) {
	html, body { font-size:13px; }
	.topbar {padding:10px 10px 9px; gap:0; }
		.topbar-brand {width:150px;}
			.topbar-brand img.nav-brand-icon {}
	.topbar-nav {}
		.btn {gap:0; padding:6px 8px; }
	
	.player-layout { display:flex; flex-direction:column; gap:0; padding:10px 15px; }
		.deck-pane {position:relative; width:100%; top:0; margin-bottom:10px; }
			.deck { width:100%; padding:10px 15px; gap:10px;}
				.deck-reels {display:none; }
					.reel-icon { width:28px; height:28px; }
				.deck-title { text-transform:none; }
				#time-remaining { font-weight:bold; }
		.library-pane { position:relative; width:100%; padding:10px 10px;  }
			.library-toolbar {}
			.song-table-wrap { max-height:320px; }			
				.field-inline select {font-size:13px; padding:5px 5px; max-width:180px; }
				.song-table {font-size:13px; }
					.song-table thead th:nth-child(3) {display:none; }
					.song-table tbody td.song-artist {display:none; }
					.song-table .col-duration { width:50px; text-align:center; padding:6px 5px; }
					.song-table tbody td.col-duration { font-size:.85em; }
					
	.editor-layout { display:flex; flex-direction:column; gap:0; padding:10px 15px; }				
		.playlists-pane { position:relative; width:100%; padding:10px 15px; margin-bottom:10px; }
			.playlist-list li.playlist-item {padding:5px 8px;}
				.playlist-item-name {font-weight:700; }
		.library-editor-pane {position:relative; width:100%; padding:10px 15px; }
	
}/* END 720*/

@media (max-width: 640px) {
	.topbar {padding:7px 10px 6px;  }
		.topbar-welcome { display:none; }
	
	.deck { padding:8px 15px 4px; }
		.deck-controls { gap:10px; }
			.ctrl-btn { width:50px; height:50px; }
			.ctrl-btn-main { width:54px; height:54px; }
		.vu-meter {height:12px; }
	
}/* END 640*/


@media (min-width: 721px) {
	.playlists-pane {max-width:360px; }
	
}/* END > 721*/