/* ==========================================================
 * ワスケ | FLOWER PHARMACY  デザインシステム
 *   白を基調に、ロゴの4色 (赤・青・黄・紫) は帯・短い線・グラフ・点にだけ使う。
 *   中心色はロゴの濃い紫 (#4a3f95)。影は使わず 1px の罫線で区切る。角丸は最大 2px。
 * ========================================================== */

:root {
  /* ロゴから取った色 */
  --fp-red:        #e33a62;
  --fp-pink:       #f2a9b8;
  --fp-blue:       #0a78bf;
  --fp-sky:        #22aee4;
  --fp-purple:     #4a3f95;   /* メイン */
  --fp-purple-2:   #3b3278;   /* hover */
  --fp-lilac:      #a98cc4;
  --fp-yellow:     #f2a300;
  --fp-yellow-2:   #fbd03f;
  --fp-leave:      #7b68b5;   /* カレンダー: 有給 */

  --fp-bg:         #faf9f7;
  --fp-card:       #ffffff;
  --fp-line:       #e4e2ea;
  --fp-line-2:     #efedf3;
  --fp-text:       #2f2d33;
  --fp-text-2:     #5c5966;
  --fp-text-3:     #97939f;
  --fp-selected:   #e9e6f4;
  --fp-thead:      #f6f5fa;
  --fp-today-bg:   #f7f6fc;

  --fp-radius:     2px;
  --fp-sidebar-w:  232px;

  --font-sans:  'IBM Plex Sans JP', 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo', sans-serif;
  --font-mono:  'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --font-display: 'Cormorant Garamond', 'Noto Serif JP', Georgia, serif;

  /* 旧トークンの互換 (既存ページが参照) */
  --brand-navy:       var(--fp-purple);
  --brand-navy-dark:  var(--fp-purple-2);
  --brand-navy-light: #5b4fa8;
  --brand-silver:     #cbd5e1;
  --brand-gold:       var(--fp-yellow);
  --brand-gold-light: var(--fp-yellow-2);
  --bg-cream:         var(--fp-bg);
  --text-base:        var(--fp-text);
  --text-muted:       var(--fp-text-2);
  --border-soft:      var(--fp-line);
}

html { font-family: var(--font-sans); }
body {
  background: var(--fp-bg) !important;
  color: var(--fp-text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.num, .tnum { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.serif { font-family: var(--font-serif); font-weight: 600; }
.display { font-family: var(--font-display); font-weight: 600; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #d6d3df; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: #bfbbcb; }

.fade-in { animation: fadeIn 0.18s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ===== トースト ===== */
.toast {
  position: fixed; top: 1rem; right: 1rem; z-index: 9999;
  padding: 0.6rem 0.9rem; max-width: 340px;
  background: #fff; color: var(--fp-text);
  border: 1px solid var(--fp-line); border-left-width: 3px; border-radius: var(--fp-radius);
  font-size: 13px; animation: slideIn 0.2s ease-out;
}
.toast.success { border-left-color: var(--fp-blue); }
.toast.error   { border-left-color: var(--fp-red); }
.toast.info    { border-left-color: var(--fp-purple); }
.toast.warning { border-left-color: var(--fp-yellow); }
.toast i { color: inherit; opacity: .8; }
@keyframes slideIn { from { transform: translateX(12px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ===== シェル ===== */
.app-shell { min-height: 100vh; display: flex; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-content { flex: 1; padding: 20px 24px 40px; width: 100%; max-width: 1480px; margin: 0 auto; }
.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.page-title { font-family: var(--font-serif); font-weight: 600; font-size: 20px; color: var(--fp-text); letter-spacing: .02em; }

/* 4色の帯 */
.petal-strip { display: flex; height: 3px; }
.petal-strip i { flex: 1; display: block; }
.petal-strip i:nth-child(1) { background: var(--fp-red); }
.petal-strip i:nth-child(2) { background: var(--fp-blue); }
.petal-strip i:nth-child(3) { background: var(--fp-yellow); }
.petal-strip i:nth-child(4) { background: var(--fp-purple); }

/* 上部バー */
.topbar {
  height: 48px; background: var(--fp-card); border-bottom: 1px solid var(--fp-line);
  display: flex; align-items: center; gap: 14px; padding: 0 20px;
}
.topbar-menu-btn { display: none; color: var(--fp-text-2); font-size: 16px; padding: 4px 6px; }
.topbar-brand { display: none; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; letter-spacing: .12em; color: var(--fp-text); font-size: 16px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fp-text-2); white-space: nowrap; overflow: hidden; }
.breadcrumb a { color: var(--fp-text-2); }
.breadcrumb a:hover { color: var(--fp-purple); }
.breadcrumb-sep { color: var(--fp-text-3); }
.breadcrumb-current { color: var(--fp-text); font-weight: 500; }
.topbar-user { margin-left: auto; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.topbar-user-name { font-size: 13px; color: var(--fp-text); }
.user-avatar {
  width: 26px; height: 26px; border-radius: 50%; background: var(--fp-purple); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0;
}
.role-badge {
  font-size: 11px; line-height: 1; padding: 4px 6px; border: 1px solid var(--fp-line); border-radius: var(--fp-radius);
  color: var(--fp-text-2); background: #fff; white-space: nowrap;
}
.role-badge-strong { border-color: var(--fp-purple); color: var(--fp-purple); background: var(--fp-selected); }

/* サイドバー */
.sidebar-nav {
  width: var(--fp-sidebar-w); flex-shrink: 0; background: var(--fp-card); border-right: 1px solid var(--fp-line);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.brand-header { display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 16px; border-bottom: 1px solid var(--fp-line-2); }
.brand-header:hover { background: var(--fp-bg); }
.brand-mark { width: 40px; height: 40px; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: .12em; color: var(--fp-text); }
.brand-sub { font-family: var(--font-display); font-size: 9.5px; letter-spacing: .18em; color: var(--fp-text-3); margin-top: 3px; }

.sidebar-menu { flex: 1; overflow-y: auto; padding: 8px 0 12px; }
.sidebar-group { padding: 4px 0; }
.sidebar-group + .sidebar-group { border-top: 1px solid var(--fp-line-2); margin-top: 4px; }
.sidebar-group-title { font-size: 10.5px; letter-spacing: .08em; color: var(--fp-text-3); padding: 10px 16px 4px; white-space: nowrap; }
.sidebar-link {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 7px 14px 7px 13px; border-left: 3px solid transparent;
  color: var(--fp-text-2); font-size: 13px; font-weight: 400; white-space: nowrap;
  transition: background .1s, color .1s;
}
.sidebar-link:hover { background: var(--fp-bg); color: var(--fp-text); }
.sidebar-link.active { background: var(--fp-selected); color: var(--fp-purple); border-left-color: var(--fp-purple); font-weight: 500; }
.sidebar-icon { width: 18px; text-align: center; font-size: 13px; color: var(--fp-text-3); flex-shrink: 0; }
.sidebar-link.active .sidebar-icon { color: var(--fp-purple); }
.sidebar-icon-img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

/* 「その他の◯◯」折りたたみ (低頻度メニュー) */
.sidebar-more-btn { color: var(--fp-text-3); font-size: 12.5px; cursor: pointer; background: none; border-top: 0; border-right: 0; border-bottom: 0; }
.sidebar-more-btn:hover { color: var(--fp-text); }
.sidebar-more-btn .sidebar-icon { font-size: 12px; }
.sidebar-more-count { margin-left: auto; font-family: var(--fp-font-mono); font-size: 10.5px; color: var(--fp-text-3); min-width: 14px; text-align: right; }
.sidebar-more-chev { font-size: 9px; color: var(--fp-text-3); margin-left: 6px; transition: transform .15s; }
.sidebar-more.open .sidebar-more-chev { transform: rotate(180deg); }
.sidebar-more-items { display: none; border-left: 1px solid var(--fp-line-2); margin-left: 21px; }
.sidebar-more.open .sidebar-more-items { display: block; }
.sidebar-more-items .sidebar-link { padding-left: 10px; font-size: 12.5px; border-left-width: 2px; margin-left: -1px; }
.sidebar-more-items .sidebar-link .sidebar-icon { font-size: 12px; width: 16px; }
.sidebar-more-items .sidebar-link.active { border-left-color: var(--fp-purple); }
/* たたんだ状態: 子項目はインラインで並べず、ボタンのみ (クリックでサイドバーを開く)。アクティブ項目を含むときはアイコンだけ表示 */
.sidebar-collapsed .sidebar-nav .sidebar-more-count, .sidebar-collapsed .sidebar-nav .sidebar-more-chev { display: none; }
.sidebar-collapsed .sidebar-nav .sidebar-more-items { margin-left: 0; border-left: 0; }
.sidebar-collapsed .sidebar-nav .sidebar-more-items .sidebar-link { padding-left: 0; margin-left: 0; border-left-width: 3px; }
.sidebar-collapsed .sidebar-nav .sidebar-more-items .sidebar-link:not(.active) { display: none; }
.sidebar-collapsed .sidebar-nav .sidebar-more .sidebar-more-items { display: block; }
.sidebar-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* 未処理件数バッジ: 四角。重要 (多い) ものだけ赤 */
.pending-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 5px; border-radius: var(--fp-radius);
  background: var(--fp-line-2); color: var(--fp-text-2); border: 1px solid var(--fp-line);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 500; line-height: 1; white-space: nowrap;
}
.pending-badge.alert { background: var(--fp-red); border-color: var(--fp-red); color: #fff; font-weight: 600; }
.pending-badge.hidden { display: none; }

.user-panel { border-top: 1px solid var(--fp-line); padding: 10px 12px 10px; }
.user-panel-row { display: flex; align-items: center; gap: 8px; }
.user-panel-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.user-panel .user-name { font-size: 13px; color: var(--fp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-panel .user-role { font-size: 11px; color: var(--fp-text-3); }
.user-panel .logout-btn { color: var(--fp-text-3); padding: 4px 6px; font-size: 13px; }
.user-panel .logout-btn:hover { color: var(--fp-red); }
.user-panel-foot { margin-top: 8px; font-size: 10.5px; color: var(--fp-text-3); display: flex; gap: 6px; white-space: nowrap; }
.user-panel-foot a { color: var(--fp-text-3); text-decoration: underline; text-underline-offset: 2px; }
.user-panel-foot a:hover { color: var(--fp-purple); }

/* ---- サイドバー 折りたたみ (PC) ---- */
.sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--fp-line); border-radius: var(--fp-radius); color: var(--fp-text-2); background: #fff; font-size: 13px; flex-shrink: 0; }
.sidebar-toggle:hover { background: var(--fp-bg); color: var(--fp-purple); border-color: #cfcbdb; }
.sidebar-collapse-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 14px 8px 16px; border-top: 1px solid var(--fp-line-2); color: var(--fp-text-3); font-size: 12px; white-space: nowrap; }
.sidebar-collapse-btn:hover { background: var(--fp-bg); color: var(--fp-purple); }
.sidebar-collapse-btn .sidebar-icon { transition: transform .15s; }
.sidebar-nav { transition: width .15s ease; }
.sidebar-collapsed .sidebar-nav { width: 56px; }
.sidebar-collapsed .brand-header { padding: 0 8px; justify-content: center; }
.sidebar-collapsed .brand-text, .sidebar-collapsed .sidebar-label, .sidebar-collapsed .sidebar-group-title,
.sidebar-collapsed .user-panel-text, .sidebar-collapsed .user-panel-foot { display: none; }
.sidebar-collapsed .brand-mark { width: 32px; height: 32px; }
.sidebar-collapsed .sidebar-link { justify-content: center; padding: 9px 0 9px 0; border-left-width: 3px; position: relative; }
.sidebar-collapsed .sidebar-link .sidebar-icon, .sidebar-collapsed .sidebar-link .sidebar-icon-img { margin-left: -3px; }
.sidebar-collapsed .sidebar-link .pending-badge { position: absolute; top: 2px; right: 4px; min-width: 14px; height: 14px; padding: 0 3px; font-size: 9px; }
.sidebar-collapsed .sidebar-group + .sidebar-group { margin-top: 2px; padding-top: 4px; }
/* ホバーでラベルをツールチップ表示 */
.sidebar-collapsed .sidebar-nav .sidebar-link:hover::after {
  content: attr(data-label); position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%);
  background: var(--fp-text); color: #fff; font-size: 12px; padding: 4px 8px; border-radius: var(--fp-radius); white-space: nowrap; z-index: 60; pointer-events: none;
}
.sidebar-collapsed .sidebar-collapse-btn { justify-content: center; padding: 10px 0; }
.sidebar-collapsed .sidebar-collapse-btn .sidebar-icon { transform: rotate(180deg); }
.sidebar-collapsed .user-panel { padding: 10px 0; }
.sidebar-collapsed .user-panel-row { flex-direction: column; gap: 6px; }
.sidebar-collapsed .user-panel .logout-btn { padding: 2px 4px; }
.sidebar-collapsed .sidebar-nav .brand-header, .sidebar-collapsed .sidebar-nav .user-avatar { cursor: pointer; }

/* モバイルメニュー */
.mobile-nav { display: none; background: var(--fp-card); border-bottom: 1px solid var(--fp-line); padding: 6px 0 10px; }
.mobile-nav.hidden { display: none; }
@media (max-width: 767px) {
  .sidebar-nav { display: none; }
  .topbar-menu-btn, .topbar-brand { display: inline-flex; }
  .sidebar-toggle { display: none; }
  .breadcrumb { display: none; }
  .mobile-nav:not(.hidden) { display: block; }
  .app-content { padding: 14px 12px 32px; }
}

/* ===== カード / パネル ===== */
.card, .panel { background: var(--fp-card); border: 1px solid var(--fp-line); border-radius: var(--fp-radius); box-shadow: none; }
.card-header-gold { border-left: 3px solid var(--fp-yellow); padding-left: 0.75rem; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--fp-line-2); }
.panel-title { font-size: 13px; font-weight: 600; color: var(--fp-text); white-space: nowrap; }
.panel-link { font-size: 12px; color: var(--fp-text-2); white-space: nowrap; }
.panel-link:hover { color: var(--fp-purple); }
.db-ann-read-all { margin-left: auto; margin-right: 10px; background: none; border: 0; cursor: pointer; padding: 0; font: inherit; font-size: 12px; }
.db-ann-read-all + .panel-link { margin-left: 0; }
.panel-empty { padding: 18px 14px; font-size: 12.5px; color: var(--fp-text-3); text-align: center; }

/* ===== ボタン ===== */
.btn, .btn-primary, .btn-secondary, .btn-gold, .btn-danger, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: var(--fp-radius);
  font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent; transition: background .1s, border-color .1s, color .1s;
}
.btn-primary { background: var(--fp-purple); color: #fff; border-color: var(--fp-purple); }
.btn-primary:hover { background: var(--fp-purple-2); border-color: var(--fp-purple-2); box-shadow: none; }
.btn-primary:disabled { background: #bdb8cf; border-color: #bdb8cf; cursor: not-allowed; }
.btn-secondary, .btn-ghost { background: #fff; color: var(--fp-text); border-color: var(--fp-line); }
.btn-secondary:hover, .btn-ghost:hover { background: var(--fp-bg); border-color: #cfcbdb; }
.btn-gold { background: #fff; color: var(--fp-text); border-color: var(--fp-yellow); }
.btn-gold:hover { background: #fff8e6; box-shadow: none; }
.btn-danger { background: #fff; color: var(--fp-red); border-color: var(--fp-red); }
.btn-danger:hover { background: #fdf0f3; }
.btn-sm { height: 26px; padding: 0 8px; font-size: 12px; }

/* ===== フォーム ===== */
.form-label { display: block; font-size: 12.5px; font-weight: 500; color: var(--fp-text-2); margin-bottom: 4px; }
.form-input, input[type="text"], input[type="date"], input[type="month"],
input[type="time"], input[type="number"], input[type="email"], input[type="password"],
input[type="datetime-local"], select, textarea {
  width: 100%; height: 32px; padding: 0 10px; font-size: 13px;
  border: 1px solid var(--fp-line); border-radius: var(--fp-radius); background: #fff; color: var(--fp-text);
  font-family: inherit; transition: border-color .1s;
}
textarea { height: auto; padding: 8px 10px; }
.form-input:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--fp-purple); box-shadow: 0 0 0 1px var(--fp-purple); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--fp-purple); }
select { padding-right: 26px; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%235c5966' stroke-width='1.4'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center; }

/* ===== タブ ===== */
.tab-btn { padding: 8px 12px; font-size: 13px; font-weight: 500; color: var(--fp-text-2); border-bottom: 2px solid transparent; white-space: nowrap; }
.tab-btn:hover { color: var(--fp-text); }
.tab-btn.active { color: var(--fp-purple); border-bottom-color: var(--fp-purple); }
.rpt-tab-active { color: var(--fp-purple) !important; border-bottom-color: var(--fp-purple) !important; }

/* ===== バッジ ===== */
.badge { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: var(--fp-radius); font-size: 11px; font-weight: 500; border: 1px solid var(--fp-line); background: #fff; color: var(--fp-text-2); white-space: nowrap; }
.badge-navy { border-color: var(--fp-purple); color: var(--fp-purple); background: var(--fp-selected); }
.badge-gold { border-color: var(--fp-purple); color: var(--fp-purple); background: var(--fp-selected); }
.badge-success { border-color: #bfdcee; color: var(--fp-blue); background: #f1f8fc; }
.badge-warning { border-color: #f3dca3; color: #9a6700; background: #fff8e6; }
.badge-danger  { border-color: #f3c0cd; color: var(--fp-red); background: #fdf0f3; }

/* ===== テーブル ===== */
table.app-table { width: 100%; border-collapse: collapse; }
table.app-table thead { background: var(--fp-thead); }
table.app-table th { padding: 8px 10px; text-align: left; font-size: 11.5px; font-weight: 600; color: var(--fp-text-2); letter-spacing: .02em; text-transform: none; border-bottom: 1px solid var(--fp-line); white-space: nowrap; }
table.app-table td { padding: 8px 10px; border-bottom: 1px solid var(--fp-line-2); font-size: 13px; }
table.app-table tr:hover td { background: var(--fp-bg); }

/* ===== カテゴリ色 (カレンダー / 凡例) ===== */
.cat-shift { --cat: var(--fp-blue); }
.cat-duty  { --cat: var(--fp-red); }
.cat-event { --cat: var(--fp-yellow); }
.cat-leave { --cat: var(--fp-leave); }
.cat-visit { --cat: var(--fp-sky); }

/* FullCalendar を使う旧ページ向け互換 (ベタ塗りではなく左線に) */
.event-shift, .event-duty, .event-event, .event-leave, .event-visit {
  background: #fff !important; color: var(--fp-text) !important; border: 1px solid var(--fp-line) !important; border-left-width: 3px !important; border-radius: var(--fp-radius) !important;
}
.event-shift { border-left-color: var(--fp-blue) !important; }
.event-duty  { border-left-color: var(--fp-red) !important; }
.event-event { border-left-color: var(--fp-yellow) !important; }
.event-leave { border-left-color: var(--fp-leave) !important; }
.event-visit { border-left-color: var(--fp-sky) !important; }

/* ===== 空状態 (Empty State) ===== */
.empty-state { padding: 28px 16px 24px; text-align: center; color: var(--fp-text-2); }
.empty-state-title { font-size: 14px; font-weight: 500; color: var(--fp-text); }
.empty-state-period { margin-top: 4px; font-size: 12px; color: var(--fp-text-3); }
.empty-state-hint { margin-top: 6px; font-size: 12px; color: var(--fp-text-3); }
.empty-state-actions { margin-top: 14px; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.empty-state-actions .btn-primary { margin-left: 10px; }

/* ===== フィルターバー (全ページ共通の並び・幅・ラベル) ===== */
.filter-bar { padding: 10px 14px !important; }
.filter-row { gap: 8px 10px !important; align-items: center; }
.filter-label { font-size: 12px !important; font-weight: 400 !important; color: var(--fp-text-3) !important; margin-left: 0 !important; white-space: nowrap; }
.filter-label.ml-2, .filter-row .ml-2 { margin-left: 8px !important; }
.filter-row input[type="month"] { width: 150px !important; }
.filter-row select { min-width: 120px; width: auto !important; max-width: 220px; }
.filter-row select[id*="store"] { min-width: 160px; }
.filter-row select[id*="staff"] { min-width: 130px; }
.filter-row select[id*="status"] { min-width: 110px; }
.filter-row [id*="cycle-label"] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px !important; color: var(--fp-text-2) !important; white-space: nowrap; }
.filter-row .form-input { height: 32px !important; font-size: 13px !important; }
.filter-row .btn-secondary, .filter-row .btn-primary { height: 32px; }