/* AccessPortal, design palette.
 * The colours of the installation (the MyTecnam proposal: navy, blue, the tricolour stripe).
 * Mood: business utility, dense, formal. Usable at 390 and 820 px (C12).
 */

/* Tutto cio' che e' cliccabile deve sembrarlo. Bootstrap 5 ha tolto il cursor
 * di default su <button>, quindi va rimesso qui. Specificita' volutamente bassa
 * (elemento, non classe) cosi' le regole piu' avanti nel file (drag handle...)
 * continuano a vincere sul proprio cursore. */
button, [role="button"], summary, .btn { cursor: pointer; }
button:disabled, .btn:disabled, .btn.disabled { cursor: not-allowed; }

:root {
  --cp-primary:      #003d79;   /* navy */
  --cp-primary-dark: #062a52;
  --cp-blue:         #1d6fb8;
  --cp-accent:       #1d6fb8;
  --cp-bg:           #f1f4f8;
  --cp-card-bg:      #ffffff;
  --cp-text:         #0e1a26;
  --cp-muted:        #6a8199;
  --cp-line:         #dde4ec;
  --cp-success:      #00963f;
  --cp-danger:       #a32424;
  --cp-tri-green:    #00963f;
  --cp-tri-red:      #e3000f;
}

body { background: var(--cp-bg); color: var(--cp-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

.btn-primary { background-color: var(--cp-primary); border-color: var(--cp-primary); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--cp-primary-dark); border-color: var(--cp-primary-dark); }
.btn-outline-primary { color: var(--cp-primary); border-color: var(--cp-primary); }
.btn-outline-primary:hover { background-color: var(--cp-primary); border-color: var(--cp-primary); }
a { color: var(--cp-primary); }
a:hover { color: var(--cp-primary-dark); }

.navbar.bg-dark { background-color: var(--cp-primary) !important; border-bottom: 0; box-shadow: 0 2px 6px rgba(6,42,82,0.25); position: relative; }
.navbar.bg-dark::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--cp-tri-green) 0 33.3%, #ffffff 33.3% 66.6%, var(--cp-tri-red) 66.6% 100%); }
.navbar.bg-dark .navbar-brand,
.navbar.bg-dark .nav-link,
.navbar.bg-dark .cp-bell .nav-link { color: #ffffff !important; }
.navbar.bg-dark .nav-link:hover { color: #cfe3f6 !important; }
.navbar-brand { display: flex; align-items: center; gap: .75rem; }
.navbar-brand-name { font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; color: #fff; border-left: 1px solid rgba(255,255,255,.35); padding-left: .75rem; }
@media (max-width: 991.98px) {
  .offcanvas .nav-link, .offcanvas .offcanvas-title { color: var(--cp-text) !important; }
  .offcanvas .nav-link:hover { color: var(--cp-primary) !important; }
}
.navbar.bg-dark .dropdown-menu { border-color: rgba(0,0,0,0.08); }
.navbar.bg-dark { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.navbar-brand { padding-top: 0; padding-bottom: 0; }
.navbar-brand-logo { height: 18px; width: auto; vertical-align: middle; display: block; }
@media (max-width: 575.98px) { .navbar-brand-logo { height: 14px; } .navbar-brand-name { font-size: .92rem; padding-left: .5rem; } }

/* Hamburger toggler: a FontAwesome bars icon, white on the navy bar, 44 px target. */
.navbar.bg-dark .navbar-toggler.cp-burger {
  border-color: rgba(255,255,255,0.35);
  min-width: 44px; min-height: 44px;
  line-height: 1; color: #fff; font-size: 1.35rem;
}
.navbar.bg-dark .navbar-toggler.cp-burger:focus { box-shadow: 0 0 0 0.2rem rgba(255,255,255,0.25); }

/* Offcanvas drawer: smaller width on phones, header styled with brand color. */
.offcanvas { max-width: 86vw; width: 320px; }
.offcanvas-header { border-bottom: 1px solid #e5e7eb; }
.offcanvas-header .offcanvas-title { color: var(--cp-primary); font-weight: 600; }
@media (max-width: 991.98px) {
  /* Inside the drawer dropdowns are clunky as popovers — render inline instead. */
  .offcanvas-body .dropdown-menu { position: static; float: none; border: 0; box-shadow: none; padding-left: 1rem; }
  .offcanvas-body .dropdown-toggle::after { float: right; margin-top: 0.6rem; }
}
.cp-login-logo { max-width: 260px; width: 100%; height: auto; }

/* Login wizard */
.cp-login-wrap {
  max-width: 440px;
  margin: 6vh auto 2rem auto;
}
/* legacy login logo (overridden below) */
.cp-login-card {
  background: var(--cp-card-bg);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  padding: 2rem;
}
.cp-login-card h1 {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
  color: var(--cp-primary);
}
.cp-login-card .subtitle {
  color: var(--cp-muted);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}
.cp-login-step { display: none; }
.cp-login-step.active { display: block; }

/* TOTP enroll: QR area */
.cp-qr-wrap {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  text-align: center;
}
.cp-qr-wrap canvas, .cp-qr-wrap img, .cp-qr-wrap svg {
  width: 240px; max-width: 100%; height: auto;
}
.cp-secret-fallback {
  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9rem;
  word-break: break-all;
  background: #fff;
  border: 1px dashed #adb5bd;
  border-radius: 4px;
  padding: 0.5rem;
  margin-top: 0.5rem;
}

/* TOTP code input — large monospaced numeric */
.cp-otp-input {
  font-family: SFMono-Regular, Consolas, monospace;
  font-size: 1.6rem;
  letter-spacing: 0.4rem;
  text-align: center;
  padding: 0.6rem;
}

/* App tile grid (index.jsp) */
.cp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }
.cp-tile {
  background: var(--cp-card-bg);
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 1.25rem;
  text-decoration: none;
  color: var(--cp-text);
  display: flex; flex-direction: column;
  transition: box-shadow 0.15s, transform 0.15s;
  position: relative;
}
.cp-tile:hover { box-shadow: 0 4px 18px rgba(0,0,0,0.08); transform: translateY(-2px); color: var(--cp-text); }
.cp-tile-icon { font-size: 2.4rem; color: var(--cp-primary); margin-bottom: 0.75rem; }
.cp-tile-title { font-weight: 600; font-size: 1.1rem; margin: 0 0 0.4rem 0; }
.cp-tile-desc { color: var(--cp-muted); font-size: 0.9rem; flex-grow: 1; line-height: 1.35; }
.cp-tile-version {
  margin-top: 0.6rem; font-size: 0.72rem; color: var(--cp-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.cp-tile-version-na { opacity: 0.6; font-style: italic; }
.cp-tile-category {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--cp-accent); font-weight: 700; margin-bottom: 0.5rem;
}
.cp-tile-sso-badge {
  position: absolute; top: 0.6rem; right: 0.6rem;
  background: var(--cp-success); color: #fff;
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.05em; padding: 0.1rem 0.45rem; border-radius: 9999px;
}

/* Heartbeat traffic light on the app tiles (index.jsp + /api/health/apps).
   Three states only, and grey genuinely means "non lo so" — never a soft red.
   A wall of red that only means "the monitor is blind" is how a monitoring
   system loses its audience for good. */
.cp-tile-health {
  display: flex; align-items: center; gap: 0.4rem;
  margin-top: 0.5rem; font-size: 0.72rem; color: var(--cp-muted);
  min-height: 1.05rem;
}
.cp-health-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: #cbd5e1;
}
.cp-health-dot.green { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.15); }
.cp-health-dot.red   { background: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.18);
                       animation: cp-health-pulse 1.8s ease-in-out infinite; }
.cp-health-dot.grey  { background: #cbd5e1; }
.cp-health-label     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-health-label.red { color: #b91c1c; font-weight: 600; }
/* Scannability across a grid of ~25 cards: the broken ones must stand out without
   reading a single word. */
.cp-tile.cp-tile-red { border-color: #fecaca; }
@keyframes cp-health-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .cp-health-dot.red { animation: none; } }

/* "Non collegato" tile (P1, beta 2026-10-04): an ADMIN/SUPERADMIN sees every active app, but one
   he has no ap_AppLinks row in would 403 on click, so it must never look like a normal, working
   tile. Dashed border + muted icon read as "not yours yet" at a glance; the whole card still
   satisfies the 44px target (C12) and leads straight to the user administration to create the
   link, so the tile itself is the fix, not a dead end. */
.cp-tile-unlinked { opacity: 0.85; border-style: dashed; border-color: #cbd5e1; background: #f8fafc; }
.cp-tile-unlinked .cp-tile-icon { color: #94a3b8; }
.cp-tile-unlinked-badge {
  position: absolute; top: 0.6rem; right: 0.6rem;
  background: #94a3b8; color: #fff;
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.05em; padding: 0.1rem 0.45rem; border-radius: 9999px;
}
.cp-tile-unlinked-action { margin-top: 0.6rem; }
.cp-tile-unlinked-action .btn {
  width: 100%; min-height: 44px;
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  pointer-events: none;   /* the whole card is already the link target */
}

/* Drag handle for admin/supervisor reorder. Only rendered for those roles by index.jsp. */
.cp-drag-handle {
  position: absolute; top: 0.55rem; left: 0.55rem;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #6b7280; background: #f3f4f6;
  border-radius: 4px; cursor: grab;
  opacity: 0.55; transition: opacity 0.15s, background 0.15s, color 0.15s;
  font-size: 0.85rem;
}
.cp-tile:hover .cp-drag-handle { opacity: 1; }
.cp-drag-handle:hover { background: var(--cp-primary); color: #fff; }
.cp-drag-handle:active { cursor: grabbing; }
/* SortableJS visual states */
.cp-tile-ghost   { opacity: 0.3; background: #e7f1fa; border: 2px dashed var(--cp-primary); }
.cp-tile-chosen  { box-shadow: 0 6px 24px rgba(0,61,121,0.18); transform: scale(1.02); }

/* Drag handle in admin tables (apps.jsp). Leftmost column with grip icon. */
.cp-drag-col { width: 32px; padding-left: 0.5rem !important; padding-right: 0 !important; }
.cp-row-drag-handle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: #9ca3af; cursor: grab;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.cp-row-drag-handle:hover { color: #fff; background: var(--cp-primary); }
.cp-row-drag-handle:active { cursor: grabbing; }

/* Group label between category blocks */
.cp-cat-header { color: var(--cp-muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 2rem 0 0.75rem 0; }
.cp-cat-header:first-child { margin-top: 0; }

/* Toast container */
.cp-toast-wrap { position: fixed; top: 1rem; right: 1rem; z-index: 1080; }

/* Admin tables */
.cp-admin-table th { background: #f8f9fa; font-weight: 600; font-size: 0.85rem; }
.cp-admin-table td { vertical-align: middle; font-size: 0.92rem; }
.cp-admin-actions { white-space: nowrap; }
.cp-pill {
  display: inline-block; padding: 0.15rem 0.55rem; border-radius: 9999px;
  font-size: 0.72rem; font-weight: 600; background: #e5e7eb; color: #374151;
}
.cp-pill.success { background: #d1fae5; color: #065f46; }
.cp-pill.danger  { background: #fee2e2; color: #991b1b; }
.cp-pill.warn    { background: #fef3c7; color: #92400e; }

/* Organigramma (admin/organigramma.jsp): department tree and person picker */
.cp-org-tree { max-height: 68vh; overflow: auto; }
.cp-org-list { list-style: none; margin: 0; padding-left: 0; }
.cp-org-children { padding-left: 0.65rem; margin-left: 0.55rem; border-left: 1px solid #e5e7eb; }
.cp-org-node {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.22rem 0.4rem; border-radius: 6px;
  cursor: pointer;
}
.cp-org-node:hover { background: #f3f4f6; }
.cp-org-node.selected { background: #e4eef8; }
.cp-org-node.inactive .cp-org-name { color: var(--cp-muted); }
.cp-org-name { font-weight: 600; font-size: 0.92rem; }
.cp-org-code { color: #6c757d; font-size: 0.8rem; }
.cp-org-handle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; color: #9ca3af; cursor: grab;
}
.cp-org-handle:active { cursor: grabbing; }
.cp-org-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; padding: 0; border: 0; background: none; color: #6b7280; line-height: 1;
  cursor: pointer;
}
.cp-org-spacer { display: inline-block; width: 18px; }
.cp-picker-results { max-height: 260px; overflow: auto; }
.cp-picker-result { cursor: pointer; }
/* Interruttore in tabella (responsabile del reparto): cliccabile, quindi col suo cursore (C1). */
.cp-switch .form-check-input,
.cp-switch .form-check-label { cursor: pointer; }
.cp-switch .form-check-input:disabled,
.cp-switch .form-check-input:disabled ~ .form-check-label { cursor: wait; }
.cp-switch .form-check-label { font-size: 0.85rem; }

/* Firma "Powered by DPStudio". Logo a inchiostro scuro (su sfondo chiaro) in entrambi i contesti.
   - pagine SENZA navbar (login, errori): footer nel flusso, centrato, "Powered by" sopra e logo sotto.
   - pagine CON navbar (portale autenticato): stessa firma fissata (sticky) in basso a destra,
     senza box — solo etichetta + logo. */
.cp-powered {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .35rem; padding: 1.6rem 0 2rem; margin-top: 2.5rem;
}
.cp-powered-label {
  text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; font-weight: 600;
  color: #9aa4b0;
}
.cp-powered a { display: inline-flex; align-items: center; line-height: 0; }
.cp-powered-logo { width: auto; display: block; height: 72px; }   /* login/errori */

/* Portale autenticato: firma sticky in basso a destra, senza box */
body:has(.navbar) .cp-powered {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 1030;
  margin: 0; padding: 0; gap: .15rem;
}
body:has(.navbar) .cp-powered-label { font-size: .58rem; letter-spacing: .14em; }
body:has(.navbar) .cp-powered-logo { height: 41px; }   /* +20% rispetto al badge precedente */

@media (max-width: 575.98px) {
  body:has(.navbar) .cp-powered { right: .6rem; bottom: .6rem; }
  body:has(.navbar) .cp-powered-logo { height: 34px; }
}

/* ---- COP-266: the bell of the notification center ---- */
.cp-bell .nav-link { color: inherit; cursor: pointer; }
.cp-bell-panel { width: 380px; max-width: 92vw; }
.cp-bell-list { max-height: 60vh; overflow-y: auto; }
.cp-bell-item { padding: .6rem 1rem; border-bottom: 1px solid #eee; }
.cp-bell-item.unread { background: #e7f1fa; }
.cp-bell-item .cp-bell-title { font-weight: 600; }
.cp-bell-item .cp-bell-meta { font-size: .78rem; color: #6c757d; }
.cp-bell-off { opacity: .45; }
@media (min-width: 992px) {
  .navbar .cp-bell { order: 3; margin-left: .25rem !important; margin-right: 0 !important; }
  .navbar .offcanvas-lg { order: 2; flex-grow: 1; }
}

/* Organigramma: righe che aprono qualcosa, caselle e schede (C1). */
.cp-row-link { cursor: pointer; }
.form-check-input, .form-check-label, .nav-tabs .nav-link { cursor: pointer; }
.cp-person-head .cp-pill { font-size: 0.8rem; }
.cp-history td { font-size: 0.85rem; }

/* ---- DPManager ticketing: "Come funziona" button + intro modal (COP-300 correction 2026-10-01) ---- */
.cp-support-howto { cursor: pointer; padding: .35rem .75rem; }
@media (pointer: coarse), (max-width: 820px) {
  .cp-support-howto { min-height: 44px; min-width: 44px; }
}
.cp-support-intro-list { padding-left: 1.1rem; }
.cp-support-intro-list li { margin-bottom: .5rem; }
.cp-support-intro-list li i { margin-right: .4rem; color: #0d6efd; }

/* Live copy of the two real profile-menu entries, cloned at open time. Clones are inert
   (pointer-events:none, tabindex=-1, inert) so they can never be mistaken for the real controls. */
.cp-support-intro-buttons {
  display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: flex-start;
  margin: .75rem 0 1.1rem; padding: .75rem .9rem;
  background: #f4f6f9; border: 1px solid #e2e6ec; border-radius: .5rem;
}
.cp-support-intro-button-item { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; max-width: 240px; }
.cp-support-intro-button-item .dropdown-item { display: inline-flex; width: auto; cursor: default; background: #fff; border: 1px solid #dee2e6; border-radius: .35rem; }
.cp-support-intro-button-caption { font-size: .82rem; color: #6c757d; }
.cp-job-checks { max-height: 220px; overflow: auto; border: 1px solid #dee2e6; border-radius: 6px; padding: 0.35rem 0.6rem; }

/* ---- Phone and tablet (C12): 44 px targets, tables as cards, full-screen modals ---- */
@media (max-width: 820px) {
  .btn, .form-control, .form-select, .dropdown-item, .nav-link, .page-link { min-height: 44px; }
  .btn-sm { min-height: 40px; }
  .form-check-input { width: 1.35em; height: 1.35em; }
  .container, .container-fluid { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 767.98px) {
  table.cp-admin-table, table.cp-cards { border: 0; }
  table.cp-admin-table thead, table.cp-cards thead { display: none; }
  table.cp-admin-table tr, table.cp-cards tr { display: block; background: #fff; border: 1px solid var(--cp-line); border-radius: 10px; margin-bottom: .75rem; padding: .35rem .25rem; }
  table.cp-admin-table td, table.cp-cards td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .4rem .65rem; text-align: right; word-break: break-word; }
  table.cp-admin-table td::before, table.cp-cards td::before { content: attr(data-label); font-weight: 600; color: var(--cp-muted); text-align: left; flex: 0 0 38%; }
  table.cp-admin-table td[data-label=""]::before, table.cp-cards td[data-label=""]::before { content: none; }
  table.cp-admin-table td.cp-admin-actions, table.cp-admin-table td:last-child { justify-content: flex-end; flex-wrap: wrap; }
  .table-responsive { overflow-x: visible; }
  .modal-dialog:not(.modal-sm) { margin: 0; max-width: none; min-height: 100%; }
  .modal-dialog:not(.modal-sm) .modal-content { min-height: 100vh; border-radius: 0; }
  .cp-tiles { grid-template-columns: 1fr; gap: .9rem; }
  h1, .h1 { font-size: 1.45rem; }
}

/* ---- Login pages: navy band at the top, the wordmark, the application name ---- */
body.cp-login-page { background: linear-gradient(180deg, var(--cp-primary) 0 210px, var(--cp-bg) 210px); }
body.cp-login-page .cp-login-wrap { padding: 0 16px; margin-top: 7vh; }
body.cp-login-page .text-center.mb-4 { background: #fff; border-radius: 12px 12px 0 0; padding: 1.4rem 1rem 1rem; margin-bottom: 0 !important; border-bottom: 1px solid var(--cp-line); }
body.cp-login-page .cp-login-card { border-radius: 0 0 12px 12px; }
.cp-login-appname { margin-top: .6rem; font-weight: 700; color: var(--cp-primary); letter-spacing: .04em; text-transform: uppercase; font-size: .85rem; }
.cp-login-card h1 { color: var(--cp-primary); }

/* Filters on a phone (C12): only the search stays visible, the rest opens from "Filtri". */
.cp-filters-toggle { display: none; }
@media (max-width: 767.98px) {
  [data-cp-filters]:not(.cp-filters-open) > :not(:first-child) { display: none !important; }
  .cp-filters-toggle { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .5rem; }
}
/* The "Powered by" signature: fixed bottom right on a wide screen, in the flow below 1200px,
   where a fixed badge would cover the buttons at the bottom of the page. */
@media (max-width: 1199.98px) {
  body:has(.navbar) .cp-powered { position: static; margin: 2rem 0 1rem; }
}
html { background: var(--cp-bg); }
table.cp-admin-table td.cp-admin-actions::before { content: none !important; }
@media (max-width: 767.98px) {
  table.cp-admin-table td.cp-admin-actions, table.cp-admin-table td.text-end:last-child {
    display: flex !important; flex-direction: row !important; flex-wrap: wrap; justify-content: flex-start !important;
    gap: .5rem; width: auto !important; white-space: normal; text-align: left;
  }
  table.cp-admin-table td.cp-admin-actions .btn, table.cp-admin-table td.text-end:last-child .btn { min-width: 44px; }
}