:root {
  --navy: #071c2c; --navy-2: #0d2b3e; --blue: #0057b8; --cyan: #00a7cf;
  --ink: #172532; --muted: #6e7c87; --line: #dfe5e9; --surface: #fff;
  --canvas: #f3f6f7; --danger: #d94646; --warning: #ef9f28; --success: #1f9870;
  --shadow: 0 12px 35px rgba(8, 31, 47, .09); --radius: 16px;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--canvas); font: 14px/1.45 Inter, sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 254px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 26px 18px 20px; background: var(--navy); color: #fff; display: flex; flex-direction: column; z-index: 20; }
.brand { display: flex; align-items: center; gap: 14px; padding: 0 10px 28px; }
.brand-mark { font: 700 25px Space Grotesk, sans-serif; letter-spacing: -.06em; color: #fff; position: relative; }
.brand-mark::after { content: ""; width: 8px; height: 8px; background: var(--cyan); position: absolute; right: -10px; top: 0; }
.brand-copy { display: grid; border-left: 1px solid rgba(255,255,255,.2); padding-left: 14px; }
.brand-copy strong { font-size: 12px; }.brand-copy span { font-size: 10px; color: #8ea3b1; }
.main-nav { display: grid; gap: 7px; }
.nav-item { border: 0; background: transparent; color: #a9bac5; text-align: left; padding: 13px 15px; border-radius: 9px; font-weight: 600; }
.nav-item:hover, .nav-item.active { color: #fff; background: rgba(0,167,207,.15); }
.nav-item.active { box-shadow: inset 3px 0 var(--cyan); }.nav-icon { font-size: 18px; margin-right: 10px; }
.sidebar-bottom { margin-top: auto; display: grid; gap: 18px; }
.semester-card { display: grid; gap: 3px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 15px; }
.semester-card span:last-child, .user-card span { color: #8ea3b1; font-size: 11px; }
.eyebrow { margin: 0 0 4px; color: var(--cyan); font-size: 10px; letter-spacing: .14em; font-weight: 700; }
.user-card { border-top: 1px solid rgba(255,255,255,.12); padding: 18px 7px 0; display: flex; align-items: center; gap: 10px; }
.user-card div:last-child { display: grid; font-size: 11px; }.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); font-size: 11px; font-weight: 700; }
.main-content { min-width: 0; }.topbar { height: 90px; padding: 0 34px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 18px; }
.topbar h1 { font: 600 23px Space Grotesk; margin: 0; }.top-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.icon-btn { min-width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: white; position: relative; font-size: 19px; }
.icon-btn b { position: absolute; top: -7px; right: -7px; background: var(--danger); color: #fff; border: 2px solid white; border-radius: 20px; min-width: 20px; line-height: 16px; font-size: 10px; }
.btn { min-height: 40px; border: 1px solid transparent; border-radius: 8px; padding: 0 15px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.btn-primary { color: #fff; background: var(--blue); }.btn-primary:hover { background: #00499b; }.btn-ghost { background: #fff; border-color: var(--line); color: var(--ink); }.btn-danger { color: var(--danger); background: #fff; border-color: #f2caca; }
.page { display: none; padding: 28px 34px 46px; }.page.active { display: block; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 20px; }
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 17px 18px; display: grid; grid-template-columns: 1fr auto; align-items: center; }
.stat-card span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }.stat-card strong { font: 600 25px Space Grotesk; }.stat-card i { width: 35px; height: 35px; border-radius: 9px; background: #e9f5f8; display: grid; place-items: center; font-style: normal; }
.calendar-card, .data-list-card, .entity-form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 3px 12px rgba(8,31,47,.03); }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); gap: 20px; }
.date-controls { display: flex; align-items: center; gap: 8px; }.date-controls h2 { font: 600 18px Space Grotesk; margin: 0 0 0 8px; text-transform: capitalize; }
.view-switcher { padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--canvas); display: flex; }
.view-switcher button, .entity-tabs button { border: 0; color: var(--muted); background: transparent; padding: 7px 13px; border-radius: 6px; font-weight: 600; }
.view-switcher button.active { background: #fff; color: var(--blue); box-shadow: 0 1px 4px rgba(0,0,0,.09); }
.filter-bar { padding: 14px 20px; background: #fafcfc; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: end; }
label { display: grid; gap: 6px; color: #52616c; font-size: 11px; font-weight: 600; } input, select { height: 39px; border: 1px solid #cfd8dd; border-radius: 7px; padding: 0 11px; background: #fff; color: var(--ink); outline: none; min-width: 150px; }
input:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,87,184,.1); }.filter-bar label:last-of-type { flex: 1; }.filter-bar input { width: 100%; }
.calendar-wrap { overflow: auto; }.calendar-legend { padding: 13px 20px; border-top: 1px solid var(--line); display: flex; gap: 20px; color: var(--muted); font-size: 11px; }
.calendar-legend span { display: flex; align-items: center; gap: 6px; }.dot { width: 8px; height: 8px; border-radius: 50%; }.engineering { background: #006ab6; }.technology { background: #7a55c5; }.management { background: #008f7a; }.conflict { background: var(--danger); }
.week-grid { min-width: 840px; display: grid; grid-template-columns: 62px repeat(7, minmax(105px, 1fr)); position: relative; }
.week-head { position: sticky; top: 0; z-index: 4; min-height: 57px; padding: 11px 6px; text-align: center; background: #fff; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; text-transform: uppercase; }
.week-head strong { display: block; margin-top: 2px; font: 600 18px Space Grotesk; color: var(--ink); }.week-head.today strong { color: #fff; background: var(--blue); width: 29px; line-height: 29px; border-radius: 50%; margin: 2px auto 0; }
.time-label { height: 60px; padding: 0 9px; transform: translateY(-7px); color: #89959d; text-align: right; font-size: 10px; }.time-cell { height: 60px; border-right: 1px solid var(--line); border-top: 1px solid #edf0f2; position: relative; }
.week-column { position: relative; min-height: 960px; border-right: 1px solid var(--line); background: repeating-linear-gradient(to bottom, transparent 0, transparent 59px, #edf0f2 59px, #edf0f2 60px); }
.week-body-time { min-height: 960px; padding-top: 0; }.week-event { position: absolute; left: 4px; right: auto; width: calc(100% - 8px); z-index: 2; border-left: 3px solid; border-radius: 5px; padding: 6px 7px; overflow: hidden; cursor: grab; font-size: 10px; transition: transform .15s, box-shadow .15s, opacity .15s; }
.week-event:hover { transform: translateX(2px); box-shadow: 0 5px 15px rgba(7,28,44,.17); z-index: 3; }.week-event strong { display: block; font-size: 11px; }.week-event span { display: block; opacity: .77; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }.week-event.engineering { color: #004c84; background: #ddecf7; border-color: #006ab6; }.week-event.technology { color: #53358e; background: #ece5fa; border-color: #7a55c5; }.week-event.management { color: #006c5d; background: #dff3ee; border-color: #008f7a; }.week-event.has-conflict { box-shadow: inset 0 0 0 2px var(--danger); }.week-event.has-conflict::after { content: "!"; position: absolute; right: 5px; top: 4px; width: 15px; line-height: 15px; text-align: center; color: #fff; background: var(--danger); border-radius: 50%; font-weight: 700; }
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(115px,1fr)); min-width: 805px; }.month-weekday { padding: 11px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }.month-day { min-height: 125px; padding: 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .15s, box-shadow .15s; }.month-day.outside { background: #fafbfb; color: #b3bcc2; }.month-day.today .day-number { background: var(--blue); color: #fff; }.day-number { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; font-weight: 600; font-size: 11px; }.month-event { margin-top: 4px; padding: 4px 5px; border-radius: 4px; color: #fff; font-size: 9px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: grab; }.month-event.engineering { background:#006ab6 }.month-event.technology { background:#7a55c5 }.month-event.management { background:#008f7a }.month-event.has-conflict { outline: 2px solid var(--danger); }
.week-event:active,.month-event:active { cursor: grabbing; }.week-event.dragging,.month-event.dragging { opacity: .3; }.week-column.drop-target { background-color: rgba(0,167,207,.08); box-shadow: inset 0 0 0 2px var(--cyan); }.month-day.drop-target { background: #e8f7fa; box-shadow: inset 0 0 0 2px var(--cyan); }
.day-view { min-width: 650px; display: grid; grid-template-columns: 75px 1fr; }.day-view .week-column { min-height: 960px; }.day-view .week-event { right: auto; }.day-view-head { grid-column: 1/-1; padding: 15px 20px; border-bottom: 1px solid var(--line); font-weight: 600; text-transform: capitalize; }
.section-heading { margin-bottom: 20px; }.section-heading h2 { margin: 0; font: 600 23px Space Grotesk; }.section-heading p:last-child { margin: 5px 0 0; color: var(--muted); }
.entity-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }.entity-tabs button { border-radius: 0; padding: 11px 18px; }.entity-tabs button.active { color: var(--blue); box-shadow: inset 0 -2px var(--blue); }
.data-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(320px,.8fr); gap: 20px; }.data-list-card, .entity-form-card { padding: 20px; }.list-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 1px solid var(--line); }.list-header h3, .entity-form-card h3 { margin: 0; font: 600 18px Space Grotesk; }.list-header span { color: var(--muted); font-size: 11px; }.entity-list { max-height: 560px; overflow: auto; }.entity-row { display: flex; align-items: center; gap: 12px; padding: 14px 5px; border-bottom: 1px solid #edf0f2; }.entity-symbol { width: 35px; height: 35px; border-radius: 8px; background: #e8f2f7; color: var(--blue); display: grid; place-items: center; font-weight: 700; }.entity-row div:nth-child(2) { display: grid; flex: 1; }.entity-row span { color: var(--muted); font-size: 11px; }.mini-btn { border: 0; background: transparent; color: var(--muted); font-size: 16px; }.mini-btn:hover { color: var(--danger); }.entity-form-card { height: fit-content; }.entity-form-card > div:first-child { margin-bottom: 18px; }.entity-form-card #entityFields { display: grid; gap: 14px; }.entity-form-card input, .entity-form-card select { width: 100%; }.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(7,28,44,.42); opacity: 0; visibility: hidden; transition: .2s; z-index: 40; }.drawer-backdrop.open { opacity: 1; visibility: visible; }.drawer { position: fixed; z-index: 50; top: 0; right: 0; bottom: 0; width: min(520px,100%); background: #fff; transform: translateX(105%); transition: transform .25s; box-shadow: -15px 0 40px rgba(0,0,0,.15); overflow-y: auto; }.drawer.open { transform: none; }.drawer-header { padding: 24px 28px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }.drawer-header h2 { margin: 0; font: 600 21px Space Grotesk; }.drawer form { padding: 24px 28px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.form-grid .full { grid-column: 1/-1; }.form-grid input, .form-grid select { width: 100%; }.drawer-actions { display: flex; gap: 9px; margin-top: 25px; }.spacer { flex: 1; }.validation-result { border-radius: 8px; margin-top: 17px; padding: 12px; background: #fff3f3; border: 1px solid #f1c5c5; color: #9d2929; font-size: 12px; }.validation-result.ok { background:#eaf7f2; color:#176e52; border-color:#b8e2d2 }.validation-result ul { margin: 6px 0 0; padding-left: 18px; }.hidden { display: none !important; }
.conflicts-drawer { width: min(460px,100%); }.drawer-intro { padding: 0 28px; color: var(--muted); }.conflicts-list { padding: 10px 28px 28px; display: grid; gap: 10px; }.conflict-card { border: 1px solid #efcaca; border-left: 3px solid var(--danger); background: #fffafa; border-radius: 8px; padding: 13px; cursor: pointer; }.conflict-card strong { display:block; margin-bottom: 4px; }.conflict-card span { color: var(--muted); font-size: 11px; }.empty-state { padding: 45px 15px; text-align: center; color: var(--muted); }.empty-state b { display:block; color:var(--ink); margin-bottom:4px }.toast-container { position: fixed; z-index: 80; right: 20px; bottom: 20px; display: grid; gap: 8px; }.toast { color: #fff; background: var(--navy); box-shadow: var(--shadow); padding: 12px 17px; border-radius: 8px; animation: toast-in .2s ease-out; }.toast.error { background: #a72d2d; } @keyframes toast-in { from { transform:translateY(8px); opacity:0 } }
.mobile-menu { display: none; }
@media (max-width: 1050px) { .stats-grid { grid-template-columns: repeat(2,1fr); }.filter-bar { flex-wrap: wrap; }.filter-bar label { flex: 1; }.data-layout { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .app-shell { display:block }.sidebar { position:fixed; left:0; transform:translateX(-105%); transition:.2s; width:254px }.sidebar.open { transform:none }.mobile-menu { display:block }.topbar { height:76px; padding:0 16px }.topbar h1 { font-size:18px }.topbar .eyebrow { display:none }.page { padding:18px 12px 35px }.stats-grid { grid-template-columns:1fr 1fr; gap:8px }.stat-card { padding:12px }.calendar-toolbar { align-items:flex-start; flex-direction:column }.filter-bar { display:grid; grid-template-columns:1fr 1fr }.filter-bar label { min-width:0 }.filter-bar select,.filter-bar input { min-width:0 }.clear-filter { display:none }.date-controls h2 { font-size:15px }.calendar-legend { flex-wrap:wrap }.top-actions .icon-btn { display:none }.btn { padding:0 11px }.data-layout { display:block }.entity-form-card { margin-top:14px }.list-header { gap:10px }.list-header input { min-width:100px; width:45% } }