/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  font-family: "Helvetica Neue", Arial, sans-serif;

  /* Typography – sizes */
  --text-xs:   0.6875rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-lg:   1.125rem;
  --text-xl:   1.5rem;

  /* Typography – weight */
  --weight-normal: 400;
  --weight-medium: 600;
  --weight-bold:   700;

  /* Typography – leading / tracking */
  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --tracking-wide:  0.05em;

  /* Spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-12: 48px;

  /* Colour – light mode */
  --bg:             #f5f5f5;
  --surface:        #ffffff;
  --text-primary:   #0a0a0a;
  --text-secondary: #4a4a4a;
  --border:         #d4d4d4;
  --hover-bg:       #ebebeb;

  /* Layout */
  --max-width: 960px;
  --radius:    2px;
}

/* ============================================================
   DARK MODE
   ============================================================ */
body.dark {
  --bg:             #0a0a0a;
  --surface:        #141414;
  --text-primary:   #f0f0f0;
  --text-secondary: #a0a0a0;
  --border:         #2a2a2a;
  --hover-bg:       #1a1a1a;
}

/* ============================================================
   RESET
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin:  0;
  padding: 0;
}

body {
  background-color: var(--bg);
  color:            var(--text-primary);
  font-size:        var(--text-base);
  line-height:      var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
  appearance: none;
}

button { cursor: pointer; }

a {
  color: inherit;
  text-decoration: none;
}

a:hover { text-decoration: underline; }

/* ============================================================
   LAYOUT SHELL
   ============================================================ */
.shell {
  max-width: var(--max-width);
  margin:    0 auto;
  padding:   var(--sp-6) var(--sp-4);
}

/* Top bar */
.topbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--sp-4);
  margin-bottom:   var(--sp-4);
}

.topbar-search {
  position:  relative;
  flex:      1;
  max-width: 520px;
}

.topbar-right {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  flex-shrink: 0;
}

/* Generic text button (underline-style) */
.text-btn {
  background:      none;
  border:          none;
  padding:         0;
  font-size:       var(--text-sm);
  color:           var(--text-primary);
  text-decoration: underline;
  cursor:          pointer;
}
.text-btn:hover { text-decoration: none; }

/* Filter bar */
.filter-bar {
  display:       flex;
  align-items:   center;
  gap:           var(--sp-3);
  padding:       var(--sp-3) 0;
  border-top:    1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-4);
  flex-wrap:     wrap;
}

.filter-trigger {
  font-size:       var(--text-sm);
  font-weight:     var(--weight-medium);
  color:           var(--text-secondary);
  text-transform:  uppercase;
  letter-spacing:  var(--tracking-wide);
  cursor:          pointer;
  background:      none;
  border:          none;
  padding:         0;
}
.filter-trigger::after { content: " \25BE"; font-size: 0.75em; }
.filter-trigger:hover { color: var(--text-primary); }

.filter-toggle {
  font-size:       var(--text-sm);
  font-weight:     var(--weight-medium);
  color:           var(--text-secondary);
  text-transform:  uppercase;
  letter-spacing:  var(--tracking-wide);
  cursor:          pointer;
  background:      none;
  border:          none;
  padding:         var(--sp-1) 0;
  border-bottom:   2px solid transparent;
}
.filter-toggle:hover { color: var(--text-primary); }
.filter-toggle.active {
  color:               var(--text-primary);
  border-bottom-color: var(--text-primary);
}

.filter-dropdown {
  position:         absolute;
  top:              calc(100% + var(--sp-2));
  left:             0;
  background:       var(--surface);
  border:           1px solid var(--border);
  border-radius:    var(--radius);
  box-shadow:       0 8px 24px rgba(0,0,0,0.10);
  min-width:        200px;
  z-index:          100;
  padding:          var(--sp-2) 0;
}
body.dark .filter-dropdown {
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}

.filter-dropdown input[type="checkbox"] {
  width:         14px;
  height:        14px;
  border:        1px solid var(--border);
  border-radius: 2px;
  cursor:        pointer;
  flex-shrink:   0;
  position:      relative;
}
.filter-dropdown input[type="checkbox"]:checked {
  background:   var(--text-primary);
  border-color: var(--text-primary);
}
.filter-dropdown input[type="checkbox"]:checked::after {
  content:   "\2713";
  position:  absolute;
  top:       -1px;
  left:      1px;
  font-size: 11px;
  color:     var(--bg);
}

.filter-pills {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--sp-2);
  width:      100%;
  margin-top: var(--sp-2);
}
.filter-pills:empty { display: none; }

.filter-pill {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--sp-1);
  padding:       2px var(--sp-2);
  font-size:     var(--text-xs);
  color:         var(--text-primary);
  background:    var(--hover-bg);
  border:        1px solid var(--border);
  border-radius: var(--radius);
}

.filter-pill-dismiss {
  cursor:      pointer;
  font-size:   var(--text-xs);
  color:       var(--text-secondary);
  background:  none;
  border:      none;
  padding:     0;
  line-height: 1;
}
.filter-pill-dismiss:hover { color: var(--text-primary); }

/* Main content area */
.content {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-2);
}

/* Breadcrumb */
.breadcrumb {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
  font-size:   var(--text-sm);
  color:       var(--text-secondary);
  margin-bottom: var(--sp-3);
}
.breadcrumb a:hover { text-decoration: underline; }

/* ============================================================
   LOGIN VIEW
   ============================================================ */
.login-view {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      100vh;
  background:      var(--bg);
}

.login-form {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-3);
  width:          320px;
  padding:        var(--sp-8);
  background:     var(--surface);
  border:         1px solid var(--border);
  border-radius:  var(--radius);
}
body.dark .login-form {
  box-shadow: 0 16px 40px rgba(0,0,0,0.60);
}

.login-form input:not([type="checkbox"]) {
  width:         100%;
  padding:       var(--sp-2) var(--sp-3);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  font-size:     var(--text-sm);
  background:    var(--bg);
  color:         var(--text-primary);
}
.login-form input:not([type="checkbox"])::placeholder { color: var(--text-secondary); }
.login-form input:not([type="checkbox"]):focus { border-color: var(--text-primary); }

.login-form button[type="submit"] {
  padding:        var(--sp-2) var(--sp-3);
  background:     var(--text-primary);
  color:          var(--bg);
  border:         1px solid var(--text-primary);
  border-radius:  var(--radius);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-medium);
  cursor:         pointer;
  transition:     opacity 0.15s;
}
.login-form button[type="submit"]:hover { opacity: 0.85; }

.remember-row {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
  flex-wrap:   wrap;
  font-size:   var(--text-xs);
  color:       var(--text-secondary);
}

.remember-row label {
  display:     inline-flex;
  align-items: center;
  gap:         var(--sp-2);
  cursor:      pointer;
}

.remember-row input[type="checkbox"] {
  width:         14px;
  height:        14px;
  margin:        0;
  border:        1px solid var(--border);
  border-radius: 2px;
  background:    var(--surface);
  cursor:        pointer;
  flex-shrink:   0;
  position:      relative;
}

.remember-row input[type="checkbox"]:checked {
  background:   var(--text-primary);
  border-color: var(--text-primary);
}

.remember-row input[type="checkbox"]:checked::after {
  content:   "\2713";
  position:  absolute;
  top:       -1px;
  left:      1px;
  font-size: 11px;
  color:     var(--bg);
}

.remember-row .auth-error {
  flex-basis: 100%;
}

.login-error {
  font-size:  var(--text-xs);
  color:      #b00020;
  text-align: center;
}

/* ============================================================
   LIST-OF-LISTS
   ============================================================ */
.list-directory-item {
  display:       flex;
  align-items:   center;
  gap:           var(--sp-3);
  padding:       var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
  cursor:        pointer;
}
.list-directory-item:first-child { border-top: 1px solid var(--border); }
.list-directory-item:hover { background: var(--hover-bg); }

.list-directory-info {
  flex:     1;
  min-width: 0;
}

.list-directory-name {
  font-size:   var(--text-base);
  font-weight: var(--weight-bold);
  color:       var(--text-primary);
}

.list-directory-meta {
  font-size: var(--text-sm);
  color:     var(--text-secondary);
  margin-top: var(--sp-1);
}

.list-directory-count {
  font-size:      var(--text-xs);
  color:          var(--text-secondary);
  white-space:    nowrap;
  flex-shrink:    0;
}

.list-poster-stack {
  position:    relative;
  height:      40px;
  flex-shrink: 0;
}

.list-poster-thumb {
  position:      absolute;
  top:           0;
  width:         28px;
  height:        40px;
  object-fit:    cover;
  border-radius: var(--radius);
  border:        1px solid var(--surface);
}

.new-list-btn {
  display:       inline-block;
  margin-top:    var(--sp-4);
  padding:       var(--sp-2) var(--sp-4);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  font-size:     var(--text-sm);
  font-weight:   var(--weight-medium);
  color:         var(--text-primary);
  cursor:        pointer;
  background:    var(--surface);
}
.new-list-btn:hover { background: var(--hover-bg); }

/* ============================================================
   MOVIE CARD
   ============================================================ */
.movie-card {
  display:       flex;
  gap:           var(--sp-4);
  padding:       var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
  position:      relative;
  transition:    background 0.12s;
}
.movie-card:first-child { border-top: 1px solid var(--border); }

/* Full-bleed hover via negative margin trick */
.movie-card:hover {
  background:    var(--hover-bg);
  margin-left:   calc(-1 * var(--sp-4));
  margin-right:  calc(-1 * var(--sp-4));
  padding-left:  var(--sp-4);
  padding-right: var(--sp-4);
}

.movie-card-poster {
  flex-shrink:    0;
  width:          68px;
  height:         100px;
  object-fit:     cover;
  background:     var(--border);
  border-radius:  var(--radius);
  display:        block;
}

.movie-card-body {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-1);
}

.movie-card-header {
  display:     flex;
  align-items: baseline;
  gap:         var(--sp-2);
  flex-wrap:   wrap;
}

.movie-card-title {
  font-size:   var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color:       var(--text-primary);
}
.movie-card-title .year {
  font-size:   var(--text-sm);
  font-weight: var(--weight-normal);
  color:       var(--text-secondary);
  margin-left: var(--sp-1);
}
.movie-card-title .runtime {
  font-size:   var(--text-sm);
  font-weight: var(--weight-normal);
  color:       var(--text-secondary);
  margin-left: var(--sp-1);
}

.movie-card-title-secondary {
  font-size:   var(--text-sm);
  font-style:  italic;
  color:       var(--text-secondary);
  margin-top:  2px;
  line-height: var(--leading-tight);
}

.movie-card-actions {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  flex-wrap:   wrap;
  margin-top:  var(--sp-1);
}

.movie-card-secondary {
  font-size: var(--text-sm);
  color:     var(--text-secondary);
}

.movie-card-overview {
  font-size:             var(--text-sm);
  color:                 var(--text-secondary);
  line-height:           var(--leading-normal);
  display:               -webkit-box;
  -webkit-line-clamp:    4;
  -webkit-box-orient:    vertical;
  overflow:              hidden;
  text-overflow:         ellipsis;
}

.movie-card-footer {
  display:     flex;
  align-items: center;
  gap:         var(--sp-4);
  margin-top:  var(--sp-1);
  flex-wrap:   wrap;
}

.watch-links {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  flex-wrap:   wrap;
}

.watch-link {
  font-size:       var(--text-xs);
  color:           var(--text-primary);
  text-decoration: underline;
  cursor:          pointer;
  background:      none;
  border:          none;
  padding:         0;
}
.watch-link:hover { text-decoration: none; }

.watched-label {
  font-size:      var(--text-xs);
  font-weight:    var(--weight-medium);
  color:          var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ============================================================
   SEARCH DROPDOWN
   ============================================================ */
.search-dropdown {
  position:     absolute;
  top:          calc(100% + var(--sp-2));
  left:         0;
  right:        0;
  background:   var(--surface);
  border:       1px solid var(--border);
  border-radius: var(--radius);
  box-shadow:   0 12px 32px rgba(0,0,0,0.10);
  max-height:   360px;
  overflow-y:   auto;
  z-index:      200;
}
body.dark .search-dropdown {
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
}

.search-result {
  display:     flex;
  gap:         var(--sp-3);
  padding:     var(--sp-2) var(--sp-3);
  cursor:      pointer;
}
.search-result:hover { background: var(--hover-bg); }

.search-result-poster {
  flex-shrink:    0;
  width:          32px;
  height:         48px;
  object-fit:     cover;
  background:     var(--border);
  border-radius:  var(--radius);
  display:        block;
}

.search-result-title {
  font-size:     var(--text-sm);
  font-weight:   var(--weight-medium);
  color:         var(--text-primary);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.search-result-year {
  font-size: var(--text-xs);
  color:     var(--text-secondary);
}

.search-result-actions {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
  margin-top:  var(--sp-1);
  flex-wrap:   wrap;
}

/* ============================================================
   POPOVER
   ============================================================ */
.popover {
  position:      absolute;
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  box-shadow:    0 8px 24px rgba(0,0,0,0.10);
  width:         220px;
  z-index:       150;
  padding:       var(--sp-2);
}
body.dark .popover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.50);
}

.popover-input {
  width:         100%;
  padding:       var(--sp-2) var(--sp-3);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  font-size:     var(--text-sm);
  background:    var(--bg);
  color:         var(--text-primary);
  margin-bottom: var(--sp-2);
}
.popover-input:focus { border-color: var(--text-primary); }

.popover-list {
  list-style:  none;
  display:     flex;
  flex-direction: column;
  gap:         2px;
}

.popover-list-item {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         var(--sp-1) var(--sp-2);
  font-size:       var(--text-sm);
  color:           var(--text-primary);
  border-radius:   var(--radius);
  cursor:          pointer;
  text-align:      left;
}
.popover-list-item:hover { background: var(--hover-bg); }

/* ============================================================
   TOAST
   ============================================================ */
.toast-container {
  position:        fixed;
  right:           var(--sp-4);
  bottom:          var(--sp-4);
  display:         flex;
  flex-direction:  column;
  gap:             var(--sp-2);
  z-index:         400;
  max-width:       min(420px, calc(100% - 2 * var(--sp-4)));
}

.toast {
  display:        flex;
  align-items:    flex-start;
  justify-content: space-between;
  gap:            var(--sp-2);
  padding:        var(--sp-3) var(--sp-4);
  background:     var(--surface);
  border:         1px solid var(--border);
  border-radius:  var(--radius);
  box-shadow:     0 8px 24px rgba(0,0,0,0.10);
  font-size:      var(--text-sm);
  color:          var(--text-primary);
  animation:      toast-in 0.2s ease;
}
body.dark .toast {
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
}

.toast-dismiss {
  flex-shrink:  0;
  font-size:    var(--text-xs);
  color:        var(--text-secondary);
  cursor:       pointer;
  line-height:  var(--leading-normal);
  padding:      0;
  background:   none;
  border:       none;
}
.toast-dismiss:hover { color: var(--text-primary); }

@keyframes toast-in {
  from {
    opacity:   0;
    transform: translateY(8px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

.toast--progress {
  flex-direction: row;
  align-items:    flex-start;
  min-width:      280px;
}
.toast--progress .toast-body {
  flex:           1 1 auto;
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-1);
  min-width:      0;
}
.toast--progress .toast-header {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  gap:             var(--sp-2);
}
.toast--progress .toast-title {
  font-weight:   600;
  color:         var(--text-primary);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.toast--progress .toast-count {
  font-size:    var(--text-xs);
  color:        var(--text-secondary);
  flex-shrink:  0;
}
.toast--progress .toast-stage {
  font-size: var(--text-xs);
  color:     var(--text-secondary);
}
.toast--progress .toast-progress-bar {
  width:         100%;
  height:        4px;
  background:    var(--border);
  border-radius: 2px;
  overflow:      hidden;
}
.toast--progress .toast-progress-fill {
  height:     100%;
  width:      0%;
  background: var(--text-primary);
  transition: width 0.3s ease;
}
.toast--progress.toast--failed .toast-progress-fill {
  background: #b00020;
}
.toast--progress .toast-footnote {
  font-size:  var(--text-xs);
  color:      var(--text-secondary);
  font-style: italic;
}

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,0.40);
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         300;
  padding:         var(--sp-4);
}
body.dark .modal-overlay { background: rgba(0,0,0,0.65); }

.modal-box {
  width:         min(560px, 100%);
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       var(--sp-6);
  box-shadow:    0 16px 40px rgba(0,0,0,0.14);
}
body.dark .modal-box {
  box-shadow: 0 16px 40px rgba(0,0,0,0.65);
}

.modal-actions {
  display:         flex;
  justify-content: flex-end;
  gap:             var(--sp-3);
  margin-top:      var(--sp-6);
}

.modal-actions .primary {
  padding:       var(--sp-2) var(--sp-4);
  background:    var(--text-primary);
  color:         var(--bg);
  border:        1px solid var(--text-primary);
  border-radius: var(--radius);
  font-size:     var(--text-sm);
  font-weight:   var(--weight-medium);
  cursor:        pointer;
  transition:    opacity 0.15s;
}
.modal-actions .primary:hover { opacity: 0.85; }

/* ============================================================
   DETAIL VIEW
   ============================================================ */
.detail-header {
  margin-bottom:  var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom:  1px solid var(--border);
}

.detail-header-top {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  gap:             var(--sp-3);
  flex-wrap:       wrap;
}

.detail-title {
  font-size:   var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color:       var(--text-primary);
}

.detail-title-input {
  font-size:     var(--text-xl);
  font-weight:   var(--weight-bold);
  line-height:   var(--leading-tight);
  color:         var(--text-primary);
  background:    transparent;
  border:        none;
  border-bottom: 2px solid var(--border);
  width:         100%;
  padding-bottom: var(--sp-1);
}
.detail-title-input:focus { border-bottom-color: var(--text-primary); }

.detail-actions {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  flex-wrap:   wrap;
}

.detail-meta {
  font-size:   var(--text-sm);
  color:       var(--text-secondary);
  line-height: var(--leading-normal);
  margin-top:  var(--sp-2);
}

.inline-confirm {
  display:     inline-flex;
  align-items: center;
  gap:         var(--sp-2);
  font-size:   var(--text-sm);
  color:       var(--text-secondary);
}

/* ============================================================
   SETTINGS DROPDOWN
   ============================================================ */
.settings-wrap {
  position: relative;
}

.settings-dropdown {
  position:      absolute;
  top:           calc(100% + var(--sp-2));
  right:         0;
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  box-shadow:    0 8px 24px rgba(0,0,0,0.10);
  min-width:     160px;
  z-index:       200;
  padding:       var(--sp-2) 0;
}
body.dark .settings-dropdown {
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}

.settings-user {
  padding:       var(--sp-2) var(--sp-3);
  font-size:     var(--text-sm);
  font-weight:   var(--weight-medium);
  color:         var(--text-primary);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-1);
}

.settings-item {
  display:    block;
  width:      100%;
  text-align: left;
  padding:    var(--sp-2) var(--sp-3);
  font-size:  var(--text-sm);
  color:      var(--text-primary);
  cursor:     pointer;
  background: none;
  border:     none;
}
.settings-item:hover { background: var(--hover-bg); }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  text-align: center;
  padding:    var(--sp-12) var(--sp-6);
  color:      var(--text-secondary);
  font-size:  var(--text-base);
  line-height: var(--leading-normal);
}

/* ============================================================
   UTILITY
   ============================================================ */
.hidden { display: none !important; }

.sr-only {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0,0,0,0);
  white-space: nowrap;
  border:     0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .topbar {
    flex-wrap:   wrap;
    align-items: stretch;
  }

  .topbar-search {
    max-width: 100%;
    flex:      1 1 100%;
    order:     2;
  }

  .topbar-right {
    order:     1;
    flex-wrap: wrap;
    gap:       var(--sp-2);
  }

  .movie-card {
    gap: var(--sp-3);
  }

  /* Disable negative-margin hover on small screens */
  .movie-card:hover {
    margin-left:  0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .movie-card-poster {
    width:  52px;
    height: 76px;
  }

  .shell {
    padding: var(--sp-4) var(--sp-3);
  }
}