@import url('css/common.css');
@import url('/css/forms.css');
@import url('css/nav.css');
@import url('css/login.css');

/* ─── Scan section ──────────────────────────────────── */
#scan-section {
   margin-top: auto;
   padding-top: 10px;
   border-top: 1px solid var(--border);
}

.scan-result {
   margin-top: 6px;
   font-size: 0.78rem;
   color: var(--text-dim);
   line-height: 1.6;
}

#btn-publish {
   margin-top: 8px;
}

/* ─── Cards ─────────────────────────────────────────── */
.card {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 12px 14px;
   margin-bottom: 8px;
   transition: border-color 0.1s;
}

.card:hover {
   border-color: var(--border-hover);
}

.card-title {
   font-size: 0.925rem;
   font-weight: 500;
   margin-bottom: 4px;
}

.card-meta {
   font-size: 0.78rem;
   color: var(--text-dim);
   margin-bottom: 6px;
}

.card-actions {
   display: flex;
   gap: 6px;
   flex-wrap: wrap;
   margin-top: 10px;
}

/* ─── Tags ──────────────────────────────────────────── */
.tags {
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
   margin-top: 5px;
}

.tag {
   background: transparent;
   border: 1px solid var(--border);
   border-radius: 2px;
   padding: 1px 7px;
   font-size: 0.75rem;
   color: var(--text-dim);
}

.tag-filter {
   cursor: pointer;
   transition: border-color 0.1s, color 0.1s;
}

.tag-filter:hover {
   border-color: var(--accent);
   color: var(--accent);
}

.tag-filter.active {
   border-color: var(--accent);
   color: var(--accent);
   background: var(--accent-muted);
}

.tag-pill {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   background: var(--accent-muted);
   color: var(--accent2);
   border: 1px solid var(--accent-border);
   border-radius: 2px;
   padding: 2px 8px;
   font-size: 0.78rem;
}

.tag-pill button {
   background: none;
   border: none;
   color: var(--accent2);
   cursor: pointer;
   font-size: 0.85rem;
   padding: 0;
   line-height: 1;
   opacity: 0.7;
}

.tag-pill button:hover {
   opacity: 1;
}

/* ─── Stars ─────────────────────────────────────────── */
.stars {
   color: var(--accent);
   letter-spacing: 1px;
   font-size: 0.85rem;
}

.stars-dim {
   color: var(--border);
}

/* ─── Screen headers ────────────────────────────────── */
.screen-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 18px;
   padding-bottom: 12px;
   border-bottom: 1px solid var(--border);
   gap: 12px;
}

.screen-header h2 {
   font-size: 1.1rem;
   font-weight: 600;
   color: var(--text);
   letter-spacing: -0.2px;
}

/* ─── Player screen ─────────────────────────────────── */
#player-layout {
   display: flex;
   gap: 16px;
   height: calc(100vh - 100px);
}

#player-left {
   flex: 2;
   display: flex;
   flex-direction: column;
   gap: 10px;
   min-width: 0;
}

#player-right {
   width: 290px;
   min-width: 270px;
   display: flex;
   flex-direction: column;
   gap: 8px;
   overflow-y: auto;
   border-left: 1px solid var(--border);
   padding-left: 16px;
}

#main-video {
   width: 100%;
   border-radius: var(--radius);
   background: var(--video-bg);
   max-height: 55vh;
   object-fit: contain;
}

#player-info h3 {
   font-size: 1rem;
   font-weight: 500;
}

#player-info .card-meta {
   margin-bottom: 0;
}

.clip-form {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 12px 14px;
}

.clip-form h4 {
   margin-bottom: 10px;
   font-size: 0.85rem;
   font-weight: 600;
   color: var(--text-dim);
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

.time-row {
   display: flex;
   gap: 6px;
   align-items: flex-end;
}

.time-row input {
   flex: 1;
}

.difficulty-select {
   display: flex;
   gap: 6px;
   align-items: center;
}

.difficulty-select label {
   margin: 0;
}

.clip-item {
   background: transparent;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 9px 11px;
   cursor: pointer;
   transition: border-color 0.1s, background 0.1s;
}

.clip-item:hover {
   border-color: var(--border-hover);
   background: var(--surface2);
}

.clip-item.playing {
   background: var(--accent-subtle);
   border-color: var(--border-hover);
}

.clip-item-title {
   font-size: 0.875rem;
   font-weight: 500;
   margin-bottom: 2px;
}

.clip-item-meta {
   font-size: 0.75rem;
   color: var(--text-dim);
}

.clip-item-actions {
   display: flex;
   gap: 5px;
   margin-top: 6px;
}

/* ─── Playlists screen ──────────────────────────────── */
#playlists-layout {
   display: flex;
   gap: 0;
   height: calc(100vh - 100px);
}

#playlists-left {
   width: 230px;
   min-width: 210px;
   display: flex;
   flex-direction: column;
   gap: 2px;
   overflow-y: auto;
   border-right: 1px solid var(--border);
   padding-right: 16px;
   margin-right: 16px;
}

#playlists-right {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 10px;
   overflow-y: auto;
   min-width: 0;
}

.playlist-entry {
   padding: 8px 10px;
   border-radius: var(--radius);
   border: 1px solid transparent;
   cursor: pointer;
   transition: background 0.1s;
}

.playlist-entry:hover {
   background: var(--surface2);
}

.playlist-entry.active {
   background: var(--accent-subtle);
   border-color: var(--accent-border);
}

.playlist-entry-title {
   font-weight: 500;
   font-size: 0.875rem;
}

.playlist-entry-meta {
   font-size: 0.75rem;
   color: var(--text-dim);
   margin-top: 1px;
}

.playlist-item-row {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 9px 12px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   transition: border-color 0.1s;
}

.playlist-item-row.playing {
   border-color: var(--accent);
   background: var(--accent-subtle);
}

.playlist-item-num {
   color: var(--text-dim);
   font-size: 0.8rem;
   min-width: 18px;
   font-variant-numeric: tabular-nums;
}

.playlist-item-info {
   flex: 1;
   min-width: 0;
}

.playlist-item-title {
   font-weight: 500;
   font-size: 0.875rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.playlist-item-meta {
   font-size: 0.75rem;
   color: var(--text-dim);
}

.playlist-item-btns {
   display: flex;
   gap: 3px;
   flex-shrink: 0;
}

#playlist-player {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 12px 14px;
}

#playlist-player h4 {
   margin-bottom: 8px;
   font-size: 0.8rem;
   font-weight: 600;
   color: var(--text-dim);
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

#playlist-video {
   width: 100%;
   border-radius: var(--radius);
   background: var(--video-bg);
   max-height: 40vh;
}

.playlist-controls {
   display: flex;
   gap: 6px;
   margin-top: 8px;
   justify-content: center;
   flex-wrap: wrap;
}

.playlist-now-playing {
   font-size: 0.8rem;
   color: var(--text-dim);
   margin-top: 5px;
   text-align: center;
}

/* ─── Tags screen ───────────────────────────────────── */
.tags-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
}

.tag-manage {
   display: flex;
   align-items: center;
   gap: 8px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 6px 10px;
}

.tag-manage-name {
   font-weight: 500;
   font-size: 0.875rem;
}

.tag-manage-count {
   font-size: 0.75rem;
   color: var(--text-dim);
}

/* ─── Modal ─────────────────────────────────────────── */
#modal-overlay {
   position: fixed;
   inset: 0;
   background: var(--overlay-bg);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 100;
}

#modal-overlay.hidden {
   display: none;
}

#modal-box {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   width: 480px;
   max-width: 95vw;
   max-height: 90vh;
   overflow-y: auto;
}

#modal-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 14px 18px;
   border-bottom: 1px solid var(--border);
}

#modal-title {
   font-size: 0.925rem;
   font-weight: 600;
}

#modal-body {
   padding: 18px;
}

.modal-actions {
   display: flex;
   gap: 6px;
   justify-content: flex-end;
   margin-top: 14px;
}

/* ─── Toast ─────────────────────────────────────────── */
#toast-container {
   position: fixed;
   bottom: 18px;
   right: 18px;
   display: flex;
   flex-direction: column;
   gap: 6px;
   z-index: 200;
}

.toast {
   padding: 10px 14px;
   border-radius: var(--radius);
   font-size: 0.85rem;
   animation: slide-in 0.15s ease;
   min-width: 180px;
   max-width: 320px;
   border: 1px solid transparent;
}

.toast-success {
   background: var(--toast-success-bg);
   border-color: var(--toast-success-border);
   color: var(--toast-success-text);
}

.toast-error {
   background: var(--toast-error-bg);
   border-color: var(--toast-error-border);
   color: var(--toast-error-text);
}

.toast-info {
   background: var(--toast-info-bg);
   border-color: var(--toast-info-border);
   color: var(--toast-info-text);
}

@keyframes slide-in {
   from {
      transform: translateX(100%);
      opacity: 0;
   }

   to {
      transform: translateX(0);
      opacity: 1;
   }
}

/* ─── Helpers ───────────────────────────────────────── */
.hidden {
   display: none !important;
}

.mode-online .local-only,
body:not(.mode-online) .online-only {
   display: none !important;
}

.empty-state {
   text-align: center;
   color: var(--text-dim);
   padding: 48px 20px;
   font-size: 0.925rem;
}

.empty-state .empty-icon {
   font-size: 2.5rem;
   display: block;
   margin-bottom: 10px;
}

.row {
   display: flex;
   gap: 10px;
   align-items: flex-start;
}

.row>* {
   flex: 1;
}

/* ─── View toggle ───────────────────────────────────── */
.active-view {
   background: var(--surface2) !important;
   color: var(--accent) !important;
   border-color: var(--accent) !important;
}

/* ─── Video grid ────────────────────────────────────── */
.video-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
   gap: 12px;
}

.video-tile {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   overflow: hidden;
   transition: border-color 0.1s;
   cursor: pointer;
}

.video-tile:hover {
   border-color: var(--border-hover);
}

.video-tile-thumb {
   position: relative;
   width: 100%;
   aspect-ratio: 16/9;
   background: var(--thumb-bg);
   overflow: hidden;
}

.video-tile-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.video-tile-overlay {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: transparent;
   transition: background 0.15s;
}

.video-tile-thumb:hover .video-tile-overlay {
   background: var(--thumb-overlay);
}

.play-btn-large {
   font-size: 2rem;
   color: var(--on-dark);
   opacity: 0;
   transition: opacity 0.15s;
}

.video-tile-thumb:hover .play-btn-large {
   opacity: 1;
}

.tile-duration {
   position: absolute;
   bottom: 5px;
   right: 6px;
   background: var(--duration-bg);
   color: var(--duration-text);
   font-size: 0.72rem;
   padding: 1px 5px;
   border-radius: 2px;
   font-variant-numeric: tabular-nums;
}

.tile-clip-badge {
   position: absolute;
   top: 5px;
   left: 6px;
   background: var(--accent-badge);
   color: var(--on-dark);
   font-size: 0.7rem;
   padding: 1px 6px;
   border-radius: 2px;
}

.tile-online-badge {
   background: var(--success);
   border-radius: 2px;
   color: var(--on-dark);
   font-size: 0.7rem;
   padding: 1px 6px;
   position: absolute;
   right: 6px;
   top: 5px;
}

.btn-online {
   border-color: var(--success);
   color: var(--success);
}

.video-tile-info {
   padding: 9px 11px 11px;
}

.video-tile-title {
   font-size: 0.875rem;
   font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   margin-bottom: 2px;
}

.video-tile-meta {
   font-size: 0.75rem;
   color: var(--text-dim);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.tile-actions {
   display: flex;
   gap: 3px;
   margin-top: 7px;
   opacity: 0;
   transition: opacity 0.1s;
}

.video-tile:hover .tile-actions {
   opacity: 1;
}

/* ─── Scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar {
   width: 5px;
   height: 5px;
}

::-webkit-scrollbar-track {
   background: transparent;
}

::-webkit-scrollbar-thumb {
   background: var(--border);
   border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
   background: var(--border-hover);
}