/* Kalpa Info Center - Customer Portal Styles
 * Theme tokens follow ProgressSync (dark bg=#0d1117, accent cyan/orange).
 */

: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;
  --purple:       #a855f7;
  --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; }

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

/* ── Loading ─────────────────────────── */
#screen-loading.active { height:100vh; display:flex; align-items:center; justify-content:center; }
.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); } }

/* ── 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:28px; filter:brightness(0) invert(1); flex-shrink:0; }
.header-center { font-size:0.95rem; color:var(--text-muted); flex-shrink:0; margin-left:20px; }
.header-user { display:flex; flex-direction:column; align-items:flex-end; flex:1; min-width:0; overflow:hidden; }
#user-name  { font-size:0.95rem; color:var(--text); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
#user-email { font-size:0.95rem; color:var(--text-muted); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.header-right { display:flex; align-items:center; gap:12px; flex-shrink:0; }

.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.95rem; transition:all 0.2s; }
.logout-btn:hover { color:var(--text); border-color:var(--text-muted); }

.mobile-logout-wrap { display:none; padding:24px; }
.mobile-logout-btn { width:100%; 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; }
.mobile-logout-btn:hover { color:var(--text); }

/* ── 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.95rem; transition:all 0.2s; }
.lang-btn.lang-active { background:var(--bg2); color:var(--orange); border:1px solid var(--orange); }

/* ── 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.95rem; color:var(--text-muted); text-align:center; margin-bottom:28px; }
.auth-lang { display:flex; justify-content:center; margin-bottom:20px; }
.auth-link-row { text-align:center; margin-top:16px; }
.auth-link { color:var(--cyan); font-size:0.95rem; cursor:pointer; text-decoration:underline; background:none; border:none; }
.confirm-icon { font-size:3rem; text-align:center; margin-bottom:12px; }
.confirm-desc { font-size:0.95rem; color:var(--text-muted); text-align:center; line-height:1.7; margin-bottom:24px; }

/* ── Forms ───────────────────────────── */
.form-label { display:block; font-size:0.95rem; 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; resize:vertical; }
.form-input:focus { border-color:var(--cyan); }
.form-group { margin-bottom:16px; }

/* ── Buttons ─────────────────────────── */
.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.95rem; cursor:pointer; transition:all 0.2s; margin-top:10px; }
.btn-secondary:hover { color:var(--text); border-color:var(--text-muted); }

/* ── Dashboard ───────────────────────── */
#screen-dashboard { padding:24px 24px 60px; max-width:1100px; margin:0 auto; }

.ic-section-title {
  font-size:1.1rem; font-weight:500; color:var(--text);
  border-left:3px solid var(--orange); padding-left:10px; margin-bottom:14px;
}

/* News list */
.ic-news-section { margin-bottom:32px; }
.ic-news-list { list-style:none; padding:0; }
.ic-news-row {
  display:flex; align-items:center; gap:14px;
  padding:12px 16px; background:var(--bg2);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  margin-bottom:6px;
}
.ic-news-title { color:var(--text); font-size:0.97rem; }

/* Category tiles — large clickable cards with total + new-count badge */
.ic-cat-tabs {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:12px;
  margin-bottom:24px;
  padding:0;
  border-bottom:none;
}
.ic-cat-tile {
  position:relative;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 20px;
  text-align:left;
  cursor:pointer;
  transition:all 0.15s;
  color:var(--text);
  font-family:inherit;
  min-height:78px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.ic-cat-tile:hover {
  border-color:var(--cyan);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}
.ic-cat-tile.active {
  border-color:var(--orange);
  background:rgba(249,115,22,0.08);
}
.ic-cat-tile-name {
  font-size:1.05rem;
  font-weight:500;
  color:var(--text);
  margin-bottom:6px;
}
.ic-cat-tile-count {
  font-size:0.88rem;
  color:var(--text-muted);
  font-variant-numeric:tabular-nums;
}
.ic-cat-tile-badge {
  position:absolute;
  top:-8px;
  right:-8px;
  background:var(--pink);
  color:#fff;
  font-size:0.78rem;
  font-weight:700;
  border-radius:12px;
  padding:3px 9px;
  min-width:26px;
  text-align:center;
  box-shadow:var(--shadow);
  letter-spacing:0.5px;
}

/* Legacy compact pills (kept for backwards compat / smaller variants) */
.ic-cat-tab {
  background:none; border:1px solid var(--border);
  color:var(--text-muted); border-radius:20px;
  padding:6px 16px; cursor:pointer; font-size:0.95rem;
  transition:all 0.15s;
}
.ic-cat-tab:hover { color:var(--text); border-color:var(--text-muted); }
.ic-cat-tab.active {
  color:var(--orange); border-color:var(--orange);
  background:rgba(249,115,22,0.10);
}

/* Item list */
.ic-cat-section { padding:0; }
.ic-item-list { list-style:none; padding:0; }
.ic-item-row {
  display:grid;
  grid-template-columns:160px 1fr auto;
  gap:18px; align-items:start;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 20px;
  margin-bottom:10px;
  transition:border-color 0.15s;
}
.ic-item-row:hover { border-color:var(--cyan); }
.ic-item-meta {
  display:flex; flex-direction:column; gap:6px;
  font-size:0.9rem; color:var(--text-muted);
}
.ic-item-title { font-size:1rem; color:var(--text); margin-bottom:4px; font-weight:500; }
.ic-item-desc  { font-size:0.92rem; color:var(--text-muted); line-height:1.6; white-space:pre-wrap; }
.ic-item-photos { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.ic-item-photo { width:96px; height:96px; object-fit:cover; border-radius:var(--radius-sm); border:1px solid var(--border); }
.ic-item-actions { display:flex; flex-direction:column; gap:6px; align-items:stretch; min-width:200px; }

/* New badge */
.ic-new-badge {
  display:inline-block; align-self:flex-start;
  background:var(--pink); color:#fff;
  font-size:0.72rem; font-weight:600; letter-spacing:1px;
  padding:2px 8px; border-radius:10px;
}

.ic-date { font-size:0.9rem; color:var(--text-muted); font-variant-numeric:tabular-nums; }

/* Download button */
.ic-download-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--bg3); border:1px solid var(--border);
  color:var(--text); border-radius:var(--radius-sm);
  padding:8px 12px; font-size:0.9rem; cursor:pointer;
  text-decoration:none; transition:all 0.15s;
}
.ic-download-btn:hover { border-color:var(--cyan); color:var(--cyan); }
.ic-download-icon { font-size:1.1rem; }
.ic-download-name { color:var(--text-muted); font-size:0.85rem; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

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

/* ── Toast ───────────────────────────── */
.toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--bg2); color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:12px 20px;
  font-size:0.95rem; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transition:opacity 0.2s, visibility 0.2s;
  z-index:200; max-width:90vw;
}
.toast.visible { opacity:1; visibility:visible; }
.toast.error    { border-color:var(--pink);   color:var(--pink);   }
.toast.warning  { border-color:var(--orange); color:var(--orange); }
.toast.info     { border-color:var(--cyan);   color:var(--cyan);   }

/* ── Responsive ──────────────────────── */
@media (max-width:768px) {
  #screen-dashboard { padding:16px 12px 80px; }
  .ic-item-row {
    grid-template-columns:1fr;
    gap:10px;
  }
  .ic-item-meta { flex-direction:row; align-items:center; gap:10px; }
  .ic-item-actions { min-width:0; }
  .header-center { display:none; }
  .header-right .logout-btn { display:none; }
  .mobile-logout-wrap { display:block; }
}