/*
 * Course Plan — Studio theme.
 * Every rule MUST be scoped under #cp-app[data-cp-theme="studio"].
 * Default look (no data attribute or data-cp-theme="default") is owned by
 * course-plan.css and must remain untouched by anything in this file.
 */

/* ==========================================================================
   Step 1 — Variable overrides + typography
   ========================================================================== */

#cp-app[data-cp-theme="studio"] {
  --cp-primary: #111111;
  --cp-border:  #e5e5e5;
  --cp-muted:   #737373;
  --cp-bg:      #ffffff;
  --cp-bg-alt:  #fafafa;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -0.005em;
}

#cp-app[data-cp-theme="studio"] h1,
#cp-app[data-cp-theme="studio"] h2,
#cp-app[data-cp-theme="studio"] h3,
#cp-app[data-cp-theme="studio"] h4 { letter-spacing: -0.015em; font-weight: 600; }

/* ==========================================================================
   Step 2 — Flat surfaces, uniform pale year wash
   ========================================================================== */

#cp-app[data-cp-theme="studio"] .cp-planner { border-radius: 4px; box-shadow: none; }
#cp-app[data-cp-theme="studio"] .cp-toolbar { background: #ffffff; border-bottom-color: var(--cp-border); }

#cp-app[data-cp-theme="studio"] .cp-year-header[data-year="1"] { background: #f4f4f5; color: #18181b; }
#cp-app[data-cp-theme="studio"] .cp-year-header[data-year="2"] { background: #f4f4f5; color: #18181b; }
#cp-app[data-cp-theme="studio"] .cp-year-header[data-year="3"] { background: #f4f4f5; color: #18181b; }
#cp-app[data-cp-theme="studio"] .cp-year-header[data-year="4"] { background: #f4f4f5; color: #18181b; }
#cp-app[data-cp-theme="studio"] .cp-year-header { font-weight: 500; }
#cp-app[data-cp-theme="studio"] .cp-semester[data-year="1"],
#cp-app[data-cp-theme="studio"] .cp-semester[data-year="2"],
#cp-app[data-cp-theme="studio"] .cp-semester[data-year="3"],
#cp-app[data-cp-theme="studio"] .cp-semester[data-year="4"] { background: #ffffff; }

#cp-app[data-cp-theme="studio"] .cp-tile {
  background: #ffffff;
  border: 1px solid var(--cp-border);
  box-shadow: none;
  padding: 14px 16px;
}
#cp-app[data-cp-theme="studio"] .cp-tile:hover { box-shadow: 0 0 0 1px var(--cp-primary); border-color: var(--cp-primary); }

/* ==========================================================================
   Step 3 — Subject color as a corner dot, not a left border
   ========================================================================== */

#cp-app[data-cp-theme="studio"] .cp-tile { position: relative; border-left-width: 1px !important; border-left-color: var(--cp-border) !important; }
#cp-app[data-cp-theme="studio"] .cp-tile::before {
  content: "";
  position: absolute;
  top: 10px; right: 10px;
  width: 6px; height: 6px;
  border-radius: 50%;
}
/* Subject dots reference the same --cp-subject-<key> custom properties as the
   screen / print (single source: CP_Data::standard_subjects()). */
#cp-app[data-cp-theme="studio"] .cp-subject-english::before        { background: var(--cp-subject-english); }
#cp-app[data-cp-theme="studio"] .cp-subject-math::before           { background: var(--cp-subject-math); }
#cp-app[data-cp-theme="studio"] .cp-subject-science::before        { background: var(--cp-subject-science); }
#cp-app[data-cp-theme="studio"] .cp-subject-social_studies::before { background: var(--cp-subject-social_studies); }
#cp-app[data-cp-theme="studio"] .cp-subject-world_languages::before{ background: var(--cp-subject-world_languages); }
#cp-app[data-cp-theme="studio"] .cp-subject-fine_arts::before      { background: var(--cp-subject-fine_arts); }
#cp-app[data-cp-theme="studio"] .cp-subject-pe_health::before      { background: var(--cp-subject-pe_health); }
#cp-app[data-cp-theme="studio"] .cp-subject-electives::before      { background: var(--cp-subject-electives); }

/* New UI elements: neutral grayscale to match the flat studio palette. */
#cp-app[data-cp-theme="studio"] .cp-tile-credits { background: #f4f4f5; color: #18181b; }
#cp-app[data-cp-theme="studio"] .cp-year-credits { background: rgba(0,0,0,0.05); color: #18181b; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
#cp-app[data-cp-theme="studio"] .cp-req-bar { background: #e5e5e5; }

/* ==========================================================================
   Step 4 — Sidebar, toolbar, buttons
   ========================================================================== */

#cp-app[data-cp-theme="studio"] .cp-sidebar { background: #ffffff; border-left-color: var(--cp-border); padding: 20px; }
#cp-app[data-cp-theme="studio"] .cp-req-row { border-bottom-color: #f5f5f5; padding: 8px 4px; }
#cp-app[data-cp-theme="studio"] .cp-req-row:hover { background: var(--cp-bg-alt); }

#cp-app[data-cp-theme="studio"] .cp-state-pill { background: #18181b; color: #ffffff; border-radius: 4px; }
#cp-app[data-cp-theme="studio"] .cp-toolbar-actions button.primary,
#cp-app[data-cp-theme="studio"] .cp-wizard-actions button.primary,
#cp-app[data-cp-theme="studio"] .cp-modal-card form button.primary,
#cp-app[data-cp-theme="studio"] .cp-btn-primary { background: #18181b; border-color: #18181b; }
#cp-app[data-cp-theme="studio"] .cp-btn-primary:hover { background: #000000; border-color: #000000; }