/* =========================================
   かなで和モダンテーマ — manual_portal
   ========================================= */

:root {
    --k-primary: #252525;
    --k-primary-light: #3a3a3a;
    --k-primary-dark: #1a1a1a;
    --k-accent: #3366FF;
    --k-accent-light: #5c85ff;
    --k-accent-dark: #1a4cd6;
    --k-accent-rgb: 51, 102, 255;
    --k-washi: #f7f5f0;
    --k-washi-dark: #edeae3;
    --k-ink: #2d2b28;
    --k-ink-light: #5a5752;
    --k-border: #ddd8cf;
    --k-border-light: #ece9e2;
    --k-white: #ffffff;
    --k-success: #10b40e;
    --k-danger: #ff8800;
    --k-warning: #ff3333;
    --k-info: #0c598d;
    --k-shadow: rgba(37, 37, 37, 0.08);
    --k-shadow-md: rgba(37, 37, 37, 0.14);
    --k-radius: 6px;
    --k-radius-lg: 10px;
    --k-transition: 0.2s ease;
}

/* ---- カラープリセット ---- */

[data-theme="red"] {
    --k-primary: #342d2d;
    --k-primary-light: #403f3f;
    --k-primary-dark: #090606;
    --k-accent: #ff3333;
    --k-accent-light: #ef5350;
    --k-accent-dark: #d12323;
    --k-ink-light: #474747;
    --k-success: #1dcd7e;
    --k-danger: #ff8800;
    --k-info: #0280d4;
    --k-accent-rgb: 255, 51, 51;
}

[data-theme="pink"] {
    --k-primary: #a11740;
    --k-primary-light: #e35995;
    --k-primary-dark: #8f003e;
    --k-accent: #fe67bd;
    --k-accent-light: #fe95cf;
    --k-accent-dark: #c00c54;
    --k-washi: #feecfa;
    --k-washi-dark: #ffd1ec;
    --k-ink: #393838;
    --k-ink-light: #595959;
    --k-white: #fffafe;
    --k-success: #4eca50;
    --k-danger: #ff8800;
    --k-info: #3a6b8c;
    --k-accent-rgb: 254, 103, 189;
}

[data-theme="mint"] {
    --k-primary: #1a3a35;
    --k-primary-light: #2d5650;
    --k-primary-dark: #122a26;
    --k-accent: #26a69a;
    --k-accent-light: #4db6ac;
    --k-accent-dark: #00897b;
    --k-success: #3d7a5f;
    --k-danger: #a0413c;
    --k-info: #3a6b8c;
    --k-accent-rgb: 38, 166, 154;
}

[data-theme="dark"] {
    --k-primary: #b8b8b8;
    --k-primary-light: #575757;
    --k-primary-dark: #292929;
    --k-accent: #3eeade;
    --k-accent-light: #42fff2;
    --k-accent-dark: #31bfb5;
    --k-accent-rgb: 62, 234, 222;
    --k-washi: #1f1f1f;
    --k-washi-dark: #000000;
    --k-ink: #ffffff;
    --k-ink-light: #ffffff;
    --k-border: #d1d1d1;
    --k-border-light: #2e2e2e;
    --k-white: #363636;
    --k-success: #62d5a1;
    --k-danger: #ffa200;
    --k-warning: #ff3333;
    --k-info: #56b6f5;
    --k-shadow: rgba(0, 0, 0, 0.2);
    --k-shadow-md: rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .table > thead th { color: #e0e0e0 !important; }
[data-theme="dark"] .card-header { color: #e0e0e0; }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background: #2d2d2d; color: #e0e0e0; border-color: #3a3a3a;
}
[data-theme="dark"] .modal-content { background: #242424; }

/* ---- ベース ---- */

body {
    font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--k-washi);
    color: var(--k-ink);
    font-size: 0.9rem;
    line-height: 1.7;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--k-primary);
    font-weight: 600;
}
a { color: var(--k-primary-light); text-decoration: none; }
a:hover { color: var(--k-accent-dark); }
::selection { background: var(--k-accent-light); color: var(--k-primary-dark); }

/* ---- ナビバー ---- */

.navbar-kanade {
    background: linear-gradient(135deg, var(--k-primary-dark), var(--k-primary), var(--k-primary-light));
    border-bottom: 2px solid var(--k-accent);
    padding: 0.6rem 1rem;
    box-shadow: 0 2px 6px var(--k-shadow);
}
.navbar-kanade .navbar-brand {
    color: var(--k-white);
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.navbar-kanade .navbar-brand::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 18px;
    background: var(--k-accent);
    border-radius: 1px;
}
.navbar-kanade .nav-link {
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.85rem;
    padding: 0.4rem 0.9rem !important;
    border-radius: var(--k-radius);
    transition: all var(--k-transition);
}
.navbar-kanade .nav-link:hover {
    background: rgba(255,255,255,0.08);
    color: #fff !important;
}
.navbar-kanade .nav-link.active,
.navbar-kanade .nav-link.router-active {
    background: rgba(var(--k-accent-rgb), 0.2);
    color: var(--k-accent-light) !important;
}
.navbar-kanade .navbar-text {
    color: rgba(255,255,255,0.75);
    font-size: 0.8rem;
}
.navbar-kanade .dropdown-menu {
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius);
    box-shadow: 0 4px 14px var(--k-shadow-md);
}
.navbar-kanade .dropdown-item:active {
    background: var(--k-accent);
}

/* ---- カード ---- */

.card {
    background: var(--k-white);
    border: 1px solid var(--k-border-light);
    border-radius: var(--k-radius-lg);
    box-shadow: 0 1px 4px var(--k-shadow);
}
.card-header {
    background: var(--k-washi-dark);
    border-bottom: 1px solid var(--k-border);
    color: var(--k-primary);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
}

/* ---- テーブル ---- */

.table {
    background: var(--k-white);
    color: var(--k-ink);
}
.table > thead th {
    background: var(--k-primary) !important;
    color: var(--k-white) !important;
    border-bottom: 2px solid var(--k-accent) !important;
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
}
.table > tbody > tr { border-color: var(--k-border-light); }
.table-hover > tbody > tr:hover {
    --bs-table-hover-bg: rgba(var(--k-accent-rgb), 0.08);
    --bs-table-hover-color: var(--k-ink);
}

/* ---- ボタン ---- */

.btn { font-size: 0.85rem; border-radius: var(--k-radius); }
.btn-primary,
.btn-primary:disabled {
    background: var(--k-primary);
    border-color: var(--k-primary);
    color: var(--k-white);
}
.btn-primary:hover { background: var(--k-primary-light); border-color: var(--k-primary-light); }
.btn-outline-primary { color: var(--k-primary); border-color: var(--k-primary); }
.btn-outline-primary:hover { background: var(--k-primary); color: var(--k-white); }
.btn-accent {
    background: var(--k-accent);
    border: 1px solid var(--k-accent);
    color: var(--k-white);
}
.btn-accent:hover { background: var(--k-accent-dark); border-color: var(--k-accent-dark); color: var(--k-white); }
.btn-success { background: var(--k-success); border-color: var(--k-success); color: var(--k-white); }
.btn-danger { background: var(--k-danger); border-color: var(--k-danger); color: var(--k-white); }
.btn-warning { background: var(--k-warning); border-color: var(--k-warning); color: var(--k-white); }
.btn-link { color: var(--k-primary-light); }

/* ---- フォーム ---- */

.form-control, .form-select {
    border: 1px solid var(--k-border);
    background: var(--k-white);
    color: var(--k-ink);
    font-size: 0.9rem;
    border-radius: var(--k-radius);
}
.form-control:focus, .form-select:focus {
    border-color: var(--k-accent);
    box-shadow: 0 0 0 3px rgba(var(--k-accent-rgb), 0.15);
}
.form-label {
    color: var(--k-ink-light);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-bottom: 0.35rem;
}
.form-text { color: var(--k-ink-light); font-size: 0.75rem; }
.form-check-input:checked {
    background-color: var(--k-primary);
    border-color: var(--k-primary);
}

/* ---- アラート（左ボーダー） ---- */

.alert { border-width: 0; border-left: 4px solid; border-radius: var(--k-radius); font-size: 0.88rem; }
.alert-success { background: rgba(16,180,14,0.08); border-left-color: var(--k-success); color: var(--k-success); }
.alert-danger  { background: rgba(255,136,0,0.08); border-left-color: var(--k-danger); color: var(--k-danger); }
.alert-warning { background: rgba(255,51,51,0.08); border-left-color: var(--k-warning); color: var(--k-warning); }
.alert-info    { background: rgba(12,89,141,0.08); border-left-color: var(--k-info); color: var(--k-info); }

/* ---- ナビタブ / ピル ---- */

.nav-tabs { border-bottom: 2px solid var(--k-border); }
.nav-tabs .nav-link {
    color: var(--k-ink-light);
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-weight: 500;
}
.nav-tabs .nav-link.active {
    color: var(--k-primary);
    border-bottom-color: var(--k-accent);
    background: transparent;
    font-weight: 600;
}

.nav-pills .nav-link { color: var(--k-primary); }
.nav-pills .nav-link.active { background: var(--k-primary); color: var(--k-white); }
.nav-pills .nav-link:hover { background: var(--k-primary-light); color: var(--k-white); }

/* ---- ページネーション ---- */

.pagination .page-link { color: var(--k-primary); border-color: var(--k-border); }
.pagination .page-item.active .page-link {
    background: var(--k-primary);
    border-color: var(--k-primary);
    color: var(--k-white);
}

/* ---- モーダル ---- */

.modal-content {
    background: var(--k-white);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
}
.modal-header {
    background: var(--k-primary);
    color: var(--k-white);
    border-bottom: 2px solid var(--k-accent);
    border-top-left-radius: var(--k-radius-lg);
    border-top-right-radius: var(--k-radius-lg);
}
.modal-header .btn-close { filter: invert(1) brightness(1.5); }

/* ---- バッジ（UserMixin ロール表示用） ---- */

.badge.bg-primary-kanade { background: var(--k-primary); color: var(--k-white); }
.badge.bg-accent { background: var(--k-accent); color: var(--k-white); }

/* ---- ページ全体 ---- */

.page-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.25rem;
    color: var(--k-primary);
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--k-border);
}

/* ---- フッター ---- */

.site-footer {
    text-align: center;
    padding: 20px;
    font-size: 0.75rem;
    color: var(--k-ink-light);
    border-top: 1px solid var(--k-border-light);
    margin-top: 40px;
}