/*  JavaScript 7th Edition
    Chapter 8
    Hands-on Project 8-4

    Filename: styles.css
*/

/* apply a natural box layout model to all elements */
* {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

/* reset rules */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}

body {
   min-height: 100vh;
   background:
      radial-gradient(circle at 10% 10%, rgba(104, 76, 255, 0.22), transparent 30%),
      radial-gradient(circle at 90% 20%, rgba(255, 64, 129, 0.18), transparent 28%),
      #090b16;
   color: #f6f7ff;
   font-family: "Segoe UI", Verdana, Geneva, sans-serif;
   line-height: 1.4;
}

header {
   width: min(1180px, calc(100% - 40px));
   margin: 28px auto 0;
   padding: 28px 36px;
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 22px 22px 0 0;
   background: linear-gradient(120deg, #5538d9 0%, #7c3aed 52%, #d9468f 100%);
   box-shadow: 0 20px 55px rgba(0, 0, 0, 0.3);
}

header p {
   margin-bottom: 5px;
   color: rgba(255, 255, 255, 0.78);
   font-size: 0.78rem;
   font-weight: 700;
   letter-spacing: 0.16em;
   text-transform: uppercase;
}

header h1 {
   font-size: clamp(2rem, 5vw, 3.6rem);
   font-weight: 800;
   letter-spacing: -0.04em;
}

main {
   width: min(1180px, calc(100% - 40px));
   margin: 0 auto 40px;
}

.watchlist-panel {
   min-height: 570px;
   padding: 28px 36px 36px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-top: 0;
   border-radius: 0 0 22px 22px;
   background: rgba(17, 20, 38, 0.93);
   box-shadow: 0 20px 55px rgba(0, 0, 0, 0.3);
}

.intro {
   display: inline-block;
}

.eyebrow {
   display: block;
   margin-bottom: 4px;
   color: #73e2ff;
   font-size: 0.76rem;
   font-weight: 800;
   letter-spacing: 0.14em;
   text-transform: uppercase;
}

.intro h2 {
   font-size: 1.7rem;
   font-weight: 750;
}

.intro p {
   margin-top: 4px;
   color: #aeb4cc;
}

.file-picker {
   display: flex;
   align-items: center;
   gap: 12px;
   width: fit-content;
   margin-top: 20px;
   padding: 10px 14px;
   border: 1px solid rgba(115, 226, 255, 0.35);
   border-radius: 10px;
   background: rgba(115, 226, 255, 0.08);
   color: #eefbff;
   cursor: pointer;
}

.file-picker > span {
   font-weight: 700;
}

input#getFile {
   max-width: 280px;
   color: #aeb4cc;
   cursor: pointer;
}

input#getFile::file-selector-button {
   margin-right: 10px;
   padding: 7px 11px;
   border: 0;
   border-radius: 7px;
   background: #73e2ff;
   color: #101326;
   font-weight: 700;
   cursor: pointer;
}

#fileStatus {
   margin: 15px 0 8px;
   color: #aeb4cc;
   font-size: 0.9rem;
}

div#container {
   width: 100%;
   max-height: 420px;
   overflow: auto;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 12px;
   background: #0d1020;
}

div#container:empty {
   min-height: 110px;
   background:
      linear-gradient(90deg, transparent 49%, rgba(255, 255, 255, 0.03) 50%, transparent 51%),
      #0d1020;
}

div#container table {
   width: 100%;
   border-collapse: collapse;
   font-size: 0.84rem;
}

div#container th,
div#container td {
   padding: 11px 12px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   text-align: left;
   white-space: nowrap;
}

div#container th {
   position: sticky;
   top: 0;
   z-index: 1;
   background: #25214b;
   color: #dce0ff;
   font-size: 0.72rem;
   font-weight: 800;
   letter-spacing: 0.06em;
   text-transform: uppercase;
}

div#container tr:nth-child(even) td {
   background: rgba(124, 58, 237, 0.07);
}

div#container tr:hover td {
   background: rgba(115, 226, 255, 0.08);
}

div#container td:nth-child(2) {
   color: #ffffff;
   font-weight: 700;
}

td[data-status="Completed"] {
   color: #69e6a6;
}

td[data-status="Watching"] {
   color: #73e2ff;
}

td[data-status="On Hold"] {
   color: #ffcc73;
}

td[data-status="Plan to Watch"] {
   color: #d3a7ff;
}

@media (max-width: 700px) {
   header,
   main {
      width: min(100% - 20px, 1180px);
   }

   header {
      margin-top: 10px;
      padding: 24px;
   }

   .watchlist-panel {
      padding: 24px 18px;
   }

   .file-picker {
      display: block;
      width: 100%;
   }

   .file-picker > span {
      display: block;
      margin-bottom: 8px;
   }
}