/* 旧syamu_system(共通基盤)のログイン・TOP画面のデザインを再現するための専用スタイル。
   グループウェア側のstyle.cssとクラス名が衝突しないよう "su-" プレフィックスを付けている。
   適用範囲: templates/login.html, templates/menu_top.html のみ。他の画面には影響しない。 */
:root{
  --su-bg:#eef2f6;--su-card:#ffffff;--su-text:#1b2340;--su-muted:#6f83a0;--su-danger:#c0392b;--su-border:#e2e8f2;
  --su-navy:#212778;--su-navy-2:#171b56;--su-blue:#0d4ad7;--su-blue-2:#0a3aad;--su-sky:#a0dfea;--su-sky-2:#7fcfe0;
  --su-steel:#5f8c9f;--su-steel-2:#4c7387;
  --su-radius-lg:28px;--su-radius-md:20px;
  --su-shadow:0 14px 34px rgba(13,30,70,.12);--su-shadow-sm:0 6px 16px rgba(13,30,70,.10);
}

/* ---------- ログイン画面 ---------- */
.su-login-wrap{margin:0;min-height:100vh;width:100%;max-width:none;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;
  background:radial-gradient(circle at 15% 20%,rgba(160,223,234,.45),transparent 40%),
             radial-gradient(circle at 85% 80%,rgba(33,39,120,.15),transparent 45%),var(--su-bg);}
.su-login-card{background:var(--su-card);width:100%;max-width:380px;border-radius:var(--su-radius-lg);padding:44px 38px;box-shadow:var(--su-shadow);}
.su-brand-mark{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--su-sky),var(--su-blue));color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.su-login-card h1{font-size:21px;margin:0 0 4px;color:var(--su-navy);font-weight:700;}
.su-login-card p.su-sub{margin:0 0 30px;color:var(--su-muted);font-size:13px;}
.su-field{margin-bottom:18px;}
.su-field label{display:block;font-size:12px;font-weight:600;margin-bottom:7px;color:var(--su-muted);}
.su-field input{width:100%;padding:12px 16px;border:1px solid var(--su-border);background:#f7f9f5;border-radius:999px;font-size:14px;box-sizing:border-box;}
.su-field input:focus{outline:none;border-color:var(--su-blue);background:#fff;}
.su-btn-primary{width:100%;padding:13px;background:linear-gradient(135deg,var(--su-navy),var(--su-blue));color:#fff;border:none;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer;box-shadow:var(--su-shadow-sm);}
.su-btn-primary:hover{filter:brightness(1.08);}
.su-flash{background:#fdecea;color:var(--su-danger);border:1px solid #f5c6c1;padding:10px 16px;border-radius:999px;font-size:13px;margin-bottom:18px;}

/* ---------- 業務メニュー(TOP)画面 ---------- */
.su-menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px;}
.su-menu-card{border-radius:var(--su-radius-md);padding:26px 22px;text-decoration:none;display:block;box-shadow:var(--su-shadow-sm);transition:box-shadow .15s,transform .15s;border:1px solid rgba(0,0,0,.03);}
.su-menu-card:hover{box-shadow:var(--su-shadow);transform:translateY(-3px);}
.su-menu-icon{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:12px;background:rgba(255,255,255,.45);font-size:18px;margin-bottom:16px;}
.su-menu-card .su-name{font-size:15px;font-weight:700;margin-bottom:6px;}
.su-menu-card .su-desc{font-size:12px;opacity:.85;}
.su-card-0{background:linear-gradient(150deg,var(--su-sky),var(--su-sky-2));color:var(--su-navy);}
.su-card-0 .su-menu-icon{background:rgba(255,255,255,.55);}
.su-card-1{background:linear-gradient(150deg,var(--su-steel),var(--su-steel-2));color:#fff;}
.su-card-1 .su-menu-icon{background:rgba(255,255,255,.3);}
.su-card-2{background:linear-gradient(150deg,var(--su-navy),var(--su-navy-2));color:#fff;}
.su-card-2 .su-menu-icon{background:rgba(255,255,255,.14);}
.su-card-3{background:linear-gradient(150deg,var(--su-blue),var(--su-blue-2));color:#fff;}
.su-card-3 .su-menu-icon{background:rgba(255,255,255,.16);}

/* ---------- TOP画面の外枠(サイドバー無し、旧syamu_systemの構成) ---------- */
.su-page-wrap{margin:0;max-width:none;padding:0;width:100%;background:var(--su-bg);min-height:100vh;box-sizing:border-box;}
.su-page{max-width:none;margin:0;padding:0;min-height:100vh;}
.su-topbar{background:linear-gradient(120deg,var(--su-navy),var(--su-navy-2));color:#fff;display:flex;align-items:center;padding:16px 26px;border-radius:var(--su-radius-lg);box-shadow:var(--su-shadow);}
.su-topbar .su-title{font-size:16px;font-weight:700;letter-spacing:.02em;}
.su-user-info{display:flex;align-items:center;gap:10px;font-size:13px;}
.su-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--su-sky),var(--su-blue));color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none;}
.su-user-name{font-weight:600;}
.su-user-role{font-size:12px;opacity:.75;}
.su-logout{color:#fff;text-decoration:none;font-size:13px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);padding:8px 16px;border-radius:999px;cursor:pointer;}
.su-logout:hover{background:rgba(255,255,255,.2);}
.su-main{padding:24px 0 0;}
.su-main h2{font-size:17px;color:var(--su-navy);margin:0 0 20px;font-weight:700;}

/* ---------- TOP画面の外枠を左右2分割(左:操作パネル/右:背景イメージ、周りの余白なしで画面いっぱいに) ---------- */
.su-shell{display:flex;align-items:stretch;min-height:100vh;background:var(--su-card);}
.su-content{flex:1;min-width:0;padding:28px 36px 40px;}
.su-content .su-topbar{border-radius:0;margin:-28px -36px 0;}
/* 背景画像は主張しすぎないよう、暗めの色をうっすら重ねて明るさ・彩度を落とす */
.su-side-banner{position:relative;flex:0 0 24%;min-height:100%;background-size:cover;background-position:center bottom;
  background-image:linear-gradient(160deg,rgba(23,27,86,.5),rgba(23,27,86,.35)),var(--su-banner-img);}
/* ログイン中ユーザー情報(役割・氏名・ログアウト)は画像下部中央に、控えめに重ねて表示する */
.su-side-banner .su-user-info{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);
  flex-direction:column;align-items:center;gap:4px;text-align:center;width:80%;}
.su-side-banner .su-avatar{width:34px;height:34px;font-size:13px;font-weight:600;margin-bottom:2px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);color:#fff;backdrop-filter:blur(2px);}
.su-side-banner .su-user-name{font-size:13px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.35);}
.su-side-banner .su-user-role{font-size:11px;color:rgba(255,255,255,.75);margin-bottom:6px;}
.su-side-banner .su-logout{font-size:12px;padding:6px 18px;background:rgba(255,255,255,.9);color:var(--su-navy);border:none;}
.su-side-banner .su-logout:hover{background:#fff;}
@media(max-width:900px){.su-shell{flex-direction:column;}.su-side-banner{flex:none;height:200px;order:-1;}.su-content{padding:20px 20px 28px;}.su-content .su-topbar{margin:-20px -20px 0;}}