/* ════════════════════════════════════════════════════════════════
   styles.css — Go/No-Go Readiness Assessment SC → S/4HANA
   ════════════════════════════════════════════════════════════════ */
:root {
  --sap-blue:  #003366;
  --sap-mid:   #0070D2;
  --sap-light: #E8F1FB;
  --cat-bg:    #D6E4F0;
  --cat-fg:    #003366;
  --ok-bg:     #C6EFCE; --ok-fg:    #1a6b2a;
  --enc-bg:    #DDEBF7; --enc-fg:   #1F4E79;
  --risk-bg:   #FCE4D6; --risk-fg:  #833C00;
  --post-bg:   #FFF2CC; --post-fg:  #7F6000;
  --pend-bg:   #F0F0F0; --pend-fg:  #595959;
  --border:    #C8D4E8;
  --text:      #1a1a2e;
  --radius:    6px;
  --shadow:    0 2px 16px rgba(0,51,102,.12);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Arial, sans-serif; background: #eef2fa; color: var(--text); font-size: 13px; }

/* ── Page Header ── */
.page-header {
  background: linear-gradient(135deg, var(--sap-blue) 0%, #005ba1 100%);
  color: #fff; padding: 20px 28px 14px; box-shadow: var(--shadow);
}
.page-header h1 { font-size: 18px; font-weight: 700; }
.page-header p  { font-size: 11.5px; opacity: .75; margin-top: 3px; }

/* ── Meta Bar ── */
.meta-bar {
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  background: #fff; padding: 9px 28px; border-bottom: 2px solid var(--border);
}
.meta-bar label { font-size: 11.5px; color: #555; font-weight: 600; white-space: nowrap; }
.meta-bar input {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 4px 8px; font-size: 12px; color: var(--text); background: #fafcff;
}
.meta-bar input:focus { outline: 2px solid var(--sap-mid); }

/* ── Progress Bar ── */
.progress-wrap {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 28px; background: #fff; border-bottom: 1px solid var(--border);
}
.progress-bar-outer { flex:1; height:10px; background:#e0e6ef; border-radius:8px; overflow:hidden; }
.progress-bar-inner { height:100%; background: linear-gradient(90deg,var(--sap-mid),#00b050); border-radius:8px; transition:width .4s; }
.progress-label  { font-size:12px; color:var(--sap-blue); font-weight:700; min-width:120px; }
.progress-detail { font-size:11px; color:#888; }

/* ── Summary Pills ── */
.summary-bar {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 10px 28px; background: #fff; border-bottom: 1px solid var(--border);
}
.pill {
  display:flex; align-items:center; gap:5px;
  padding:4px 12px; border-radius:20px; font-size:11.5px; font-weight:700;
  border:1.5px solid transparent; user-select:none;
}
.pill.ok   { background:var(--ok-bg);   color:var(--ok-fg);   border-color:#9fd3a9; }
.pill.enc  { background:var(--enc-bg);  color:var(--enc-fg);  border-color:#9ac6ef; }
.pill.risk { background:var(--risk-bg); color:var(--risk-fg); border-color:#f0b08a; }
.pill.post { background:var(--post-bg); color:var(--post-fg); border-color:#ffe07a; }
.pill.pend { background:var(--pend-bg); color:var(--pend-fg); border-color:#c0c0c0; }
.pill.total{ background:var(--sap-light); color:var(--sap-blue); border-color:var(--sap-mid); }

/* ── Toolbar ── */
.toolbar {
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  padding:9px 28px; background:#f7f9fd; border-bottom:1px solid var(--border);
}
.toolbar select, .toolbar input[type=text] {
  border:1px solid var(--border); border-radius:var(--radius);
  padding:5px 9px; font-size:12px; background:#fff; color:var(--text);
}
.toolbar label { font-size:12px; color:#555; font-weight:600; }

/* ── Buttons ── */
.btn {
  padding:5px 13px; border-radius:var(--radius); border:none;
  font-size:12px; font-weight:600; cursor:pointer;
  transition: background .15s, transform .1s, box-shadow .15s;
  display:inline-flex; align-items:center; gap:4px;
}
.btn:hover { box-shadow:0 2px 6px rgba(0,0,0,.15); }
.btn:active { transform:scale(.97); }
.btn-primary   { background:var(--sap-mid); color:#fff; }
.btn-primary:hover  { background:#0060b8; }
.btn-excel     { background:#1D6F42; color:#fff; }
.btn-excel:hover    { background:#155230; }
.btn-secondary { background:#e8edf5; color:var(--sap-blue); }
.btn-secondary:hover{ background:#d0ddf0; }
.btn-cat       { background:#5b3f97; color:#fff; }
.btn-cat:hover { background:#4a3280; }

/* ── Main Content ── */
.content { padding:16px 28px 40px; }

/* ── Category Section ── */
.category-section { margin-bottom:16px; background:#fff; border-radius:10px; box-shadow:var(--shadow); overflow:hidden; }

.cat-header {
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; border-bottom:2px solid var(--sap-mid);
  transition: background .2s;
}
.cat-header.cat-st-ok   { background: #d4f0da; border-bottom-color: #4caf50; }
.cat-header.cat-st-enc  { background: #cfe0f5; border-bottom-color: #1976D2; }
.cat-header.cat-st-risk { background: #f9d8c8; border-bottom-color: #e65100; }
.cat-header.cat-st-post { background: #fff0b3; border-bottom-color: #f9a825; }
.cat-header.cat-st-pend { background: var(--cat-bg); border-bottom-color: var(--sap-mid); }

.toggle-btn {
  background:none; border:none; cursor:pointer;
  font-size:14px; color:var(--cat-fg); padding:2px 4px;
  border-radius:4px; transition: transform .25s, background .15s;
  line-height:1; flex-shrink:0;
}
.toggle-btn:hover { background: rgba(0,51,102,.1); }
.toggle-btn.collapsed { transform: rotate(-90deg); }

.cat-name-input {
  flex:1; font-weight:700; font-size:13px; color:var(--cat-fg);
  border:none; background:transparent; padding:2px 4px;
  border-radius:3px; font-family:inherit;
}
.cat-name-input:focus { outline:2px solid var(--sap-mid); background:#fff; }

.cat-row-count {
  font-size:11px; color:#667; background: rgba(255,255,255,.6);
  padding:2px 7px; border-radius:10px; white-space:nowrap; font-weight:600;
}

/* Category status select */
.cat-status-select {
  border:1.5px solid rgba(0,0,0,.12); border-radius:6px;
  padding:4px 8px; font-size:11.5px; font-weight:700;
  cursor:pointer; font-family:inherit; white-space:nowrap;
  transition: all .15s;
}
.cat-status-select:focus { outline:2px solid var(--sap-mid); }
.cat-st-ok   .cat-status-select { background:var(--ok-bg);   color:var(--ok-fg);   border-color:#76c789; }
.cat-st-enc  .cat-status-select { background:var(--enc-bg);  color:var(--enc-fg);  border-color:#7db3e0; }
.cat-st-risk .cat-status-select { background:var(--risk-bg); color:var(--risk-fg); border-color:#e89870; }
.cat-st-post .cat-status-select { background:var(--post-bg); color:var(--post-fg); border-color:#f0d060; }
.cat-st-pend .cat-status-select { background:var(--pend-bg); color:var(--pend-fg); border-color:#b0b0b0; }

.cat-actions { display:flex; gap:6px; align-items:center; flex-shrink:0; }
.btn-sm { padding:3px 9px; font-size:11px; }
.btn-delete-cat { background:#eee; color:#c00; border:1px solid #ddd; border-radius:var(--radius); cursor:pointer; font-size:11px; padding:3px 9px; font-weight:700; }
.btn-delete-cat:hover { background:#fde; }

/* Collapse animation */
.cat-body { overflow:hidden; transition: max-height .3s ease; }
.cat-body.collapsed { max-height:0 !important; }

/* ── Table ── */
table { width:100%; border-collapse:collapse; }
thead th {
  background:var(--sap-blue); color:#fff; font-weight:700;
  padding:8px 7px; font-size:11px; letter-spacing:.3px; white-space:nowrap; text-align:center;
}
thead th.th-left { text-align:left; }

tbody tr { transition:background .1s; }
tbody tr:hover { filter:brightness(.97); }
tbody tr.even { background:#f7f9fd; }
tbody tr.odd  { background:#fff; }
tbody tr.st-ok   { background:#edfbf0 !important; }
tbody tr.st-enc  { background:#eef5fc !important; }
tbody tr.st-risk { background:#fdf2ee !important; }
tbody tr.st-post { background:#fffaec !important; }
tbody tr.st-pend { background:#f8f8f8 !important; }

td { padding:5px 6px; border-bottom:1px solid var(--border); vertical-align:top; }
td.num-cell { width:36px; text-align:center; color:#aaa; font-weight:700; font-size:11px; padding-top:8px; }
td.del-cell { width:30px; text-align:center; }

.e-input {
  width:100%; border:1px solid transparent; border-radius:4px;
  padding:4px 5px; font-size:12px; font-family:inherit;
  background:transparent; color:var(--text); resize:none;
  transition:border-color .15s, background .15s;
}
.e-input:hover { border-color:#d0d8e8; background:rgba(255,255,255,.7); }
.e-input:focus { outline:none; border-color:var(--sap-mid); background:#fff; box-shadow:0 0 0 2px rgba(0,112,210,.15); }
.e-macro   { min-width:200px; font-weight:600; color:#1a1a2e; }
.e-desc    { min-width:260px; font-size:11.5px; color:#444; line-height:1.5; }
.e-resp    { width:100px; }
.e-date    { width:90px; font-size:11.5px; }
.e-comment { min-width:200px; line-height:1.45; }

.status-select {
  width:100%; border:none; border-radius:5px;
  padding:5px; font-size:11.5px; font-weight:700;
  cursor:pointer; appearance:none; text-align:center;
  transition:all .15s; font-family:inherit;
}
.status-select:focus { outline:2px solid var(--sap-mid); }
.st-ok   .status-select { background:var(--ok-bg);   color:var(--ok-fg); }
.st-enc  .status-select { background:var(--enc-bg);  color:var(--enc-fg); }
.st-risk .status-select { background:var(--risk-bg); color:var(--risk-fg); }
.st-post .status-select { background:var(--post-bg); color:var(--post-fg); }
.st-pend .status-select { background:var(--pend-bg); color:var(--pend-fg); }

.del-btn { background:none; border:none; cursor:pointer; font-size:15px; color:#ccc; transition:color .15s; padding:2px 4px; border-radius:3px; }
.del-btn:hover { color:#c00; background:#fde8e8; }

.add-row-bar { padding:5px 10px; border-top:1px dashed #cdd8ea; background:#f7f9fd; }
.add-row-bar button { font-size:11px; padding:3px 10px; }

tr.hidden { display:none; }
.section-hidden { display:none; }

/* ── Footer ── */
.page-footer { text-align:center; padding:12px; font-size:11px; color:#aaa; border-top:1px solid var(--border); background:#fff; }

/* ── PDF MODAL ── */
.modal-overlay {
  display:none; position:fixed; inset:0; z-index:9999;
  background:rgba(0,20,60,.55); backdrop-filter:blur(3px);
  align-items:center; justify-content:center;
}
.modal-overlay.open { display:flex; }
.modal-box {
  background:#fff; border-radius:12px; width:520px; max-width:96vw;
  max-height:88vh; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 8px 40px rgba(0,30,80,.35);
}
.modal-header {
  background: linear-gradient(135deg,var(--sap-blue),#005ba1);
  color:#fff; padding:16px 20px; display:flex; align-items:center; gap:10px;
}
.modal-header h2 { font-size:14px; font-weight:700; flex:1; }
.modal-close { background:none; border:none; color:#fff; font-size:20px; cursor:pointer; opacity:.8; }
.modal-close:hover { opacity:1; }
.modal-body { padding:16px 20px; overflow-y:auto; flex:1; }
.modal-body p { font-size:12px; color:#555; margin-bottom:12px; }
.modal-selall {
  display:flex; gap:8px; margin-bottom:10px;
}
.modal-selall button {
  font-size:11px; padding:3px 10px; border:1px solid var(--border);
  border-radius:4px; cursor:pointer; background:#f0f4fb; color:var(--sap-blue); font-weight:600;
}
.modal-selall button:hover { background:var(--cat-bg); }
.view-list { display:flex; flex-direction:column; gap:4px; }
.view-item {
  display:flex; align-items:flex-start; gap:10px;
  padding:8px 10px; border-radius:6px; cursor:pointer;
  border:1.5px solid transparent; transition:all .15s;
}
.view-item:hover { background:var(--sap-light); border-color:var(--border); }
.view-item.checked { background:#eaf3ff; border-color:var(--sap-mid); }
.view-item input[type=checkbox] { margin-top:2px; accent-color:var(--sap-mid); width:14px; height:14px; flex-shrink:0; cursor:pointer; }
.view-item-label { flex:1; }
.view-item-label strong { font-size:12px; color:var(--text); display:block; }
.view-item-label span   { font-size:11px; color:#888; }
.view-item-label .cat-badge {
  display:inline-block; font-size:10px; font-weight:700;
  padding:1px 7px; border-radius:10px; margin-top:2px;
}
.modal-footer {
  padding:12px 20px; border-top:1px solid var(--border);
  display:flex; justify-content:flex-end; gap:8px; background:#f7f9fd;
}
.btn-pdf { background:#c0392b; color:#fff; }
.btn-pdf:hover { background:#a93226; }

/* ── Saved Badge ── */
#saved-badge {
  font-size:11px; color:#217346; font-weight:600; margin-left:4px;
  transition:opacity .5s;
}
#save-error-badge {
  font-size:11px; color:#c00; font-weight:600; margin-left:4px;
}

/* ── Users Table in Modal ── */
.users-table { width:100%; border-collapse:collapse; font-size:12px; }
.users-table th { background:#f0f4fb; color:#003366; font-weight:700; padding:6px 8px; text-align:left; border-bottom:2px solid var(--border); }
.users-table td { padding:6px 8px; border-bottom:1px solid #e8edf5; vertical-align:middle; }
.users-table tr:hover td { background:#f7f9fd; }
.role-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:10.5px; font-weight:700; }
.role-admin { background:#DDEBF7; color:#1F4E79; }
.role-vista { background:#F0F0F0; color:#595959; }
.btn-danger-sm { background:none; border:1px solid #e0a0a0; color:#c00; border-radius:4px; padding:3px 8px; font-size:11px; cursor:pointer; }
.btn-danger-sm:hover { background:#fde; }

/* ── Print ── */
@media print {
  .toolbar, .del-btn, .add-row-bar, .toggle-btn, .btn-delete-cat, .modal-overlay { display:none; }
  * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .cat-body.collapsed { max-height:none !important; }
}

/* ── Login Overlay ── */
#login-overlay {
  position:fixed; inset:0; z-index:99999;
  background: linear-gradient(135deg, var(--sap-blue) 0%, #005ba1 100%);
  display:flex; align-items:center; justify-content:center;
}
.login-box {
  background:#fff; border-radius:14px; padding:36px 40px;
  width:360px; max-width:94vw;
  box-shadow: 0 12px 48px rgba(0,20,60,.45);
}
.login-box h2 { color:var(--sap-blue); font-size:16px; font-weight:700; margin-bottom:3px; text-align:center; }
.login-box .login-sub { color:#666; font-size:12px; text-align:center; margin-bottom:22px; }
.login-box label { display:block; font-size:12px; font-weight:600; color:#444; margin-bottom:5px; margin-top:12px; }
.login-box input[type=text], .login-box input[type=password] {
  width:100%; padding:9px 12px; border:1.5px solid var(--border);
  border-radius:var(--radius); font-size:13px; color:var(--text);
  outline:none; transition:border-color .15s;
}
.login-box input:focus { border-color:var(--sap-mid); box-shadow:0 0 0 2px rgba(0,112,210,.15); }
#login-error { color:#c00; font-size:11.5px; min-height:16px; margin-top:8px; text-align:center; }
.login-submit {
  width:100%; margin-top:16px; padding:11px;
  background:var(--sap-mid); color:#fff;
  border:none; border-radius:var(--radius);
  font-size:13px; font-weight:700; cursor:pointer; transition:background .15s;
}
.login-submit:hover { background:#005ba1; }
.login-submit:disabled { background:#99b9d6; cursor:not-allowed; }

/* ── Role: Vista (read-only) ── */
body.role-vista .e-input,
body.role-vista .cat-name-input,
body.role-vista .meta-bar input {
  pointer-events:none !important;
  border-color:transparent !important;
  background:transparent !important;
  box-shadow:none !important;
  cursor:default !important;
}
body.role-vista .status-select,
body.role-vista .cat-status-select {
  pointer-events:none !important;
  cursor:default !important;
  -webkit-appearance:none !important;
  appearance:none !important;
}
body.role-vista .del-btn,
body.role-vista .add-row-bar,
body.role-vista .btn-cat,
body.role-vista .btn-delete-cat,
body.role-vista #reset-btn { display:none !important; }