/* ============================================================
   Flow Engine — Console UI kit layout (kit-local; not shipped
   to consumers). Composes the design-system components.
   ============================================================ */

.fe-app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: minmax(0, 1fr); height: 100dvh; min-height: 640px; background: var(--bg-app); color: var(--text-primary); overflow: hidden; }

/* ---- Sidebar ---- */
.fe-side { display: flex; flex-direction: column; background: var(--surface-base); border-right: 1px solid var(--border); padding: 14px var(--space-3); gap: 2px; overflow-y: auto; min-height: 0; }
.fe-side__brand { display: flex; align-items: center; gap: var(--space-2-5); padding: var(--space-1) var(--space-2) var(--space-4); }
.fe-side__brand img { height: 26px; }
.fe-side__section { font: var(--type-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-faint); padding: 14px var(--space-3) var(--space-1-5); }
.fe-side__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: var(--space-2-5); }
.fe-side__foot .who { min-width: 0; }
.fe-side__foot .who b { display: block; font: var(--fw-medium) var(--text-sm)/1.2 var(--font-sans); color: var(--text-secondary); }
.fe-side__foot .who span { font: var(--fw-regular) var(--text-2xs)/1.2 var(--font-mono); color: var(--text-faint); }

/* ---- Main / topbar ---- */
.fe-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.fe-topbar { display: flex; align-items: center; gap: var(--space-4); height: var(--topbar-h); padding: 0 var(--space-5); border-bottom: 1px solid var(--border); background: var(--surface-base); flex: none; }
.fe-topbar__title { min-width: 0; }
.fe-topbar__title h1 { font: var(--type-h3); color: var(--text-primary); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fe-topbar__title p { font: var(--type-body-sm); color: var(--text-muted); margin: 1px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fe-topbar__spacer { margin-left: auto; }
.fe-topbar__tools { display: flex; align-items: center; gap: var(--space-2-5); flex: none; }
.fe-search { display: flex; align-items: center; gap: var(--space-2); height: 34px; padding: 0 var(--space-3); width: 260px; background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-faint); }
.fe-search input { flex: 1; border: 0; background: transparent; outline: none; color: var(--text-secondary); font: var(--type-body-sm); }
.fe-search input::placeholder { color: var(--text-faint); }
.fe-search svg { width: 15px; height: 15px; }
.fe-live { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-h-sm); padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--green-a15); border: 1px solid rgba(34,197,94,.3); color: var(--green-300); font: var(--fw-medium) var(--text-xs)/1 var(--font-mono); letter-spacing: var(--ls-wide); }

/* ---- Content ---- */
.fe-content { flex: 1; overflow-y: auto; padding: var(--gutter); }
.fe-content--flush { padding: 0; }
.fe-page { width: 100%; }

/* ---- Layout utilities ---- */
.fe-grid { display: grid; gap: var(--space-4); }
.fe-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fe-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fe-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fe-cluster { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.fe-stackv { display: flex; flex-direction: column; gap: var(--space-4); }

/* ---- Data table ---- */
.fe-tablewrap { overflow-x: auto; }
.fe-table { width: 100%; min-width: 680px; border-collapse: collapse; font: var(--type-body-sm); }
.fe-table th { text-align: left; font: var(--type-label); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-faint); padding: var(--space-2-5) 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.fe-table td { padding: 11px 14px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); vertical-align: middle; }
.fe-table tbody tr { cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.fe-table tbody tr:hover { background: var(--white-a04); }
.fe-table tbody tr.is-selected { background: var(--accent-quiet); }
.fe-table tbody tr:last-child td { border-bottom: 0; }
.fe-cellmain { display: flex; align-items: center; gap: var(--space-2-5); }
.fe-cellmain b { display: block; font: var(--fw-medium) var(--text-sm)/1.2 var(--font-sans); color: var(--text-primary); white-space: nowrap; }
.fe-cellmain span { display: block; font: var(--fw-regular) var(--text-2xs)/1.4 var(--font-mono); color: var(--text-faint); }
.fe-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.fe-muted { color: var(--text-muted); }
.fe-faint { color: var(--text-faint); }

/* ============ Login ============ */
.fe-login { display: grid; grid-template-columns: 460px 1fr; height: 100dvh; min-height: 600px; background: var(--bg-void); }
.fe-login__panel { display: flex; flex-direction: column; justify-content: center; gap: 0; padding: 56px 52px; background: var(--surface-base); border-right: 1px solid var(--border); }
.fe-login__brand { height: 34px; align-self: flex-start; margin-bottom: 44px; }
.fe-login__title { font: var(--type-h2); color: var(--text-primary); margin: 0 0 6px; }
.fe-login__sub { font: var(--type-body-sm); color: var(--text-muted); margin: 0 0 30px; }
.fe-login__hint { margin-top: 22px; font: var(--fw-regular) var(--text-xs)/1.5 var(--font-mono); color: var(--text-faint); }
.fe-login__hint b { color: var(--text-muted); font-weight: var(--fw-medium); }
.fe-login__visual { position: relative; overflow: hidden; }
.fe-login__glow { position: absolute; width: 640px; height: 640px; border-radius: var(--radius-pill); background: radial-gradient(circle, var(--cyan-a15), transparent 62%); top: -220px; right: -140px; }
.fe-login__pulse { position: absolute; left: 0; right: 0; top: 34%; opacity: 0.9; }
.fe-login__pulse path { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: fe-dash 5s var(--ease-in-out) infinite; }
@keyframes fe-dash { 0% { stroke-dashoffset: 1200; } 55%, 100% { stroke-dashoffset: 0; } }
.fe-ticker { position: absolute; left: 48px; right: 48px; bottom: 44px; display: flex; flex-direction: column-reverse; gap: var(--space-2); }
.fe-ticker__row { display: flex; align-items: center; gap: var(--space-2-5); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--glass-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); font: var(--fw-regular) var(--text-xs)/1 var(--font-mono); color: var(--text-muted); animation: fe-fade-up 0.4s var(--ease-out) both; }
.fe-ticker__row .t { color: var(--text-faint); margin-left: auto; }

/* ============ Fields ============ */
.fe-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.fe-field__label { font: var(--type-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-faint); }
.fe-input { display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 13px; background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-faint); transition: var(--transition-colors); }
.fe-input:focus-within { border-color: var(--border-focus); box-shadow: var(--glow-focus); color: var(--accent); }
.fe-input input, .fe-input select { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--text-primary); font: var(--type-body); }
.fe-input select { appearance: none; cursor: pointer; }
/* input[type=time]: o ícone do relógio nativo vem escuro — inverte p/ o tema dark */
.fe-input input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .55; cursor: pointer; }
.fe-input input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.fe-input select option { background: var(--surface-raised); color: var(--text-primary); }
.fe-input input::placeholder { color: var(--text-faint); }

/* ============ Modal ============ */
.fe-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; background: rgba(4, 7, 12, 0.66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fe-fade 0.16s var(--ease-out) both; }
.fe-modal__card { width: 430px; max-width: calc(100vw - 48px); background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg), var(--edge-highlight); padding: var(--space-6); animation: fe-pop 0.24s var(--ease-spring) both; }
.fe-modal__title { font: var(--type-title); color: var(--text-primary); margin: 0 0 2px; }
.fe-modal__sub { font: var(--type-body-sm); color: var(--text-muted); margin: 0 0 20px; }
.fe-modal__foot { display: flex; justify-content: flex-end; gap: var(--space-2-5); margin-top: 20px; }
@keyframes fe-fade { from { opacity: 0; } }
@keyframes fe-pop { from { opacity: 0; transform: translateY(10px) scale(0.98); } }

/* ============ Toasts ============ */
.fe-toasts { position: fixed; right: 20px; bottom: 20px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2-5); }
.fe-toasts .fe-toast { animation: fe-slide-left 0.32s var(--ease-spring) both; }
@keyframes fe-slide-left { from { opacity: 0; transform: translateX(24px); } }

/* ============ Notification bell ============ */
.fe-bell { position: relative; }
.fe-bell__badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 var(--space-1); border-radius: var(--radius-pill); background: var(--status-danger); color: var(--white); font: 600 10px/16px var(--font-mono); text-align: center; box-shadow: 0 0 0 2px var(--surface-base); }
.fe-notif { position: absolute; top: calc(100% + 10px); right: 0; width: 340px; max-height: 420px; overflow-y: auto; background: var(--glass-bg-strong); -webkit-backdrop-filter: blur(var(--glass-blur-strong)); backdrop-filter: blur(var(--glass-blur-strong)); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: var(--z-dropdown); animation: fe-pop 0.2s var(--ease-spring) both; }
.fe-notif__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) 14px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: inherit; }
.fe-notif__head b { font: var(--fw-semibold) var(--text-sm) var(--font-sans); color: var(--text-primary); }
.fe-notif__clear { border: 0; background: none; color: var(--accent); font: var(--fw-medium) var(--text-xs) var(--font-sans); cursor: pointer; }
.fe-notif__row { display: flex; gap: var(--space-2-5); padding: 11px 14px; border-bottom: 1px solid var(--border-subtle); }
.fe-notif__row.unread { background: var(--accent-quiet); }
.fe-notif__row .ic { flex: none; margin-top: 1px; }
.fe-notif__row b { display: block; font: 500 12.5px/1.3 var(--font-sans); color: var(--text-primary); }
.fe-notif__row span { font: 400 11.5px/1.4 var(--font-sans); color: var(--text-muted); }
.fe-notif__row .t { margin-left: auto; flex: none; font: 400 10px var(--font-mono); color: var(--text-faint); }

/* ============ Live feed / value animations ============ */
.fe-feed-in { animation: fe-fade-up 0.34s var(--ease-out) both; }
@keyframes fe-fade-up { from { opacity: 0; transform: translateY(5px); } }
.fe-num-in { display: inline-block; animation: fe-num 0.4s var(--ease-out) both; }
@keyframes fe-num { from { opacity: 0.2; transform: translateY(-6px); } }
.fe-live { cursor: pointer; border: 1px solid rgba(34, 197, 94, 0.3); background: var(--green-a15); color: var(--green-300); transition: var(--transition-colors); }
.fe-live--off { background: var(--white-a06); border-color: var(--border); color: var(--text-faint); }
.fe-row-flash { animation: fe-rowflash 0.9s var(--ease-out); }
@keyframes fe-rowflash { 0% { background: var(--accent-quiet); } 100% { background: transparent; } }

/* ============ Standard table chrome (FETable) ============ */
.fe-tbar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.fe-pager { display: flex; align-items: center; gap: var(--space-2-5); padding: var(--space-2-5) 14px; border-top: 1px solid var(--border); font: 400 11.5px var(--font-mono); color: var(--text-muted); }

/* ============ Collapsed sidebar ============ */
.fe-app--slim { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }
.fe-app--slim .fe-side { padding: 14px var(--space-2-5); }
.fe-app--slim .fe-side__section { display: none; }
.fe-app--slim .fe-nav-item__label, .fe-app--slim .fe-nav-item__trail { display: none; }
.fe-app--slim .fe-nav-item { justify-content: center; padding: 0; }
.fe-app--slim .fe-side__foot .who, .fe-app--slim .fe-side__foot .fe-iconbtn { display: none; }
.fe-app--slim .fe-side__foot { justify-content: center; }

/* ============ Sidebar user menu ============ */
.fe-side { position: relative; }
.fe-side__foot-btn { display: flex; align-items: center; gap: var(--space-2-5); width: 100%; border: 0; background: none; padding: 0; cursor: pointer; border-radius: 10px; text-align: left; }
.fe-side__foot-btn:hover .who b { color: var(--accent); }
.fe-usermenu { position: absolute; left: 12px; right: 12px; bottom: 72px; background: var(--glass-bg-strong); -webkit-backdrop-filter: blur(var(--glass-blur-strong)); backdrop-filter: blur(var(--glass-blur-strong)); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-1-5); z-index: var(--z-dropdown); animation: fe-pop 0.18s var(--ease-spring) both; }
.fe-usermenu .item { display: flex; align-items: center; gap: var(--space-2-5); width: 100%; padding: 9px 11px; border: 0; background: none; color: var(--text-secondary); font: var(--fw-medium) var(--text-sm) var(--font-sans); cursor: pointer; border-radius: var(--radius-md); text-align: left; }
.fe-usermenu .item:hover { background: var(--white-a06); color: var(--text-primary); }
.fe-usermenu .item.danger { color: var(--red-300); }
.fe-usermenu .item.danger:hover { background: var(--red-a15); }
@media (prefers-reduced-motion: reduce) {
  .fe-toasts .fe-toast, .fe-feed-in, .fe-num-in, .fe-ticker__row, .fe-login__pulse path { animation: none; }
}

/* ============ Responsividade minima ============ */
@media (max-width: 1100px) {
  .fe-grid-4, .fe-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fe-topbar { gap: var(--space-2-5); padding: 0 14px; }
  .fe-topbar__title p { display: none; }
  .fe-search { max-width: 170px; }
}
@media (max-width: 880px) {
  .fe-grid-4, .fe-grid-3, .fe-grid-2 { grid-template-columns: 1fr; }
  .fe-search { display: none; }
  .fe-login { grid-template-columns: 1fr; }
  .fe-login__visual { display: none; }
}