/* ═══════════════════════════════════════════════════════════
   鳴白サポートシステム — フロントエンドスタイル
   Design: Elegant Black × Gold (Frontend)
═══════════════════════════════════════════════════════════ */

:root {
    --nkss-f-gold:       #c9a84c;
    --nkss-f-gold-light: #e8c97a;
    --nkss-f-gold-dim:   #8a6e2f;
    --nkss-f-black:      #0d0d0d;
    --nkss-f-surface:    #131313;
    --nkss-f-surface2:   #1a1a1a;
    --nkss-f-border:     #2c2c2c;
    --nkss-f-border-g:   rgba(201,168,76,.22);
    --nkss-f-text:       #d4c9a8;
    --nkss-f-text-dim:   #6a6050;
    --nkss-f-radius:     4px;
    --nkss-f-font:       'Noto Serif JP', 'Georgia', serif;
    --nkss-f-danger:     #c0392b;
    --nkss-f-success:    #27ae60;
    --nkss-f-info:       #2980b9;
}

/* ── 共通ラッパー ────────────────────────────────────────────── */
.nkss-front {
    font-family: var(--nkss-f-font);
    color: var(--nkss-f-text);
    max-width: 900px;
    margin: 0 auto;
    padding: 8px 0;
}
.nkss-front-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--nkss-f-gold-light);
    letter-spacing: .08em;
    margin: 0 0 8px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--nkss-f-border-g);
}
.nkss-front-desc {
    font-size: 14px;
    color: var(--nkss-f-text-dim);
    line-height: 1.8;
    margin: 0 0 28px;
}
.nkss-notice {
    background: var(--nkss-f-surface);
    border: 1px solid var(--nkss-f-border-g);
    border-left: 4px solid var(--nkss-f-gold-dim);
    color: var(--nkss-f-text);
    padding: 14px 18px;
    border-radius: var(--nkss-f-radius);
    font-size: 14px;
}

/* ── フォーム ─────────────────────────────────────────────────── */
.nkss-form-wrap { padding: 32px; background: var(--nkss-f-surface); border: 1px solid var(--nkss-f-border-g); border-top: 3px solid var(--nkss-f-gold); border-radius: var(--nkss-f-radius); }

.nkss-field { margin-bottom: 24px; }
.nkss-field-label {
    display: block;
    font-size: 13px;
    color: var(--nkss-f-gold-dim);
    letter-spacing: .06em;
    margin-bottom: 8px;
    font-weight: 600;
}
.nkss-required { color: #c0392b; margin-left: 4px; font-size: 11px; }
.nkss-optional { color: var(--nkss-f-text-dim); margin-left: 4px; font-size: 11px; font-weight: 400; }

.nkss-input, .nkss-select, .nkss-textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--nkss-f-surface2);
    border: 1px solid var(--nkss-f-border);
    color: var(--nkss-f-text);
    font-family: var(--nkss-f-font);
    font-size: 14px;
    padding: 10px 14px;
    border-radius: var(--nkss-f-radius);
    outline: none;
    transition: border-color .2s;
}
.nkss-input:focus, .nkss-select:focus, .nkss-textarea:focus {
    border-color: var(--nkss-f-gold-dim);
    box-shadow: 0 0 0 3px rgba(201,168,76,.08);
}
.nkss-input::placeholder { color: var(--nkss-f-text-dim); }
.nkss-textarea { resize: vertical; min-height: 120px; }
.nkss-select option { background: var(--nkss-f-surface2); }

/* ── ファイルドロップ ─────────────────────────────────────────── */
.nkss-file-drop {
    position: relative;
    border: 2px dashed var(--nkss-f-border);
    border-radius: var(--nkss-f-radius);
    text-align: center;
    padding: 28px 20px;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    background: var(--nkss-f-surface2);
}
.nkss-file-drop:hover, .nkss-file-drop.dragging {
    border-color: var(--nkss-f-gold-dim);
    background: rgba(201,168,76,.04);
}
.nkss-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.nkss-file-drop-inner p { margin: 4px 0; font-size: 13px; color: var(--nkss-f-text-dim); }
.nkss-file-icon { font-size: 32px; display: block; margin-bottom: 8px; }
.nkss-file-note { font-size: 12px !important; }
.nkss-file-list { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.nkss-file-item { background: var(--nkss-f-surface2); border: 1px solid var(--nkss-f-border); border-radius: 3px; padding: 4px 10px; font-size: 12px; color: var(--nkss-f-text); }

/* ── ボタン ───────────────────────────────────────────────────── */
.nkss-btn {
    display: inline-block;
    padding: 9px 22px;
    background: transparent;
    border: 1px solid var(--nkss-f-gold-dim);
    color: var(--nkss-f-gold);
    font-family: var(--nkss-f-font);
    font-size: 14px;
    letter-spacing: .06em;
    cursor: pointer;
    border-radius: var(--nkss-f-radius);
    text-decoration: none;
    transition: all .2s;
    white-space: nowrap;
}
.nkss-btn:hover { background: var(--nkss-f-gold); color: var(--nkss-f-black); border-color: var(--nkss-f-gold); }
.nkss-btn-lg  { padding: 12px 32px; font-size: 15px; }
.nkss-btn-sm  { padding: 5px 14px; font-size: 12px; }
.nkss-btn-resolve { border-color: var(--nkss-f-success); color: var(--nkss-f-success); }
.nkss-btn-resolve:hover { background: var(--nkss-f-success); color: #fff; }
.nkss-btn-claim   { border-color: var(--nkss-f-info); color: #5dade2; }
.nkss-btn-claim:hover  { background: var(--nkss-f-info); color: #fff; }

/* ── アラート ─────────────────────────────────────────────────── */
.nkss-alert { padding: 12px 18px; border-radius: var(--nkss-f-radius); font-size: 14px; margin-bottom: 18px; }
.nkss-alert-success { background: rgba(39,174,96,.12); border: 1px solid rgba(39,174,96,.3); color: #52be80; }
.nkss-alert-error   { background: rgba(192,57,43,.12);  border: 1px solid rgba(192,57,43,.3);  color: #e74c3c; }

.nkss-form-actions { margin-top: 28px; }

/* ── フィルターボタン ─────────────────────────────────────────── */
.nkss-filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.nkss-filter-btn {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid var(--nkss-f-border);
    border-radius: 20px;
    color: var(--nkss-f-text-dim);
    font-size: 12px;
    text-decoration: none;
    transition: all .2s;
    letter-spacing: .04em;
}
.nkss-filter-btn:hover, .nkss-filter-btn.active {
    border-color: var(--nkss-f-gold-dim);
    color: var(--nkss-f-gold);
    background: rgba(201,168,76,.08);
}

/* ── チケットカード ───────────────────────────────────────────── */
.nkss-ticket-list { display: flex; flex-direction: column; gap: 12px; }
.nkss-ticket-card {
    background: var(--nkss-f-surface);
    border: 1px solid var(--nkss-f-border);
    border-radius: var(--nkss-f-radius);
    padding: 18px 20px;
    transition: border-color .2s;
}
.nkss-ticket-card:hover { border-color: var(--nkss-f-border-g); }
.nkss-ticket-unassigned { border-left: 3px solid #e67e22; }

.nkss-ticket-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.nkss-ticket-id { font-size: 12px; color: var(--nkss-f-text-dim); font-family: monospace; }
.nkss-ticket-card-title { font-size: 15px; font-weight: 600; color: var(--nkss-f-gold-light); margin: 0 0 10px; }
.nkss-ticket-card-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--nkss-f-text-dim); margin-bottom: 14px; line-height: 1.5; }
.nkss-ticket-card-body-preview { font-size: 13px; color: var(--nkss-f-text-dim); line-height: 1.7; margin-bottom: 14px; }
.nkss-ticket-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── バッジ ───────────────────────────────────────────────────── */
.nkss-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.nkss-status-waiting   { background: rgba(230,126,34,.15); color: #e67e22; border: 1px solid rgba(230,126,34,.4); }
.nkss-status-reviewing { background: rgba(201,168,76,.15); color: var(--nkss-f-gold-light); border: 1px solid var(--nkss-f-border-g); }
.nkss-status-user-wait { background: rgba(52,152,219,.15); color: #5dade2; border: 1px solid rgba(52,152,219,.4); }
.nkss-status-resolved  { background: rgba(39,174,96,.15);  color: #52be80; border: 1px solid rgba(39,174,96,.4); }

/* ── ページネーション ─────────────────────────────────────────── */
.nkss-front-pagination { margin-top: 24px; text-align: center; }
.nkss-front-pagination .page-numbers {
    display: inline-block; padding: 6px 12px; margin: 0 3px;
    border: 1px solid var(--nkss-f-border); border-radius: 3px;
    color: var(--nkss-f-text-dim); text-decoration: none; font-size: 13px;
}
.nkss-front-pagination .page-numbers.current { background: var(--nkss-f-gold); color: var(--nkss-f-black); border-color: var(--nkss-f-gold); }
.nkss-front-pagination .page-numbers:hover:not(.current) { border-color: var(--nkss-f-gold-dim); color: var(--nkss-f-gold); }

/* ── 空状態 ───────────────────────────────────────────────────── */
.nkss-empty { text-align: center; padding: 48px 20px; color: var(--nkss-f-text-dim); }
.nkss-empty-icon { font-size: 48px; display: block; margin-bottom: 12px; }
.nkss-empty p    { font-size: 14px; margin: 0; }

/* ── モーダル ─────────────────────────────────────────────────── */
.nkss-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.75);
    z-index: 99999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
    backdrop-filter: blur(4px);
}
.nkss-modal {
    background: var(--nkss-f-surface);
    border: 1px solid var(--nkss-f-border-g);
    border-top: 3px solid var(--nkss-f-gold);
    border-radius: var(--nkss-f-radius);
    width: 100%;
    max-width: 700px;
    animation: nkssModalIn .2s ease;
    flex-shrink: 0;
}
.nkss-modal-staff { max-width: 820px; }
@keyframes nkssModalIn { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:none; } }
.nkss-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--nkss-f-border);
}
.nkss-modal-title  { font-size: 16px; font-weight: 700; color: var(--nkss-f-gold-light); margin: 0; letter-spacing: .06em; }
.nkss-modal-close  { background: none; border: none; color: var(--nkss-f-text-dim); font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 3px; transition: color .2s; }
.nkss-modal-close:hover { color: var(--nkss-f-gold); }
.nkss-modal-body   { padding: 22px; max-height: 80vh; overflow-y: auto; }
.nkss-loading      { text-align: center; padding: 32px; color: var(--nkss-f-text-dim); font-size: 14px; }

/* モーダル内コンテンツ */
.nkss-modal-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--nkss-f-text-dim); margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--nkss-f-border); }
.nkss-modal-body-text { font-size: 14px; line-height: 1.8; color: var(--nkss-f-text); margin-bottom: 20px; white-space: pre-wrap; word-break: break-word; }
.nkss-modal-replies { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.nkss-modal-reply { border-radius: 3px; padding: 12px 14px; border: 1px solid var(--nkss-f-border); font-size: 13px; }
.nkss-modal-reply-staff { background: var(--nkss-f-surface2); border-left: 3px solid var(--nkss-f-gold-dim); }
.nkss-modal-reply-user  { background: rgba(52,152,219,.06); border-left: 3px solid #2e6da4; }
.nkss-modal-reply-author { font-weight: 600; color: var(--nkss-f-gold-light); font-size: 12px; margin-bottom: 6px; display: flex; gap: 8px; align-items: center; }
.nkss-modal-reply-date   { font-weight: 400; color: var(--nkss-f-text-dim); font-size: 11px; }
.nkss-modal-reply-text   { line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.nkss-modal-reply-form   { border-top: 1px solid var(--nkss-f-border); padding-top: 18px; }
.nkss-modal-actions      { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.nkss-modal-resolved     { text-align: center; padding: 12px; background: rgba(39,174,96,.08); border: 1px solid rgba(39,174,96,.2); border-radius: 3px; font-size: 13px; color: #52be80; }

/* ── 担当者ダッシュボード ─────────────────────────────────────── */
.nkss-staff-welcome { font-size: 14px; color: var(--nkss-f-text-dim); margin: 0 0 28px; }
.nkss-staff-section { margin-bottom: 40px; }
.nkss-section-title { font-size: 16px; font-weight: 700; color: var(--nkss-f-gold); display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.nkss-section-icon  { font-size: 18px; }
.nkss-count-badge   { background: var(--nkss-f-surface2); border: 1px solid var(--nkss-f-border); border-radius: 20px; padding: 2px 10px; font-size: 13px; color: var(--nkss-f-text-dim); }
.nkss-count-waiting { border-color: rgba(230,126,34,.4); color: #e67e22; background: rgba(230,126,34,.1); }
.nkss-section-desc  { font-size: 13px; color: var(--nkss-f-text-dim); margin: 4px 0 16px; }

/* ── 担当者ダッシュボード：解決済みセクション ───────────────── */
.nkss-section-title-toggle {
    cursor: pointer;
    user-select: none;
    transition: color .2s;
}
.nkss-section-title-toggle:hover { color: var(--nkss-f-gold-light); }

.nkss-toggle-arrow {
    margin-left: auto;
    font-size: 12px;
    color: var(--nkss-f-text-dim);
    transition: transform .2s;
}

.nkss-count-resolved {
    background: rgba(39,174,96,.12);
    border-color: rgba(39,174,96,.3);
    color: #52be80;
}

.nkss-ticket-resolved {
    opacity: .75;
    border-left: 3px solid rgba(39,174,96,.4);
}
.nkss-ticket-resolved:hover { opacity: 1; }

.nkss-resolved-list {
    margin-top: 12px;
}
.nkss-resolved-note {
    font-size: 12px;
    color: var(--nkss-f-text-dim);
    text-align: right;
    margin: 8px 0 0;
}