/*==============================================================================
  deskwidgets.css  --  NasaOS / eDesk desktop widgets
  2026-08-12.2  --  full interior redesign

  WHAT CHANGED IN THIS VERSION
  ----------------------------
  The card SURFACES were already agreed (glass; white veil in dark mode) and
  are unchanged. What is redesigned is everything INSIDE them.

  The previous version fought Ext one property at a time, so the widgets kept
  looking like Ext grids that happened to sit on a nice card. The desktop's
  visual language is set by the side menu - generous spacing, quiet hairlines,
  one clear type scale - and the widgets were not following it.

  Design rules applied here:
    1. ONE type scale. Micro-label for card titles and column headers,
       12.5px for content, tabular figures wherever numbers appear.
    2. NO grid. Column and row lines removed; a single hairline under the
       column headers survives. Separation comes from row height, not borders.
    3. Chrome is quiet until used. Toolbar icons sit at ~55% opacity and come
       to full strength on hover.
    4. Breathing room. 26px rows instead of ~18px, 12px card padding.

  SCOPING RULE - important
  ------------------------
  Every selector is scoped under .deskWidget. The same Ext classes are used by
  every form in the application, so an unscoped rule here would repaint the
  whole product. If you add a selector, keep the .deskWidget prefix.
==============================================================================*/

.deskWidget {
  /* Check the deployed version in the console with:
     getComputedStyle(document.querySelector('.deskWidget'))
       .getPropertyValue('--dw-version')                                   */
  --dw-version: '2026-08-13.4';

  /*--- shape + surface (unchanged - already signed off) ---*/
  --dw-radius:  14px;
  --dw-surface: rgba(255,255,255,0.82);
  --dw-border:  rgba(255,255,255,0.65);
  --dw-shadow:  0 10px 30px rgba(6,12,22,0.26);

  /*--- ink ---*/
  --dw-ink:     #16232F;
  --dw-muted:   #5A6B7E;
  --dw-faint:   rgba(22,35,47,0.45);
  --dw-rule:    rgba(22,35,47,0.10);
  --dw-accent:  #2F6FED;
  --dw-head:    #1D3350;
  --dw-inputbg: rgba(22,35,47,0.05);
  --dw-hover:   rgba(22,35,47,0.05);

  /*--- metrics ---------------------------------------------------------
     HARD CONSTRAINT, learned the hard way: these grids are laid out in
     PIXELS from the DFM. Column widths are fixed (Rates "Code" = 45px,
     Dockets "Docket#" = 65px) and panel heights are fixed (166px).

     So type size and row height are NOT free variables. 12.5px + tabular
     figures pushed "1005830" past 65px and Ext ellipsised it to "1...";
     26px rows pushed the 4th rate row past the panel and clipped it.

     11.5px matches what the DFM widths were measured against. If you want
     bigger text, the column Width and panel Height must grow in the DFM
     first - CSS cannot widen a fixed column.                           */
  --dw-pad:      10px;    /* card inner padding          */
  --dw-fs:       11.5px;  /* content type size - see above before raising */
  --dw-fs-micro:  9.5px;  /* card titles, column headers */

  border-radius: var(--dw-radius) !important;
  border: 1px solid var(--dw-border) !important;
  box-shadow: var(--dw-shadow);
  background: var(--dw-surface) !important;
  backdrop-filter: blur(24px) saturate(165%);
  -webkit-backdrop-filter: blur(24px) saturate(165%);

  color: var(--dw-ink);
  /* Tabular figures were tried and REVERTED: they are wider than
     proportional digits, which overflowed the fixed 45/65px columns.
     Re-enable only if those DFM widths grow.                             */

  overflow: hidden !important;   /* clips grid corners to the card radius */
}

/* UniGUI's inner body must not paint its own background over the card. */
.deskWidget > .x-panel-body,
.deskWidget .x-panel-body {
  background: transparent !important;
  border: 0 !important;
}

/*----------------------------------------------- Ext background reset ------
  Ext paints opaque white on a long tail of wrapper elements - view, header
  container, row table, cell, docked bar, empty-grid placeholder. Enumerating
  them by name is a losing game: miss one and white text lands on it.

  Blanket every descendant, then re-tint the few things that genuinely need a
  surface. Those rules live BELOW and carry higher specificity.

  Clears background-COLOR only: Ext draws combo arrows, checkboxes and sort
  indicators with background-IMAGE sprites, which must survive.
---------------------------------------------------------------------------*/

.deskWidget * { background-color: transparent !important; }

/* Ext also paints light GRADIENT SPRITES on buttons, toolbars, the date
   picker header and pager fields. Cleared here - but never on
   .x-btn-icon-el or the sort/checkbox sprites, which ARE the icon.        */
.deskWidget .x-btn,
.deskWidget .x-btn-wrap,
.deskWidget .x-btn-button,
.deskWidget .x-toolbar,
.deskWidget .x-toolbar-item,
.deskWidget .x-tbar-page-number,
.deskWidget .x-datepicker-header,
.deskWidget .x-datepicker-header .x-btn,
.deskWidget .x-form-text-wrap { background-image: none !important; }

/*=============================================================== card title */
/* The docked toolbar each widget uses as its title bar. Now a quiet micro
   label rather than a heavy header band: no fill, no border box, just a
   hairline and generous padding.                                          */

.deskWidget .x-panel-header,
.deskWidget .x-toolbar-docked-top {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dw-rule) !important;
  padding: 6px var(--dw-pad) 5px !important;
  min-height: 0 !important;
}

.deskWidget .x-panel-header .x-title-text,
.deskWidget .x-panel-header .x-title-text-default,
.deskWidget .x-toolbar-docked-top .x-btn-inner {
  color: var(--dw-head) !important;
  font: 700 var(--dw-fs-micro)/1.3 -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* The title-bar glyph is decorative - shrink it so it supports the label
   instead of competing with it.                                           */
.deskWidget .x-panel-header .x-title-icon,
.deskWidget .x-panel-header img {
  width: 13px !important;
  height: 13px !important;
  opacity: .75;
}

/*================================================================== buttons */
/* Toolbar actions ("Switch", refresh, search). Quiet until pointed at.    */

.deskWidget .x-btn-inner,
.deskWidget .x-datepicker-header .x-btn-inner {
  /* Some of these buttons are TEXT, not icons - the Flights prev/next carry
     Caption='<' and '>' in the DFM. They need ink colour; the sprite filter
     used for icon buttons does nothing for them.                          */
  color: var(--dw-ink) !important;
}

/*------------------------------------------- outranking a global !important
  uServerModule.dfm contains this, and the comma placement is almost
  certainly a typo:

    .sttsgmbtn .x-btn-default-large .x-btn-wrap .x-btn-inner,
    .x-btn-default-medium .x-btn-wrap .x-btn-inner,
    .x-btn-default-small  .x-btn-wrap .x-btn-inner { color:#371f6a!important }

  Only the FIRST selector is scoped to .sttsgmbtn - the other two are global,
  so every small/medium button in the product is forced to dark purple. At
  three classes it also outranks a plain ".deskWidget .x-btn-inner", which is
  why the Flights < and > stayed black however many times the ink token was
  corrected.

  Matched shape for shape (four classes) to win cleanly. Worth fixing the
  comma in the DFM as well - see chat.
---------------------------------------------------------------------------*/

.deskWidget .x-btn-default-small  .x-btn-wrap .x-btn-inner,
.deskWidget .x-btn-default-medium .x-btn-wrap .x-btn-inner,
.deskWidget .x-btn-default-large  .x-btn-wrap .x-btn-inner,
.deskWidget .x-btn-default-toolbar-small  .x-btn-wrap .x-btn-inner,
.deskWidget .x-btn-default-toolbar-medium .x-btn-wrap .x-btn-inner {
  color: var(--dw-ink) !important;
}

.deskWidget .x-btn,
.deskWidget .x-btn-wrap,
.deskWidget .x-btn-button,
.deskWidget .x-btn-inner,
.deskWidget .x-btn-icon-el,
.deskWidget .x-tool,
.deskWidget .x-img,
.deskWidget .x-form-trigger,
.deskWidget .x-toolbar-item,
.deskWidget .x-box-item {
  /* Ext's skin draws a 1px light border, and on some builds an inset
     box-shadow, on the button AND on its wrap/button/inner children. My
     earlier rule only hit .x-btn itself, so the frame survived on the
     nested elements - which is what still boxed btnPrevious, btnNext,
     btnFlyTo and btnCalcCurrency.

     Borders, outlines and shadows ONLY. background-image is deliberately
     absent: on .x-btn-icon-el and .x-form-trigger the image IS the icon,
     and clearing it would blank the glyphs.                              */
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.deskWidget .x-btn { border-radius: 6px !important; }
.deskWidget .x-btn-focus,
.deskWidget .x-btn-over,
.deskWidget .x-btn-pressed,
.deskWidget .x-btn-focus .x-btn-wrap,
.deskWidget .x-btn-over .x-btn-wrap {
  background-image: none !important;
  box-shadow: none !important;
}
.deskWidget .x-btn:hover { background-color: var(--dw-hover) !important; }

.deskWidget .x-toolbar .x-btn {
  opacity: .62;
  transition: opacity .12s ease, background-color .12s ease;
}
.deskWidget .x-toolbar .x-btn:hover {
  opacity: 1;
  background-color: var(--dw-hover) !important;
}
.deskWidget .x-toolbar .x-btn-inner {
  font: 600 11px/1.2 -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  letter-spacing: 0;
  text-transform: none;
}

/*=================================================================== grids */
/* The heart of the redesign: no column lines, no row lines, no zebra. Rows
   are separated by height and a very faint hairline, nothing more.        */

.deskWidget .x-grid-body,
.deskWidget .x-grid-item-container,
.deskWidget .x-grid-view {
  background: transparent !important;
  border: 0 !important;
}

/* Column headers: micro-label, single hairline underneath, no dividers.   */
.deskWidget .x-column-header {
  background: transparent !important;
  border-bottom: 1px solid var(--dw-rule) !important;
  border-right: 0 !important;
  border-left: 0 !important;
}
/* Uppercase but NO letter-spacing: tracking widens the label, and a header
   wider than its fixed column gets truncated ("DOCKET#" -> "I").        */
.deskWidget .x-column-header-text {
  color: var(--dw-faint) !important;
  font: 700 var(--dw-fs-micro)/1.2 -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  text-transform: uppercase;
}
.deskWidget .x-column-header-trigger { display: none !important; }

/* Cells: taller, no borders except one hairline between rows.             */
.deskWidget .x-grid-cell {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(128,128,128,0.10) !important;
  color: var(--dw-ink) !important;
  font-size: var(--dw-fs);
}
/* Deliberately NOT setting padding, line-height or min-height here. Ext
   sizes rows to fit the panel's fixed height; overriding them changed how
   many rows fit and clipped the last one.                               */
.deskWidget .x-grid-item:last-child .x-grid-cell { border-bottom: 0 !important; }

/* Zebra striping removed - at 290px wide it adds noise, not structure.    */
.deskWidget .x-grid-item-alt .x-grid-cell { background: transparent !important; }

.deskWidget .x-grid-item-over .x-grid-cell     { background: var(--dw-hover) !important; }
.deskWidget .x-grid-item-selected .x-grid-cell { background: var(--dw-accent-soft, rgba(47,111,237,0.14)) !important; }

/* Row-number column ("1 2 3"). Removing it properly means dropping
   dgRowNumbers in the DFM (see chat); until then it is made near-invisible.
   Add deskWidget--noRowNums to a panel to hide it outright.               */
.deskWidget .x-grid-cell-row-numberer .x-grid-cell-inner,
.deskWidget .x-grid-row-numberer {
  color: var(--dw-faint) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}
.deskWidget--noRowNums .x-grid-cell-row-numberer,
.deskWidget--noRowNums .x-grid-header-ct .x-column-header:first-child {
  display: none !important;
}

/* Grid hyperlinks keep their role but sit on the card politely.           */
.deskWidget .x-grid-cell a,
.deskWidget .x-grid-cell .x-grid-cell-inner a {
  color: var(--dw-accent) !important;
  text-decoration: none;
}
.deskWidget .x-grid-cell a:hover { text-decoration: underline; }

/* Empty grids (the Flights card before a search) should read as calm, not
   broken. Ext leaves a bare void otherwise.                               */
.deskWidget .x-grid-empty {
  background: transparent !important;
  color: var(--dw-faint) !important;
  font-size: 11.5px !important;
  font-style: normal !important;
  padding: 18px var(--dw-pad) !important;
  text-align: center;
}

/*=================================================================== pager */
/* Six navigation buttons for a three-row card was the heaviest piece of
   chrome on the desktop. Kept functional, made small and quiet.           */

.deskWidget .x-toolbar-docked-bottom,
.deskWidget .x-tbar-page-number {
  border: 0 !important;
  padding: 3px 6px !important;
  min-height: 0 !important;
}
.deskWidget .x-toolbar-docked-bottom .x-btn       { opacity: .5; }
.deskWidget .x-toolbar-docked-bottom .x-btn:hover { opacity: 1; }

.deskWidget .x-toolbar-text,
.deskWidget .x-toolbar .x-form-display-field {
  color: var(--dw-muted) !important;
  font-size: 10.5px !important;
}
.deskWidget .x-tbar-page-number {
  color: var(--dw-ink) !important;
  font-size: 11px !important;
  text-align: center;
}
/* Separators add vertical noise between already-small buttons.            */
.deskWidget .x-toolbar-separator { display: none !important; }

/*---------------------------------------------------- sprite re-inking ----
   Ext's icons are PNG SPRITES - the glyph, and sometimes an opaque white
   button face, are pixels in one image. No colour property reaches them.

   Two sprite kinds exist here:
     a) dark glyph on TRANSPARENT (pager arrows, tools)
     b) dark glyph on an opaque WHITE FACE (datepicker arrows, search,
        combo triggers) - these were the "white boxes" in dark mode.

   One treatment fixes both: invert(1) turns the glyph white and the face
   black; mix-blend-mode:screen then treats black as invisible. Face gone,
   glyph white. (The earlier brightness(0) invert(1) flattened white-faced
   sprites into solid white squares - that is what those boxes were.)

   Light mode gets the mirror trick: multiply treats WHITE as invisible,
   so the face disappears and the dark glyph stays - no inversion needed. */

.deskWidget .x-datepicker-arrow,
.deskWidget .x-datepicker-prev,
.deskWidget .x-datepicker-next,
.deskWidget .x-form-trigger,
.deskWidget .x-btn-icon-el,
.deskWidget .x-tool-img {
  mix-blend-mode: multiply;
}

.dark-theme .deskWidget .x-datepicker-arrow,
.dark-theme .deskWidget .x-datepicker-prev,
.dark-theme .deskWidget .x-datepicker-next,
.dark-theme .deskWidget .x-form-trigger,
.dark-theme .deskWidget .x-btn-icon-el,
.dark-theme .deskWidget .x-tool-img {
  filter: invert(1) !important;
  mix-blend-mode: screen;
  opacity: .92;
}

/* The checkbox filter from before stays separate: a checkbox NEEDS its
   white face (that is the box you tick), so blend-mode must not eat it.  */

/*=================================================================== forms */

/* TEXT inputs only. The previous blanket (.x-form-field, .x-form-item-body)
   also matched checkboxes, radios and combo trigger wrappers, which is what
   drew the empty rounded rectangles beside "Dep" and the stray circle next
   to "Rate Date". Checkboxes are Ext SPRITES - give them a surface and you
   paint over the tick.                                                   */
.deskWidget .x-form-text,
.deskWidget input.x-form-field[type="text"],
.deskWidget .x-form-trigger-wrap {
  background-color: var(--dw-inputbg) !important;
  background-image: none !important;
  border: 1px solid var(--dw-rule) !important;
  border-radius: 6px !important;
  color: var(--dw-ink) !important;
  font-size: 11px !important;
}

/* Explicitly hands-off: sprite-drawn controls keep Ext's own rendering. */
.deskWidget .x-form-checkbox,
.deskWidget .x-form-radio,
.deskWidget .x-form-cb,
.deskWidget .x-form-checkbox-default,
.deskWidget .x-form-radio-default {
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
/* NO dark-mode filter on checkboxes/radios: brightness(0) invert(1) turns
   the whole sprite - face included - into a solid white box (observed).
   A native light checkbox on dark UI is normal and readable; leave it.   */
.deskWidget .x-form-text::placeholder { color: var(--dw-faint) !important; }

.deskWidget .x-form-item-label,
.deskWidget .x-form-item-label-inner,
.deskWidget label,
.deskWidget .x-form-cb-label {
  color: var(--dw-muted) !important;
  font-size: 11px !important;
}

/* Ext dims disabled text with opacity, which on glass reads as invisible
   rather than muted.                                                      */
.deskWidget .x-item-disabled,
.deskWidget .x-item-disabled .x-form-text,
.deskWidget .x-form-text[disabled] {
  opacity: 1 !important;
  color: var(--dw-muted) !important;
}

/*================================================================ calendar */
/* Was a dense table of boxed cells. Now: quiet weekday initials, roomy date
   cells, a circular selected day.                                         */

.deskWidget .x-datepicker,
.deskWidget .x-datepicker-inner,
.deskWidget .x-datepicker-header {
  background: transparent !important;
  border: 0 !important;
}

.deskWidget .x-datepicker-header { padding: 4px 6px 6px !important; }

.deskWidget .x-datepicker-month .x-btn-inner,
.deskWidget .x-datepicker-header .x-btn-inner,
.deskWidget .x-monthpicker-item a {
  color: var(--dw-ink) !important;
  font: 700 12px/1.2 -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  letter-spacing: 0;
  text-transform: none;
}

.deskWidget .x-datepicker-month,
.deskWidget .x-datepicker-month .x-btn,
.deskWidget .x-monthpicker,
.deskWidget .x-monthpicker-months,
.deskWidget .x-monthpicker-years {
  background-color: transparent !important;
  background-image: none !important;
}

/* The month caption is an x-btn. Ext's skin gives it a border and a field
   look, which read as a disabled input sitting in the header. Strip the
   chrome and let it be a plain, legible label.                          */
.deskWidget .x-datepicker-month .x-btn,
.deskWidget .x-datepicker-month .x-btn-wrap,
.deskWidget .x-datepicker-month .x-btn-button {
  border: 0 !important;
  border-radius: 6px !important;
  opacity: 1 !important;
  box-shadow: none !important;
}
.deskWidget .x-datepicker-month .x-btn:hover {
  background-color: var(--dw-hover) !important;
}

/* Weekday initials: micro-label, same family as the column headers.       */
.deskWidget .x-datepicker-column-header,
.deskWidget .x-datepicker-column-header-inner {
  background: transparent !important;
  border: 0 !important;
  color: var(--dw-faint) !important;
  font: 700 var(--dw-fs-micro)/1.2 -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.deskWidget .x-datepicker-cell { border: 0 !important; }
.deskWidget .x-datepicker-date {
  color: var(--dw-ink) !important;
  opacity: 1 !important;      /* Ext dims weekend/other cells via opacity */
  font-size: 11px !important;
  border-radius: 50% !important;
  transition: background-color .1s ease;
}
.deskWidget .x-datepicker-cell:hover .x-datepicker-date {
  background-color: var(--dw-hover) !important;
}

/* Days outside the current month recede rather than shouting in grey boxes */
.deskWidget .x-datepicker-prevday .x-datepicker-date,
.deskWidget .x-datepicker-nextday .x-datepicker-date {
  color: var(--dw-faint) !important;
  opacity: .7;
}

/* Today: ringed, not filled - the filled state belongs to selection.      */
.deskWidget .x-datepicker-today .x-datepicker-date {
  border: 1px solid var(--dw-accent) !important;
  font-weight: 700 !important;
}

/* Selected day. The blanket transparency above strips Ext's fill, so it has
   to be put back or selection is invisible. background-IMAGE too, not just
   colour: Ext paints it with a light gradient sprite, and clearing only the
   colour left white text on a white gradient.                             */
.deskWidget td.x-datepicker-selected,
.deskWidget .x-datepicker-selected .x-datepicker-date,
.deskWidget .x-datepicker-selected a,
.deskWidget .x-datepicker-selected div {
  background-color: var(--dw-accent) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-radius: 50% !important;
}

/*----------------------------------------------- month prev/next arrows ---
  LEFT ENTIRELY ALONE. Three attempts now:
    1. filter:invert  -> the sprite bundles a light FACE with a dark glyph,
                         so inverting gave white glyph on white face.
    2. ::after chevron on an <a>  -> never drew; no <a> in this build.
    3. ::after chevron on the div + fixed 18px box  -> drew, but the fixed
       size broke the header's 3-cell layout and wrapped the next arrow
       below the month caption.
  Ext's own sprites lay out correctly in both themes. Not touching them.
---------------------------------------------------------------------------*/

/*============================================================== scrollbars */

.deskWidget ::-webkit-scrollbar       { width: 6px; height: 6px; }
.deskWidget ::-webkit-scrollbar-thumb { background: var(--dw-rule); border-radius: 6px; }
.deskWidget ::-webkit-scrollbar-track { background: transparent; }

/*============================================================== dark theme */

.dark-theme .deskWidget {
  /* Matched to the side menu's dark glass: a white VEIL rather than a dark
     scrim, so the panel sits LIGHTER than the wallpaper and both surfaces
     read as the same material.

     History, so nobody "fixes" this back by accident: this was 0.40 (too
     transparent to read), then 0.94 (readable but no longer glass). 0.14 is
     a deliberate trade for consistency with the menu.                     */
  /* A SETTLED, near-solid dark card - not the side menu's 0.14 veil.

     This is a deliberate divergence, and the reasoning matters:
     translucency suits the SIDE MENU because it is sparse - big icons,
     short labels, generous spacing, glanced at rather than read. These
     widgets are the opposite: five-decimal rates, docket numbers, dates,
     at 11.5px, scanned repeatedly all day. A surface that shifts with the
     wallpaper behind it makes that work tiring, which is exactly the
     "not comfortable to use daily" problem.

     So: same FAMILY as the menu (blurred, soft edge, blue-dark), but a
     stable surface to read against. Glass for chrome, solid for data.   */
  --dw-surface: rgba(19,31,51,0.92);
  --dw-border:  rgba(255,255,255,0.13);
  --dw-shadow:  0 10px 30px rgba(4,9,18,0.42);

  /* Pure #FFF on a dark panel is harsh over an 8-hour day - this is the
     standard "off-white" step down, still comfortably above 12:1.       */
  --dw-ink:     #E9EFF8;
  --dw-muted:   rgba(233,239,248,0.66);
  --dw-faint:   rgba(233,239,248,0.44);
  --dw-rule:    rgba(255,255,255,0.11);
  --dw-accent:  #8FB4FF;
  --dw-head:    rgba(233,239,248,0.80);
  --dw-inputbg: rgba(255,255,255,0.07);
  --dw-hover:   rgba(255,255,255,0.06);
}

/* Row hairlines must be lighter than the ink, not darker, on dark glass.  */
.dark-theme .deskWidget .x-grid-cell {
  border-bottom-color: rgba(255,255,255,0.10) !important;
}

/* Several columns render their value in blue - some as real <a> links, some
   as plain text coloured by an inline style from UniGUI's Font.Color. Blue
   on dark glass is the lowest-contrast combination in the widget, so in dark
   mode all grid cell text goes to the ink token.

   Deliberately the whole subtree (*): inline styles cannot be targeted by
   class, and a stylesheet !important still beats a non-important inline
   style. Light mode is untouched - the blue reads fine there.             */
.dark-theme .deskWidget .x-grid-cell,
.dark-theme .deskWidget .x-grid-cell *,
.dark-theme .deskWidget .x-grid-cell a,
.dark-theme .deskWidget .x-grid-cell .x-grid-cell-inner a {
  color: var(--dw-ink) !important;
}
.dark-theme .deskWidget .x-grid-cell a:hover {
  color: var(--dw-accent) !important;
  text-decoration: underline;
}

/* Selected calendar day: dark ink on the light accent.                    */
.dark-theme .deskWidget td.x-datepicker-selected,
.dark-theme .deskWidget .x-datepicker-selected .x-datepicker-date,
.dark-theme .deskWidget .x-datepicker-selected a,
.dark-theme .deskWidget .x-datepicker-selected div { color: #0B1421 !important; }

/*==================================================================== tray */
/* The counter pills at the top right. No card chrome - they are chips, not
   widgets - just enough surface to stay readable on any wallpaper.        */

.deskTray {
  border-radius: 9px !important;
  background: var(--dw-surface, rgba(255,255,255,0.82)) !important;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

/* Tray chips are NOT inside .deskWidget, so the dark block above never
   reached them - they were still painting light-mode white in dark mode.  */
.dark-theme .deskTray {
  --dw-surface: rgba(19,31,51,0.92);
  --dw-ink:     #E9EFF8;
  color: var(--dw-ink) !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
}

/*==============================================================================
  OPT-OUT: solid variant
  ---------------------------------------------------------------------------
  Add "deskWidget--solid" alongside "deskWidget" for an opaque white card.

  Worth knowing: these widgets carry dense figures - currency rates to five
  decimals, docket numbers, dates. White is the highest-contrast surface for
  that. If a specific widget ever proves hard to read on glass, make that ONE
  widget solid rather than abandoning the treatment everywhere.
==============================================================================*/

.deskWidget--solid {
  --dw-surface: #FFFFFF;
  --dw-border:  rgba(22,35,47,0.12);
  --dw-ink:     #16232F;
  --dw-muted:   #5C6E82;
  --dw-faint:   rgba(22,35,47,0.45);
  --dw-rule:    rgba(22,35,47,0.10);
  --dw-head:    #1D3350;
  --dw-accent:  #2F6FED;
  --dw-hover:   rgba(47,111,237,0.05);

  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/*========================================== desktop context menu (Personalize)
  The right-click menu is created with Ext.create('Ext.menu.Menu') and lives
  on <body>, OUTSIDE any .deskWidget - so nothing in this file reached it,
  and it kept the dark styling it inherited from the old start-menu CSS.
  Correct in dark mode by luck; wrong in light mode.

  REQUIRES a one-word DFM/JS change: add   cls: 'deskMenu'   to the menu
  config in createMenuPersonalize() (see chat). Without that class these
  rules match nothing and change no behaviour.
==============================================================================*/

.deskMenu.x-menu,
.deskMenu .x-menu-body {
  background-color: rgba(255,255,255,0.97) !important;
  background-image: none !important;
  border: 1px solid rgba(22,35,47,0.12) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 34px rgba(6,12,22,0.20) !important;
  padding: 4px !important;
}

.deskMenu .x-menu-item-link { border-radius: 7px !important; padding: 2px 6px !important; }

.deskMenu .x-menu-item-text {
  color: #16232F !important;
  font: 400 12.5px/1.4 -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.deskMenu .x-menu-item-active .x-menu-item-link {
  background-color: rgba(47,111,237,0.10) !important;
  background-image: none !important;
}
.deskMenu .x-menu-item-active .x-menu-item-text { color: #16232F !important; }

.deskMenu .x-menu-item-separator { background-color: rgba(22,35,47,0.10) !important; }

/* Ext draws a vertical rule between the icon gutter and the labels via
   .x-menu-icon-separator, painted from the old dark menu skin. It reads as
   a hard black line on a light menu - and it is decorative, so it goes.  */
.deskMenu .x-menu-icon-separator {
  display: none !important;
  background-color: transparent !important;
  border: 0 !important;
}

/* Dark mode keeps the same shape, dark surface. */
.dark-theme .deskMenu.x-menu,
.dark-theme .deskMenu .x-menu-body {
  background-color: rgba(19,31,51,0.97) !important;
  border-color: rgba(255,255,255,0.13) !important;
}
.dark-theme .deskMenu .x-menu-item-text { color: #E9EFF8 !important; }
.dark-theme .deskMenu .x-menu-item-active .x-menu-item-link {
  background-color: rgba(255,255,255,0.10) !important;
}
.dark-theme .deskMenu .x-menu-item-active .x-menu-item-text { color: #FFFFFF !important; }

/*============================================================== load masks
  The grid LoadMask. UniGUI writes LoadMask.Color/Opacity as an INLINE style
  on the mask element, but a stylesheet !important still beats a
  non-important inline style, so these rules win without touching the DFM.

  Design note: the mask's job is to say "this is busy, don't read it yet".
  A pale wash over a dark card fails that - it neither hides the content nor
  reads as an overlay. So the scrim always DARKENS in dark mode and lightens
  in light mode, and the message sits on a small card of its own.

  Leaving LoadMask.Color = clWhite in the DFM is fine; these override it.
==============================================================================*/

.deskWidget .x-mask {
  background-color: rgba(233,239,248,0.55) !important;
  border-radius: var(--dw-radius) !important;
}
.dark-theme .deskWidget .x-mask {
  background-color: rgba(6,12,22,0.55) !important;
}

/* The "Loading data..." chip. */
.deskWidget .x-mask-msg,
.deskWidget .x-mask-msg-inner {
  background-color: var(--dw-surface) !important;
  background-image: none !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: 9px !important;
  box-shadow: 0 6px 18px rgba(6,12,22,0.22) !important;
  padding: 7px 12px !important;
}
.deskWidget .x-mask-msg-text,
.deskWidget .x-mask-msg .x-mask-msg-text {
  color: var(--dw-ink) !important;
  font: 600 11.5px/1.3 -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  background-image: none !important;
}

/* Ext's spinner is a dark GIF - invisible on a dark chip, so flip it. */
.dark-theme .deskWidget .x-mask-msg-inner,
.dark-theme .deskWidget .x-mask-msg-text {
  filter: none !important;
}
.dark-theme .deskWidget .x-mask-msg img,
.dark-theme .deskWidget .x-mask .x-loading-indicator {
  filter: brightness(0) invert(1) !important;
  opacity: .85;
}

/*=================================================================== motion
  Cards animate their POSITION (left/top) here, because JS drives x/y as
  inline styles on every layout() pass - a plain CSS transition on those
  properties picks it up automatically whenever DeskWidgets.layout() moves
  a card to close a gap left by a hidden neighbour.

  OPACITY/VISIBILITY are handled in JS instead (deskwidgets.js), not here.
  Ext's setVisible() flips display:none synchronously, and display cannot be
  transitioned - by the time a CSS rule could animate opacity, the element
  is already gone. Faking a fade needs a JS-driven delay before the Ext
  call, which is why that half of the fix lives in the other file.
==============================================================================*/

.deskWidget,
.deskTray {
  transition: left .28s cubic-bezier(.2,.8,.2,1),
              top  .28s cubic-bezier(.2,.8,.2,1),
              opacity .18s ease;
}

/* State the JS toggles right before calling setVisible(false), and removes
   right after calling setVisible(true) - see fadeOut/fadeIn in deskwidgets.js */
.deskWidget.is-hiding,
.deskTray.is-hiding { opacity: 0; }

/*------------------------------------------------ pre-placement state ----
   The widget panels are Floating=True and carry design-time Left/Top from
   the DFM, measured against a 1025px canvas - which on a real screen is
   roughly the middle. registerDesktopWidgets runs in UniFormAfterShow, so
   without this class the cards paint mid-screen and then GLIDE to the right
   edge, because the rule above transitions left/top.

   DeskWidgets.prePlace() adds this from UniFormShow (before the first
   paint); DeskWidgets.markPlaced() removes it two frames after the first
   layout. Net effect: the corrective setXY happens invisibly and
   un-animated, then the card fades in where it belongs.

   transition:none is the important half - opacity:0 alone would still let
   the card slide while invisible, and it would arrive mid-glide.        */
.deskWidget.dw-unplaced,
.deskTray.dw-unplaced {
  opacity: 0 !important;
  transition: none !important;
}

/*------------------------------------------------------ reduced motion ----*/
@media (prefers-reduced-motion: reduce) {
  .deskWidget, .deskWidget *, .deskTray { transition: none !important; }
}


/*==============================================================================
  LEGACY OVERRIDES  --  .wdtclndr and friends
  ---------------------------------------------------------------------------
  The calendar widget is created with config.cls='wdtclndr' (see
  uMainFormDesktop.dfm), and uServerModule.dfm ships a COMPLETE hard-coded
  LIGHT theme for that class: grey gradient cells, #fff picker background,
  #000 dates, a fixed 177px width.

  Those selectors have the SAME specificity as ours (.wdtclndr .x-foo vs
  .deskWidget .x-foo), so the winner is decided purely by which file loads
  last in CustomFiles. Rather than depend on that ordering, everything below
  is written as .deskWidget .wdtclndr ... (three classes) so it wins outright.

  If the legacy calendar styling is ever retired, this whole block can go.
==============================================================================*/

.deskWidget .wdtclndr,
.deskWidget .wdtclndr .x-datepicker {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  width: auto !important;          /* was pinned to 177px */
}

/* Cells: kill the grey gradient + hairline box, restore our circular days.

   CRITICAL - do not reintroduce a blanket background-image:none here.
   The coloured day markers (.x-datepicker-highlight / -highlightw / S- / E-)
   are background-IMAGE sprites (tr.png, trw.png). Those legacy selectors are
   ONE class; anything written as .deskWidget .wdtclndr .x-foo is three, so a
   blanket image reset silently erases every marker on the calendar.

   Two rules instead: colour + border cleared on all cells, but the gradient
   image is only cleared on cells that carry no highlight class.          */
.deskWidget .wdtclndr .x-datepicker-cell {
  background-color: transparent !important;
  border: 0 !important;
  filter: none !important;
}
.deskWidget .wdtclndr .x-datepicker-cell:not([class*="highlight"]) {
  background-image: none !important;
}
.deskWidget .wdtclndr .x-datepicker-date {
  color: var(--dw-ink) !important;
  opacity: 1 !important;
  border-radius: 50% !important;
}
.deskWidget .wdtclndr .x-datepicker-cell:hover .x-datepicker-date {
  background-color: var(--dw-hover) !important;
}

/* Weekday initials. */
.deskWidget .wdtclndr .x-datepicker-column-header,
.deskWidget .wdtclndr .x-datepicker-column-header-inner {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  color: var(--dw-faint) !important;
}

/* Days outside the current month: legacy pins them to #b7b6b6 !important. */
.deskWidget .wdtclndr .x-datepicker-prevday .x-datepicker-date,
.deskWidget .wdtclndr .x-datepicker-nextday .x-datepicker-date {
  color: var(--dw-faint) !important;
  opacity: .7 !important;
}

/* Selected day - legacy sets background-color:transparent + colour #000.

   The fill goes on the inner .x-datepicker-date (the circle), NOT on the
   td: a selected day that also carries a marker class would otherwise lose
   its marker image, since the marker lives on the cell.                  */
.deskWidget .wdtclndr .x-datepicker-selected .x-datepicker-date {
  background-color: var(--dw-accent) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-radius: 50% !important;
}
.deskWidget .wdtclndr td.x-datepicker-selected {
  background-color: transparent !important;
}
.dark-theme .deskWidget .wdtclndr .x-datepicker-selected .x-datepicker-date,
.dark-theme .deskWidget .wdtclndr td.x-datepicker-selected { color: #0B1421 !important; }

/* Month caption. Global CSS forces width:100% on .x-datepicker-month, which
   is what stretches it edge to edge and makes it read as an input box.      */
.deskWidget .wdtclndr .x-datepicker-month,
.deskWidget .x-datepicker .x-datepicker-month {
  width: auto !important;
  background: transparent !important;
  background-image: none !important;
}
.deskWidget .wdtclndr .x-datepicker-month .x-btn,
.deskWidget .wdtclndr .x-datepicker-month .x-btn-wrap,
.deskWidget .wdtclndr .x-datepicker-month .x-btn-button {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
}
.deskWidget .wdtclndr .x-datepicker-month .x-btn-inner {
  color: var(--dw-ink) !important;
  font-weight: 700 !important;
}

/*--------------------------------------------------------- marker days ----
  Each legacy marker rule declares TWO background layers in one shorthand:

    background: url(".../tb.png") no-repeat left top,
                linear-gradient(#f3f3f3, #dcdcdc) !important;

  So sparing these cells from the image reset (which is what keeps the
  marker visible) also spares the light grey gradient riding along in the
  same declaration - the grey tiles seen behind marked days in dark mode.

  The only way to keep one layer and drop the other is to re-declare the
  image on its own. URLs taken from uServerModule.dfm; if a marker image is
  ever renamed there, it must be renamed here too.

  PATH WARNING: url() in a stylesheet resolves relative to the STYLESHEET,
  not to the page. The DFM copies live in inline CSS (page-relative) so
  "files/images/..." works there. From files/css/deskwidgets.css the same
  string resolves to files/css/files/images/... - a 404, which is why every
  marker vanished. Hence "../images/...".
---------------------------------------------------------------------------*/

.deskWidget .x-datepicker-highlight,
.deskWidget .wdtclndr .x-datepicker-highlight {
  background: url("../images/Desktop/widgets/tr.png") no-repeat left top !important;
}
.deskWidget .x-datepickerS-highlight,
.deskWidget .wdtclndr .x-datepickerS-highlight {
  background: url("../images/Desktop/widgets/tb.png") no-repeat left top !important;
}
.deskWidget .x-datepickerE-highlight,
.deskWidget .wdtclndr .x-datepickerE-highlight {
  background: url("../images/Desktop/widgets/bellb.png") no-repeat left top !important;
}
.deskWidget .x-datepicker-highlightw,
.deskWidget .wdtclndr .x-datepicker-highlightw {
  background: url("../images/Desktop/widgets/trw.png") no-repeat left top !important;
}

/* Belt and braces: no marker cell keeps an IE gradient filter or a fill. */
.deskWidget .wdtclndr [class*="highlight"] {
  background-color: transparent !important;
  filter: none !important;
}