/* Shared surface tokens + print rules for the four role apps.
   Loaded after the role stylesheet so its tokens win.

   The role stylesheets read their surfaces, lines and shadows from here
   instead of naming colours outright, which keeps the four in step. */

:root{
  /* surfaces */
  --surface:#ffffff;        /* cards, modals, table backgrounds */
  --surface-2:#F7F6F3;      /* the page itself */
  --surface-3:#FAFAF8;      /* inputs, wells, hovered rows */
  --surface-side:#FDEFE4;   /* sidebar */
  --line:#ECEAE6;           /* borders */
  --line-soft:#F5F3EF;      /* hairlines between rows */
  --shadow-card:0 2px 10px rgba(31,36,48,0.05);
  --shadow-pop:0 12px 32px rgba(31,36,48,0.18);
  --topbar:linear-gradient(90deg,#FDE7C0,#FBCF8F);
  --topbar-text:#1F2430;
}

.print-only{display:none;}   /* the masthead and footnote live in the markup, hidden on screen */

@media print{
  /* Zero page margins, then the same margins put back as padding on the
     content. Browsers print their own header and footer - the date and the tab
     title - in the page margin, so with no margin there is nowhere for them to
     go and they stop appearing. */
  @page{ size:A4; margin:0; }

  /* Anything that exists only to be clicked. */
  .screen-only{display:none !important;}

  /* Paper is white and plain, whatever the screen styling was. */
  :root{
    --surface:#fff; --surface-2:#fff; --surface-3:#fff;
    --line:#C9CDD4; --line-soft:#E3E6EA;
    --ink:#000; --ink-soft:#333;
    --shadow-card:none; --shadow-pop:none;
  }
  html, body{background:#fff !important; color:#000 !important;}

  /* Keep chart colours and status chips: without this browsers drop
     backgrounds and a severity badge prints as an empty outline. */
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }

  /* The console furniture */
  .sidebar, .topbar, .filters-bar, .pagination,
  #ubToastHost, #ubProgress, #ubPageLoader, #ubOverlay,
  .sos-wrap, .btn, button, .modal-overlay, .leaflet-control-container,
  .page-subtitle{ display:none !important; }

  .admin-shell{display:block !important;}
  .main{display:block !important;}
  .content{padding:14mm 12mm 16mm !important;}   /* the page margins, now that @page has none */

  .print-only{display:block;}

  /* Masthead */
  .print-head{
    display:flex !important; align-items:center; gap:14px;
    border-bottom:2px solid #000; padding-bottom:10px; margin-bottom:14px;
  }
  .print-head img{width:52px; height:52px; object-fit:contain;}
  .print-head .office{font-size:15px; font-weight:700; line-height:1.3;}
  .print-head .sub{font-size:11px; color:#333;}
  .print-head .meta{margin-left:auto; text-align:right; font-size:10.5px; color:#333; line-height:1.5;}

  .page-title{font-size:18px !important; margin:0 0 10px !important;}

  /* Cards become plain blocks with a rule, not floating panels */
  .card{
    box-shadow:none !important; border:1px solid #C9CDD4; border-radius:6px !important;
    padding:12px 14px !important; margin-bottom:12px !important;
    break-inside:avoid; page-break-inside:avoid;
  }
  .card-head h3{font-size:12.5px !important; text-transform:uppercase; letter-spacing:.5px;}

  /* Figures read better in a row across the top of the page */
  .stat-tiles{display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:8px !important;}
  .stat-tile{
    border:1px solid #C9CDD4; border-radius:6px; padding:8px 10px !important;
    box-shadow:none !important; break-inside:avoid;
  }
  .stat-tile .icon-circle{display:none !important;}
  .stat-tile .num{font-size:17px !important;}
  .stat-tile .label{font-size:9.5px !important;}

  /* Charts: keep them, but never let one straddle a page break */
  canvas{ max-width:100% !important; height:auto !important; break-inside:avoid; page-break-inside:avoid; }
  .grid-2, .grid-3{display:block !important;}

  /* Tables: header repeats on every page, rows stay whole */
  .table-wrap{overflow:visible !important;}
  table{width:100% !important; border-collapse:collapse !important; font-size:10.5px !important;}
  thead{display:table-header-group;}          /* repeat on each printed page */
  tfoot{display:table-footer-group;}
  tr{break-inside:avoid; page-break-inside:avoid;}
  th{
    text-align:left; border-bottom:1.5px solid #000 !important; padding:5px 6px !important;
    font-size:9.5px !important; letter-spacing:.4px;
  }
  td{border-bottom:1px solid #E3E6EA !important; padding:5px 6px !important; white-space:normal !important;}
  .badge{border:1px solid #999; padding:1px 5px !important; font-size:9px !important;}

  /* Numbers line up when they share a width */
  .num, td, th{font-variant-numeric:tabular-nums;}

  .print-foot{
    display:block; margin-top:14px; padding-top:8px; border-top:1px solid #C9CDD4;
    font-size:9.5px; color:#333; line-height:1.6;
  }
  a[href]:after{content:"";}   /* no URL spam after links */
}