/* KALPA Report - Customer Portal Styles */
/* Dark theme: bg=#0d1117, accent=orange/#f97316, info=#22d3ee, danger=#f43f5e, closed=#94a3b8 */

:root {
  --bg:           #0d1117;
  --bg2:          #161b22;
  --bg3:          #21262d;
  --border:       rgba(255,255,255,0.08);
  --text:         #f0f6fc;
  --text-muted:   #8b949e;
  --orange:       #f97316;
  --cyan:         #22d3ee;
  --pink:         #f43f5e;
  --closed:       #94a3b8;
  --green:        #22c55e;
  --radius:       12px;
  --radius-sm:    8px;
  --shadow:       0 8px 32px rgba(0,0,0,0.4);
}

*  { margin:0; padding:0; box-sizing:border-box; font-family:'Noto Sans JP','Helvetica',sans-serif; font-weight:300; }
body { background:var(--bg); color:var(--text); min-height:100vh; overflow-x:hidden; }

/* ── Loading ─────────────────────────── */
#screen-loading { height:100vh; }
.spinner { width:40px; height:40px; border:3px solid var(--border); border-top-color:var(--cyan); border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Screens ─────────────────────────── */
.screen { display:none; }
.screen.active { display:block; }

/* ── App header ──────────────────────── */
#app-header {
  display:none; align-items:center; justify-content:space-between;
  background:var(--bg2); border-bottom:1px solid var(--border);
  padding:12px 24px; position:sticky; top:0; z-index:100;
}
.header-logo { height:30px; filter:brightness(0) invert(1); }
.header-user { display:flex; flex-direction:column; align-items:flex-end; }
#user-info  { font-size:0.9rem; color:var(--text); }
#user-email { font-size:0.75rem; color:var(--text-muted); }
.header-right { display:flex; align-items:center; gap:12px; }

/* ── Language toggle ─────────────────── */
.lang-toggle { display:flex; gap:4px; background:var(--bg3); border-radius:20px; padding:4px; }
.lang-btn {
  background:none; border:none; color:var(--text-muted); cursor:pointer;
  padding:4px 10px; border-radius:16px; font-size:0.8rem; transition:all 0.2s;
}
.lang-btn.lang-active { background:var(--bg2); color:var(--text); border:1px solid var(--border); }

/* ── Logout btn ──────────────────────── */
.logout-btn {
  background:none; border:1px solid var(--border); color:var(--text-muted);
  border-radius:var(--radius-sm); padding:6px 14px; cursor:pointer; font-size:0.82rem; transition:all 0.2s;
}
.logout-btn:hover { color:var(--text); border-color:var(--text-muted); }

/* ── Auth screens ────────────────────── */
.auth-wrap {
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px;
}
.auth-card {
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius);
  padding:36px 32px; width:100%; max-width:420px; box-shadow:var(--shadow);
}
.auth-logo { height:44px; display:block; margin:0 auto 24px; filter:brightness(0) invert(1); }
.auth-title { font-size:1.4rem; font-weight:500; text-align:center; margin-bottom:6px; }
.auth-subtitle { font-size:0.85rem; color:var(--text-muted); text-align:center; margin-bottom:28px; }

.form-label { display:block; font-size:0.8rem; color:var(--text-muted); margin-bottom:6px; }
.form-input {
  width:100%; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text); padding:11px 14px; font-size:0.95rem; outline:none; transition:border 0.2s;
  font-family:inherit;
}
.form-input:focus { border-color:var(--cyan); }
.form-group { margin-bottom:16px; }

.btn-primary {
  width:100%; background:var(--cyan); color:#0d1117; border:none; border-radius:var(--radius-sm);
  padding:12px; font-size:1rem; font-weight:500; cursor:pointer; transition:opacity 0.2s;
}
.btn-primary:hover { opacity:0.85; }
.btn-primary:disabled { opacity:0.5; cursor:not-allowed; }

.btn-secondary {
  width:100%; background:none; color:var(--text-muted); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:11px; font-size:0.9rem; cursor:pointer; transition:all 0.2s; margin-top:10px;
}
.btn-secondary:hover { color:var(--text); border-color:var(--text-muted); }

.auth-link-row { text-align:center; margin-top:16px; }
.auth-link { color:var(--cyan); font-size:0.85rem; cursor:pointer; text-decoration:underline; background:none; border:none; }

.auth-lang { display:flex; justify-content:center; margin-bottom:20px; }

.confirm-icon { font-size:3rem; text-align:center; margin-bottom:12px; }
.confirm-desc { font-size:0.88rem; color:var(--text-muted); text-align:center; line-height:1.7; margin-bottom:24px; }

/* ── Dashboard ───────────────────────── */
#screen-dashboard { padding:0 0 60px; }
.dash-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px 12px; gap:12px; flex-wrap:wrap;
}
.dash-title { font-size:1.15rem; font-weight:500; }
.btn-new-report {
  background:var(--orange); color:#fff; border:none; border-radius:var(--radius-sm);
  padding:10px 20px; font-size:0.9rem; cursor:pointer; display:flex; align-items:center; gap:6px; transition:opacity 0.2s;
}
.btn-new-report:hover { opacity:0.85; }

.empty-msg { color:var(--text-muted); font-size:0.9rem; text-align:center; padding:40px 24px; }

/* ── Year accordion ──────────────────── */
.year-group { margin:0 24px 8px; }
.year-header {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius-sm); cursor:pointer; user-select:none; transition:background 0.15s;
}
.year-header:hover { background:#2d333b; }
.year-arrow { font-size:0.75rem; color:var(--text-muted); width:12px; }
.year-label { font-size:0.95rem; font-weight:500; }
.year-badge {
  margin-left:auto; background:var(--bg2); color:var(--text-muted);
  font-size:0.75rem; border-radius:10px; padding:2px 8px; border:1px solid var(--border);
}
.year-body { display:none; border:1px solid var(--border); border-top:none; border-radius:0 0 var(--radius-sm) var(--radius-sm); overflow:hidden; }
.year-body.open { display:block; }

/* ── Report row ──────────────────────── */
.report-row {
  display:grid; grid-template-columns:18px 130px 100px 1fr auto auto;
  align-items:center; gap:12px; padding:12px 16px;
  border-bottom:1px solid var(--border); cursor:pointer; transition:background 0.15s;
}
.report-row:last-child { border-bottom:none; }
.report-row:hover { background:var(--bg3); }

.status-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.status-new        .status-dot, .status-dot.status-new        { background:var(--orange); }
.status-in-progress .status-dot, .status-dot.status-in-progress { background:var(--cyan); }
.status-closed     .status-dot, .status-dot.status-closed     { background:var(--closed); }
.status-overdue    .status-dot, .status-dot.status-overdue    { background:var(--pink); }

.report-no    { font-size:0.82rem; color:var(--text-muted); font-family:monospace; }
.report-date  { font-size:0.82rem; color:var(--text-muted); }
.report-title { font-size:0.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.report-status-badge {
  font-size:0.72rem; padding:3px 8px; border-radius:10px; white-space:nowrap;
}
.report-status-badge.status-new         { background:rgba(249,115,22,0.15); color:var(--orange); border:1px solid var(--orange); }
.report-status-badge.status-in-progress { background:rgba(34,211,238,0.12); color:var(--cyan);   border:1px solid var(--cyan); }
.report-status-badge.status-closed      { background:rgba(148,163,184,0.12); color:var(--closed); border:1px solid var(--closed); }
.report-status-badge.status-overdue     { background:rgba(244,63,94,0.15);  color:var(--pink);   border:1px solid var(--pink); }

.urgent-badge { font-size:0.7rem; background:rgba(244,63,94,0.2); color:var(--pink); border:1px solid var(--pink); border-radius:8px; padding:2px 7px; }

/* ── New report form ─────────────────── */
#screen-new-report { padding:0 0 60px; }
.form-wrap { max-width:720px; margin:0 auto; padding:24px; }
.form-section-title { font-size:1.1rem; font-weight:500; margin-bottom:20px; padding-bottom:10px; border-bottom:1px solid var(--border); }
.glass-form { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:28px; }

textarea.form-input { resize:vertical; min-height:120px; line-height:1.6; }
.char-count { font-size:0.75rem; color:var(--text-muted); text-align:right; margin-top:4px; }

.checkbox-group {
  display:flex; align-items:center; gap:10px; padding:12px 0;
}
.checkbox-group input[type=checkbox] { width:18px; height:18px; accent-color:var(--orange); cursor:pointer; }
.checkbox-group label { font-size:0.9rem; cursor:pointer; }
.urgent-label { color:var(--orange); }

.photo-zone {
  border:2px dashed var(--border); border-radius:var(--radius-sm); padding:20px;
  text-align:center; cursor:pointer; transition:border 0.2s;
}
.photo-zone:hover { border-color:var(--cyan); }
.photo-zone input { display:none; }
.photo-zone-text { font-size:0.85rem; color:var(--text-muted); }
.photo-preview { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.photo-thumb { position:relative; width:80px; height:80px; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--border); }
.photo-thumb img { width:100%; height:100%; object-fit:cover; }
.photo-remove { position:absolute; top:2px; right:2px; background:rgba(0,0,0,0.7); color:#fff; border:none; border-radius:50%; width:20px; height:20px; font-size:0.75rem; cursor:pointer; display:flex; align-items:center; justify-content:center; }

.form-actions { display:flex; gap:12px; margin-top:24px; }
.btn-submit { flex:1; background:var(--cyan); color:#0d1117; border:none; border-radius:var(--radius-sm); padding:12px; font-size:1rem; font-weight:500; cursor:pointer; transition:opacity 0.2s; }
.btn-submit:hover { opacity:0.85; }
.btn-submit:disabled { opacity:0.5; cursor:not-allowed; }
.btn-cancel-form { background:none; color:var(--text-muted); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 20px; cursor:pointer; font-size:0.9rem; transition:all 0.2s; }
.btn-cancel-form:hover { color:var(--text); }

/* ── Report detail ───────────────────── */
#screen-report-detail { padding:0 0 60px; }
.detail-wrap { max-width:800px; margin:0 auto; padding:24px; }

.detail-header {
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 24px; margin-bottom:16px;
}
.detail-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.detail-report-no { font-size:0.82rem; color:var(--text-muted); font-family:monospace; }
.detail-title-text { font-size:1.2rem; font-weight:500; margin:6px 0; }
.detail-meta { display:flex; gap:16px; font-size:0.82rem; color:var(--text-muted); flex-wrap:wrap; }
.detail-status-badge { font-size:0.78rem; padding:4px 10px; border-radius:10px; align-self:flex-start; }

.detail-fields {
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 24px; margin-bottom:16px;
}
.field-row { display:flex; gap:12px; padding:8px 0; border-bottom:1px solid var(--border); font-size:0.88rem; }
.field-row:last-child { border-bottom:none; }
.field-label { width:140px; flex-shrink:0; color:var(--text-muted); }
.field-value { color:var(--text); white-space:pre-wrap; }

/* ── Message thread ──────────────────── */
.messages-section {
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 24px; margin-bottom:16px;
}
.section-title { font-size:0.95rem; font-weight:500; margin-bottom:16px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.message-thread { max-height:360px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }

.message { border-radius:var(--radius-sm); padding:12px 16px; max-width:85%; }
.msg-admin    { background:rgba(34,211,238,0.08); border:1px solid rgba(34,211,238,0.2); align-self:flex-start; }
.msg-customer { background:var(--bg3); border:1px solid var(--border); align-self:flex-end; }
.msg-meta { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; gap:8px; }
.msg-sender { font-size:0.78rem; font-weight:500; color:var(--text-muted); }
.msg-date   { font-size:0.72rem; color:var(--text-muted); }
.msg-body   { font-size:0.88rem; white-space:pre-wrap; line-height:1.6; }

/* ── Comment input ───────────────────── */
#comment-section { margin-top:8px; }
.comment-input { width:100%; min-height:80px; margin-bottom:10px; }
.comment-actions { display:flex; gap:10px; }
.btn-send { background:var(--cyan); color:#0d1117; border:none; border-radius:var(--radius-sm); padding:10px 24px; font-size:0.9rem; font-weight:500; cursor:pointer; transition:opacity 0.2s; }
.btn-send:hover { opacity:0.85; }
.btn-send:disabled { opacity:0.5; cursor:not-allowed; }
.btn-complete { background:none; color:var(--green); border:1px solid var(--green); border-radius:var(--radius-sm); padding:10px 20px; font-size:0.9rem; cursor:pointer; transition:all 0.2s; }
.btn-complete:hover { background:rgba(34,197,94,0.1); }

/* ── Related members ─────────────────── */
.related-section {
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 24px; margin-bottom:16px;
}
.related-list { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; min-height:24px; }
.related-chip {
  display:flex; align-items:center; gap:6px; background:var(--bg3); border:1px solid var(--border);
  border-radius:14px; padding:4px 10px 4px 12px; font-size:0.82rem;
}
.chip-remove { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:0.8rem; padding:0; }
.chip-remove:hover { color:var(--pink); }
.related-add { display:flex; gap:8px; }
.related-input { flex:1; }
.btn-add-member { background:var(--bg3); border:1px solid var(--border); color:var(--text); border-radius:var(--radius-sm); padding:10px 16px; font-size:0.85rem; cursor:pointer; white-space:nowrap; transition:border 0.2s; }
.btn-add-member:hover { border-color:var(--cyan); }

/* ── Toast ───────────────────────────── */
.toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(80px);
  background:var(--bg2); border:1px solid var(--border); color:var(--text);
  padding:12px 24px; border-radius:var(--radius-sm); font-size:0.9rem;
  box-shadow:var(--shadow); transition:transform 0.3s; z-index:9999;
  max-width:90vw; text-align:center;
}
.toast.show { transform:translateX(-50%) translateY(0); }
.toast.toast-success { border-color:var(--green);  color:var(--green); }
.toast.toast-error   { border-color:var(--pink);   color:var(--pink); }
.toast.toast-warning { border-color:var(--orange); color:var(--orange); }

/* ── Mobile ──────────────────────────── */
@media (max-width: 640px) {
  .auth-card { padding:28px 20px; }
  .report-row { grid-template-columns:14px 1fr auto; gap:8px; }
  .report-no, .report-date, .urgent-badge { display:none; }
  .report-status-badge { font-size:0.68rem; padding:2px 6px; }
  .dash-toolbar { padding:16px 16px 8px; }
  .year-group { margin:0 16px 8px; }
  .form-wrap, .detail-wrap { padding:16px; }
  .detail-top { flex-direction:column; }
  .field-row { flex-direction:column; gap:4px; }
  .field-label { width:auto; }
}

@media (orientation: landscape) and (max-width: 767px) {
  body::before {
    content:'Please rotate your device to portrait mode.';
    display:flex; align-items:center; justify-content:center;
    position:fixed; inset:0; background:var(--bg); color:var(--text-muted);
    font-size:0.9rem; text-align:center; padding:24px; z-index:99999;
  }
}