/* ============================================================
   KinTai Pro — 全画面統合CSS (外部化版 2026-03-05)
   Code Split: index.html → css/kintai-main.css
   元のインラインCSS (2026-02-25) を外部ファイルに分離
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#6DC1B3;--primary-d:#5AA89B;--primary-bg:#e8f5f2;
  --success:#1e8e3e;--success-d:#137333;--success-bg:#e6f4ea;
  --warn:#d46a00;--warn-d:#b05500;--warn-bg:#fff3e0;
  --danger:#c5221f;--danger-d:#b3261e;--danger-bg:#fce8e6;
  --outing:#e09800;--outing-bg:#fef7e0;
  --nav-bg:#3D9B8F;
  --bg:#ffffff;--card:#fff;--border:#c2d4d0;
  --text:#1a1a1a;--text2:#3d4450;--text3:#6b7280;
  --radius:16px;--radius-sm:10px;--radius-xs:6px;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.06);
  --shadow-lg:0 4px 16px rgba(0,0,0,.12);
}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans JP','Inter',-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.7;min-height:100vh;-webkit-tap-highlight-color:transparent;font-size:17px;-webkit-font-smoothing:antialiased;letter-spacing:.02em}
#app{min-height:100vh;display:flex;flex-direction:column;contain:layout style}

/* Nav */
.nav{background:var(--nav-bg);display:flex;flex-direction:column;position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(0,0,0,.2);will-change:transform;contain:layout style}
.nav-top{display:flex;align-items:center;padding:0 16px;height:46px;border-bottom:1px solid rgba(255,255,255,.15)}
.nav-brand{color:#fff;font-weight:800;font-size:16px;display:flex;align-items:center;gap:0;flex-shrink:0;letter-spacing:-.3px;font-family:'Inter',system-ui,sans-serif}
.nav-brand .nb-kin{color:rgba(255,255,255,.85)}
.nav-brand .nb-tai{color:#fff}
.nav-brand .nb-pro{color:rgba(255,255,255,.6);font-weight:700;margin-left:1px}
.nav-brand .nb-clock{display:inline-block;width:13px;height:13px;border:1.5px solid rgba(255,255,255,.55);border-radius:50%;position:relative;margin-left:4px;top:0px;flex-shrink:0}
.nav-brand .nb-clock::before{content:'';position:absolute;top:50%;left:50%;width:1.5px;height:4.5px;background:rgba(255,255,255,.6);transform-origin:bottom center;transform:translate(-50%,-100%) rotate(-30deg);border-radius:1px}
.nav-brand .nb-clock::after{content:'';position:absolute;top:50%;left:50%;width:1px;height:3px;background:rgba(255,255,255,.4);transform-origin:bottom center;transform:translate(-50%,-100%) rotate(60deg);border-radius:1px}
.nav-bottom{display:flex;align-items:center;padding:4px 12px;min-height:40px}
.nav-links{display:flex;flex-wrap:wrap;gap:2px;list-style:none;min-width:0}
.nav-links a{color:rgba(255,255,255,.92);text-decoration:none;font-size:13px;font-weight:600;padding:6px 10px;border-radius:6px;transition:all .15s;cursor:pointer;white-space:nowrap;letter-spacing:.2px}
.nav-links a i.fa-solid,.nav-links a i.fa-regular{color:inherit!important}
/* ボタン内FAアイコンは親のcolorを継承（背景色と同色で見えなくなる問題を防止） */
button i.fa-solid,button i.fa-regular,button i.fas,button i.far,
.btn-refresh i.fa-solid,.btn-refresh i.fa-regular,
.btn-sm i.fa-solid,.btn-sm i.fa-regular,
.btn-action i.fa-solid,.btn-action i.fa-regular,
.btn-modal i.fa-solid,.btn-modal i.fa-regular,
.modal-btn i.fa-solid,.modal-btn i.fa-regular,
a.btn-refresh i.fa-solid,a.btn-refresh i.fa-regular{color:inherit!important}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.18)}
.nav-links a.active{color:#fff;background:rgba(255,255,255,.22);box-shadow:inset 0 -2px 0 #fff}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:1;min-width:0}
.nav-user{color:#fff;font-size:13px;font-weight:600;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.nav-badge{background:transparent;color:#fff;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:8px;border:none}
.btn-logout{background:transparent;border:none;color:#fff;font-size:12.5px;padding:5px 12px;border-radius:6px;cursor:pointer;font-weight:600;transition:all .15s}
.btn-logout:hover{background:rgba(255,255,255,.15);color:#fff}

/* Login — Compact single-viewport design */
.login-page{display:flex;flex-direction:column;min-height:100vh;overflow-y:auto;background:linear-gradient(to right,#6dc1b3,#b3ebe1);padding:20px 32px 16px}
.login-header{text-align:center;margin-bottom:14px;flex-shrink:0}
.login-title{font-size:40px;font-weight:800;color:#2D5A56;margin-bottom:0;letter-spacing:-.5px;display:inline-flex;align-items:center;gap:0;font-family:'Inter',system-ui,sans-serif;line-height:1;position:relative}
.login-title .brand-k{color:#2D5A56}
.login-title .brand-i{display:inline-block;position:relative;color:#2D5A56;width:.48em;text-align:center}
.login-title .brand-n{color:#2D5A56}
.login-title .brand-tai{color:#3D9B8F;letter-spacing:-.5px}
.login-title .brand-space{width:.25em;display:inline-block}
.login-title .brand-pro{color:#7BAFC2;font-weight:700;letter-spacing:-.3px}
.login-title .brand-clock{display:inline-block;width:22px;height:22px;border:2.5px solid #7BAFC2;border-radius:50%;position:relative;margin-left:5px;top:-1px;flex-shrink:0}
.login-title .brand-clock::before{content:'';position:absolute;top:50%;left:50%;width:2px;height:7px;background:#7BAFC2;transform-origin:bottom center;transform:translate(-50%,-100%) rotate(-30deg);border-radius:1px}
.login-title .brand-clock::after{content:'';position:absolute;top:50%;left:50%;width:1.5px;height:5px;background:#3D9B8F;transform-origin:bottom center;transform:translate(-50%,-100%) rotate(60deg);border-radius:1px}
.login-waves{position:relative;width:260px;height:14px;margin:-2px auto 0;opacity:.3}
.login-waves svg{width:100%;height:100%}
.login-subtitle{font-size:11px;color:#8FA8B8;margin-top:6px;letter-spacing:2.5px;font-weight:600;text-transform:uppercase}

/* Main content: stores grid + HQ sidebar */
.login-content{flex:1;display:grid;grid-template-columns:1fr auto;gap:12px;max-width:1400px;width:100%;margin:0 auto;align-content:center;min-height:0}
.login-stores-grid{display:grid;grid-template-columns:1fr;gap:8px}

/* Each store row — compact */
.login-store-row{background:#ffffff;border-radius:10px;padding:8px 14px;border:1px solid rgba(61,155,143,.15);backdrop-filter:blur(8px);box-shadow:0 1px 6px rgba(0,0,0,.03);transition:background .2s}
.login-store-row:hover{background:#ffffff}
.login-store-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.login-store-label{font-size:15px;font-weight:700;color:#1a2332;display:flex;align-items:center;gap:6px;margin:0}
.login-store-label .store-badge{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:26px;padding:0 8px;border-radius:6px;font-size:12px;font-weight:800;color:#fff;flex-shrink:0;letter-spacing:.5px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.login-store-divider{flex:1;height:1px;background:rgba(0,0,0,.07)}

/* User cards — compact */
.login-store-users{display:flex;gap:6px;flex-wrap:wrap}
.login-user{display:flex;align-items:center;padding:8px 12px;border:1.5px solid rgba(61,155,143,.35);border-radius:8px;cursor:pointer;transition:all .15s ease;text-align:left;background:#ffffff;min-width:0;flex:0 0 auto}
.login-user:hover{border-color:#3D9B8F;background:#ffffff;transform:translateY(-1px);box-shadow:0 3px 12px rgba(61,155,143,.15)}
.login-user:active{transform:translateY(0);box-shadow:0 1px 4px rgba(0,0,0,.06)}
.login-user-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.login-user-info{overflow:hidden}
.login-user-name{font-size:14px;font-weight:600;color:#1a2332;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.login-user-role{font-size:11px;color:#6b7280;font-weight:500}
.login-user-pin{display:inline-flex;font-size:11px;font-weight:700;color:#4a5568;background:rgba(0,0,0,.06);padding:1px 6px;border-radius:4px;font-variant-numeric:tabular-nums;letter-spacing:1px;margin-left:3px;vertical-align:middle}

/* Manager card accent */
.login-user.is-manager{border-color:rgba(61,155,143,.35);background:#ffffff;order:-1}
.login-user.is-manager:hover{border-color:#3D9B8F;background:#ffffff;box-shadow:0 3px 12px rgba(61,155,143,.15)}

/* HQ sidebar — compact */
.login-hq-area{display:flex;flex-direction:column;justify-content:flex-end;min-width:160px}
.login-hq-row{background:#ffffff;border-radius:10px;padding:8px 14px;border:1px solid rgba(61,155,143,.15);backdrop-filter:blur(8px);box-shadow:0 1px 6px rgba(45,122,112,.06)}
.login-hq-row:hover{background:#ffffff}

/* ═══════════════════════════════════════════════════════
   PIN entry modal — Premium Glassmorphism Design
   ═══════════════════════════════════════════════════════ */
/* Overlay with deep blur */
.pin-overlay{position:fixed;inset:0;background:rgba(10,14,23,.55);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);display:flex;align-items:center;justify-content:center;z-index:300;animation:pinOverlayIn .3s cubic-bezier(.4,0,.2,1)}
@keyframes pinOverlayIn{from{opacity:0}to{opacity:1}}

/* Card — glassmorphism with subtle gradient border */
.pin-card{background:rgba(255,255,255,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:28px;width:420px;max-width:94vw;padding:32px 28px 26px;box-shadow:0 25px 80px rgba(0,0,0,.12),0 8px 32px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.8);animation:pinCardIn .35s cubic-bezier(.2,.8,.3,1);text-align:center;border:1px solid rgba(255,255,255,.6);position:relative;overflow:hidden}
.pin-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#3D9B8F,#7DD3C6,#3D9B8F);border-radius:28px 28px 0 0}
@keyframes pinCardIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}

/* User info */
.pin-card-user{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:20px}
.pin-card-icon{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;background:linear-gradient(135deg,#3D9B8F,#5fbcb0);color:#fff;box-shadow:0 4px 12px rgba(61,155,143,.25)}
.pin-card-name{font-size:22px;font-weight:800;color:#1a2332;letter-spacing:-.2px}
.pin-card-role{font-size:13px;color:#8b95a3;font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.pin-label{font-size:15px;color:#5a6472;margin-bottom:14px;font-weight:600;letter-spacing:.3px}

/* Input row (for PIN change modals) */
.pin-input-row{display:flex;gap:10px;justify-content:center;margin-bottom:4px}
.pin-digit{width:56px;height:62px;border:2px solid #dde1e6;border-radius:14px;font-size:28px;font-weight:700;text-align:center;color:#1a2332;background:rgba(255,255,255,.8);transition:all .2s cubic-bezier(.4,0,.2,1);caret-color:#3D9B8F}
.pin-digit:focus{border-color:#3D9B8F;outline:none;background:#fff;box-shadow:0 0 0 4px rgba(61,155,143,.15),0 2px 8px rgba(61,155,143,.1)}
.pin-digit-sm{width:48px;height:54px;font-size:24px;border-radius:10px}

/* Error & Actions */
.pin-error{font-size:14px;color:var(--danger);min-height:22px;margin:10px 0 4px;font-weight:600}
.pin-actions{display:flex;gap:10px;margin-top:14px}
.pin-btn{flex:1;padding:15px;border:none;border-radius:14px;font-size:16px;font-weight:700;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}
.pin-btn-cancel{background:rgba(241,243,244,.8);color:#5a6472;backdrop-filter:blur(4px)}
.pin-btn-cancel:hover{background:rgba(227,229,232,.9);transform:translateY(-1px)}
.pin-btn-ok{background:linear-gradient(135deg,#3D9B8F,#4db5a7);color:#fff;box-shadow:0 4px 16px rgba(61,155,143,.3)}
.pin-btn-ok:hover{background:linear-gradient(135deg,#358a80,#3D9B8F);transform:translateY(-1px);box-shadow:0 6px 20px rgba(61,155,143,.35)}
.pin-btn-ok:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}

/* ──── Custom PIN Keypad — Full Width Design ──── */
.pin-card-keypad{width:min(96vw,480px) !important;padding:28px 24px 22px !important;max-width:none !important;background:rgba(255,255,255,.92) !important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:28px !important;box-shadow:0 25px 80px rgba(0,0,0,.12),0 8px 32px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.8) !important;text-align:center !important;border:1px solid rgba(255,255,255,.6) !important;position:relative;overflow:hidden}
.pin-card-keypad::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#3D9B8F,#7DD3C6,#3D9B8F);border-radius:28px 28px 0 0}

/* Small dot indicators under the main display */
.pin-dots-row{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;gap:10px;justify-content:center;align-items:center;margin-bottom:12px;min-height:20px}
.pin-dot{width:10px;height:10px;min-width:10px;min-height:10px;max-width:10px;max-height:10px;border-radius:50%;border:2px solid #d0d5dc;background:transparent;transition:all .25s cubic-bezier(.4,0,.2,1);flex-shrink:0;flex-grow:0;box-sizing:border-box}
.pin-dot-filled{width:10px !important;height:10px !important;min-width:10px !important;min-height:10px !important;border-color:#3D9B8F !important;background:#3D9B8F !important;box-shadow:0 0 0 3px rgba(61,155,143,.15),0 0 8px rgba(61,155,143,.2) !important;transform:scale(1.1)}
.pin-dot-sm{width:8px;height:8px;min-width:8px;min-height:8px;max-width:8px;max-height:8px}
.pin-dot-sm.pin-dot-filled{width:8px !important;height:8px !important;min-width:8px !important;min-height:8px !important;box-shadow:0 0 0 3px rgba(61,155,143,.15) !important}

/* ● Large text display area */
.pin-display{display:flex !important;justify-content:center !important;align-items:center !important;gap:8px !important;min-height:56px !important;margin-bottom:6px !important;letter-spacing:14px !important;font-size:40px !important;font-weight:800 !important;color:#3D9B8F !important;user-select:none !important;font-family:'Inter','Noto Sans JP',sans-serif !important;text-shadow:0 2px 8px rgba(61,155,143,.15)}
.pin-display span{display:inline-block;transition:all .15s cubic-bezier(.4,0,.2,1);min-width:20px;text-align:center}
.pin-display-empty{color:#c8d0d8 !important;text-shadow:none}

/* Keypad container */
.pin-keypad{display:flex !important;flex-direction:column !important;gap:8px !important;margin-top:14px !important;width:100% !important;max-width:none !important}
.pin-keypad-row{display:flex !important;flex-direction:row !important;gap:8px !important;justify-content:center !important;width:100% !important}

/* Keys — Green-tinted neumorphic style */
.pin-key{flex:1 !important;height:54px !important;border:none !important;border-radius:14px !important;background:linear-gradient(145deg,#f2f9f8,#e8f2f0) !important;box-shadow:3px 3px 8px rgba(61,155,143,.06),-2px -2px 6px rgba(255,255,255,.85),inset 0 1px 0 rgba(255,255,255,.6) !important;font-size:24px !important;font-weight:700 !important;color:#2d7a70 !important;cursor:pointer !important;display:flex !important;align-items:center !important;justify-content:center !important;transition:all .12s cubic-bezier(.4,0,.2,1) !important;-webkit-tap-highlight-color:transparent !important;user-select:none !important;-webkit-user-select:none !important;touch-action:manipulation !important;position:relative !important;overflow:hidden !important;font-family:'Inter','Noto Sans JP',sans-serif !important;letter-spacing:-.3px}
.pin-key:hover{background:linear-gradient(145deg,#e4f3f0,#d6ebe6) !important;box-shadow:3px 3px 10px rgba(61,155,143,.1),-2px -2px 7px rgba(255,255,255,.85),inset 0 1px 0 rgba(255,255,255,.7) !important;color:#24685f !important;transform:translateY(-1px)}
.pin-key:active{background:linear-gradient(145deg,#d0e8e3,#c4ddd8) !important;box-shadow:inset 2px 2px 5px rgba(61,155,143,.08),inset -1px -1px 3px rgba(255,255,255,.4) !important;transform:scale(.96) translateY(1px) !important;color:#3D9B8F !important}

/* Function keys (cancel / backspace) */
.pin-key-fn{font-size:18px !important;letter-spacing:0 !important;color:#5a8f87 !important;background:linear-gradient(145deg,#eaf5f3,#dceee9) !important;box-shadow:2px 2px 6px rgba(61,155,143,.05),-2px -2px 5px rgba(255,255,255,.7),inset 0 1px 0 rgba(255,255,255,.5) !important}
.pin-key-fn:hover{background:linear-gradient(145deg,#dceee9,#cfe5df) !important;color:#3D9B8F !important}
.pin-key-fn:active{background:linear-gradient(145deg,#cfe5df,#c2dbd5) !important;box-shadow:inset 2px 2px 4px rgba(61,155,143,.06),inset -1px -1px 3px rgba(255,255,255,.3) !important;transform:scale(.96) translateY(1px) !important}

/* Desktop: keypad 60% width */
@media(min-width:901px){
  .pin-keypad{max-width:60% !important;margin-left:auto !important;margin-right:auto !important}
}

/* Ripple effect for key press */
@keyframes pinKeyRipple{0%{transform:scale(0);opacity:.4}100%{transform:scale(4);opacity:0}}
.pin-key::after{content:'';position:absolute;width:30px;height:30px;border-radius:50%;background:rgba(61,155,143,.2);transform:scale(0);opacity:0;pointer-events:none}
.pin-key:active::after{animation:pinKeyRipple .4s ease-out}

/* Responsive */
@media(max-width:900px){
  .login-page{padding:14px 12px 10px;min-height:100vh}
  .login-content{grid-template-columns:1fr;gap:8px}
  .login-hq-area{min-width:unset}
  .login-user{padding:6px 10px;gap:6px}
  .login-user-icon{width:28px;height:28px;font-size:13px}
  .login-user-name{font-size:13px}
  .login-user-role{font-size:10px}
  .login-title{font-size:15px}
  .login-store-row{padding:6px 10px}
  .login-store-header{margin-bottom:4px}
  .login-store-label{font-size:13px}
  .login-store-label .store-badge{min-width:26px;height:22px;font-size:10px;padding:0 6px}
}
@media(max-width:480px){
  .login-page{padding:10px 8px 8px}
  .login-store-users{gap:4px}
  .login-user-pin{font-size:10px;padding:1px 4px}
}

/* Page containers */
.page{max-width:680px;margin:0 auto;padding:18px;flex:1;contain:layout style}
.page-wide{max-width:1280px;margin:0 auto;padding:18px 28px;flex:1;contain:layout style}

/* Employee */
.emp-page-inner{display:flex;flex-direction:column;height:calc(100vh - 78px);overflow-y:auto;padding:10px 18px 6px}
.emp-top-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;flex-shrink:0}
.emp-clock{text-align:left;margin-bottom:0;display:flex;align-items:baseline;gap:10px}
.emp-date{font-size:15px;color:var(--text2);font-weight:500}
.emp-time{font-size:44px;font-weight:800;color:var(--text);letter-spacing:-1px;font-variant-numeric:tabular-nums;line-height:1}
.emp-time-sec{font-size:20px;color:var(--text3);font-weight:400}
.emp-refresh{display:flex;align-items:center;gap:10px;flex-shrink:0}
.btn-refresh{display:flex;align-items:center;gap:6px;padding:10px 18px;border:1px solid var(--border);border-radius:var(--radius-xs);background:var(--card);font-size:16px;color:var(--text2);cursor:pointer}
.btn-refresh:hover{background:#f1f3f4}
.auto-label{display:flex;align-items:center;gap:8px;font-size:16px;color:var(--text2);cursor:pointer}
.auto-label input{accent-color:var(--primary);width:20px;height:20px}

.status-banner{display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 14px;border-radius:var(--radius-sm);margin-bottom:4px;border:2px solid;font-size:17px;font-weight:700;flex-shrink:0}
.status-icon{font-size:22px}

.alert-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--radius-sm);border:2px solid;margin-bottom:6px;font-weight:600;animation:alertIn .35s ease;flex-shrink:0}
@keyframes alertIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.alert-icon{font-size:18px;flex-shrink:0}
.alert-body{flex:1}
.alert-title{font-size:14px;font-weight:700}
.alert-detail{font-size:12px;font-weight:500;opacity:.85;margin-top:1px}
.alert-badge{display:inline-flex;padding:2px 8px;border-radius:10px;font-size:12px;font-weight:700;flex-shrink:0}
.alert-notice{border-color:var(--outing);background:var(--outing-bg);color:#7c4a0d}
.alert-notice .alert-badge{background:var(--outing);color:#fff}
.alert-warning{border-color:#ff9800;background:#fff3e0;color:#e37400}
.alert-warning .alert-badge{background:#ff9800;color:#fff}
.alert-danger{border-color:#ea4335;background:var(--danger-bg);color:var(--danger)}
.alert-danger .alert-badge{background:#ea4335;color:#fff}
.alert-critical{border-color:var(--danger-d);background:var(--danger);color:#fff;animation:alertIn .35s ease,pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(197,34,31,.4)}50%{box-shadow:0 0 0 8px rgba(197,34,31,0)}}
.alert-critical .alert-badge{background:rgba(255,255,255,.25);color:#fff}

/* 36協定コンプライアンスパネル */
.art36-panel{background:var(--card);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:10px;border:1px solid var(--border);box-shadow:var(--shadow)}
.art36-panel.art36-ok{border-left:4px solid #34a853}
.art36-panel.art36-notice{border-left:4px solid var(--outing);background:#fffef5}
.art36-panel.art36-warning{border-left:4px solid #ff9800;background:#fff8f0}
.art36-panel.art36-danger{border-left:4px solid #ea4335;background:#fef5f4}
.art36-panel.art36-critical{border-left:4px solid var(--danger-d);background:#fce8e6}
.art36-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.art36-title{font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px}
.art36-meters{display:flex;gap:10px;flex-wrap:wrap}
.art36-meter{flex:1;min-width:140px}
.art36-meter-label{font-size:11px;color:var(--text2);margin-bottom:2px;font-weight:500}
.art36-meter-bar{height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden;position:relative}
.art36-meter-fill{height:100%;border-radius:4px;transition:width .4s ease}
.art36-meter-fill.fill-ok{background:#34a853}
.art36-meter-fill.fill-notice{background:var(--outing)}
.art36-meter-fill.fill-warning{background:#ff9800}
.art36-meter-fill.fill-danger{background:#ea4335}
.art36-meter-fill.fill-critical{background:var(--danger-d)}
.art36-meter-value{font-size:11px;font-weight:600;margin-top:1px;display:flex;justify-content:space-between}
.art36-alerts{margin-top:6px;display:flex;flex-direction:column;gap:4px}
.art36-alert-row{display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:6px;font-size:12px;font-weight:500}
.art36-alert-row.level-critical{background:#fce8e6;color:#c5221f}
.art36-alert-row.level-danger{background:#fff3e0;color:#e65100}
.art36-alert-row.level-warning{background:#fff8e1;color:#f57f17}
.art36-alert-row.level-notice{background:#f5f5f5;color:#616161}

.emp-body{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-height:0;margin-bottom:6px}
.emp-body-left{display:flex;flex-direction:column;gap:6px}
.emp-body-right{display:flex;flex-direction:column;gap:6px}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.metric{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:5px 8px;text-align:center;box-shadow:var(--shadow)}
.metric-label{font-size:11px;color:var(--text2);font-weight:600;margin-bottom:1px}
.metric-value{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.metric-sub{font-size:11px;color:var(--text3);margin-top:0}
.metric.overtime .metric-value{color:var(--danger)}
.metric.remaining .metric-value{color:var(--primary)}

.timeline-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;box-shadow:var(--shadow);flex:1;min-height:0;overflow-y:auto}
.timeline-title{font-size:14px;font-weight:600;color:var(--text2);margin-bottom:6px}
.tl-row{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:15px}
.tl-row+.tl-row{border-top:1px solid #f1f3f4}
.tl-icon{font-size:16px;width:22px;text-align:center}
.tl-type{color:var(--text2);font-weight:500;min-width:50px;font-size:14px}
.tl-time{font-weight:700;font-variant-numeric:tabular-nums;font-size:17px}

.actions{display:flex;flex-direction:column;gap:6px;flex-shrink:0}
.btn-action{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 18px;border:none;border-radius:var(--radius-sm);font-size:20px;font-weight:700;cursor:pointer;transition:all .15s;box-shadow:var(--shadow-lg);user-select:none;min-height:52px}
.btn-action:active{transform:scale(.97)}
.btn-action:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-action .btn-icon{font-size:24px}
.btn-clock-in{background:var(--success);color:#fff}
.btn-clock-in:hover:not(:disabled){background:var(--success-d)}
.btn-clock-out{background:var(--primary);color:#fff}
.btn-clock-out:hover:not(:disabled){background:var(--primary-d)}
.btn-outing-start{background:var(--warn);color:#fff}
.btn-outing-start:hover:not(:disabled){background:var(--warn-d)}
.btn-outing-end{background:var(--success);color:#fff}
.btn-outing-end:hover:not(:disabled){background:var(--success-d)}
.actions-row{display:flex;gap:8px}
.actions-row .btn-action{flex:1;font-size:18px;padding:12px 12px}

.completed-msg{text-align:center;padding:16px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow)}
.completed-icon{font-size:36px;margin-bottom:4px}
.completed-text{font-size:18px;font-weight:600}
.completed-sub{font-size:14px;color:var(--text2);margin-top:2px}
.emp-footer{text-align:center;padding:6px 0;font-size:14px;color:var(--text3);flex-shrink:0}
@media(max-width:700px){.emp-body{grid-template-columns:1fr}.emp-page-inner{padding:6px 10px 4px}.emp-time{font-size:36px}.emp-time-sec{font-size:16px}.emp-date{font-size:13px}.status-banner{font-size:15px;padding:5px 10px}.status-icon{font-size:18px}.metric{padding:4px 6px}.metric-label{font-size:10px}.metric-value{font-size:18px}.metric-sub{font-size:10px}.btn-action{padding:10px 12px;font-size:17px;min-height:42px}.btn-action .btn-icon{font-size:20px}.completed-icon{font-size:28px}}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center;z-index:200;animation:fadeIn .2s ease;contain:layout style}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{background:var(--card);border-radius:var(--radius) var(--radius) 0 0;width:100%;max-width:640px;max-height:85vh;overflow-y:auto;padding:26px 22px;animation:slideUp .25s ease}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media(min-width:600px){.modal{border-radius:var(--radius);margin:auto;max-width:500px;animation:fadeIn .2s ease}.modal-overlay{align-items:center}}
.modal-title{font-size:22px;font-weight:700;text-align:center;margin-bottom:4px}
.modal-sub{font-size:16px;color:var(--text2);text-align:center;margin-bottom:18px}
.modal-actions{display:flex;gap:10px;margin-top:16px}
.modal-btn{flex:1;padding:16px;border:none;border-radius:var(--radius-sm);font-size:18px;font-weight:700;cursor:pointer;transition:all .15s;min-height:56px}
.modal-btn:disabled{opacity:.5;cursor:not-allowed}
.btn-cancel{background:#f1f3f4;color:var(--text2)}
.btn-cancel:hover:not(:disabled){background:#e8eaed}
.btn-confirm{background:var(--success);color:#fff}
.btn-confirm:hover:not(:disabled){background:var(--success-d)}

.cat-list{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.cat-item{display:flex;align-items:center;gap:12px;padding:14px;border:2px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all .15s;position:relative}
.cat-item:hover{border-color:var(--primary);background:#f5f9ff}
.cat-item.selected{border-color:var(--primary);background:var(--primary-bg)}
.cat-item.recommended::after{content:'おすすめ';position:absolute;top:-7px;right:10px;background:var(--primary);color:#fff;font-size:9px;font-weight:700;padding:1px 7px;border-radius:10px}
.cat-radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cat-item.selected .cat-radio{border-color:var(--primary);background:var(--primary)}
.cat-item.selected .cat-radio::after{content:'';width:7px;height:7px;border-radius:50%;background:#fff}
.cat-name{font-size:17px;font-weight:600}
.cat-desc{font-size:15px;color:var(--text2)}

.reason-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.reason-label{font-size:14px;font-weight:600;color:var(--text2);margin-bottom:6px;width:100%}
.chip{display:flex;align-items:center;gap:6px;padding:12px 20px;border:2px solid var(--border);border-radius:24px;cursor:pointer;font-size:17px;font-weight:500;background:var(--card);transition:all .15s;user-select:none}
.chip:hover{border-color:var(--warn);background:var(--outing-bg)}
.chip.selected{border-color:var(--warn);background:var(--outing-bg);color:var(--warn);font-weight:700}

.confirm-text{text-align:center;font-size:16px;margin:14px 0 16px;line-height:1.7}
.confirm-sub{font-size:14px;color:var(--text2)}

/* Manager */
.mgr-summary{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px;margin-bottom:20px}
.mgr-stat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:18px;text-align:center;box-shadow:var(--shadow)}
.mgr-stat-value{font-size:34px;font-weight:800}
.mgr-stat-label{font-size:15px;color:var(--text2);font-weight:500;margin-top:3px}
.mgr-table-wrap{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);overflow-x:auto}
.mgr-table{width:100%;border-collapse:collapse;font-size:16px}
.mgr-table thead{background:#f5f6f8}
.mgr-table th{padding:13px 15px;text-align:left;font-size:14px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;border-bottom:2px solid #d0d5dd}
.mgr-table td{padding:13px 15px;border-bottom:1px solid #ebedf0;white-space:nowrap}
.mgr-table tr:hover{background:#f5f7fa}
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:20px;font-size:13px;font-weight:600;letter-spacing:.02em}
.badge .fa-solid,.badge .fa-regular,.badge .fas,.badge .far{font-size:11px}
/* ─── ステータスバッジ（モダンデザイン） ─── */
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}
.status-dot.pulse{animation:dotPulse 1.8s ease-in-out infinite}
@keyframes dotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
/* ─── 異常バッジ（モダンデザイン） ─── */
.anomaly-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:16px;font-size:11px;font-weight:700;letter-spacing:.03em}
.anomaly-badge i{font-size:10px}
/* ─── イベントアイコン ─── */
.ev-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:10px;flex-shrink:0}
.ev-icon.ev-in{background:#dcfce7;color:#15803d}
.ev-icon.ev-out{background:#e8f5f2;color:#3D9B8F}
.ev-icon.ev-go{background:#fef3c7;color:#b45309}
.ev-icon.ev-back{background:#f3e8ff;color:#7c3aed}
/* ─── FA アイコン付きナビリンク ─── */
.nav-links a i{margin-right:3px;font-size:11px;opacity:.9}
/* ─── サマリーカード内FA ─── */
.mgr-stat i,.hq-gs-item i{font-size:18px;margin-bottom:2px}

/* HQ */
.hq-stores{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;margin-bottom:18px}
.hq-store{background:var(--card);border-radius:12px;padding:16px 20px;box-shadow:var(--shadow);cursor:pointer;border:2px solid transparent;transition:border-color .15s}
.hq-store.active{border-color:var(--primary)}
.hq-store-name{font-size:16px;font-weight:600;margin-bottom:8px}
.hq-store-stats{display:flex;gap:6px;flex-wrap:wrap}
.mini-stat{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:12px;font-size:13px;font-weight:600}

.hq-filters{display:flex;gap:10px;margin-bottom:14px;align-items:center;flex-wrap:wrap}
.hq-filters select,.hq-filters input{padding:8px 14px;border:1px solid var(--border);border-radius:8px;font-size:15px;background:#fff;outline:none}
.search-icon-input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236b7280' d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:10px center;background-size:14px;padding-left:30px!important}
.hq-count{font-size:14px;color:var(--text2);margin-left:8px}

.hq-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.hq-title{font-size:22px;font-weight:800;margin:0;display:flex;align-items:center;gap:8px}
.hq-subtitle{font-size:14px;color:var(--text2);margin-top:2px;font-variant-numeric:tabular-nums}
.hq-controls{display:flex;align-items:center;gap:12px}

.hq-global-summary{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-bottom:16px}
.hq-gs-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 10px;border-radius:var(--radius-sm);box-shadow:var(--shadow);background:var(--card);border:2px solid transparent;transition:all .15s}
.hq-gs-item.working{border-color:var(--success-bg)}
.hq-gs-item.outing{border-color:var(--outing-bg)}
.hq-gs-item.completed{border-color:var(--primary-bg)}
.hq-gs-item.not-started{border-color:#e8eaed}
.hq-gs-item.anomaly{border-color:var(--danger-bg)}
.hq-gs-item.ot-risk{border-color:#fff3e0}
.hq-gs-icon{font-size:18px}
.hq-gs-val{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.hq-gs-item.working .hq-gs-val{color:var(--success)}
.hq-gs-item.outing .hq-gs-val{color:var(--warn)}
.hq-gs-item.completed .hq-gs-val{color:var(--primary)}
.hq-gs-item.not-started .hq-gs-val{color:#7c3aed}
.hq-gs-item.anomaly .hq-gs-val{color:var(--danger)}
.hq-gs-item.ot-risk .hq-gs-val{color:#e37400}
.hq-gs-label{font-size:13px;color:var(--text2);font-weight:500}

.hq-table .td-store{font-size:14px;color:var(--text2);font-weight:500}
.hq-table .td-time{font-family:'Inter',monospace;font-weight:500;font-variant-numeric:tabular-nums;font-size:15px}
.prov-badge{display:inline-block;font-size:11px;font-weight:700;color:var(--warn);background:var(--outing-bg);padding:2px 6px;border-radius:8px;vertical-align:middle;margin-left:2px}
.ot-risk-icon{margin-left:3px;font-size:14px;vertical-align:middle;cursor:help}
.row-holiday{background:#fffde7}
.row-holiday:hover{background:#fff9c4}

.hq-footer{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding:14px 18px;background:var(--card);border-radius:var(--radius-sm);border:1px solid var(--border);font-size:14px;color:var(--text2);flex-wrap:wrap;gap:8px}
.hq-footer-left{font-variant-numeric:tabular-nums}
.hq-footer-right{color:var(--text3)}

/* Employee Master */
.emp-master-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:8px}
.emp-master-header h1{font-size:22px;font-weight:700;margin:0;color:var(--text)}
.emp-master-actions{display:flex;gap:8px;flex-wrap:wrap}
.emp-master-filters{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.emp-master-filters select,.emp-master-filters input{padding:8px 14px;border:1px solid var(--border);border-radius:8px;font-size:15px;background:#fff;outline:none}
.emp-master-count{font-size:14px;color:var(--text3);margin-left:8px}
.emp-tbl{width:100%;border-collapse:collapse;font-size:15px}
.emp-tbl thead tr{background:#f5f6f8;border-bottom:2px solid #d0d5dd}
.emp-tbl th{padding:11px 14px;text-align:left;font-size:13px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.emp-tbl td{padding:11px 14px;border-bottom:1px solid #ebedf0;white-space:nowrap}
.emp-tbl tr.inactive{opacity:.5;background:#fafafa}
.badge-role{display:inline-block;padding:3px 12px;border-radius:12px;font-size:13px;font-weight:600}
.badge-active{display:inline-block;padding:3px 12px;border-radius:12px;font-size:13px;font-weight:600}
.btn-sm{padding:8px 18px;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:opacity .15s}
.btn-sm:hover{opacity:.85}

/* Add Employee Modal */
.modal-card{background:#fff;border-radius:16px;width:100%;max-width:520px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 8px 32px rgba(0,0,0,.18);overflow:hidden}
.modal-header{padding:22px 26px 0;display:flex;justify-content:space-between;align-items:center}
.modal-header h2{font-size:20px;font-weight:700;margin:0;color:var(--text)}
.modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:var(--text2);padding:4px 8px;border-radius:8px}
.modal-close:hover{background:#f1f3f4}
.modal-body{padding:18px 26px 26px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:15px;font-weight:500;color:var(--text);margin-bottom:5px}
.form-group input,.form-group select{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:8px;font-size:16px;outline:none;box-sizing:border-box}
.form-group input:focus,.form-group select:focus{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-bg)}
.modal-footer{padding:0 26px 22px;display:flex;gap:8px;justify-content:flex-end}
.btn-modal{padding:10px 22px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:opacity .15s}
.btn-modal:hover{opacity:.85}

/* Responsive */
@media(max-width:768px){
  .hq-global-summary{grid-template-columns:repeat(3,1fr)}
  .hq-stores{grid-template-columns:1fr}
  .hq-footer{flex-direction:column;text-align:center}
}
@media(max-width:480px){
  .emp-time{font-size:48px}
  .btn-action{font-size:20px;padding:18px}
  .metrics{grid-template-columns:1fr 1fr}
  .hq-global-summary{grid-template-columns:repeat(2,1fr)}
  .hq-header{flex-direction:column;align-items:flex-start}
  .hq-controls{width:100%;justify-content:space-between}
  .hq-filters{flex-direction:column}
  .hq-filters input{max-width:100%!important}
}
/* ===== 月次勤務実績表 ===== */
.att-report{padding:18px;max-width:1280px;margin:0 auto}
.att-report h1{font-size:20px;font-weight:700;margin:0 0 6px}
.att-report-sub{font-size:14px;color:var(--text2);margin-bottom:14px}
.att-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.att-controls select,.att-controls input{padding:8px 12px;border:1px solid var(--border);border-radius:8px;font-size:15px}
.att-wrap{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);overflow-x:auto}
.att-tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:920px}
.att-tbl thead{background:#f1f5f9;position:sticky;top:0;z-index:2}
.att-tbl th{padding:9px 10px;text-align:center;font-size:12px;font-weight:700;color:var(--text2);white-space:nowrap;border-bottom:2px solid #c5cad4;letter-spacing:.3px}
.att-tbl td{padding:7px 10px;border-bottom:1px solid #ebedf0;text-align:center;font-family:'Courier New',monospace;font-size:14px;white-space:nowrap}
.att-tbl tr:hover{background:#f8fafc}
.att-tbl tr.att-sun{background:#fff5f5}
.att-tbl tr.att-sun:hover{background:#fee2e2}
.att-tbl tr.att-sat{background:#f0f7ff}
.att-tbl tr.att-sat:hover{background:#e0efff}
.att-tbl tr.att-holiday{background:#fefce8}
.att-tbl tr.att-holiday:hover{background:#fef9c3}
.att-tbl .att-day-sun{color:#dc2626;font-weight:700}
.att-tbl .att-day-sat{color:#2563eb;font-weight:700}
.att-tbl .att-day-hol{color:#dc2626;font-weight:700}
.att-tbl td.att-cat{font-family:inherit;font-size:13px;text-align:left;padding-left:10px}
.att-tbl td.att-anomaly{font-family:inherit;font-size:12px}
.att-tbl .att-late{background:#fef3c7;color:#92400e;font-size:12px;font-weight:700;padding:2px 6px;border-radius:4px}
.att-tbl .att-absent{color:var(--text3);font-style:italic;font-family:inherit}
.att-tbl .att-ot{color:#dc2626;font-weight:600}
.att-tbl .att-hol-time{color:#d97706;font-weight:600}
.att-tbl .att-short{color:#ea580c}
.att-tbl td.att-dash{color:#d1d5db}
.att-total-row{background:#f1f5f9!important;font-weight:700;border-top:2px solid #94a3b8}
.att-total-row td{padding:9px 10px;font-weight:700;font-size:15px}
.att-legend{margin-top:14px;display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--text2)}
.att-legend span{display:inline-flex;align-items:center;gap:4px}
.att-legend .swatch{width:14px;height:14px;border-radius:3px;border:1px solid #e5e7eb}
@media(max-width:600px){
  .att-report{padding:12px}
  .att-controls{flex-direction:column;align-items:stretch}
  .att-tbl{font-size:13px}
}

/* ===== モバイルハンバーガーメニュー ===== */
.nav-hamburger{display:none;background:none;border:none;color:#fff;font-size:20px;cursor:pointer;padding:4px 8px;border-radius:6px;line-height:1;flex-shrink:0}
.nav-hamburger:hover{background:rgba(255,255,255,.15)}

@media(max-width:600px){
  .nav-hamburger{display:flex;align-items:center;justify-content:center}
  .nav-top{height:auto;padding:6px 10px}
  .nav-brand{font-size:14px}
  .nav-right{margin-left:auto;gap:3px;flex-shrink:1;overflow:visible;flex-wrap:nowrap;align-items:center}
  .nav-user{font-size:10px;max-width:72px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav-badge{display:none}
  .nav-logout-btn{min-width:auto!important;min-height:auto!important;padding:4px 6px!important;font-size:12px}
  .nav-right .btn-logout{min-width:auto!important;min-height:auto!important;padding:4px 6px!important}
  .nav-logout-text{display:none}
  .nav-bottom{display:none;flex-direction:column;padding:4px 8px 8px;background:var(--nav-bg);border-top:1px solid rgba(255,255,255,.1)}
  .nav-bottom.nav-open{display:flex}
  .nav-links{flex-direction:column;gap:2px;width:100%}
  .nav-links a{display:flex;padding:10px 12px;font-size:13px;border-radius:6px;min-height:44px;align-items:center}
}

@media(max-width:380px){
  .nav-top{padding:4px 8px}
  .nav-brand{font-size:13px}
  .nav-user{max-width:56px;font-size:9px}
  .nav-right{gap:2px}
}

/* ===== タッチターゲット最小44px保証 ===== */
@media(max-width:768px){
  /* ボタン・リンクの最小タッチターゲット */
  .btn-refresh,.btn-sm,.btn-modal{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
  .nav-right .btn-logout{min-height:auto;min-width:auto;display:inline-flex;align-items:center;justify-content:center;padding:4px 6px}
  select,input[type="month"],input[type="date"],input[type="number"],input[type="text"]{min-height:44px;font-size:16px!important}
  /* テーブル横スクロール保証 */
  .mgr-table-wrap,.att-wrap{-webkit-overflow-scrolling:touch;overflow-x:auto}
  /* 店長テーブル行の最小高さ */
  .mgr-table td,.mgr-table th{padding:10px 8px}
  /* 統計カード */
  .mgr-summary{grid-template-columns:repeat(3,1fr)}
  .mgr-stat{padding:10px 8px}
  .mgr-stat-value{font-size:22px}
  /* ページコンテナ */
  .page-wide{padding:12px 10px}
  /* フォーム */
  .form-group input,.form-group select{min-height:48px;font-size:16px}
  /* モーダル */
  .modal{padding:20px 16px}
  .modal-title{font-size:18px}
  .modal-btn{min-height:52px;font-size:16px}
  /* PIN */
  .pin-card{width:95vw;max-width:95vw;padding:20px 16px}
  .pin-digit{width:46px;height:52px;font-size:24px}
}

/* ===== 店長ダッシュボード モバイル最適化 ===== */
@media(max-width:480px){
  .mgr-summary{grid-template-columns:repeat(2,1fr);gap:8px}
  .mgr-stat-value{font-size:24px}
  .mgr-table{font-size:12px}
  .mgr-table th{font-size:10px;padding:8px 6px}
  .mgr-table td{font-size:12px;padding:8px 6px}
}

/* ============================================================
   ① ダークモード
   ============================================================ */
[data-theme="dark"]{
  --primary:#7DD3C6;--primary-d:#6DC1B3;--primary-bg:rgba(109,193,179,.15);
  --success:#4ade80;--success-d:#22c55e;--success-bg:rgba(74,222,128,.12);
  --warn:#fbbf24;--warn-d:#f59e0b;--warn-bg:rgba(251,191,36,.12);
  --danger:#f87171;--danger-d:#ef4444;--danger-bg:rgba(248,113,113,.12);
  --outing:#fbbf24;--outing-bg:rgba(251,191,36,.1);
  --nav-bg:#1a2e2b;
  --bg:#0f1419;--card:#1c2530;--border:#2d3a45;
  --text:#e1e8ed;--text2:#8b98a5;--text3:#536471;
  --shadow:0 1px 3px rgba(0,0,0,.3),0 2px 8px rgba(0,0,0,.2);
  --shadow-lg:0 4px 16px rgba(0,0,0,.4);
  color-scheme:dark;
}
[data-theme="dark"] .mgr-table thead,
[data-theme="dark"] .emp-tbl thead tr{background:#1a2530;border-bottom-color:#2d3a45}
[data-theme="dark"] .mgr-table th{border-bottom-color:#2d3a45}
[data-theme="dark"] .mgr-table td{border-bottom-color:#222e38}
[data-theme="dark"] .mgr-table tr:hover{background:#1a2530}
[data-theme="dark"] .emp-tbl td{border-bottom-color:#222e38}
[data-theme="dark"] .hq-filters select,
[data-theme="dark"] .hq-filters input,
[data-theme="dark"] .emp-master-filters select,
[data-theme="dark"] .emp-master-filters input{background:var(--card);color:var(--text);border-color:var(--border)}
[data-theme="dark"] .modal-card,
[data-theme="dark"] .modal{background:var(--card)}
[data-theme="dark"] .modal-header h2{color:var(--text)}
[data-theme="dark"] .btn-cancel{background:#2d3a45;color:var(--text2)}
[data-theme="dark"] .btn-cancel:hover:not(:disabled){background:#364452}
[data-theme="dark"] .login-page{background:linear-gradient(135deg,#0a0f14 0%,#0f1a24 50%,#0a1929 100%)}
[data-theme="dark"] .login-user{border-color:var(--border)}
[data-theme="dark"] .login-user:hover{border-color:var(--primary);background:rgba(109,193,179,.08)}
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select{background:var(--bg);color:var(--text);border-color:var(--border)}
[data-theme="dark"] .row-holiday{background:rgba(255,253,231,.05)}
[data-theme="dark"] .row-holiday:hover{background:rgba(255,253,231,.08)}
[data-theme="dark"] .hq-gs-item.not-started{border-color:#2d3a45}
[data-theme="dark"] .att-tbl th{background:#1a2530}
[data-theme="dark"] .att-tbl td{border-bottom-color:#222e38}
[data-theme="dark"] .att-tbl tr:hover{background:#1a2530}
/* ダークモード トグルスイッチ */
.dark-toggle{background:none;border:none;color:#fff;font-size:16px;cursor:pointer;padding:4px 8px;border-radius:6px;transition:background .15s;line-height:1;opacity:.8}
.dark-toggle:hover{background:rgba(255,255,255,.15);opacity:1}

/* ============================================================
   ② スケルトンローディング
   ============================================================ */
.skeleton{position:relative;overflow:hidden;background:var(--border);border-radius:var(--radius-xs);color:transparent!important}
.skeleton *{visibility:hidden}
.skeleton::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:skeletonShimmer 1.5s infinite}
[data-theme="dark"] .skeleton{background:#2d3a45}
[data-theme="dark"] .skeleton::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent)}
@keyframes skeletonShimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.skeleton-line{height:14px;margin-bottom:8px;border-radius:4px}
.skeleton-line.w75{width:75%}.skeleton-line.w50{width:50%}.skeleton-line.w25{width:25%}.skeleton-line.w100{width:100%}
.skeleton-circle{border-radius:50%}
.skeleton-card{padding:16px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card)}
.skeleton-row{display:flex;gap:12px;margin-bottom:12px;align-items:center}
.skeleton-row .skeleton-circle{width:40px;height:40px;flex-shrink:0}

/* ============================================================
   ④ Empty State イラスト
   ============================================================ */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center;min-height:200px}
.empty-state-icon{width:120px;height:120px;margin-bottom:16px;opacity:.6}
[data-theme="dark"] .empty-state-icon{opacity:.4;filter:brightness(1.3)}
.empty-state-title{font-size:17px;font-weight:700;color:var(--text);margin-bottom:6px}
.empty-state-desc{font-size:14px;color:var(--text3);max-width:300px;line-height:1.6}
.empty-state-action{margin-top:16px}

/* ============================================================
   ⑤ テーブル固定ヘッダー強化
   ============================================================ */
.mgr-table-wrap{max-height:70vh;overflow-y:auto;overflow-x:auto;position:relative}
.mgr-table thead th{position:sticky;top:0;z-index:10;background:#f5f6f8;box-shadow:0 2px 4px rgba(0,0,0,.06)}
[data-theme="dark"] .mgr-table thead th{background:#1a2530;box-shadow:0 2px 4px rgba(0,0,0,.3)}
.emp-tbl-wrap{max-height:70vh;overflow-y:auto;overflow-x:auto;position:relative}
.emp-tbl thead th{position:sticky;top:0;z-index:10;background:#f5f6f8;box-shadow:0 2px 4px rgba(0,0,0,.06)}
[data-theme="dark"] .emp-tbl thead th{background:#1a2530;box-shadow:0 2px 4px rgba(0,0,0,.3)}
.att-wrap{max-height:75vh;overflow-y:auto}
.att-tbl thead th{position:sticky;top:0;z-index:10;box-shadow:0 2px 4px rgba(0,0,0,.06)}
[data-theme="dark"] .att-tbl thead th{box-shadow:0 2px 4px rgba(0,0,0,.3)}

/* ============================================================
   ⑥ アニメーション・トランジション強化
   ============================================================ */
/* ページ遷移フェードイン */
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.page-animate{animation:pageIn .3s ease-out}
/* カード出現 */
@keyframes cardIn{from{opacity:0;transform:scale(.97) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}
.card-animate{animation:cardIn .35s ease-out both}
.card-animate:nth-child(2){animation-delay:.05s}
.card-animate:nth-child(3){animation-delay:.1s}
.card-animate:nth-child(4){animation-delay:.15s}
.card-animate:nth-child(5){animation-delay:.2s}
/* ボタンホバー・押下 */
.btn-action,.btn-sm,.btn-modal,.btn-refresh,.btn-logout,.chip,.login-user{transition:all .2s cubic-bezier(.4,0,.2,1)}
.btn-action:active:not(:disabled){transform:scale(.95)}
/* テーブル行ホバー */
.mgr-table tr,.emp-tbl tr,.att-tbl tbody tr{transition:background .15s ease}
/* ゼブラストライプ（交互行） */
.mgr-table tbody tr:nth-child(even),.emp-tbl tbody tr:nth-child(even),.att-tbl tbody tr:nth-child(even),.hq-table tbody tr:nth-child(even){background:rgba(61,155,143,.04)}
.mgr-table tbody tr:nth-child(even):hover,.emp-tbl tbody tr:nth-child(even):hover,.att-tbl tbody tr:nth-child(even):hover,.hq-table tbody tr:nth-child(even):hover{background:rgba(61,155,143,.08)}
.mgr-table tbody tr:nth-child(odd):hover,.emp-tbl tbody tr:nth-child(odd):hover,.att-tbl tbody tr:nth-child(odd):hover,.hq-table tbody tr:nth-child(odd):hover{background:rgba(61,155,143,.06)}
[data-theme="dark"] .mgr-table tbody tr:nth-child(even),[data-theme="dark"] .emp-tbl tbody tr:nth-child(even),[data-theme="dark"] .att-tbl tbody tr:nth-child(even),[data-theme="dark"] .hq-table tbody tr:nth-child(even){background:rgba(125,211,198,.05)}
[data-theme="dark"] .mgr-table tbody tr:nth-child(even):hover,[data-theme="dark"] .emp-tbl tbody tr:nth-child(even):hover,[data-theme="dark"] .att-tbl tbody tr:nth-child(even):hover,[data-theme="dark"] .hq-table tbody tr:nth-child(even):hover{background:rgba(125,211,198,.1)}
/* メトリックカードホバー */
.metric,.mgr-stat,.hq-gs-item,.hq-store{transition:all .2s ease;cursor:default}
.metric:hover,.mgr-stat:hover,.hq-gs-item:hover,.hq-store:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
/* モーダルオーバーレイ */
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
@keyframes modalSlide{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
/* ナビゲーションバッジ */
@keyframes badgePop{0%{transform:scale(0)}50%{transform:scale(1.15)}100%{transform:scale(1)}}
.nav-badge{animation:badgePop .35s ease-out}
/* トースト通知 */
@keyframes toastIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastOut{from{opacity:1}to{opacity:0;transform:translateY(-12px)}}
/* スムーストグル */
.nav-bottom{transition:max-height .3s ease,opacity .3s ease;overflow:hidden}
/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ============================================================
   ③ キーボードショートカット ヘルプパネル
   ============================================================ */
.kbd-help-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:500;display:flex;align-items:center;justify-content:center;animation:overlayIn .2s ease}
[data-theme="dark"] .kbd-help-overlay{background:rgba(0,0,0,.7)}
.kbd-help-panel{background:var(--card);border-radius:var(--radius);padding:28px 24px;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:modalSlide .25s ease-out}
.kbd-help-title{font-size:18px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.kbd-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}
.kbd-row:last-child{border-bottom:none}
.kbd-label{font-size:14px;color:var(--text2)}
.kbd-keys{display:flex;gap:4px}
kbd{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:26px;padding:0 8px;background:var(--bg);border:1px solid var(--border);border-radius:5px;font-family:'Inter',monospace;font-size:11px;font-weight:600;color:var(--text);box-shadow:0 1px 0 var(--border)}

/* ============================================================
   P1/P2: アクセシビリティ — フォーカスインジケータ
   ============================================================ */
/* :focus-visible — キーボード操作時のみ視覚リング表示 */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
button:focus-visible,.btn-refresh:focus-visible,.btn-sm:focus-visible,.btn-action:focus-visible,.btn-modal:focus-visible,.btn-logout:focus-visible,.modal-btn:focus-visible,.chip:focus-visible,.login-user:focus-visible,.nav-links a:focus-visible,.dark-toggle:focus-visible,.nav-hamburger:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px rgba(109,193,179,.5)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--primary);outline-offset:0;box-shadow:0 0 0 3px var(--primary-bg)}
.pin-digit:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
[data-theme="dark"] :focus-visible{outline-color:var(--primary)}
[data-theme="dark"] button:focus-visible,[data-theme="dark"] .btn-refresh:focus-visible,[data-theme="dark"] .btn-sm:focus-visible{outline-color:#7DD3C6;box-shadow:0 0 0 4px rgba(125,211,198,.3)}
/* スキップリンク（スクリーンリーダー用） */
.skip-link{position:absolute;top:-100%;left:16px;background:var(--primary);color:#fff;padding:8px 16px;border-radius:0 0 8px 8px;font-size:14px;font-weight:600;z-index:9999;transition:top .2s}
.skip-link:focus{top:0}

/* ============================================================
   P3: ダークモード微調整 — 勤務実績表・PINモーダル
   ============================================================ */
[data-theme="dark"] .att-tbl tr.att-sun{background:rgba(220,38,38,.08)}
[data-theme="dark"] .att-tbl tr.att-sun:hover{background:rgba(220,38,38,.14)}
[data-theme="dark"] .att-tbl tr.att-sat{background:rgba(37,99,235,.08)}
[data-theme="dark"] .att-tbl tr.att-sat:hover{background:rgba(37,99,235,.14)}
[data-theme="dark"] .att-tbl tr.att-holiday{background:rgba(254,252,232,.05)}
[data-theme="dark"] .att-tbl tr.att-holiday:hover{background:rgba(254,252,232,.1)}
[data-theme="dark"] .att-total-row{background:#1a2530!important;border-top-color:#536471}
[data-theme="dark"] .att-tbl .att-late{background:rgba(254,243,199,.1);color:#fbbf24}
/* ──── Dark Mode: PIN Modal ──── */
[data-theme="dark"] .pin-overlay{background:rgba(0,0,0,.7) !important;backdrop-filter:blur(20px) saturate(1.2) !important;-webkit-backdrop-filter:blur(20px) saturate(1.2) !important}
[data-theme="dark"] .pin-card{background:rgba(22,30,40,.92) !important;color:var(--text);border-color:rgba(125,211,198,.1) !important;box-shadow:0 25px 80px rgba(0,0,0,.5),0 8px 32px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.05) !important}
[data-theme="dark"] .pin-card::before{background:linear-gradient(90deg,#3D9B8F,#7DD3C6,#3D9B8F)}
[data-theme="dark"] .pin-card-keypad{background:rgba(22,30,40,.92) !important;border-color:rgba(125,211,198,.1) !important;box-shadow:0 25px 80px rgba(0,0,0,.5),0 8px 32px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.05) !important}
[data-theme="dark"] .pin-card-keypad::before{background:linear-gradient(90deg,#3D9B8F,#7DD3C6,#3D9B8F)}
[data-theme="dark"] .pin-card-icon{background:linear-gradient(135deg,#2d7a70,#3D9B8F);box-shadow:0 4px 12px rgba(61,155,143,.3)}
[data-theme="dark"] .pin-card-name{color:var(--text)}
[data-theme="dark"] .pin-card-role{color:var(--text2)}
[data-theme="dark"] .pin-label{color:var(--text2)}
[data-theme="dark"] .pin-digit{background:rgba(15,20,30,.6);color:var(--text);border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .pin-digit:focus{background:rgba(20,28,38,.8);border-color:#7DD3C6;box-shadow:0 0 0 4px rgba(125,211,198,.15),0 2px 8px rgba(125,211,198,.1)}
[data-theme="dark"] .pin-btn-cancel{background:rgba(45,58,69,.8);color:var(--text2);backdrop-filter:blur(4px)}
[data-theme="dark"] .pin-btn-cancel:hover{background:rgba(54,68,82,.9)}
[data-theme="dark"] .pin-btn-ok{background:linear-gradient(135deg,#2d7a70,#3D9B8F);box-shadow:0 4px 16px rgba(61,155,143,.25)}
[data-theme="dark"] .pin-btn-ok:hover{box-shadow:0 6px 20px rgba(61,155,143,.3)}
[data-theme="dark"] .pin-error{color:var(--danger)}
[data-theme="dark"] .pin-dot{border-color:rgba(255,255,255,.15);background:transparent}
[data-theme="dark"] .pin-dot-filled{border-color:#7DD3C6 !important;background:#7DD3C6 !important;box-shadow:0 0 0 3px rgba(125,211,198,.15),0 0 10px rgba(125,211,198,.2) !important}
[data-theme="dark"] .pin-dot-sm.pin-dot-filled{box-shadow:0 0 0 3px rgba(125,211,198,.15) !important}
[data-theme="dark"] .pin-display{color:#7DD3C6 !important;text-shadow:0 2px 12px rgba(125,211,198,.2)}
[data-theme="dark"] .pin-display-empty{color:rgba(255,255,255,.2) !important;text-shadow:none}
[data-theme="dark"] .pin-key{background:linear-gradient(145deg,#1a2e2b,#152824) !important;color:#7DD3C6 !important;box-shadow:3px 3px 8px rgba(0,0,0,.2),-2px -2px 6px rgba(125,211,198,.03),inset 0 1px 0 rgba(125,211,198,.05) !important}
[data-theme="dark"] .pin-key:hover{background:linear-gradient(145deg,#213835,#1a2e2b) !important;color:#9ae5db !important;box-shadow:3px 3px 10px rgba(0,0,0,.25),-2px -2px 6px rgba(125,211,198,.04),inset 0 1px 0 rgba(125,211,198,.08) !important}
[data-theme="dark"] .pin-key:active{background:linear-gradient(145deg,#152824,#11221f) !important;box-shadow:inset 2px 2px 6px rgba(0,0,0,.25),inset -1px -1px 3px rgba(125,211,198,.02) !important;color:#7DD3C6 !important}
[data-theme="dark"] .pin-key-fn{background:linear-gradient(145deg,#1e332f,#192b28) !important;color:#5fbcb0 !important;box-shadow:2px 2px 6px rgba(0,0,0,.18),-2px -2px 5px rgba(125,211,198,.02),inset 0 1px 0 rgba(125,211,198,.04) !important}
[data-theme="dark"] .pin-key-fn:hover{background:linear-gradient(145deg,#253d38,#1e332f) !important;color:#7DD3C6 !important}
[data-theme="dark"] .pin-key-fn:active{background:linear-gradient(145deg,#192b28,#142422) !important;box-shadow:inset 2px 2px 5px rgba(0,0,0,.2),inset -1px -1px 3px rgba(125,211,198,.01) !important}
[data-theme="dark"] .pin-key::after{background:rgba(125,211,198,.15)}
/* ダークモード: ログイン画面ストアカード */
[data-theme="dark"] .login-store-row{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .login-store-row:hover{background:rgba(255,255,255,.1)}
[data-theme="dark"] .login-store-label{color:var(--text)}
[data-theme="dark"] .login-hq-row{background:rgba(255,255,255,.06);border-color:rgba(125,211,198,.15)}

/* ============================================================
   P2: フォーム入力UX向上
   ============================================================ */
/* バリデーション状態 */
.form-group input:invalid:not(:placeholder-shown),.form-group select:invalid:not(:placeholder-shown){border-color:var(--danger);box-shadow:0 0 0 2px var(--danger-bg)}
.form-group input:valid:not(:placeholder-shown){border-color:var(--success)}
.form-error{font-size:12px;color:var(--danger);margin-top:4px;display:none;align-items:center;gap:4px}
.form-error i{font-size:11px}
.form-group.has-error .form-error{display:flex}
.form-group.has-error input,.form-group.has-error select{border-color:var(--danger);box-shadow:0 0 0 2px var(--danger-bg)}
/* 数値入力ステッパーボタン */
input[type="number"]{-moz-appearance:textfield}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:28px;opacity:1}
/* ラベル内の必須マーク */
.required::after{content:' *';color:var(--danger);font-weight:700}
/* プレースホルダーのトランジション */
.form-group input::placeholder,.form-group select::placeholder{color:var(--text3);transition:opacity .2s}
.form-group input:focus::placeholder{opacity:.4}

/* ============================================================
   P3: マイクロインタラクション
   ============================================================ */
/* 数値カウントアップ */
@keyframes countUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.count-animate{animation:countUp .4s ease-out}
/* プログレスバー */
.progress-bar{height:6px;background:#e5e7eb;border-radius:3px;overflow:hidden}
.progress-fill{height:100%;border-radius:3px;transition:width .6s cubic-bezier(.4,0,.2,1)}
.progress-fill.fill-success{background:var(--success)}
.progress-fill.fill-primary{background:var(--primary)}
.progress-fill.fill-warn{background:var(--warn)}
.progress-fill.fill-danger{background:var(--danger)}
[data-theme="dark"] .progress-bar{background:#2d3a45}
/* チェックボックスカスタム */
input[type="checkbox"]{accent-color:var(--primary);transition:transform .15s}
input[type="checkbox"]:active{transform:scale(.9)}
/* ボタンリップル効果 */
.btn-action,.btn-sm,.btn-modal,.btn-refresh{position:relative;overflow:hidden}
.btn-action::after,.btn-sm::after,.btn-modal::after,.btn-refresh::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(255,255,255,.25) 0%,transparent 60%);opacity:0;transition:opacity .3s}
.btn-action:active::after,.btn-sm:active::after,.btn-modal:active::after,.btn-refresh:active::after{opacity:1;transition:opacity 0s}
/* テーブル行フェードイン */
@keyframes rowIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
.row-animate{animation:rowIn .25s ease-out both}
/* ナビバースクロール縮小 */
.nav.nav-scrolled .nav-top{height:40px}
.nav.nav-scrolled .nav-bottom{padding:2px 12px;min-height:34px}
.nav.nav-scrolled .nav-brand{font-size:14px}
.nav-top,.nav-bottom,.nav-brand{transition:all .2s ease}

/* ============================================================
   P1: 汎用トースト通知
   ============================================================ */
.toast-container{position:fixed;top:16px;right:16px;z-index:99999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:10px;font-size:14px;font-weight:600;box-shadow:0 4px 16px rgba(0,0,0,.15);animation:toastIn .3s ease-out;max-width:400px;min-width:260px;backdrop-filter:blur(8px)}
.toast.toast-out{animation:toastOut .25s ease-in forwards}
.toast-success{background:#1e8e3e;color:#fff}
.toast-error{background:#c5221f;color:#fff}
.toast-warning{background:#e37400;color:#fff}
.toast-info{background:var(--primary);color:#fff}
.toast i{font-size:16px;flex-shrink:0}
.toast-msg{flex:1;line-height:1.4}
.toast-close{background:none;border:none;color:rgba(255,255,255,.7);font-size:14px;cursor:pointer;padding:4px;border-radius:4px;flex-shrink:0}
.toast-close:hover{color:#fff;background:rgba(255,255,255,.15)}
[data-theme="dark"] .toast{box-shadow:0 4px 16px rgba(0,0,0,.4)}

/* ===== モバイル給与カードビュー ===== */
.payroll-cards{display:none}
.payroll-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:12px;box-shadow:var(--shadow)}
.payroll-card-name{font-size:15px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.payroll-card-name .role-tag{display:inline-block;padding:1px 5px;border-radius:4px;font-size:9px;font-weight:700;background:#f3e8ff;color:#7c3aed;vertical-align:middle}
.payroll-card-name .type-tag{display:inline-block;padding:2px 6px;border-radius:4px;font-size:10px;font-weight:700}
.payroll-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
.payroll-card-item{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;border-bottom:1px solid var(--border);font-size:13px}
.payroll-card-item:last-child{border-bottom:none}
.payroll-card-label{color:var(--text3);font-size:11px;white-space:nowrap}
.payroll-card-value{font-family:monospace;font-weight:600;font-size:13px;text-align:right}
.payroll-card-total{margin-top:8px;padding-top:8px;border-top:2px solid var(--primary);display:flex;justify-content:space-between;align-items:center;font-size:15px;font-weight:700}
.payroll-card-total .total-amount{color:var(--primary);font-family:monospace}
@media(max-width:768px){
  .payroll-table-mode .mgr-table-wrap{display:none!important}
  .payroll-table-mode .payroll-cards{display:block!important}
}
[data-theme="dark"] .payroll-card{background:var(--card);border-color:var(--border)}

/* ===== 印刷用スタイル ===== */
@media print{
  .nav,.nav-top,.nav-bottom,.btn-refresh,.btn-action,.btn-logout,.btn-sm,.modal-overlay,.pin-overlay{display:none!important}
  body{background:#fff;font-size:11px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .page,.page-wide,.att-report{max-width:100%;padding:0;margin:0}
  .att-tbl{min-width:auto;font-size:10px}
  .att-tbl th,.att-tbl td{padding:4px 6px}
  .att-wrap{box-shadow:none;border:none;overflow:visible}
  .att-controls{display:none}
  .att-legend{font-size:10px}
  .emp-page-inner{height:auto;overflow:visible}
  .metrics{page-break-inside:avoid}
  .timeline-card{page-break-inside:avoid}
  @page{margin:10mm 8mm}
}

/* ═══════════════════════════════════════════════════════════════
   ★ Mobile Portrait HQ — 縦画面専用HQ管理画面UI
   対象: max-width: 768px （タブレット未満のモバイル端末）
   方針: テーブル→カード、横並び→縦積み、タッチ最適化
   ═══════════════════════════════════════════════════════════════ */

/* ----------------------------------------------------------
   M-1: ページコンテナ・ヘッダー・コントロール縦積み
   ---------------------------------------------------------- */
@media(max-width:768px){
  .page-wide{padding:10px 12px !important;max-width:100vw !important;overflow-x:hidden}

  /* ── HQヘッダー ── */
  .hq-header{flex-direction:column !important;align-items:stretch !important;gap:8px !important}
  .hq-title{font-size:17px !important}
  .hq-subtitle{font-size:12px !important}
  .hq-controls{display:flex !important;flex-wrap:wrap !important;gap:6px !important;width:100% !important}
  .hq-controls .btn-refresh{flex:1;min-width:0;font-size:11px !important;padding:8px 6px !important;white-space:nowrap;justify-content:center}
  .hq-controls .auto-label{font-size:12px !important;flex-basis:100%;justify-content:center}

  /* ── グローバルサマリー 3列→2列 ── */
  .hq-global-summary{grid-template-columns:repeat(3,1fr) !important;gap:6px !important}
  .hq-gs-val{font-size:22px !important}
  .hq-gs-label{font-size:11px !important}
  .hq-gs-icon{font-size:14px !important}
  .hq-gs-item{padding:8px 4px !important}

  /* ── 店舗カード ── */
  .hq-stores{grid-template-columns:1fr !important;gap:8px !important}
  .hq-store{padding:12px 14px !important}
  .hq-store-name{font-size:14px !important}
  .mini-stat{font-size:11px !important;padding:2px 6px !important}

  /* ── フィルター縦積み ── */
  .hq-filters{flex-direction:column !important;gap:6px !important}
  .hq-filters select,.hq-filters input{width:100% !important;max-width:100% !important;font-size:14px !important}
  .hq-count{margin-left:0 !important;font-size:13px !important}

  /* ── フッター ── */
  .hq-footer{flex-direction:column !important;text-align:center !important;padding:10px 12px !important;font-size:12px !important;gap:4px !important}

  /* ── 従業員マスタヘッダー ── */
  .emp-master-header{flex-direction:column !important;align-items:stretch !important;gap:8px !important}
  .emp-master-actions{display:flex !important;flex-wrap:wrap !important;gap:6px !important}
  .emp-master-actions .btn-refresh{flex:1;min-width:0;font-size:11px !important;padding:8px 6px !important;white-space:nowrap;text-align:center;justify-content:center}
  .emp-master-filters{flex-direction:column !important;gap:6px !important}
  .emp-master-filters select,.emp-master-filters input{width:100% !important;max-width:100% !important}
  .emp-master-count{margin-left:0 !important}
}

/* ----------------------------------------------------------
   M-2: HQダッシュボード テーブル → カードビュー
   12列テーブルを完全にカード表示に変換
   ---------------------------------------------------------- */
@media(max-width:768px){
  /* テーブルのヘッダーを非表示 */
  .hq-table thead{display:none !important}

  /* テーブル自体をブロック表示に */
  .hq-table,.hq-table tbody,.hq-table tr,.hq-table td{display:block !important;width:100% !important}
  .mgr-table-wrap:has(.hq-table){overflow-x:visible !important;max-height:none !important}

  /* 各行をカードスタイルに */
  .hq-table tr{background:var(--card) !important;border:1px solid var(--border) !important;border-radius:var(--radius-sm) !important;padding:12px !important;margin-bottom:8px !important;box-shadow:var(--shadow) !important;position:relative !important}
  .hq-table tr.row-holiday{background:#fffde7 !important;border-color:#fde68a !important}

  /* セルをラベル付きで表示 */
  .hq-table td{padding:3px 0 !important;border-bottom:none !important;white-space:normal !important;font-size:13px !important;display:flex !important;justify-content:space-between !important;align-items:center !important}
  .hq-table td:empty{display:none !important}

  /* data-label疑似要素でラベルを表示 */
  .hq-table td:nth-child(1)::before{content:'店舗';font-weight:600;color:var(--text2);font-size:11px;min-width:70px;flex-shrink:0}
  .hq-table td:nth-child(2)::before{content:'スタッフ';font-weight:600;color:var(--text2);font-size:11px;min-width:70px;flex-shrink:0}
  .hq-table td:nth-child(3)::before{content:'ステータス';font-weight:600;color:var(--text2);font-size:11px;min-width:70px;flex-shrink:0}
  .hq-table td:nth-child(4)::before{content:'出勤';font-weight:600;color:var(--text2);font-size:11px;min-width:70px;flex-shrink:0}
  .hq-table td:nth-child(5)::before{content:'退勤';font-weight:600;color:var(--text2);font-size:11px;min-width:70px;flex-shrink:0}
  .hq-table td:nth-child(6)::before{content:'最終イベント';font-weight:600;color:var(--text2);font-size:11px;min-width:70px;flex-shrink:0}
  .hq-table td:nth-child(7)::before{content:'実労働';font-weight:600;color:var(--text2);font-size:11px;min-width:70px;flex-shrink:0}
  .hq-table td:nth-child(8)::before{content:'残業見込';font-weight:600;color:var(--text2);font-size:11px;min-width:70px;flex-shrink:0}
  .hq-table td:nth-child(9)::before{content:'不足';font-weight:600;color:var(--text2);font-size:11px;min-width:70px;flex-shrink:0}
  .hq-table td:nth-child(10)::before{content:'区分';font-weight:600;color:var(--text2);font-size:11px;min-width:70px;flex-shrink:0}
  .hq-table td:nth-child(11)::before{content:'異常';font-weight:600;color:var(--text2);font-size:11px;min-width:70px;flex-shrink:0}
  .hq-table td:nth-child(12)::before{content:'操作';font-weight:600;color:var(--text2);font-size:11px;min-width:70px;flex-shrink:0}

  /* カード内のスタッフ名を目立たせる */
  .hq-table td:nth-child(2){font-size:14px !important;font-weight:600 !important;padding-bottom:4px !important;border-bottom:1px solid var(--border) !important;margin-bottom:4px !important}
  /* 店舗名を小さく */
  .hq-table td:nth-child(1){font-size:11px !important;color:var(--text3) !important}

  /* 調整ボタンをフル幅 */
  .hq-table td:nth-child(12) .btn-sm{width:100%;justify-content:center}

  /* 「該当なし」行 */
  .hq-table td[colspan]{display:block !important;text-align:center !important;padding:24px 0 !important}
  .hq-table td[colspan]::before{display:none !important}
}

/* ----------------------------------------------------------
   M-3: 従業員マスタテーブル → カードビュー
   10列テーブルをカード化
   ---------------------------------------------------------- */
@media(max-width:768px){
  .emp-tbl thead{display:none !important}
  .emp-tbl,.emp-tbl tbody,.emp-tbl tr,.emp-tbl td{display:block !important;width:100% !important}
  .emp-tbl-wrap,.emp-tbl-wrap:has(.emp-tbl){overflow-x:visible !important;max-height:none !important}
  /* テーブルラッパーのoverflow修正 */
  .page-wide div[style*="overflow-x:auto"]:has(.emp-tbl){overflow-x:visible !important}

  .emp-tbl tr{background:var(--card) !important;border:1px solid var(--border) !important;border-radius:var(--radius-sm) !important;padding:12px !important;margin-bottom:8px !important;box-shadow:var(--shadow) !important}
  .emp-tbl tr.inactive{opacity:.65 !important;background:var(--bg) !important}

  .emp-tbl td{padding:3px 0 !important;border-bottom:none !important;white-space:normal !important;font-size:13px !important;display:flex !important;justify-content:space-between !important;align-items:center !important}
  .emp-tbl td:empty{display:none !important}

  .emp-tbl td:nth-child(1)::before{content:'名前';font-weight:600;color:var(--text2);font-size:11px;min-width:65px;flex-shrink:0}
  .emp-tbl td:nth-child(2)::before{content:'メール';font-weight:600;color:var(--text2);font-size:11px;min-width:65px;flex-shrink:0}
  .emp-tbl td:nth-child(3)::before{content:'店舗';font-weight:600;color:var(--text2);font-size:11px;min-width:65px;flex-shrink:0}
  .emp-tbl td:nth-child(4)::before{content:'役割';font-weight:600;color:var(--text2);font-size:11px;min-width:65px;flex-shrink:0}
  .emp-tbl td:nth-child(5)::before{content:'雇用形態';font-weight:600;color:var(--text2);font-size:11px;min-width:65px;flex-shrink:0}
  .emp-tbl td:nth-child(6)::before{content:'契約時間';font-weight:600;color:var(--text2);font-size:11px;min-width:65px;flex-shrink:0}
  .emp-tbl td:nth-child(7)::before{content:'入社日';font-weight:600;color:var(--text2);font-size:11px;min-width:65px;flex-shrink:0}
  .emp-tbl td:nth-child(8)::before{content:'週勤務';font-weight:600;color:var(--text2);font-size:11px;min-width:65px;flex-shrink:0}
  .emp-tbl td:nth-child(9)::before{content:'状態';font-weight:600;color:var(--text2);font-size:11px;min-width:65px;flex-shrink:0}
  .emp-tbl td:nth-child(10)::before{content:'操作';font-weight:600;color:var(--text2);font-size:11px;min-width:65px;flex-shrink:0}

  /* 名前を目立たせる */
  .emp-tbl td:nth-child(1){font-size:15px !important;font-weight:700 !important;padding-bottom:4px !important;border-bottom:1px solid var(--border) !important;margin-bottom:4px !important}

  /* メールは小さく */
  .emp-tbl td:nth-child(2){font-size:11px !important}

  /* 操作ボタン群を横並び */
  .emp-tbl td:nth-child(10){flex-wrap:wrap !important;gap:4px !important}
  .emp-tbl td:nth-child(10) .btn-sm{flex:1;min-width:0;font-size:11px !important;padding:6px 4px !important;text-align:center;justify-content:center;white-space:nowrap}

  /* colspan対応 */
  .emp-tbl td[colspan]{display:block !important;text-align:center !important;padding:24px 0 !important}
  .emp-tbl td[colspan]::before{display:none !important}
}

/* ----------------------------------------------------------
   M-4: 監査ログテーブル → カードビュー
   ---------------------------------------------------------- */
@media(max-width:768px){
  .mgr-table:not(.hq-table) thead{display:none !important}
  .mgr-table:not(.hq-table),.mgr-table:not(.hq-table) tbody,.mgr-table:not(.hq-table) tr,.mgr-table:not(.hq-table) td{display:block !important;width:100% !important}

  .mgr-table:not(.hq-table) tr{background:var(--card) !important;border:1px solid var(--border) !important;border-radius:var(--radius-sm) !important;padding:10px 12px !important;margin-bottom:6px !important;box-shadow:var(--shadow) !important}

  .mgr-table:not(.hq-table) td{padding:2px 0 !important;border-bottom:none !important;white-space:normal !important;font-size:12px !important}
  .mgr-table:not(.hq-table) td:empty{display:none !important}
  .mgr-table-wrap{max-height:none !important;overflow-x:visible !important}

  /* colspan対応 */
  .mgr-table:not(.hq-table) td[colspan]{display:block !important;text-align:center !important;padding:20px 0 !important}
}

/* ----------------------------------------------------------
   M-5: 給与・設定関連パネル レスポンシブ
   ---------------------------------------------------------- */
@media(max-width:768px){
  /* インラインスタイルのgridを上書き */
  .page-wide div[style*="grid-template-columns"]{grid-template-columns:1fr !important}
  .page-wide div[style*="display:grid"]{grid-template-columns:1fr !important}

  /* flex横並びパネル → 縦積み */
  .page-wide div[style*="display:flex"][style*="justify-content:space-between"]{flex-direction:column !important;align-items:stretch !important;gap:8px !important}
  .page-wide div[style*="display:flex"][style*="gap:8px"]{flex-wrap:wrap !important}

  /* ボタン群を折り返し */
  .page-wide div[style*="display:flex"][style*="gap:6px"]{flex-wrap:wrap !important}
  .page-wide div[style*="display:flex"][style*="gap:6px"] button{flex:1;min-width:0;font-size:11px !important;white-space:nowrap}

  /* 分析チャートを1列に */
  .page-wide div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important}

  /* アラートパネル内レスポンシブ */
  .page-wide div[style*="display:flex"][style*="flex-wrap:wrap"][style*="gap:6px"]{gap:4px !important}
  .page-wide div[style*="display:flex"][style*="flex-wrap:wrap"][style*="gap:8px"]{gap:4px !important}

  /* 所定時間パネル */
  .page-wide div[style*="display:flex"][style*="align-items:center"][style*="gap:16px"]{flex-direction:column !important;align-items:flex-start !important;gap:4px !important}

  /* デモデータパネル */
  .page-wide div[style*="display:flex"][style*="align-items:center"][style*="gap:12px"]{flex-direction:column !important;align-items:stretch !important;gap:6px !important}

  /* 36協定設定grid */
  .page-wide div[style*="grid-template-columns:repeat(auto-fit"]{grid-template-columns:1fr 1fr !important}

  /* select/input をフル幅に */
  .page-wide select,.page-wide input[type="month"],.page-wide input[type="date"]{width:100% !important;max-width:100% !important}

  /* モーダル/カード */
  .modal-card{max-width:100vw !important;width:100% !important;border-radius:12px 12px 0 0 !important}
  .modal-body{padding:14px 16px 20px !important}
  .modal-header{padding:16px 16px 0 !important}
}

/* ----------------------------------------------------------
   M-6: 給与テーブル → モバイルカードビュー強化
   ---------------------------------------------------------- */
@media(max-width:768px){
  /* 給与計算ページのボタン群 */
  .payroll-table-mode div[style*="display:flex"][style*="gap:6px"]{flex-wrap:wrap !important}
  .payroll-table-mode div[style*="display:flex"][style*="gap:6px"] button{font-size:10px !important;padding:6px 8px !important;flex:1;min-width:0;white-space:nowrap}

  /* カードビュー改良 */
  .payroll-card{padding:12px !important}
  .payroll-card-grid{grid-template-columns:1fr !important}
  .payroll-card-item{font-size:12px !important}
  .payroll-card-name{font-size:14px !important}
  .payroll-card-total{font-size:14px !important}
}

/* ----------------------------------------------------------
   M-7: ナビゲーション・全体的なモバイル改良
   ---------------------------------------------------------- */
@media(max-width:768px){
  /* ナビバー改良 */
  .nav-top{padding:0 10px !important;height:42px !important}
  .nav-brand{font-size:14px !important}
  .nav-badge{font-size:10px !important;padding:2px 6px !important}
  .nav-user{font-size:11px !important}
  .btn-logout{font-size:11px !important;padding:4px 8px !important}

  /* テーブル内の時刻フォント */
  .td-time{font-size:13px !important}
  .td-store{font-size:12px !important}

  /* バッジ */
  .badge{font-size:11px !important;padding:3px 8px !important}
  .anomaly-badge{font-size:10px !important;padding:2px 6px !important}
  .prov-badge{font-size:10px !important}

  /* 空データ行 */
  .empty-state{padding:24px 16px !important;min-height:120px !important}
  .empty-state-icon{width:80px !important;height:80px !important}
  .empty-state-title{font-size:15px !important}
  .empty-state-desc{font-size:12px !important}

  /* スケルトン */
  .skeleton-card{padding:10px !important}
}

/* ----------------------------------------------------------
   M-8: ダークモード モバイル補正
   ---------------------------------------------------------- */
@media(max-width:768px){
  [data-theme="dark"] .hq-table tr{background:var(--card) !important;border-color:var(--border) !important}
  [data-theme="dark"] .hq-table tr.row-holiday{background:rgba(255,253,231,.05) !important;border-color:rgba(253,230,138,.2) !important}
  [data-theme="dark"] .emp-tbl tr{background:var(--card) !important;border-color:var(--border) !important}
  [data-theme="dark"] .emp-tbl tr.inactive{background:var(--bg) !important}
  [data-theme="dark"] .mgr-table:not(.hq-table) tr{background:var(--card) !important;border-color:var(--border) !important}
  [data-theme="dark"] .hq-table td:nth-child(1)::before,
  [data-theme="dark"] .hq-table td:nth-child(2)::before,
  [data-theme="dark"] .hq-table td:nth-child(3)::before,
  [data-theme="dark"] .hq-table td:nth-child(4)::before,
  [data-theme="dark"] .hq-table td:nth-child(5)::before,
  [data-theme="dark"] .hq-table td:nth-child(6)::before,
  [data-theme="dark"] .hq-table td:nth-child(7)::before,
  [data-theme="dark"] .hq-table td:nth-child(8)::before,
  [data-theme="dark"] .hq-table td:nth-child(9)::before,
  [data-theme="dark"] .hq-table td:nth-child(10)::before,
  [data-theme="dark"] .hq-table td:nth-child(11)::before,
  [data-theme="dark"] .hq-table td:nth-child(12)::before{color:var(--text3) !important}
  [data-theme="dark"] .emp-tbl td:nth-child(1)::before,
  [data-theme="dark"] .emp-tbl td:nth-child(2)::before,
  [data-theme="dark"] .emp-tbl td:nth-child(3)::before,
  [data-theme="dark"] .emp-tbl td:nth-child(4)::before,
  [data-theme="dark"] .emp-tbl td:nth-child(5)::before,
  [data-theme="dark"] .emp-tbl td:nth-child(6)::before,
  [data-theme="dark"] .emp-tbl td:nth-child(7)::before,
  [data-theme="dark"] .emp-tbl td:nth-child(8)::before,
  [data-theme="dark"] .emp-tbl td:nth-child(9)::before,
  [data-theme="dark"] .emp-tbl td:nth-child(10)::before{color:var(--text3) !important}
}

/* ----------------------------------------------------------
   M-9: 超小型画面 (≤ 480px) 追加調整
   ---------------------------------------------------------- */
@media(max-width:480px){
  .page-wide{padding:8px !important}
  .hq-global-summary{grid-template-columns:repeat(3,1fr) !important;gap:4px !important}
  .hq-gs-val{font-size:20px !important}
  .hq-gs-label{font-size:10px !important}
  .hq-gs-item{padding:6px 2px !important}
  .hq-title{font-size:15px !important}
  .hq-store{padding:10px 12px !important}
  .hq-store-name{font-size:13px !important}
  .hq-table td{font-size:12px !important}
  .hq-table td:nth-child(2){font-size:13px !important}
  .emp-tbl td{font-size:12px !important}
  .emp-tbl td:nth-child(1){font-size:14px !important}
  .payroll-card{padding:10px !important}

  /* 36協定設定を1列に */
  .page-wide div[style*="grid-template-columns:repeat(auto-fit"]{grid-template-columns:1fr !important}
}

/* ----------------------------------------------------------
   M-10: モバイル横画面対応
   横画面でも正常に表示・スクロール可能に
   ---------------------------------------------------------- */
/* ============================================================
   Phase 1: WCAG AA コントラスト修正
   ============================================================ */
/* P1-05: ステータスバッジ・テキストのコントラスト比 4.5:1 以上確保 */
.hq-gs-label{color:#4b5563}  /* var(--text2) → 暗めに (#6b7280→#4b5563) */
.metric-label{color:#4b5563}
.att-legend{color:#4b5563}
.hq-count{color:#4b5563}
.emp-master-count{color:#4b5563}
.completed-sub{color:#4b5563}
.cat-desc{color:#4b5563}
.mgr-stat-label{color:#4b5563}
.confirm-sub{color:#4b5563}
/* バッジ: コントラスト不足 (#6b7280 on light bg) → 暗化 */
.badge{color:#374151}
.anomaly-badge{font-weight:700}
/* ダークモード: 薄すぎるテキストを明るく */
[data-theme="dark"] .hq-gs-label{color:#a8b3c0}
[data-theme="dark"] .metric-label{color:#a8b3c0}
[data-theme="dark"] .att-legend{color:#a8b3c0}
[data-theme="dark"] .mgr-stat-label{color:#a8b3c0}
/* 外出ステータスの背景/前景コントラスト */
.alert-notice{color:#6b4400}
.alert-warning .alert-badge{background:#e67700;color:#fff}
/* スクリーンリーダー専用ユーティリティ */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* ============================================================
   Phase 1: パンくずリスト（Breadcrumb）
   ============================================================ */
.breadcrumb-nav{background:var(--card);border-bottom:1px solid var(--border);padding:6px 18px;font-size:12px;contain:layout style}
.breadcrumb-list{display:flex;align-items:center;gap:0;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.breadcrumb-item{display:flex;align-items:center}
.breadcrumb-item+.breadcrumb-item::before{content:'/';color:var(--text3);margin:0 8px;font-size:11px}
.breadcrumb-item a{color:var(--primary);text-decoration:none;font-weight:500;transition:color .15s}
.breadcrumb-item a:hover{color:var(--primary-d);text-decoration:underline}
.breadcrumb-item span[aria-current="page"]{color:var(--text);font-weight:600}
[data-theme="dark"] .breadcrumb-nav{background:var(--card);border-color:var(--border)}
[data-theme="dark"] .breadcrumb-item a{color:var(--primary)}
@media print{.breadcrumb-nav{display:none!important}}

/* ============================================================
   Phase 1: ボトムナビゲーション（モバイル）
   ============================================================ */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:150;background:var(--card);border-top:1px solid var(--border);box-shadow:0 -2px 12px rgba(0,0,0,.08);padding:4px 0 calc(4px + env(safe-area-inset-bottom, 0px));justify-content:space-around;align-items:center}
@media(max-width:768px){
  .bottom-nav{display:flex}
}
.bottom-nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;font-size:10px;color:var(--text3);text-decoration:none;transition:color .15s;min-width:56px;border-radius:8px;-webkit-tap-highlight-color:transparent}
.bottom-nav-item i{font-size:18px;line-height:1}
.bottom-nav-item span{font-weight:600;letter-spacing:.2px}
.bottom-nav-item:hover,.bottom-nav-item:active{color:var(--primary)}
.bottom-nav-item.active{color:var(--primary);position:relative}
.bottom-nav-item.active::after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:24px;height:2px;background:var(--primary);border-radius:0 0 2px 2px}
/* ダークモード */
[data-theme="dark"] .bottom-nav{background:var(--card);border-color:var(--border);box-shadow:0 -2px 12px rgba(0,0,0,.3)}
[data-theme="dark"] .bottom-nav-item{color:var(--text3)}
[data-theme="dark"] .bottom-nav-item.active{color:var(--primary)}
@media print{.bottom-nav{display:none!important}}

/* ============================================================
   Phase 1: 生体認証UI（PIN フォールバック）
   ============================================================ */
.biometric-divider{display:flex;align-items:center;gap:12px;margin:16px 0 12px}
.biometric-divider-line{flex:1;height:1px;background:rgba(0,0,0,.1)}
.biometric-divider-text{font-size:12px;color:var(--text3);font-weight:500;white-space:nowrap}
[data-theme="dark"] .biometric-divider-line{background:rgba(255,255,255,.1)}
[data-theme="dark"] .biometric-divider-text{color:var(--text3)}
.biometric-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px;border:2px solid var(--primary);border-radius:14px;background:transparent;font-size:15px;font-weight:700;color:var(--primary);cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}
.biometric-btn:hover:not(:disabled){background:var(--primary-bg);border-color:var(--primary-d);transform:translateY(-1px);box-shadow:0 4px 12px rgba(61,155,143,.15)}
.biometric-btn:active:not(:disabled){transform:scale(.98)}
.biometric-btn:disabled{opacity:.4;cursor:not-allowed;border-color:var(--border);color:var(--text3)}
.biometric-btn i{font-size:20px}
[data-theme="dark"] .biometric-btn{border-color:var(--primary);color:var(--primary)}
[data-theme="dark"] .biometric-btn:hover:not(:disabled){background:rgba(125,211,198,.08)}
[data-theme="dark"] .biometric-btn:disabled{border-color:var(--border);color:var(--text3)}

/* ============================================================
   Phase 1: アクティブナビ状態強化
   ============================================================ */
.nav-links a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.25);box-shadow:inset 0 -2px 0 #fff,0 1px 4px rgba(0,0,0,.1);font-weight:700}

@media(max-width:900px) and (orientation:landscape){
  /* ログインページ: 高さ制限を解除しスクロール許可 */
  .login-page{min-height:100vh !important;height:auto !important;max-height:none !important;overflow-y:auto !important;overflow-x:hidden !important;padding:10px 16px !important}
  .login-header{margin-bottom:6px !important}
  .login-title{font-size:20px !important}
  .login-subtitle{font-size:9px !important;margin-top:2px !important}
  .login-waves{height:8px !important;width:160px !important}
  .login-content{grid-template-columns:1fr 1fr !important;gap:8px !important;align-content:start !important}
  .login-store-row{padding:5px 10px !important}
  .login-store-header{margin-bottom:3px !important}
  .login-store-label{font-size:12px !important}
  .login-user{padding:4px 8px !important}
  .login-user-icon{width:24px !important;height:24px !important;font-size:11px !important}
  .login-user-name{font-size:12px !important}
  .login-user-role{font-size:9px !important}

  /* 従業員ページ: 高さ制限を解除 */
  .emp-page-inner{height:auto !important;min-height:calc(100vh - 78px) !important;overflow-y:auto !important}

  /* ナビバー: 横画面ではコンパクトに */
  .nav-top{height:36px !important}
  .nav-bottom{min-height:32px !important;padding:2px 8px !important}
  .nav-brand{font-size:13px !important}
  .nav-links a{font-size:11px !important;padding:4px 8px !important}

  /* HQ管理画面 */
  .page-wide{padding:8px 12px !important}
  .hq-global-summary{grid-template-columns:repeat(6,1fr) !important;gap:4px !important}
  .hq-gs-val{font-size:18px !important}
  .hq-gs-label{font-size:10px !important}
  .hq-gs-item{padding:6px 4px !important}

  /* PINモーダル: 横画面に合わせてコンパクト化 */
  .pin-card,.pin-card-keypad{max-height:90vh !important;overflow-y:auto !important;padding:16px 20px 14px !important}
  .pin-display{min-height:40px !important;font-size:32px !important}
  .pin-key{height:44px !important;font-size:20px !important;border-radius:10px !important}
  .pin-keypad{gap:5px !important;margin-top:8px !important}
  .pin-keypad-row{gap:5px !important}
  .pin-card-user{margin-bottom:10px !important}
  .pin-card-name{font-size:18px !important}
}