:root {
  --bg: #f2f5f4;
  --panel: #ffffff;
  --panel-strong: #edf4f2;
  --ink: #14231f;
  --muted: #667771;
  --line: #d9e3e0;
  --brand: #0b766d;
  --brand-strong: #064f49;
  --brand-soft: #e4f4f1;
  --sidebar: #073f3b;
  --shadow: 0 14px 38px rgba(13, 52, 47, .09);
  --shadow-hover: 0 18px 44px rgba(13, 52, 47, .15);
  --radius: 14px;
}

html, body { background: #f2f5f4; }
body {
  background-image: radial-gradient(circle at 14% 0%, rgba(11,118,109,.09), transparent 28rem), linear-gradient(180deg,#f8faf9 0,#f1f5f4 100%);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

.brand { gap: 11px; }
.brand-mark.enterprise-logo-ready {
  width: 52px;
  height: 52px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.14);
}
.brand-mark.enterprise-logo-ready img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.38); }

.btn {
  border-radius: 10px;
  min-height: 44px;
  padding: 10px 16px;
  box-shadow: 0 5px 13px rgba(11,118,109,.13);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(11,118,109,.18); }
.btn.secondary { box-shadow: none; }
input, textarea, select {
  min-height: 46px;
  border-radius: 10px;
  border-color: #d3dfdc;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 4px rgba(11,118,109,.13); }

.department-entry {
  display: grid;
  grid-template-columns: minmax(310px, 35%) minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  gap: 0 34px;
  min-height: 100vh;
  padding: 22px clamp(20px, 3vw, 48px) 34px;
  background: #f7f9f8;
}
.department-entry-head {
  grid-column: 1 / -1;
  margin: 0 0 18px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 9px 28px rgba(14,50,45,.07);
  backdrop-filter: blur(14px);
}
.department-entry-head .brand { margin: 0; }
.department-entry-head .brand strong { color: var(--ink); }
.department-entry-user { padding-right: 6px; }
.enterprise-planning-visual {
  position: relative;
  grid-column: 1;
  grid-row: 2 / span 3;
  min-height: 720px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(3,36,32,.02) 28%, rgba(3,36,32,.84) 100%), url('/assets/planning-hero-v22.png') center / cover;
  box-shadow: 0 24px 70px rgba(5,48,43,.22);
}
.enterprise-visual-brand {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 150px;
  display: grid;
  grid-template-columns: 64px minmax(0,1fr);
  align-items: center;
  gap: 14px;
  color: #fff;
}
.enterprise-visual-brand img { width: 64px; height: 64px; padding: 5px; object-fit: contain; border-radius: 50%; background: #fff; }
.enterprise-visual-brand strong { display: block; font-size: 22px; line-height: 1.1; }
.enterprise-visual-brand span { display: block; margin-top: 5px; color: rgba(255,255,255,.75); font-size: 13px; }
.enterprise-system-status {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 13px;
  color: #fff;
  background: rgba(3,42,38,.75);
  backdrop-filter: blur(12px);
}
.enterprise-system-status > span { display: block; color: rgba(255,255,255,.68); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.enterprise-system-status > strong { display: block; margin-top: 4px; font-size: 14px; }
.enterprise-system-status > strong i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #4ed187; box-shadow: 0 0 0 4px rgba(78,209,135,.14); }
.enterprise-system-status > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 12px; }
.enterprise-system-status small { padding: 8px 5px; border-radius: 8px; text-align: center; color: rgba(255,255,255,.67); background: rgba(255,255,255,.07); }
.enterprise-system-status b { color: #fff; }

.department-entry-hero,
.department-grid,
.department-entry > .portal-note { grid-column: 2; }
.department-entry-hero { max-width: none; margin: 18px 0 22px; }
.enterprise-kicker { margin-bottom: 9px; color: var(--brand); font-size: 11px; font-weight: 900; letter-spacing: .15em; }
.department-entry-hero h1 { max-width: 850px; margin: 0 0 11px; font-size: clamp(38px,4.4vw,66px); letter-spacing: -.045em; }
.department-entry-hero p { max-width: 760px; font-size: 17px; }
.department-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 0 0 14px; }
.department-card {
  position: relative;
  grid-template-columns: 52px minmax(0,1fr) auto;
  grid-template-rows: auto auto 1fr;
  align-items: center;
  gap: 3px 14px;
  min-height: 136px;
  padding: 18px;
  border-color: #dce5e2;
  border-radius: var(--radius);
  box-shadow: 0 7px 23px rgba(15,55,49,.06);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.department-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.department-icon { grid-row: 1 / span 3; width: 52px; height: 52px; border-radius: 12px; background: linear-gradient(145deg,#096c64,#0b8a7e); color: #fff; }
.department-card small, .department-card strong, .department-card p { grid-column: 2; }
.department-card small { display: none; }
.department-card strong { font-size: 20px; }
.department-card p { font-size: 13px; line-height: 1.4; }
.department-card::after { content: '›'; grid-column: 3; grid-row: 1 / span 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--brand-strong); background: var(--brand-soft); font-size: 25px; }
.portal-note { border-radius: var(--radius); box-shadow: none; }

.app-shell { grid-template-columns: 236px minmax(0,1fr); background: #f2f5f4; }
.sidebar {
  width: 236px;
  padding: 22px 16px;
  background: linear-gradient(180deg,#064b45 0%,#063c38 62%,#052e2b 100%);
  box-shadow: 12px 0 36px rgba(6,50,46,.12);
}
.sidebar .brand { padding: 0 5px 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.sidebar .brand strong { letter-spacing: .02em; }
.nav { gap: 5px; }
.nav button { min-height: 44px; border-radius: 10px; color: rgba(255,255,255,.72); transition: .18s ease; }
.nav button:hover { transform: translateX(2px); background: rgba(255,255,255,.09); }
.nav button.active { color: #fff; background: linear-gradient(90deg,rgba(29,176,161,.32),rgba(255,255,255,.10)); box-shadow: inset 3px 0 #42cfbf; }
.profile { border-radius: 12px; background: rgba(255,255,255,.08); }

.content { max-width: 1700px; width: 100%; margin: 0 auto; padding: 26px clamp(20px,3vw,48px) 56px; }
.breadcrumbs { margin-bottom: 16px; color: #7a8985; }
.topbar { align-items: center; margin-bottom: 20px; }
.topbar h1 { margin-bottom: 7px; font-size: clamp(32px,3.4vw,52px); letter-spacing: -.035em; }
.topbar .muted { max-width: 760px; }
.global-search input { min-height: 48px; border: 0; box-shadow: var(--shadow); }

.panel, .stat, .work-card, .today-work-card, .module-card, .review-card {
  border-color: #dbe4e1;
  border-radius: var(--radius);
  box-shadow: 0 8px 26px rgba(15,55,49,.06);
}
.panel { padding: 20px; }
.panel-head { gap: 14px; }
.stat { min-height: 112px; padding: 17px; background: linear-gradient(145deg,#fff,#f8fbfa); }
.stat:hover { border-color: rgba(11,118,109,.42); box-shadow: var(--shadow); }
.stat strong { font-size: 30px; }
.module-card { min-height: 170px; }
.module-card strong { color: var(--brand-strong); }
.notice { border-radius: 10px; }
.pill { border-radius: 999px; }

.table-wrap { border: 1px solid var(--line); border-radius: 12px; background: #fff; }
table { border-collapse: separate; border-spacing: 0; }
thead th { padding: 13px 12px; color: #536560; background: #f2f7f5; }
tbody td { padding: 13px 12px; }
tbody tr { transition: background .15s ease; }
tbody tr:hover { background: #f6faf9; }

.modal-backdrop { background: rgba(5,31,28,.60); backdrop-filter: blur(5px); }
.modal { border: 1px solid rgba(255,255,255,.6); border-radius: 18px; box-shadow: 0 30px 100px rgba(2,35,31,.32); }
.modal header { border-bottom: 1px solid var(--line); }

.login-page { grid-template-columns: minmax(0,1.08fr) minmax(420px,.92fr); background: #f7f9f8; }
.login-panel { grid-column: 2; grid-row: 1; padding: clamp(34px,6vw,92px); }
.login-visual {
  grid-column: 1;
  grid-row: 1;
  background: linear-gradient(180deg,rgba(3,38,34,.02),rgba(3,38,34,.82)), url('/assets/planning-hero-v22.png') center/cover;
}
.login-visual h2 { font-size: clamp(40px,5vw,72px); }
.login-visual p { font-size: 18px; }
.login-panel .form { padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: #f7faf9; }

.shift-calendar-panel { background: #fff; }
.shift-day { transition: transform .15s ease, box-shadow .15s ease; }
.shift-day:not(.empty):hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.agenda-shift-availability {
  grid-column: 1 / -1;
  margin: 4px 0 8px;
  padding: 11px 13px;
  border: 1px solid #cfdcd8;
  border-radius: 11px;
  background: #f3f7f6;
  color: #52645f;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
}
.agenda-shift-availability.available { border-color: #9bd4b5; background: #eaf8f0; color: #12643c; }
.agenda-shift-availability.blocked { border-color: #eea69e; background: #fff0ee; color: #8b211b; }
.agenda-shift-availability.checking { border-color: #e7c47d; background: #fff8e8; color: #76520a; }
.agenda-shift-availability.blocked::before { content: "⚠ "; }
.agenda-shift-availability.available::before { content: "✓ "; }
.month-grid .day-column.agenda-today-column {
  border-color: #0b8176;
  box-shadow: 0 0 0 3px rgba(11,129,118,.13);
  scroll-margin-block: 150px;
}
.month-grid .day-column.agenda-today-column .day-head strong { color: #08756b; }

@media (max-width: 1050px) {
  .department-entry { grid-template-columns: minmax(250px,31%) minmax(0,1fr); gap: 0 22px; }
  .department-grid { grid-template-columns: 1fr; }
  .enterprise-planning-visual { min-height: 790px; }
}

@media (max-width: 820px) {
  .department-entry { display: block; padding: 12px 12px calc(92px + env(safe-area-inset-bottom)); }
  .department-entry-head { position: sticky; z-index: 30; top: env(safe-area-inset-top); padding: 8px 10px; margin-bottom: 14px; }
  .department-entry-head .brand span { display: none; }
  .enterprise-planning-visual {
    min-height: 220px;
    margin-bottom: 18px;
    border-radius: 15px;
    background-position: center 62%;
  }
  .enterprise-visual-brand { left: 16px; bottom: 75px; grid-template-columns: 46px 1fr; }
  .enterprise-visual-brand img { width: 46px; height: 46px; }
  .enterprise-visual-brand strong { font-size: 18px; }
  .enterprise-visual-brand span { display: none; }
  .enterprise-system-status { left: 12px; right: 12px; bottom: 12px; padding: 10px 12px; }
  .enterprise-system-status > div, .enterprise-system-status > span { display: none; }
  .department-entry-hero { margin: 8px 2px 18px; }
  .department-entry-hero h1 { font-size: 34px; }
  .department-entry-hero p { font-size: 15px; }
  .department-grid { gap: 9px; }
  .department-card { grid-template-columns: 44px minmax(0,1fr) 32px; min-height: 92px; padding: 13px; }
  .department-icon { width: 44px; height: 44px; }
  .department-card strong { font-size: 17px; }
  .department-card p { font-size: 12px; }

  .app-shell { display: block; }
  .content { padding: 14px 12px calc(96px + env(safe-area-inset-bottom)); }
  .topbar h1 { font-size: 29px; }
  .panel { padding: 14px; }
  .modal { border-radius: 18px 18px 0 0; }
  .mobile-nav { border-top: 1px solid rgba(7,79,73,.15); background: rgba(255,255,255,.94); box-shadow: 0 -9px 28px rgba(5,48,43,.13); backdrop-filter: blur(16px); }
  .mobile-nav button { color: #657873; }
  .mobile-nav button.active { color: var(--brand-strong); background: var(--brand-soft); }

  .login-page { display: block; min-height: 100dvh; padding: 0; }
  .login-visual { display: none; }
  .login-panel { min-height: 100dvh; padding: 24px 18px 38px; }
}

@media (max-width: 430px) {
  .enterprise-planning-visual { min-height: 190px; }
  .department-entry-hero h1 { font-size: 30px; }
  .department-card p { display: none; }
  .department-card { min-height: 74px; }
  .stats { grid-auto-columns: minmax(138px,72vw); }
}