/* CampusOne UI Foundation V2 — interaction, calendar and legacy-page consistency layer. */

/* 1. Sidebar must always be recoverable. */
.co-desktop-sidebar-toggle { display: inline-grid; flex: 0 0 auto; }
.co-app-shell.co-sidebar-collapsed .co-sidebar-collapse { display: inline-grid !important; }
.co-app-shell.co-sidebar-collapsed .co-sidebar-brand { padding-inline: 10px 8px; }
.co-app-shell.co-sidebar-collapsed .co-brand { min-width: 34px; }
.co-app-shell.co-sidebar-collapsed .co-sidebar-collapse {
  position: absolute; right: -14px; top: 15px; z-index: 4;
  width: 28px; height: 28px; border-radius: 50% !important;
  background: #fff !important; color: var(--co-primary) !important;
  border: 1px solid var(--co-border) !important; box-shadow: 0 3px 12px rgba(15,23,42,.12);
}
.co-sidebar-brand { position: relative; }
.co-app-shell.co-sidebar-collapsed .co-sidebar-collapse .co-icon { transform: rotate(0deg); }
.co-app-shell:not(.co-sidebar-collapsed) .co-sidebar-collapse .co-icon { transform: rotate(180deg); }
.co-app-shell.co-sidebar-collapsed .co-side-nav a { position: relative; }
.co-app-shell.co-sidebar-collapsed .co-side-nav a:hover::after {
  content: attr(title); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  padding: 6px 8px; border-radius: 5px; background: #162229; color: #fff; font-size: 10px;
  white-space: nowrap; box-shadow: 0 6px 16px rgba(0,0,0,.16); pointer-events: none; z-index: 20;
}

/* 2. ManageBac-style main month calendar. */
.co-calendar-panel { border: 1px solid var(--co-border); border-radius: var(--co-radius); background: #fff; overflow: hidden; margin-bottom: 10px; }
.co-calendar-toolbar {
  min-height: 48px; display: grid; grid-template-columns: 36px minmax(0,1fr) 36px; align-items: center;
  gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--co-border-soft); background: #fbfcfc;
}
.co-calendar-toolbar h2 { margin: 0; text-align: center; font-size: 12px; color: var(--co-heading); font-weight: 780; letter-spacing: -.01em; }
.co-calendar-nav-btn {
  width: 32px; height: 32px; display: inline-grid; place-items: center; border: 1px solid var(--co-border);
  border-radius: 6px; background: #fff; color: var(--co-ink); cursor: pointer;
}
.co-calendar-nav-btn:hover:not(:disabled) { border-color: #bdccc5; color: var(--co-primary); background: var(--co-primary-faint); }
.co-calendar-nav-btn:disabled { opacity: .3; cursor: default; }
.co-calendar-nav-btn .co-icon { width: 14px; height: 14px; }
.co-calendar-nav-btn.prev .co-icon { transform: rotate(180deg); }
.co-calendar-layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(250px,.62fr); min-height: 390px; }
.co-month-wrap { overflow-x: auto; background: #fff; }
.co-month-grid { min-width: 650px; display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.co-weekday {
  min-height: 30px; display: flex; align-items: center; padding: 0 8px; border-right: 1px solid var(--co-border-soft);
  border-bottom: 1px solid var(--co-border-soft); background: #f8faf9; color: var(--co-muted); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
}
.co-weekday:nth-child(7n) { border-right: 0; }
.co-calendar-day {
  min-height: 92px; padding: 6px; border-right: 1px solid var(--co-border-soft); border-bottom: 1px solid var(--co-border-soft);
  background: #fff; overflow: hidden;
}
.co-calendar-day:nth-child(7n) { border-right: 0; }
.co-calendar-day.is-outside { background: #fafbfb; }
.co-calendar-day.is-outside .co-day-number { color: #b4bec3; }
.co-calendar-day.is-today { background: #f4fbf7; box-shadow: inset 0 0 0 1px #b9dfcd; }
.co-day-number {
  width: 23px; height: 23px; display: inline-grid; place-items: center; border-radius: 50%;
  color: var(--co-heading); font-size: 9px; font-weight: 760;
}
.co-calendar-day.is-today .co-day-number { background: var(--co-primary); color: #fff; }
.co-day-events { display: grid; gap: 3px; margin-top: 3px; }
.co-calendar-event {
  display: block; min-width: 0; padding: 3px 5px; border-left: 3px solid #aebbc1; border-radius: 3px;
  background: #f4f6f7; color: #3d4a51; text-decoration: none; font-size: 8px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.co-calendar-event:hover { filter: brightness(.985); }
.co-calendar-event strong { font-weight: 800; }
.co-calendar-event.assignment { border-left-color: #d8942f; background: #fff7e8; color: #745014; }
.co-calendar-event.quiz { border-left-color: #7b68b7; background: #f5f2fb; color: #51427f; }
.co-calendar-event.timetable { border-left-color: #4381a7; background: #eef7fb; color: #285c79; }
.co-calendar-event.general { border-left-color: var(--co-primary); background: var(--co-primary-faint); color: #275c49; }
.co-event-more { padding-left: 5px; color: var(--co-muted); font-size: 8px; font-weight: 700; }
.co-deadline-rail { border-left: 1px solid var(--co-border-soft); background: #fbfcfc; }
.co-deadline-head { padding: 12px; border-bottom: 1px solid var(--co-border-soft); }
.co-deadline-head strong { display: block; color: var(--co-heading); font-size: 10px; }
.co-deadline-head small { display: block; margin-top: 2px; color: var(--co-muted); font-size: 8px; }
.co-deadline-list { display: grid; max-height: 380px; overflow-y: auto; }
.co-deadline-item {
  min-height: 58px; display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 8px; align-items: center;
  padding: 8px 10px; border-bottom: 1px solid var(--co-border-soft); color: inherit; text-decoration: none; background: #fff;
}
.co-deadline-item:hover { background: #fbfdfc; }
.co-deadline-date { width: 34px; height: 38px; display: grid; place-items: center; align-content: center; border: 1px solid #d7e3de; border-radius: 6px; background: #f7fbf9; }
.co-deadline-date strong { font-size: 13px; line-height: 1; color: var(--co-heading); }
.co-deadline-date span { margin-top: 2px; color: var(--co-primary); font-size: 7px; font-weight: 850; text-transform: uppercase; }
.co-deadline-copy { min-width: 0; }
.co-deadline-copy strong { display: block; color: var(--co-heading); font-size: 9px; line-height: 1.25; }
.co-deadline-copy small { display: block; margin-top: 2px; color: var(--co-muted); font-size: 8px; }
.co-calendar-legend { display: flex; flex-wrap: wrap; gap: 10px; padding: 7px 10px; border-top: 1px solid var(--co-border-soft); background: #fbfcfc; }
.co-calendar-legend span { display: inline-flex; align-items: center; gap: 5px; color: var(--co-muted); font-size: 8px; }
.co-calendar-legend i { width: 7px; height: 7px; border-radius: 2px; background: #aebbc1; }
.co-calendar-legend i.assignment { background:#d8942f; } .co-calendar-legend i.quiz { background:#7b68b7; }
.co-calendar-legend i.timetable { background:#4381a7; } .co-calendar-legend i.general { background:var(--co-primary); }

.co-dashboard-lower { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr); gap:10px; align-items:start; }
.co-workload-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.co-workload-card { padding:12px; border:1px solid var(--co-border-soft); border-radius:6px; background:#fbfcfc; text-decoration:none; }
.co-workload-card span { display:block; color:var(--co-muted); font-size:8px; }
.co-workload-card strong { display:block; margin-top:4px; color:var(--co-heading); font-size:22px; }
.co-workload-card small { display:block; margin-top:2px; color:var(--co-primary); font-size:8px; font-weight:750; }

/* 3. Legacy module normalization. Makes old ERP/SIS screens fit the same shell. */
body.co-legacy-page .co-main { padding: 0 18px 36px; }
body.co-legacy-page .co-main > :where(.hero, form, .grid, .cards, .panel, .page-header, table) { width: min(1320px,100%); margin-left:auto; margin-right:auto; }
body.co-legacy-page .co-main > .hero {
  display:flex; align-items:flex-end; justify-content:space-between; gap:18px; padding:24px 0 14px;
  border-bottom:1px solid var(--co-border-soft); margin-bottom:14px;
}
body.co-legacy-page .hero h1 { margin:0; color:var(--co-heading); font-size:clamp(22px,2.4vw,30px); line-height:1.12; letter-spacing:-.035em; }
body.co-legacy-page .hero .eyebrow, body.co-legacy-page .eyebrow { margin:0 0 4px; color:var(--co-primary); font-size:9px; font-weight:850; letter-spacing:.11em; text-transform:uppercase; }
body.co-legacy-page .muted { color:var(--co-muted) !important; }
body.co-legacy-page .hero .muted { margin:6px 0 0; font-size:11px; }
body.co-legacy-page .button, body.co-legacy-page button:not(.co-icon-btn), body.co-legacy-page input[type="submit"] {
  min-height:34px; display:inline-flex; align-items:center; justify-content:center; padding:0 12px; border:1px solid var(--co-border);
  border-radius:6px; background:#fff; color:var(--co-ink); font:inherit; font-size:10px; font-weight:730; text-decoration:none; cursor:pointer;
}
body.co-legacy-page .button:hover, body.co-legacy-page button:not(.co-icon-btn):hover { border-color:#b9cbc3; background:var(--co-primary-faint); color:var(--co-primary); }
body.co-legacy-page .button.primary, body.co-legacy-page .primary.button { background:var(--co-primary); border-color:var(--co-primary); color:#fff; }
body.co-legacy-page .co-main > form {
  display:flex; align-items:end; flex-wrap:wrap; gap:8px; padding:10px 12px; margin-top:0 !important; margin-bottom:12px !important;
  border:1px solid var(--co-border); border-radius:var(--co-radius); background:#fff;
}
body.co-legacy-page form label { display:block; margin:0; color:var(--co-heading); font-size:9px; font-weight:750; }
body.co-legacy-page select, body.co-legacy-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), body.co-legacy-page textarea {
  min-height:34px; padding:6px 9px; border:1px solid #cbd7dc; border-radius:6px; background:#fff; color:var(--co-ink); font:inherit; font-size:10px; outline:none;
}
body.co-legacy-page select:focus, body.co-legacy-page input:focus, body.co-legacy-page textarea:focus { border-color:#6fb497; box-shadow:0 0 0 3px rgba(24,124,89,.09); }
body.co-legacy-page .grid.cards { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:10px !important; margin-bottom:10px !important; }
body.co-legacy-page .grid.cards .card, body.co-legacy-page .card {
  min-height:86px; display:flex; flex-direction:column; justify-content:center; gap:4px; padding:13px 15px !important;
  border:1px solid var(--co-border) !important; border-radius:var(--co-radius) !important; background:#fff !important; box-shadow:none !important;
}
body.co-legacy-page .card span { color:var(--co-muted); font-size:9px; }
body.co-legacy-page .card strong { color:var(--co-heading); font-size:24px; line-height:1.1; letter-spacing:-.03em; }
body.co-legacy-page .panel {
  margin-top:10px !important; padding:0 !important; border:1px solid var(--co-border) !important; border-radius:var(--co-radius) !important;
  background:#fff !important; overflow:hidden; box-shadow:none !important;
}
body.co-legacy-page .panel-title { min-height:45px; display:flex; align-items:center; padding:10px 14px; border-bottom:1px solid var(--co-border-soft); background:#fbfcfc; }
body.co-legacy-page .panel-title h2 { margin:0; color:var(--co-heading); font-size:12px; }
body.co-legacy-page .panel > p { margin:0; padding:18px 14px; font-size:10px; }
body.co-legacy-page table { width:100%; border-collapse:collapse; font-size:10px; }
body.co-legacy-page th { padding:9px 10px; border-bottom:1px solid var(--co-border); background:#f7f9f8; color:var(--co-muted); text-align:left; font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
body.co-legacy-page td { padding:10px; border-bottom:1px solid var(--co-border-soft); color:var(--co-ink); vertical-align:top; }
body.co-legacy-page tbody tr:hover { background:#fbfdfc; }

/* V2-native ERP helpers used by directly upgraded module pages. */
.co-module-tabs { display:flex; flex-wrap:wrap; gap:6px; }
.co-filter-bar { display:flex; align-items:end; flex-wrap:wrap; gap:8px; padding:10px 12px; margin-bottom:10px; border:1px solid var(--co-border); border-radius:var(--co-radius); background:#fff; }
.co-field { display:grid; gap:4px; }
.co-field label { color:var(--co-muted); font-size:8px; font-weight:780; text-transform:uppercase; letter-spacing:.04em; }
.co-field select { min-width:210px; min-height:34px; padding:6px 9px; border:1px solid #cbd7dc; border-radius:6px; background:#fff; color:var(--co-ink); }
.co-kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:10px; }
.co-kpi-card { min-height:90px; display:flex; flex-direction:column; justify-content:center; gap:4px; padding:13px 15px; border:1px solid var(--co-border); border-radius:var(--co-radius); background:#fff; }
.co-kpi-card span { color:var(--co-muted); font-size:9px; } .co-kpi-card strong { color:var(--co-heading); font-size:24px; letter-spacing:-.03em; }
.co-table-wrap { overflow-x:auto; }
.co-table { width:100%; border-collapse:collapse; font-size:10px; }
.co-table th { padding:9px 10px; border-bottom:1px solid var(--co-border); background:#f7f9f8; color:var(--co-muted); text-align:left; font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.co-table td { padding:10px; border-bottom:1px solid var(--co-border-soft); vertical-align:top; }
.co-table tbody tr:hover { background:#fbfdfc; }

@media (max-width: 900px) {
  .co-desktop-sidebar-toggle { display:none; }
  .co-app-shell.co-sidebar-collapsed .co-sidebar-collapse { display:none !important; }
  .co-calendar-layout, .co-dashboard-lower { grid-template-columns:1fr; }
  .co-deadline-rail { border-left:0; border-top:1px solid var(--co-border-soft); }
  .co-calendar-day { min-height:78px; }
  body.co-legacy-page .co-main > .hero { align-items:flex-start; flex-direction:column; }
  body.co-legacy-page .grid.cards, .co-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 560px) {
  body.co-legacy-page .grid.cards, .co-kpi-grid { grid-template-columns:1fr !important; }
  .co-workload-grid { grid-template-columns:1fr; }
}