/* ===== Layout ===== */
body { font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif; background: #f4f6f9; }
#wrapper { min-height: 100vh; }

/* ===== Header ===== */
#header { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; background: #2c3e50; color: #fff; height: 50px; }
.header-grid { display: flex; align-items: center; height: 50px; padding: 0 15px; }
.bt_toggle { flex: 0 0 auto; }
.bt_drawermenu { color: #fff; text-decoration: none; font-size: 20px; padding: 5px 10px; }
.bt_drawermenu:hover { color: #ecf0f1; }
#site_name { flex: 1; font-size: 16px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navbar-menu { flex: 0 0 auto; white-space: nowrap; }
.admin-user-toggle { background: none; border: none; color: #fff; cursor: pointer; font-size: 14px; }
.admin-user-toggle:hover { color: #ecf0f1; }
.admin-user-name { margin: 0 5px; }

/* ===== Sidebar ===== */
@media (min-width: 769px) {
    #side.offcanvas { visibility: visible !important; transform: none !important; }
}
#side { position: fixed; top: 50px; left: 0; bottom: 0; width: 60px; background: #34495e; color: #ecf0f1; z-index: 1020; overflow-x: hidden; overflow-y: auto; transition: width 0.3s ease; border: none; }
#side.open { width: 260px; }
#side .navi { padding-top: 10px; }
#side .navi ul { list-style: none; padding: 0; margin: 0; }
#side .navi ul li a { display: flex; align-items: center; padding: 10px 15px; color: #bdc3c7; text-decoration: none; font-size: 13px; white-space: nowrap; transition: background 0.2s; position: relative; }
#side .navi ul li a:hover { background: #2c3e50; color: #fff; }
#side .navi ul li a.active { background: #1abc9c; color: #fff; }
#side .navi ul li a i.fa-fw { flex: 0 0 30px; font-size: 16px; text-align: center; }
#side .navi ul li a span { overflow: hidden; }
/* a11y: collapsed sidebar — keep span text accessible to screen readers
   (visually-hidden pattern instead of display:none which strips name) */
#side:not(.open) .navi ul li a span,
#side:not(.open) .navi ul li a .float-end {
    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;
}
#side .navi ul li ul { background: #2c3e50; }
#side .navi ul li ul li a { padding-left: 45px; font-size: 12px; }
#side .navi a.toggle .fa-chevron-down { transition: transform 0.3s; font-size: 10px; margin-top: 3px; }
#side .navi a.toggle.is-open .fa-chevron-down { transform: rotate(180deg); }

/* Sidebar tooltips (Bootstrap via JS) */
#side:not(.open) .tooltip { z-index: 1050; }

/* ===== Main ===== */
#main { margin-left: 60px; margin-top: 50px; padding: 20px; transition: margin-left 0.3s ease; min-height: calc(100vh - 50px); }
.page-header { font-size: 20px; font-weight: bold; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #1abc9c; color: #2c3e50; }
.page-header span { font-size: 14px; font-weight: normal; color: #7f8c8d; margin-left: 10px; }

/* ===== Login Page ===== */
#login-page { background: linear-gradient(135deg, #2c3e50, #3498db); min-height: 100vh; }
.login-page { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
.login-box { width: 400px; max-width: 90%; }
.login-box-header { text-align: center; margin-bottom: 20px; }
.login-box-header h1 { color: #fff; font-size: 24px; }
.login-box-body { background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
.login-box-body .form-label { font-weight: bold; color: #2c3e50; font-size: 13px; }
.login-box-body .btn-primary { background: #1abc9c; border-color: #1abc9c; font-weight: bold; }
.login-box-body .btn-primary:hover { background: #16a085; border-color: #16a085; }

/* ===== Cards ===== */
.card { border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: transform 0.2s; }
.card:hover { transform: translateY(-2px); }

/* ===== Table ===== */
.table th { background: #2c3e50; color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; }
/* a11y: text-muted on white = #6c757d 4.54:1 borderline; force darker for AA */
/* Apply globally — covers card-body, card-header, table outside .table class etc. */
.text-muted, .text-secondary, small.text-muted { color: #495057 !important; }
/* Inside dark .table header (#2c3e50 bg), keep light text — restore.
   Excluding bg-none (transparent) variant which sits on white card body. */
.table thead th:not(.bg-none),
.table thead th.text-muted:not(.bg-none),
.table thead th.text-secondary:not(.bg-none) {
    color: #f1f3f5 !important;
}
/* th.bg-none in dashboard cards (white bg) — force AA-compliant darker text */
th.bg-none, th.bg-none.text-muted, th.bg-none.text-secondary { color: #495057 !important; }
/* a11y: btn-outline-secondary default #6c757d on white = 4.54:1 borderline; nudge darker */
.btn-outline-secondary { color: #495057 !important; border-color: #6c757d; }
.btn-outline-secondary:hover { background: #495057; border-color: #495057; color: #fff !important; }
/* a11y: btn-outline-danger #dc3545 white text on hover → ensure label dark enough on white bg */
.btn-outline-danger { color: #b32a3a !important; border-color: #dc3545; }
.btn-outline-danger:hover { background: #b32a3a !important; border-color: #b32a3a; color: #fff !important; }
/* a11y: replace common gray inline color usage with darker */
[style*="color: rgb(153"] { color: #495057 !important; }
[style*="color:#999"] { color: #495057 !important; }
[style*="color: rgb(136"] { color: #495057 !important; }
[style*="color:#888"] { color: #495057 !important; }
/* a11y: page-header sub-title (.page-header span) #7f8c8d on #f4f6f9 = 3.21 → darker */
.page-header span { color: #495057 !important; }
/* a11y: <code> Bootstrap default #d63384 → darker (mahogany 5.6:1 on white) */
code { color: #9d2962; }
/* On dark backgrounds, code text must be light orange (8.5:1 on #212529) */
.bg-dark code,
code.bg-dark,
code.text-light,
pre.bg-dark code,
pre code.text-light {
    color: #ffd6a5 !important;
}
/* code.cmd inside a dark <pre> = light, on white = dark */
pre code.cmd, pre.bg-dark code.cmd { color: #ffd6a5 !important; background: transparent !important; }
/* Standalone code.cmd on white card-body = use mahogany */
.card-body > code.cmd, p > code.cmd, td > code.cmd { color: #6f1543 !important; }
/* a11y: text-warning on white #ffc107 = 1.6:1 → darker amber */
.text-warning, td.text-warning { color: #b35a00 !important; }
/* a11y: bg-info Bootstrap #0dcaf0 with white text = 1.95:1 → darker teal */
.bg-info, .alert-info { background-color: #0c5b75 !important; color: #fff !important; }
.bg-info * { color: inherit; }
/* a11y: link inside .table-success / .table-warning row — Bootstrap default link blue
   #0d6efd on #d1e7dd / #fff3cd = 3.4:1. Force darker navy for AA. */
.table-success a, .table-warning a, .table-info a, .table-light a,
tr.table-success a, tr.table-warning a, tr.table-info a, tr.table-light a {
    color: #003580 !important;
}
.table-success a:hover, .table-warning a:hover, .table-info a:hover {
    color: #001f4d !important;
    text-decoration: underline;
}
/* a11y: btn-outline-secondary.active (Bootstrap fills with #6c757d white = 4.54:1 borderline) */
.btn-outline-secondary.active, .btn-outline-secondary:active { background: #495057 !important; border-color: #495057 !important; color: #fff !important; }
/* a11y: btn-outline-info default #0dcaf0 on white = 1.95 → darker teal */
.btn-outline-info { color: #0c5b75 !important; border-color: #0dcaf0; }
.btn-outline-info:hover { background: #0c5b75 !important; border-color: #0c5b75 !important; color: #fff !important; }
/* a11y: empty-state-style p with text #95a5a6 on white = 2.55 → darker */
p.text-muted, .card-body p.text-muted, .card p { /* keep p readable */ }
/* For dimmed "no data" placeholder paragraphs without explicit class — match Bootstrap card-body p with light gray */
.card-body > p:only-child, .card-body p:not([class]) { color: #495057 !important; }
/* a11y: <code> inside .alert-warning bg #fff3cd needs darker — already set, but reinforce */
.alert-warning code { color: #6f1543 !important; }
/* card-body の code はデフォルト mahogany、ただし dark 背景 (親 pre.bg-dark / 自身が bg-dark / text-light) は除外 */
.card-body > code, .card-body p > code, .card-body td > code, .card-body li > code,
.card-body span > code { color: #6f1543 !important; }
/* dark 背景内の code は light (親 pre.bg-dark / 自身が bg-dark / text-light) — specificity 高め */
.card-body pre.bg-dark > code,
.card-body pre.bg-dark code,
.card-body code.bg-dark,
.card-body code.text-light,
.card-body [class*="bg-dark"] > code { color: #ffd6a5 !important; }
/* a11y: bg-warning #ffc107 with white text = 1.6:1 FAIL → force dark text */
.badge.bg-warning, .alert-warning { color: #212529 !important; }
.badge.bg-info { color: #fff !important; background-color: #0c5b75 !important; } /* 6.0:1 PASS, was #17a2b8 = 2.6:1 */
/* a11y: btn-outline-success default green on white needs AA */
.btn-outline-success { color: #155724; border-color: #155724; }
.btn-outline-success:hover { background: #155724; border-color: #155724; color: #fff; }
.btn-outline-warning { color: #5e3a0c; border-color: #f0ad4e; }
.btn-outline-warning:hover { background: #f0ad4e; border-color: #f0ad4e; color: #212529; }
/* a11y: phpdebugbar — production では disable されるが contrast を補強 (false positive 抑制) */
.phpdebugbar-badge { color: #fff !important; background-color: #555 !important; }
.table td { vertical-align: middle; font-size: 13px; }
.table .btn-sm { font-size: 12px; }
.table-hover tbody tr:hover { background-color: rgba(26, 188, 156, 0.06); }

/* ===== Buttons ===== */
/* a11y: WCAG AA contrast (4.5:1 on white).
   #117a65 (white text) = 5.16:1 PASS. Was #1abc9c = 2.4:1 FAIL. */
.btn-primary { background: #117a65; border-color: #117a65; color: #fff; }
.btn-primary:hover { background: #0e6555; border-color: #0e6555; color: #fff; }
.btn-primary:focus, .btn-primary:focus-visible { background: #0e6555; border-color: #0e6555; color: #fff; box-shadow: 0 0 0 0.25rem rgba(17, 122, 101, 0.4); }
.btn-outline-primary { color: #117a65; border-color: #117a65; }
.btn-outline-primary:hover { background: #117a65; border-color: #117a65; color: #fff; }

/* Delete button — more distinct from edit */
.btn-delete { opacity: 0.6; transition: opacity 0.2s; }
.btn-delete:hover { opacity: 1; }

/* ===== Forms ===== */
.form-label-required::after { content: " *"; color: #e74c3c; }

/* ===== Empty state ===== */
.empty-state { text-align: center; padding: 48px 20px; color: #95a5a6; }
.empty-state i { font-size: 48px; margin-bottom: 12px; display: block; color: #bdc3c7; }
.empty-state p { font-size: 15px; margin-bottom: 16px; }

/* ===== Utilities ===== */
.bg-none { background: transparent !important; }
.input-group.tel .form-control { max-width: 100px; }
.input-group.zip .form-control { max-width: 80px; }

/* ===== Badge ===== */
.badge-active { background: #1abc9c; }
.badge-inactive { background: #95a5a6; }
.badge-warning { background: #f39c12; }
.badge-danger { background: #e74c3c; }

/* ===== Responsive ===== */
@media (max-width: 768px) {
    #side { width: 0; }
    #main { margin-left: 0; padding: 15px; }
    .offcanvas.show { width: 260px !important; }
    .page-header { font-size: 18px; }
    .admin-user-name { display: none; }
}

@media (max-width: 480px) {
    #site_name { font-size: 14px; }
}