/* ═══════════════════════════════════════════
   Flat Fiori Tiles — Icon + Gradient style
   Used for report/secondary tiles (no image needed)
   ═══════════════════════════════════════════ */

/* ─── Generic Create/Change/Display mode tabs ─── */
.mode-tabs {
  display: flex;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 4px;
  gap: 2px;
  margin: 0 0 16px 0;
}
.mode-tabs .mode-tab-btn {
  flex: 1;
  padding: 9px 16px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-align: center;
}
.mode-tabs .mode-tab-btn:hover { background: #f9fafb; color: #111827; }
.mode-tabs .mode-tab-btn.active { background: #111827; color: #ffffff; }

/* ─── 9-column grid layout (fixed, not responsive) ─── */
#fioriTiles .fiori-grid {
  grid-template-columns: repeat(9, 1fr) !important;
  gap: 10px;
}
#fioriTiles .fiori-tile {
  width: auto !important;
  height: auto !important;
  min-height: 100px !important;
  aspect-ratio: auto !important;
  padding: 10px 12px !important;
}
#fioriTiles .fiori-tile.fiori-tile-flat { padding: 10px 12px !important; min-height: 100px !important; }
#fioriTiles .fiori-tile.fiori-tile-flat .tile-icon { font-size: 24px; }
#fioriTiles .fiori-tile.fiori-tile-flat .tile-title { font-size: 12px; }
#fioriTiles .fiori-tile.fiori-tile-flat .tile-subtitle { font-size: 9px; }
/* Responsive fallback only for small phones */
@media (max-width: 720px) { #fioriTiles .fiori-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 480px) { #fioriTiles .fiori-grid { grid-template-columns: repeat(2, 1fr) !important; } }


.fiori-tile.fiori-tile-flat {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  min-height: 105px;
  padding: 10px 12px !important;
  background: linear-gradient(135deg, var(--tile-c1, #667eea) 0%, var(--tile-c2, #764ba2) 100%) !important;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.fiori-tile.fiori-tile-flat::before,
.fiori-tile.fiori-tile-flat::after { content: none !important; }

.fiori-tile.fiori-tile-flat:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.fiori-tile.fiori-tile-flat .tile-icon {
  font-size: 28px;
  line-height: 1;
  opacity: 0.95;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.15));
  margin-bottom: 2px;
}

.fiori-tile.fiori-tile-flat .tile-body { margin-top: 0; }

.fiori-tile.fiori-tile-flat .tile-title {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.fiori-tile.fiori-tile-flat .tile-subtitle {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 4px;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ─── Category color themes ─── */
.fiori-tile-t-procurement { --tile-c1: #f97316; --tile-c2: #c2410c; }  /* orange */
.fiori-tile-t-grn         { --tile-c1: #0ea5e9; --tile-c2: #0369a1; }  /* sky blue */
.fiori-tile-t-invoice     { --tile-c1: #dc2626; --tile-c2: #991b1b; }  /* red */
.fiori-tile-t-payable     { --tile-c1: #be185d; --tile-c2: #831843; }  /* pink */
.fiori-tile-t-sales       { --tile-c1: #3b82f6; --tile-c2: #1e40af; }  /* blue */
.fiori-tile-t-delivery    { --tile-c1: #0d9488; --tile-c2: #134e4a; }  /* teal */
.fiori-tile-t-quotation   { --tile-c1: #8b5cf6; --tile-c2: #5b21b6; }  /* violet */
.fiori-tile-t-billing     { --tile-c1: #06b6d4; --tile-c2: #0e7490; }  /* cyan */
.fiori-tile-t-receivable  { --tile-c1: #16a34a; --tile-c2: #166534; }  /* green */
.fiori-tile-t-inventory   { --tile-c1: #10b981; --tile-c2: #047857; }  /* emerald */
.fiori-tile-t-report      { --tile-c1: #a855f7; --tile-c2: #6b21a8; }  /* purple */
.fiori-tile-t-finance     { --tile-c1: #ef4444; --tile-c2: #b91c1c; }  /* red */
.fiori-tile-t-config      { --tile-c1: #64748b; --tile-c2: #334155; }  /* slate */
.fiori-tile-t-warn        { --tile-c1: #f59e0b; --tile-c2: #b45309; }  /* amber */
.fiori-tile-t-primary     { --tile-c1: #6366f1; --tile-c2: #3730a3; }  /* indigo */
.fiori-tile-t-user        { --tile-c1: #ec4899; --tile-c2: #9d174d; }  /* magenta */
.fiori-tile-t-pnl         { --tile-c1: #14b8a6; --tile-c2: #0f766e; }  /* teal-green */

/* KPI badge — repositioned to top-right on flat tiles */
.fiori-tile.fiori-tile-flat .fiori-kpi {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  display: block !important;
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  letter-spacing: 0.01em;
  white-space: nowrap;
  z-index: 2;
  max-width: calc(100% - 60px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* When a KPI badge exists, shrink the icon so they can't overlap */
.fiori-tile.fiori-tile-flat:has(.fiori-kpi) .tile-icon {
  font-size: 22px;
}