/* ================================================================
   components.css – Semantic page-level component classes
   Replaces utility class combinations with meaningful names.
   ================================================================ */

/* ============ Main Content ============ */
main[role="main"] { padding-bottom: 1rem; }

/* ============ Footer ============ */
.footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

/* ============ Cookie Consent Layout ============ */
.cookie-inner {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
@media (min-width: 768px) {
    .cookie-inner { flex-direction: row; align-items: center; }
}
.cookie-text { flex-grow: 1; }
@media (min-width: 576px) { .cookie-text { margin-bottom: 1rem; } }
@media (min-width: 768px) { .cookie-text { margin-bottom: 0; } }
.cookie-action { margin: 1rem 0; }
@media (min-width: 768px) {
    .cookie-action { margin: 0; margin-left: auto; width: auto; min-width: 120px; }
}
.cookie-btn { width: 100%; }

/* ============ Header Nav ============ */
.header-nav {
    display: flex;
    flex-direction: row;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    margin-left: auto;
}
.header-nav-form {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}
.header-nav-link {
    display: block;
    padding: .5rem;
    color: #212529;
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
}
.header-nav-link:hover { color: var(--primary-accent); }

/* ============ Auth Page Layout ============ */
.auth-layout {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -.75rem;
}
.auth-layout > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding: 0 .75rem;
}
@media (min-width: 768px) {
    .auth-panel       { width: 33.333333%; }
    .auth-panel--md   { width: 50%; }
    .auth-panel--lg   { width: 58.333333%; }
    .auth-panel--wide { width: 83.333333%; }
    .auth-panel--full { width: 100%; }
}
.auth-field {
    position: relative;
    margin-bottom: 1rem;
}
.auth-field > label {
    display: inline-block;
    margin-bottom: .5rem;
    font-weight: 500;
}
.auth-submit {
    width: 100%;
    padding: .5rem 1.25rem;
    font-size: 1.125rem;
    margin-bottom: 24px;
}

/* ============ Auth Prompt (Jumbotron) ============ */
.auth-prompt {
    padding: 2rem 1rem;
    margin-bottom: 2rem;
    background-color: rgba(248,249,250,.5);
    border-radius: .3rem;
}
@media (min-width: 576px) { .auth-prompt { padding: 4rem 2rem; } }
.auth-prompt-lead {
    font-size: 1.25rem;
    font-weight: 300;
    text-align: left;
}

/* ============ Legal Pages ============ */
.legal-page { padding: 1.5rem 0; }
.legal-inner {
    max-width: 980px;
    margin: 0 auto;
}
.legal-title {
    font-size: 1.75rem;
    margin-bottom: 1rem;
}
.legal-date { color: var(--muted); }
.legal-card { margin-bottom: 1.5rem; }
.legal-section { margin-bottom: 1.5rem; }
.legal-section:last-child { margin-bottom: 3rem; }
.legal-section-title { font-size: 1.25rem; }
.legal-note { font-size: .875em; color: var(--muted); }

/* ============ Dashboard ============ */
.dash-greeting { margin-bottom: 1.5rem; }
.dash-greeting h2 { margin-bottom: .25rem; }
.dash-greeting p { color: var(--muted); margin-bottom: 0; }

.dash-section { margin-bottom: 3rem; }
.dash-section:last-child { margin-bottom: 1.5rem; }
.dash-section-title { margin-bottom: 1rem; }
.dash-section-title i { margin-right: .5rem; }

.dash-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-right: -15px;
}
@media (min-width: 576px) {
    .dash-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    .dash-grid { grid-template-columns: repeat(3, 1fr); }
    .dash-grid--2col { grid-template-columns: repeat(2, 1fr); }
}

/* Dashboard icon colors */
.dash-tile-icon--primary   { color: var(--primary); }
.dash-tile-icon--success   { color: var(--accent); }
.dash-tile-icon--warning   { color: var(--warning); }
.dash-tile-icon--info      { color: #0dcaf0; }
.dash-tile-icon--danger    { color: var(--danger); }
.dash-tile-icon--muted     { color: var(--muted); }
.dash-tile-icon--secondary { color: #6c757d; }
.dash-tile-icon--external  { color: #6366f1; }

/* ============ Guest Hero ============ */
.guest-hero { padding: 3rem 0; }
.guest-hero-col { max-width: 720px; margin: 0 auto; }
.guest-hero-card { text-align: center; padding: 3rem 1.5rem; }
.guest-hero-icon { font-size: 5rem; color: var(--primary); margin-bottom: 1.5rem; }
.guest-hero-title { margin-bottom: 1rem; font-size: 1.75rem; }
.guest-hero-desc { color: var(--muted); margin-bottom: 1.5rem; }
.guest-hero-actions { display: grid; gap: .5rem; }
@media (min-width: 576px) { .guest-hero-actions { display: block; } }
.guest-hero-btn {
    margin: 0 .5rem .75rem;
    padding-left: 3rem;
    padding-right: 3rem;
}
.guest-hero-btn i { margin-right: .5rem; }

/* Guest features */
.guest-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 3rem;
}
@media (min-width: 768px) {
    .guest-features { grid-template-columns: repeat(3, 1fr); }
}
.guest-feature { text-align: center; }
.guest-feature-icon { font-size: 3.5rem; margin-bottom: .5rem; }
.guest-feature-icon--primary { color: var(--primary); }
.guest-feature-icon--success { color: var(--accent); }
.guest-feature-icon--info    { color: #0dcaf0; }
.guest-feature-desc { font-size: .875em; color: var(--muted); }

/* ============ Support Pages ============ */
.support-page { margin-top: 1.5rem; }

.support-header-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 576px) {
    .support-header-inner { flex-direction: row; align-items: center; }
}
.support-header-title {
    margin-bottom: .25rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.support-header-subtitle { color: var(--muted); margin-bottom: 0; font-size: .875em; }

.support-filter { margin-bottom: 1rem; }
.support-filter-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: end;
}
@media (min-width: 768px) {
    .support-filter-form { grid-template-columns: 1fr 1fr auto; }
}
.support-filter-actions { display: flex; gap: .5rem; }
.support-filter-label { font-size: .875em; font-weight: 500; margin-bottom: .25rem; }
.support-filter-label i { margin-right: .25rem; }

.support-active-filters {
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
.support-active-filters-label { color: var(--muted); font-size: .875em; }

.support-desktop { display: none; }
@media (min-width: 768px) { .support-desktop { display: block; } }
@media (min-width: 768px) { .support-mobile { display: none; } }

.support-no-padding { padding: 0; }

.support-empty-body { text-align: center; padding: 3rem 1.5rem; }
.support-empty-icon { font-size: 3.5rem; color: var(--muted); margin-bottom: 1rem; display: block; }
.support-empty-title { color: var(--muted); }
.support-empty-desc  { color: var(--muted); }
.support-empty-btn   { margin-top: .5rem; }

.support-pagination { margin-top: 1rem; }
.support-pagination .pagination { justify-content: center; font-size: .875rem; }
.support-pagination-info { text-align: center; color: var(--muted); font-size: .875em; }

/* Support Create */
.support-create-layout { max-width: 720px; margin: 0 auto; }
.support-create-header { color: #fff; background: linear-gradient(145deg, var(--primary), var(--primary-accent)); }
.support-create-header h4 { margin-bottom: 0; }
.support-create-field { margin-bottom: 1rem; }
.support-create-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (min-width: 768px) { .support-create-row { grid-template-columns: 1fr 1fr; } }
.support-desc-helpers { display: flex; justify-content: space-between; }
.support-user-card { margin-bottom: 1rem; }
.support-user-card-title { color: var(--muted); margin-bottom: 1rem; }
.support-user-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) { .support-user-grid { grid-template-columns: 1fr 1fr; } }
.support-user-field { margin-bottom: .5rem; }
.support-user-label { font-size: .875em; color: var(--muted); }
.support-create-actions { display: grid; gap: .5rem; }
@media (min-width: 768px) { .support-create-actions { display: flex; justify-content: flex-end; } }

/* Support Detail */
.ticket-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: 1rem;
}
@media (min-width: 576px) { .ticket-header { flex-direction: row; align-items: center; } }
.ticket-header-id { min-width: 0; }
.ticket-title { margin-bottom: 0; font-size: 1.25rem; }
@media (min-width: 768px) { .ticket-title { font-size: 1.5rem; } }
.ticket-card { margin-bottom: 1.5rem; }
.ticket-subject { margin-bottom: .5rem; }
.ticket-subject i { margin-right: .25rem; }
.ticket-messages-title { margin-bottom: 0; }
.ticket-messages-title i { margin-right: .25rem; }
.message-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: .25rem;
    margin-bottom: .5rem;
}
.message-sender i { margin-right: .25rem; }
.message-time { color: var(--muted); font-size: .875em; }
.message-body { padding-left: .5rem; }
.ticket-reply-title { color: var(--primary); }
.ticket-reply-title i { margin-right: .25rem; }
.ticket-editor-tabs { margin-bottom: .5rem; }
.ticket-editor-field { margin-bottom: 1rem; }
.ticket-editor-help { margin-top: .25rem; font-size: .875em; color: var(--muted); }
.ticket-editor-help i { margin-right: .25rem; }
.ticket-preview {
    margin-bottom: 1rem;
    min-height: 120px;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .375rem;
    padding: 1rem;
}
.ticket-closed-notice { margin-top: 1rem; margin-bottom: 0; }
.ticket-closed-notice i { margin-right: .25rem; }

/* ============ Profile Page ============ */
.profile-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .profile-layout { grid-template-columns: 7fr 5fr; }
}
.profile-field { position: relative; margin-bottom: 1rem; }
.profile-field > label { display: inline-block; margin-bottom: .5rem; font-weight: 500; }
.profile-avatar-card { margin-bottom: 1rem; padding: 1rem; }
.profile-avatar-hint { color: var(--muted); display: block; margin-top: .5rem; font-size: .875em; }
.profile-submit { width: 100%; padding: .5rem 1.25rem; font-size: 1.125rem; }

/* ============ Activate Detail ============ */
.activate-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) { .activate-grid { grid-template-columns: 1fr 1fr; } }
.activate-btn-wrap { display: flex; align-items: flex-end; }
.activate-card { margin-bottom: 1.5rem; }

/* ============ Manage Pages – Shared ============ */
.manage-form { max-width: 100%; }
@media (min-width: 768px) { .manage-form { max-width: 50%; } }
.manage-field { position: relative; margin-bottom: 1rem; }

/* セクション (タイトル + 説明 + 操作群) */
.manage-section { margin-bottom: 2rem; }
.manage-section + .manage-section { padding-top: .5rem; border-top: 1px solid rgba(17,25,40,.06); }
.manage-section-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 .25rem 0;
    color: var(--fg);
}
.manage-section-desc {
    font-size: .875rem;
    color: var(--muted);
    margin: 0 0 .75rem 0;
}

/* 操作ボタンを横並びに、はみ出したら折り返し */
.manage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}
.manage-actions .btn { padding: 8px 16px; font-size: 13px; }

/* リカバリコード表示 */
.recovery-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .5rem;
    padding: 1rem;
    border: 1px solid rgba(17,25,40,.10);
    border-radius: var(--radius-sm);
    background: #f8fafc;
    max-width: 480px;
}
.recovery-code {
    display: block;
    padding: .375rem .5rem;
    background: #fff;
    border: 1px solid rgba(17,25,40,.08);
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .95rem;
    text-align: center;
    color: var(--fg);
}