/* ===========================================================================
   The FELICET Command shell, in the tracker.
   ---------------------------------------------------------------------------
   Rules lifted from felicet-super-admin-panel: structure from global.css
   (.app/.sidebar/.main/.topbar/.content) and appearance from theme.css, merged
   here into their final values so this is one coherent file rather than a
   base and three overrides.

   Class names carry a cmd- prefix. Command calls these .sidebar, .content and
   .main; all three already exist in Alpino with different meanings (Alpino's
   .content carries a margin-left for its own fixed sidebar, and its .sidebar
   is position:fixed at 260px). Reusing the bare names would mean fighting
   main.css on every rule. The prefix costs nothing and the pixels are the same.

   apple.css still styles everything INSIDE the content area - the cards,
   tables, buttons and inputs the pages are built from. This file is only the
   frame around them.
   =========================================================================== */

/* The shell replaces Alpino's fixed-position layout with a flex one, so the
   leftovers must not reserve space for a sidebar that is no longer there. */
section.content, .content.cmd-reset { margin: 0 !important; padding: 0 !important; }

.cmd-app {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--canvas);
  font-size: 13.5px;
}

/* ------------------------------------------------------------- sidebar --- */

.cmd-sidebar {
  width: 248px;
  flex-shrink: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(246, 246, 248, .78);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border-right: 1px solid var(--separator);
}

.cmd-sb-brand { padding: 20px 18px 14px; border-bottom: 0; }
.cmd-brand-row { display: flex; align-items: center; gap: 10px; }

.cmd-sb-logo {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #10b981, var(--accent));
  color: #fff; font-size: 16px; font-weight: 700;
  box-shadow: 0 2px 6px rgba(4, 120, 87, .35), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.cmd-sb-name { color: var(--label); font-size: 15px; font-weight: 700; letter-spacing: -.2px; line-height: 1.1; }
.cmd-sb-tag { color: var(--label-3); font-size: 11px; font-weight: 500; }

.cmd-sb-scroll { flex: 1; overflow-y: auto; padding: 4px 10px 12px; scrollbar-width: none; }
.cmd-sb-scroll::-webkit-scrollbar { width: 0; }

.cmd-sb-section {
  color: var(--label-3);
  font-size: 11px; font-weight: 600; letter-spacing: 0;
  text-transform: none;
  padding: 16px 10px 5px;
}

.cmd-sb-item {
  display: flex; align-items: center; gap: 10px;
  color: var(--label);
  border-radius: 8px;
  padding: 6px 10px;
  margin: 1px 0;
  font-size: 13.5px; font-weight: 500;
  border: 0;
  text-decoration: none;
  transition: background .12s;
}
.cmd-sb-item:hover { background: var(--fill-2); color: var(--label); text-decoration: none; }
.cmd-sb-item.active { background: var(--accent-tint); color: var(--accent); font-weight: 600; }

.cmd-sb-icon { color: var(--label-2); display: inline-flex; width: 18px; justify-content: center; font-size: 16px; }
.cmd-sb-item.active .cmd-sb-icon { color: var(--accent); }
.cmd-sb-label { flex: 1; }

/* The unread count Alpino carried on Chat, kept. */
.cmd-sb-badge {
  background: var(--red); color: #fff;
  border-radius: 999px; font-size: 10.5px; font-weight: 700;
  padding: 1px 6px; min-width: 18px; text-align: center;
}

.cmd-sb-footer { border-top: 1px solid var(--separator); padding: 10px; }
.cmd-sb-user {
  display: flex; align-items: center; gap: 9px;
  width: 100%; background: transparent; border: 0;
  border-radius: 10px; padding: 6px 8px; text-align: left;
  transition: background .12s;
}
.cmd-sb-user:hover { background: var(--fill-2); }
.cmd-sb-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #10b981, var(--accent));
  color: #fff; font-weight: 600; font-size: 13px;
}
.cmd-sb-user-meta { display: flex; flex-direction: column; min-width: 0; }
.cmd-sb-uname { color: var(--label); font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-sb-urole { color: var(--label-3); font-size: 11px; display: flex; align-items: center; gap: 5px; }
.cmd-sb-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--green); display: inline-block; }

/* ---------------------------------------------------------------- main --- */

.cmd-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

.cmd-topbar {
  height: 52px; flex-shrink: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--separator);
  /* backdrop-filter makes this a stacking context of its own, and with z-index
     auto it would paint in DOM order - which puts .cmd-content's cards OVER
     anything the topbar drops down, however high that child's z-index is. The
     account menu was being sliced in half by the first card on the page. */
  position: relative;
  z-index: 20;
}

.cmd-tb-toggle {
  background: transparent; border: 0; color: var(--label-2);
  width: 30px; height: 30px; border-radius: 8px; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.cmd-tb-toggle:hover { background: var(--fill-2); color: var(--label); }

/* No flex:1 any more. The title used to absorb all the free space; the
   search bar wants it now, and a title that pushes the controls to the far
   edge looks like two separate bars. */
.cmd-topbar-title { color: var(--label); font-weight: 600; font-size: 15px; letter-spacing: -.2px; flex-shrink: 0; }

.cmd-tb-search {
  background: var(--fill); border: 0; border-radius: var(--radius-sm);
  color: var(--label); height: 32px; padding: 0 12px; min-width: 220px; font-size: 13px;
}
.cmd-tb-search::placeholder { color: var(--label-3); }
.cmd-tb-search:focus { background: #fff; box-shadow: 0 0 0 3px var(--accent-ring); outline: none; }

.cmd-tb-icon {
  background: transparent; border: 0; color: var(--label-2);
  width: 32px; height: 32px; border-radius: 8px; font-size: 18px; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.cmd-tb-icon:hover { background: var(--fill-2); color: var(--label); }
.cmd-tb-dot {
  position: absolute; top: 5px; right: 5px;
  width: 7px; height: 7px; border-radius: 999px; background: var(--red);
}

/* The mail count. A number rather than the bell's bare dot, because "7 unread"
   is worth knowing before you decide whether to look, and unlike a
   notification it does not go away by being seen. */
.cmd-tb-count {
  position: absolute; top: 1px; right: -2px;
  background: var(--accent); color: #fff;
  border-radius: 999px; font-size: 9.5px; font-weight: 700; line-height: 1.5;
  padding: 0 4px; min-width: 15px; text-align: center;
  box-shadow: 0 0 0 2px var(--surface);
}

.cmd-top-avatar {
  width: 30px; height: 30px; border-radius: 50%; border: 0;
  background: linear-gradient(160deg, #10b981, var(--accent));
  color: #fff; font-weight: 600; font-size: 13px;
}

/* ------------------------------------------------------------- content --- */

.cmd-content {
  flex: 1;
  overflow-y: auto;
  /* 17px + .container-fluid's own 15px = Command's 32px. See Shell.jsx. */
  padding: 28px 17px 40px;
  background: var(--canvas);
}
.cmd-content::-webkit-scrollbar { width: 10px; }
.cmd-content::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .15); border-radius: 5px; border: 3px solid var(--canvas); background-clip: content-box; }

/* Collapsed rail, the same gesture Command's topbar toggle performs. */
.cmd-app.is-collapsed .cmd-sidebar { width: 62px; }
.cmd-app.is-collapsed .cmd-sb-label,
.cmd-app.is-collapsed .cmd-sb-name,
.cmd-app.is-collapsed .cmd-sb-tag,
.cmd-app.is-collapsed .cmd-sb-section,
.cmd-app.is-collapsed .cmd-sb-user-meta { display: none; }
.cmd-app.is-collapsed .cmd-sb-item { justify-content: center; padding: 8px; position: relative; }
/* A count has nowhere to sit on a 62px rail without shoving the icon off
   centre, so it becomes a dot. The number is still there once it is expanded. */
.cmd-app.is-collapsed .cmd-sb-badge {
  position: absolute; top: 4px; right: 8px;
  min-width: 0; width: 7px; height: 7px; padding: 0;
  font-size: 0; overflow: hidden;
}
.cmd-app.is-collapsed .cmd-sb-brand { padding: 18px 10px 12px; display: flex; justify-content: center; }

/* On a phone the rail slides over the content rather than squeezing it. */
@media (max-width: 900px) {
  .cmd-sidebar {
    position: fixed; z-index: 1200; top: 0; bottom: 0; left: 0;
    transform: translateX(-100%); transition: transform .22s ease;
  }
  .cmd-app.is-open .cmd-sidebar { transform: translateX(0); }
  .cmd-content { padding: 18px 1px 32px; }
}

/* --------------------------------------------------------- account menu --- */
/* Command draws this one inline in its Topbar, so there is nothing to copy;
   these are the same tokens assembled into the same shape. */

.cmd-acct { position: relative; display: flex; align-items: center; }

.cmd-acct-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 1300;
  min-width: 232px; padding: 6px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .14);
}

.cmd-acct-head { padding: 9px 10px 11px; border-bottom: 1px solid var(--separator); margin-bottom: 5px; }
.cmd-acct-name { color: var(--label); font-weight: 600; font-size: 13.5px; }
.cmd-acct-sub { color: var(--label-2); font-size: 11.5px; word-break: break-all; }
.cmd-acct-role { color: var(--accent); font-size: 11px; font-weight: 600; margin-top: 3px; }

.cmd-acct-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: transparent; border: 0; text-align: left;
  color: var(--label); font-size: 13px; font-weight: 500;
  padding: 8px 10px; border-radius: 8px;
}
.cmd-acct-item i { color: var(--label-2); font-size: 15px; width: 16px; }
.cmd-acct-item:hover { background: var(--fill-2); }
.cmd-acct-item.is-danger { color: var(--red); }
.cmd-acct-item.is-danger i { color: var(--red); }
.cmd-acct-item.is-danger:hover { background: rgba(255, 59, 48, .08); }

/* The notification panel keeps Alpino's fixed positioning, but it has to clear
   the new 52px topbar instead of sitting under the old icon rail. */
.right_menu { z-index: 1250; }

/* ------------------------------------------------- notification panel --- */
/* Alpino anchored this panel at left:50px, flush against the icon rail that
   used to open it. The bell is in the topbar now, so it comes in from the right
   instead, under the topbar rather than over it. */

.right_menu .notif-menu {
  left: auto;
  right: -900px;
  top: 52px;
  margin: 10px;
  height: calc(100vh - 72px);
  width: 320px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .16);
  overflow: hidden;
}
.right_menu .notif-menu.open { left: auto; right: 0; }

@media (max-width: 900px) {
  .right_menu .notif-menu { width: auto; left: auto; right: -900px; }
  .right_menu .notif-menu.open { right: 0; left: 10px; }
}

/* ------------------------------------------------- idle auto-logout --- */
/* The countdown chip, copied from Command's global.css. It shows how long an
   IDLE session has left; any activity resets it, so on a machine somebody is
   actually using it simply sits near the top of the hour. */

.tb-idle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0;
  font-weight: 700; font-size: 12px;
  /* Tabular figures, or the chip jitters as the digits change. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tb-idle-ic { font-size: 13px; animation: tb-idle-pulse 1.6s ease-in-out infinite; transform-origin: center; }

.tb-idle-warn { background: #FEF2F2; color: #DC2626; border-color: #FECACA; }
.tb-idle-warn .tb-idle-ic { animation: tb-idle-blink 1s step-start infinite; }

@keyframes tb-idle-pulse { 50% { transform: scale(1.14); opacity: .75; } }
@keyframes tb-idle-blink { 50% { opacity: 0; } }

/* The minutes still read fine without the clock moving. */
@media (prefers-reduced-motion: reduce) {
  .tb-idle-ic, .tb-idle-warn .tb-idle-ic { animation: none; }
}

/* On a phone the digits are the point; the chrome around them is not. */
@media (max-width: 900px) {
  .tb-idle { padding: 3px 7px; gap: 4px; font-size: 11px; }
}

/* ------------------------------------------------- topbar: search --- */

.gs { position: relative; display: flex; align-items: center; flex: 1; max-width: 330px; }
.gs-ic { position: absolute; left: 10px; color: var(--label-3); font-size: 15px; pointer-events: none; }
.gs-in {
  width: 100%; background: var(--fill); border: 0; border-radius: 8px;
  height: 32px; padding: 0 28px 0 30px; font-size: 13px; color: var(--label);
}
.gs-in::placeholder { color: var(--label-3); }
.gs-in:focus { background: #fff; outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.gs-x {
  position: absolute; right: 5px; border: 0; background: transparent; color: var(--label-3);
  width: 22px; height: 22px; border-radius: 6px; font-size: 14px;
}
.gs-x:hover { background: var(--fill-2); color: var(--label); }

.gs-drop {
  position: absolute; top: calc(100% + 7px); left: 0; right: 0; z-index: 1400;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); box-shadow: 0 10px 34px rgba(0, 0, 0, .15);
  padding: 6px; max-height: 60vh; overflow-y: auto;
}
.gs-empty { color: var(--label-3); font-size: 12.5px; padding: 14px; text-align: center; }
.gs-group {
  color: var(--label-3); font-size: 10.5px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; padding: 9px 9px 4px;
}
.gs-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 0; background: transparent; border-radius: 8px; padding: 7px 9px;
}
.gs-row.on { background: var(--accent-tint); }
.gs-row-ic { color: var(--label-2); font-size: 15px; width: 17px; text-align: center; }
.gs-row.on .gs-row-ic { color: var(--accent); }
.gs-row-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.gs-row-main b { color: var(--label); font-size: 13.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-row-main em { color: var(--label-3); font-size: 11.5px; font-style: normal; }
.gs-enter { color: var(--accent); font-size: 14px; }

/* ------------------------------------------------- topbar: + New --- */

.an { position: relative; flex-shrink: 0; }
.an-btn {
  display: inline-flex; align-items: center; gap: 5px; border: 0;
  background: var(--accent); color: #fff;
  border-radius: 8px; height: 32px; padding: 0 12px;
  font-size: 12.5px; font-weight: 600;
}
.an-btn:hover, .an-btn.on { background: var(--accent-hover); }
.an-btn i { font-size: 15px; }

.an-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 1400;
  min-width: 230px; max-height: 70vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); box-shadow: 0 10px 34px rgba(0, 0, 0, .15); padding: 6px;
}
.an-group + .an-group { border-top: 1px solid var(--separator); margin-top: 5px; padding-top: 5px; }
.an-title {
  color: var(--label-3); font-size: 10.5px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; padding: 7px 9px 4px;
}
.an-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  border: 0; background: transparent; border-radius: 8px; padding: 7px 9px;
  color: var(--label); font-size: 13.5px; font-weight: 500;
}
.an-item:hover { background: var(--fill-2); }
.an-ic i { color: var(--label-2); font-size: 15px; width: 17px; text-align: center; }
.an-item:hover .an-ic i { color: var(--accent); }

/* The two of them give the topbar more to hold than a phone has room for.
   The page name is the first thing to go; the search is the next. */
@media (max-width: 1100px) { .gs { max-width: 190px; } .cmd-topbar-title { display: none; } }
@media (max-width: 760px) { .gs { display: none; } .an-btn span { display: none; } .an-btn { padding: 0 9px; } }