/* ============================================================
   Design system "Horizon-like" pour démo Launchpad type SAP.
   Palette et layout inspirés de la charte SAP Fiori Horizon,
   recréés from scratch (aucun asset SAP officiel utilisé).
   ============================================================ */

:root{
  --shell-bg: #354a5f;
  --shell-bg-dark: #2a3c4d;
  --brand-blue: #0854a0;
  --action-blue: #0a6ed1;
  --action-blue-hover: #085caf;
  --page-bg: #f5f6f7;
  --tile-bg: #ffffff;
  --border-color: #d9d9d9;
  --text-primary: #1d2d3e;
  --text-secondary: #556b82;
  --text-muted: #89919a;

  --success-fg:#107e3e; --success-bg:#e5f5e9;
  --warning-fg:#a25c00; --warning-bg:#fef2e0;
  --error-fg:#bb0000;   --error-bg:#fbe6e6;
  --info-fg:#0a6ed1;    --info-bg:#e7f1fb;
  --neutral-fg:#556b82; --neutral-bg:#eef0f2;

  --shadow-tile: 0 1px 2px rgba(0,0,0,.12), 0 1px 1px rgba(0,0,0,.08);
  --shadow-panel: -2px 0 10px rgba(0,0,0,.18);
  --radius: 4px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family: var(--font);
  background: var(--page-bg);
  color: var(--text-primary);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;font-size:inherit;cursor:pointer;}

/* ---------------- Shell bar ---------------- */
.shell-bar{
  height:48px;
  background: var(--shell-bg);
  color:#fff;
  display:flex;
  align-items:center;
  padding:0 8px;
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 2px 4px rgba(0,0,0,.25);
}
.shell-icon-btn{
  width:36px;height:36px;border:none;background:transparent;color:#fff;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  opacity:.9;
}
.shell-icon-btn:hover{background:rgba(255,255,255,.15);opacity:1;}
.shell-logo{
  display:flex;align-items:center;gap:8px;padding:0 12px 0 4px;font-weight:700;
  font-size:15px;letter-spacing:.2px;white-space:nowrap;
}
.shell-logo .badge-mini{
  background:#fff;color:var(--shell-bg);font-weight:800;font-size:11px;
  padding:2px 5px;border-radius:3px;letter-spacing:.5px;
}
.shell-title{
  font-size:14px;font-weight:600;opacity:.95;padding-left:8px;
  border-left:1px solid rgba(255,255,255,.25);margin-left:4px;
}
.shell-spacer{flex:1;}
.shell-search{
  display:flex;align-items:center;background:rgba(255,255,255,.14);
  border-radius:18px;padding:0 12px;height:32px;width:280px;gap:8px;
  transition:background .15s;
}
.shell-search:focus-within{background:rgba(255,255,255,.25);}
.shell-search input{
  background:transparent;border:none;outline:none;color:#fff;width:100%;font-size:13px;
}
.shell-search input::placeholder{color:rgba(255,255,255,.75);}
.shell-search svg{flex-shrink:0;opacity:.85;}
.shell-right{display:flex;align-items:center;gap:2px;margin-left:8px;}
.shell-avatar{
  width:32px;height:32px;border-radius:50%;background:#8fb8e8;color:#0a3a66;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;
  margin-left:6px;
}
.shell-bell-dot{
  position:relative;
}
.shell-bell-dot::after{
  content:"";position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;
  background:#e9730c;border:1.5px solid var(--shell-bg);
}

/* ---------------- Breadcrumb ---------------- */
.breadcrumb{
  padding:10px 24px 0;
  font-size:12px;
  color:var(--text-secondary);
}
.breadcrumb a:hover{color:var(--action-blue);text-decoration:underline;}
.breadcrumb .sep{margin:0 6px;color:var(--text-muted);}

/* ---------------- Launchpad ---------------- */
.launchpad{
  max-width:1400px;
  margin:0 auto;
  padding:20px 24px 60px;
}
.launchpad-header{
  padding:8px 0 20px;
}
.launchpad-header h1{
  font-size:22px;margin:0 0 4px;font-weight:600;color:var(--text-primary);
}
.launchpad-header p{
  margin:0;color:var(--text-secondary);font-size:13px;
}
.group{
  margin-bottom:28px;
}
.group-header{
  display:flex;align-items:center;gap:10px;margin-bottom:12px;
  padding-bottom:6px;border-bottom:1px solid var(--border-color);
}
.group-header .group-icon{
  width:26px;height:26px;color:var(--brand-blue);flex-shrink:0;
}
.group-header h2{
  font-size:16px;margin:0;font-weight:600;color:var(--text-primary);
}
.group-header .group-count{
  color:var(--text-muted);font-size:12px;margin-left:auto;
}
.tile-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(176px,1fr));
  gap:14px;
}
.tile{
  background:var(--tile-bg);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  box-shadow:var(--shadow-tile);
  padding:14px;
  min-height:150px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:transform .12s ease, box-shadow .12s ease;
  cursor:pointer;
}
.tile:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,.15);
  border-color:#b9c3cc;
}
.tile-top{display:flex;align-items:flex-start;justify-content:space-between;}
.tile-icon{
  width:30px;height:30px;color:var(--brand-blue);
}
.tile-code{
  font-size:11px;font-weight:700;color:var(--text-muted);
  background:var(--neutral-bg);padding:2px 6px;border-radius:3px;letter-spacing:.3px;
}
.tile-kpi{
  font-size:28px;font-weight:700;color:var(--text-primary);line-height:1;margin-top:8px;
}
.tile-kpi.warn{color:var(--warning-fg);}
.tile-kpi.err{color:var(--error-fg);}
.tile-kpi-label{
  font-size:11px;color:var(--text-muted);margin-top:2px;
}
.tile-title{
  font-size:13.5px;font-weight:600;color:var(--text-primary);margin-top:10px;line-height:1.3;
}

/* ---------------- List Report page ---------------- */
.app-page{max-width:1400px;margin:0 auto;padding:0 24px 60px;}
.app-header{
  display:flex;align-items:center;gap:14px;padding:14px 0 8px;flex-wrap:wrap;
}
.app-header .app-icon{
  width:34px;height:34px;color:var(--brand-blue);flex-shrink:0;
}
.app-header h1{
  font-size:20px;margin:0;font-weight:600;
}
.app-header .code-chip{
  font-size:12px;font-weight:700;background:var(--brand-blue);color:#fff;
  padding:3px 8px;border-radius:3px;letter-spacing:.4px;
}
.app-header .kpi-chip{
  margin-left:auto;display:flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--border-color);border-radius:20px;
  padding:6px 14px;font-size:12px;color:var(--text-secondary);
}
.app-header .kpi-chip b{font-size:16px;color:var(--text-primary);}

.filter-bar{
  background:#fff;border:1px solid var(--border-color);border-radius:var(--radius);
  padding:12px 16px;display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin-top:10px;
}
.filter-field{display:flex;flex-direction:column;gap:4px;min-width:150px;}
.filter-field label{font-size:11px;color:var(--text-secondary);font-weight:600;}
.filter-field input, .filter-field select{
  border:1px solid var(--border-color);border-radius:3px;padding:6px 8px;font-size:13px;
  background:#fbfbfc;
}
.filter-field input:focus, .filter-field select:focus{
  outline:none;border-color:var(--action-blue);background:#fff;
}
.btn{
  border-radius:3px;padding:7px 16px;font-size:13px;font-weight:600;border:1px solid transparent;
}
.btn-primary{background:var(--action-blue);color:#fff;}
.btn-primary:hover{background:var(--action-blue-hover);}
.btn-ghost{background:#fff;border-color:var(--border-color);color:var(--text-primary);}
.btn-ghost:hover{background:#f0f2f4;}

.toolbar{
  display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap;
}
.toolbar .result-count{
  font-size:13px;font-weight:600;color:var(--text-primary);
}
.toolbar .result-count span{color:var(--text-muted);font-weight:400;margin-left:4px;}
.toolbar-spacer{flex:1;}
.icon-btn{
  width:30px;height:30px;border-radius:3px;border:1px solid var(--border-color);
  background:#fff;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);
}
.icon-btn:hover{background:#f0f2f4;color:var(--action-blue);}

.table-wrap{
  background:#fff;border:1px solid var(--border-color);border-radius:var(--radius);
  margin-top:10px;overflow-x:auto;
}
table.data-table{
  width:100%;border-collapse:collapse;font-size:13px;min-width:640px;
}
table.data-table thead th{
  text-align:left;padding:10px 12px;background:#fafbfc;border-bottom:2px solid var(--border-color);
  font-weight:700;color:var(--text-secondary);font-size:11.5px;text-transform:uppercase;letter-spacing:.3px;
  white-space:nowrap;cursor:pointer;user-select:none;
}
table.data-table thead th:hover{color:var(--action-blue);}
table.data-table thead th.sorted::after{content:" ▾";font-size:10px;}
table.data-table thead th.right, table.data-table td.right{text-align:right;}
table.data-table tbody td{
  padding:9px 12px;border-bottom:1px solid #eef0f2;white-space:nowrap;color:var(--text-primary);
}
table.data-table tbody tr{cursor:pointer;}
table.data-table tbody tr:hover td{background:#f2f7fd;}
table.data-table tbody tr.selected td{background:#e7f1fb;}

.badge{
  display:inline-flex;align-items:center;padding:3px 9px;border-radius:10px;
  font-size:11.5px;font-weight:700;white-space:nowrap;
}
.badge-success{background:var(--success-bg);color:var(--success-fg);}
.badge-warning{background:var(--warning-bg);color:var(--warning-fg);}
.badge-error{background:var(--error-bg);color:var(--error-fg);}
.badge-info{background:var(--info-bg);color:var(--info-fg);}
.badge-neutral{background:var(--neutral-bg);color:var(--neutral-fg);}

.empty-state{padding:50px 20px;text-align:center;color:var(--text-muted);}

/* ---------------- Side detail panel ---------------- */
.side-overlay{
  position:fixed;inset:0;background:rgba(20,30,40,.25);z-index:200;
  opacity:0;pointer-events:none;transition:opacity .15s;
}
.side-overlay.open{opacity:1;pointer-events:auto;}
.side-panel{
  position:fixed;top:0;right:0;bottom:0;width:380px;max-width:92vw;
  background:#fff;box-shadow:var(--shadow-panel);z-index:201;
  transform:translateX(100%);transition:transform .18s ease;
  display:flex;flex-direction:column;
}
.side-panel.open{transform:translateX(0);}
.side-panel-header{
  padding:16px 18px;border-bottom:1px solid var(--border-color);
  display:flex;align-items:center;gap:10px;
}
.side-panel-header h3{margin:0;font-size:15px;font-weight:700;}
.side-panel-close{margin-left:auto;}
.side-panel-body{padding:16px 18px;overflow-y:auto;flex:1;}
.detail-row{
  display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px solid #f0f2f4;font-size:13px;
}
.detail-row .k{color:var(--text-secondary);}
.detail-row .v{font-weight:600;text-align:right;}

/* ---------------- Toast ---------------- */
.toast{
  position:fixed;bottom:24px;right:24px;background:#1d2d3e;color:#fff;
  padding:12px 18px;border-radius:4px;font-size:13px;box-shadow:0 6px 20px rgba(0,0,0,.3);
  display:flex;align-items:center;gap:10px;z-index:300;
  transform:translateY(20px);opacity:0;transition:all .2s;
}
.toast.show{transform:translateY(0);opacity:1;}
.toast .dot{width:8px;height:8px;border-radius:50%;background:#3fc95e;flex-shrink:0;}

@media (max-width:640px){
  .shell-search{display:none;}
  .tile-grid{grid-template-columns:repeat(auto-fill, minmax(140px,1fr));}
}