/* STUDIO LOT / PAPER AESTHETIC */

:root{
  --bg:#ece8df;
  --paper:#f7f3ea;
  --paper-2:#f2ede2;
  --panel:#fbf8f1;
  --ink:#1f1d1a;
  --muted:#6f685d;
  --line:#cfc6b7;
  --line-strong:#a99d8a;
  --header:#2a2926;
  --tab:#d9d1c4;
  --tab-active:#f9f6ef;
  --accent:#7c6f5b;

  --actor-bg:#f3dfdf;
  --actor-line:#c98d8d;

  --director-bg:#dde7f2;
  --director-line:#8aa8c8;

  --shadow:0 1px 2px rgba(27,25,22,.08), 0 8px 24px rgba(27,25,22,.04);

  /* Studio lane palette */
  --studio-1:#1f4e79; /* Paramount / classic mountain blue */
  --studio-2:#8a6a2f; /* Warner / shield gold */
  --studio-3:#b22222; /* Columbia / torch red */
  --studio-4:#1b4d3e; /* Disney / heritage green-blue */
  --studio-5:#4b2e83; /* Universal / globe-at-night violet-blue */
  --studio-6:#7a1f1f; /* Fox / searchlight bronze-red */
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  background:
    linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 28px,
      rgba(80,70,55,.018) 28px,
      rgba(80,70,55,.018) 29px
    ),
    var(--bg);
  color:var(--ink);
  font-family:Arial,sans-serif;
}

/* HEADER */

header{
  background:var(--header);
  color:#f5f1e8;
  padding:12px 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:sticky;
  top:0;
  z-index:10;
}

/* TABS */

#tabs{
  display:flex;
  overflow:auto;
  background:var(--tab);
  border-bottom:1px solid var(--line-strong);
}

.tab{
  padding:11px 15px;
  cursor:pointer;
  white-space:nowrap;
  color:#433d35;
  border-bottom:3px solid transparent;
  transition:background .12s ease, color .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.tab:hover{
  background:rgba(255,255,255,.28);
  box-shadow:inset 0 -1px 0 rgba(60,50,40,.14);
}

.tab.active{
  background:var(--tab-active);
  font-weight:700;
}

/* Studio identity accents by studio slot order */
.tab:nth-child(1){ border-bottom-color:var(--studio-1); }
.tab:nth-child(2){ border-bottom-color:var(--studio-2); }
.tab:nth-child(3){ border-bottom-color:var(--studio-3); }
.tab:nth-child(4){ border-bottom-color:var(--studio-4); }
.tab:nth-child(5){ border-bottom-color:var(--studio-5); }
.tab:nth-child(6){ border-bottom-color:var(--studio-6); }

.tab.active:nth-child(1){ box-shadow:inset 0 -2px 0 var(--studio-1); }
.tab.active:nth-child(2){ box-shadow:inset 0 -2px 0 var(--studio-2); }
.tab.active:nth-child(3){ box-shadow:inset 0 -2px 0 var(--studio-3); }
.tab.active:nth-child(4){ box-shadow:inset 0 -2px 0 var(--studio-4); }
.tab.active:nth-child(5){ box-shadow:inset 0 -2px 0 var(--studio-5); }
.tab.active:nth-child(6){ box-shadow:inset 0 -2px 0 var(--studio-6); }

/* MAIN */

#app{
  padding:18px;
  max-width:1600px;
  margin:0 auto;
}

.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
  margin-bottom:14px;
  box-shadow:var(--shadow);
}

.row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.col{
  width:290px;
}

/* CARDS */

.card{
  border:1px solid var(--line-strong);
  background:var(--paper);
  padding:9px;
  margin:8px 0;
  border-radius:8px;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

.card:hover{
  background:#fbf8f1;
  box-shadow:0 2px 8px rgba(27,25,22,.08);
  transform:translateY(-1px);
}

/* SLOTS */

.slot{
  border:2px dashed var(--line-strong);
  background:var(--paper-2);
  min-height:60px;
  padding:10px;
  border-radius:10px;
  margin:6px 0;
}

/* ACTOR / DIRECTOR VISUAL LANGUAGE */

#app .row .panel.col:nth-child(2) .card{
  background:var(--actor-bg);
  border-color:var(--actor-line);
}

#app .row .panel.col:nth-child(3) .card{
  background:var(--director-bg);
  border-color:var(--director-line);
}

/* PACKAGE BUILDER — COLUMNS */

#scriptSlot,
#actorSlot,
#directorSlot{
  display:inline-block;
  width:220px;
  vertical-align:top;
  margin-right:12px;
}

#actorSlot{
  background:var(--actor-bg);
  border-color:var(--actor-line);
}

#directorSlot{
  background:var(--director-bg);
  border-color:var(--director-line);
}

#preview{
  clear:both;
  padding-top:10px;
}

/* TABLES / CALENDAR */

table{
  border-collapse:collapse;
  width:100%;
}

th, td{
  border:1px solid var(--line);
  padding:8px;
  vertical-align:top;
}

.boardwrap table{
  table-layout:fixed;
}

.boardwrap th{
  background:#e5ded2;
}

/* Studio-colored calendar lanes by slot order */
.boardwrap table th:nth-child(2),
.boardwrap table td:nth-child(2){
  box-shadow:inset 3px 0 0 var(--studio-1);
}

.boardwrap table th:nth-child(3),
.boardwrap table td:nth-child(3){
  box-shadow:inset 3px 0 0 var(--studio-2);
}

.boardwrap table th:nth-child(4),
.boardwrap table td:nth-child(4){
  box-shadow:inset 3px 0 0 var(--studio-3);
}

.boardwrap table th:nth-child(5),
.boardwrap table td:nth-child(5){
  box-shadow:inset 3px 0 0 var(--studio-4);
}

.boardwrap table th:nth-child(6),
.boardwrap table td:nth-child(6){
  box-shadow:inset 3px 0 0 var(--studio-5);
}

.boardwrap table th:nth-child(7),
.boardwrap table td:nth-child(7){
  box-shadow:inset 3px 0 0 var(--studio-6);
}

/* Future years slightly darker */
.boardwrap table tr:nth-child(n+6) td{
  background:#f0eadf;
}

.boardwrap table tr:nth-child(n+10) td{
  background:#e9e2d5;
}

/* Small divider between years: after Q4, before next year's Q1 */
.boardwrap table tr:nth-child(6) td,
.boardwrap table tr:nth-child(6) th{
  border-top:3px solid rgba(90,76,58,.35);
}

.boardwrap table tr:nth-child(10) td,
.boardwrap table tr:nth-child(10) th{
  border-top:3px solid rgba(90,76,58,.35);
}

/* Scheduling phase: keep film title prominent, reduce all secondary text */
.boardwrap .package,
.boardwrap .slot > div{
  font-size:12px;
  line-height:1.2;
}

.boardwrap .package strong,
.boardwrap .slot > div strong,
.boardwrap .slot > div b,
.boardwrap td .card strong,
.boardwrap td .card b{
  font-size:inherit;
}

.boardwrap .package strong + *,
.boardwrap .slot > div strong + *,
.boardwrap .slot > div b + *{
  font-size:11px;
}

/* Buttons */
button{
  border:1px solid var(--line-strong);
  background:var(--paper);
  border-radius:8px;
  padding:8px 12px;
  cursor:pointer;
}

button:hover{
  background:#fcf8f0;
}

/* Setup phase: standardize studio draft button widths */
.panel button{
  min-width:160px;
}

/* Small text */
.small{
  color:var(--muted);
  font-size:12px;
}

details summary{
  cursor:pointer;
}

header .right{
  display:flex;
  gap:8px;
  align-items:center;
}

.rules-overlay{
  position:fixed;
  inset:0;
  z-index:40;
}

.rules-backdrop{
  position:absolute;
  inset:0;
  background:rgba(24,20,16,.45);
}

.rules-panel{
  position:relative;
  width:min(1180px, calc(100vw - 40px));
  height:min(82vh, 820px);
  margin:40px auto;
  background:var(--panel);
  border:1px solid var(--line-strong);
  border-radius:18px;
  box-shadow:0 20px 48px rgba(20,18,14,.25);
  padding:16px;
  overflow:hidden;
}

.rules-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.rules-breadcrumb{
  font-size:13px;
  color:var(--muted);
}

.rules-sidebar{
  width:240px;
  max-width:100%;
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:calc(82vh - 120px);
  overflow:auto;
}

.rules-sidebar-item{
  width:100%;
  text-align:left;
  min-width:unset;
}

.rules-sidebar-item.active{
  background:#efe7da;
  border-color:var(--accent);
}

.rules-content{
  flex:1;
  min-width:280px;
  max-height:calc(82vh - 120px);
  overflow:auto;
  padding-right:8px;
}

.rules-close-btn{
  min-width:unset;
}

.inline-help-btn{
  min-width:34px !important;
  width:34px;
  height:34px;
  padding:0;
  border-radius:999px;
  font-weight:700;
}

.calendar-film-tile{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.calendar-film-title{
  font-weight:700;
  line-height:1.15;
}

.calendar-film-bo,
.calendar-film-cr,
.calendar-film-dice,
.package-card-meta{
  font-size:12px;
  color:var(--muted);
}

.package-card-compact{
  border:1px solid var(--line-strong);
  background:var(--paper);
  border-radius:10px;
  padding:10px;
  margin:8px 0;
}

.package-expand-btn,
.expand-toggle{
  min-width:unset !important;
}

.expand-panel{
  display:none;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid var(--line);
}

.expand-panel.is-expanded,
.is-expanded > .expand-panel{
  display:block;
}

.event-log-panel{
  opacity:.88;
  background:#f4efe6;
}

.event-log-summary{
  color:var(--muted);
}

.event-log-body{
  color:#544d42;
}

.rules-term-link{
  border:none;
  background:none;
  color:#184f86;
  padding:0;
  margin:0;
  min-width:unset;
  text-decoration:underline;
}

@media (max-width: 900px){
  .rules-panel{
    width:calc(100vw - 20px);
    margin:10px auto;
    height:calc(100vh - 20px);
  }

  .rules-panel .row{
    flex-direction:column;
  }

  .rules-sidebar{
    width:100%;
    max-height:180px;
  }
}