/* ============================================================================
   Ψηφιακό Πελατολόγιο picker  (DclPicker.ascx)

   Loaded by SiteTop.master AFTER the theme stylesheet, so a theme can override
   anything here.

   The picker is a plain HTML grid inside a jQuery UI dialog. Left alone it
   inherits .ui-widget-content and nothing else, which is why it looked foreign
   — and why copying a fixed palette into individual theme files was the wrong
   fix: the app ships sixteen themes and counting.

   Instead every colour is a --dcl-* variable defaulting to the SAME design
   token the themes already give the DevExpress list grids:

       list grid                     picker
       ---------------------------   -------------------------
       .dxgvHeader_MetropolisBlue    --dcl-head-bg    <- --nav-800
       .dxgvTable_MetropolisBlue     --dcl-row-bg     <- --surface
       .dxgvDataRowAlt_...           --dcl-row-alt-bg <- --surface-2
       :hover                        --dcl-hover-bg   <- --primary-050
       .dxgvSelectedRow_...          --dcl-sel-bg     <- --primary-100
       cell border                   --dcl-border     <- --line-soft

   So the picker follows any token-based theme automatically, including ones
   added later, and flips to dark wherever the theme does.

   The fallback after each comma is the classic MetropolisBlue list look, used
   by the older token-less themes (Theme2022, Theme__Default). Themes whose
   grids differ from that — ThemeBlack, ThemeBlue, ThemeModern — override the
   handful of --dcl-* values at the end of their own file.
   ============================================================================ */

#dclDialog.dclDlg {
    --dcl-surface:      var(--canvas,      #f2f4f7);
    --dcl-text:         var(--ink-900,     #000000);
    --dcl-muted:        var(--ink-400,     #5d6470);
    --dcl-bar-bg:       var(--surface-3,   #e6eaf0);
    --dcl-border:       var(--line-soft,   #c1c1c1);
    --dcl-frame:        var(--line,        #525252);

    /* Themes disagree on which token paints a grid header: the 2026 family uses
       the navy --nav-700/800 with light --nav-text, while Win11 / macOS / Red /
       OfficeBlue use a neutral --n-lighter with dark --ink-900. Try each in the
       order the list grids do, then fall back to the classic amber. */
    --dcl-head-bg:      var(--nav-800,     var(--n-lighter, #ffe293));
    --dcl-head-text:    var(--nav-text,    var(--ink-900,   #000000));
    --dcl-row-bg:       var(--surface,     #f8eed3);
    --dcl-row-text:     var(--ink-900,     #000000);
    --dcl-row-alt-bg:   var(--surface-2,   #E1E7F5);
    --dcl-hover-bg:     var(--primary-050, #fff6d6);
    --dcl-hover-text:   var(--ink-900,     #000000);
    --dcl-sel-bg:       var(--primary-100, #bcd4f0);
    --dcl-sel-text:     var(--ink-900,     #000000);

    --dcl-input-bg:     var(--field-bg,    #ffffff);
    --dcl-input-text:   var(--ink-900,     #000000);
    --dcl-input-border: var(--line,        #8a94a3);

    --dcl-accent:       var(--primary-600, #2d4059);
    --dcl-link:         var(--primary-600, #14477d);
    --dcl-link-hover:   var(--danger-600,  #b00020);
    --dcl-ok:           var(--ok-600,      #14671a);
    --dcl-err:          var(--danger-600,  #b00020);
    --dcl-warn:         var(--warn-600,    #8a5300);

    --dcl-disabled-bg:   var(--ink-400,    #98a1ad);
    --dcl-disabled-text: var(--surface,    #eef0f3);

    font-family: 'Open Sans';
    font-size: 13px;
    background: var(--dcl-surface);
    color: var(--dcl-text);
    padding: 8px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Layout — jQuery UI gives the content element an explicit pixel height, so a
   flex column lets the grid absorb the leftover space and keeps the
   Συσχέτιση / Κλείσιμο buttons on screen without scrolling the dialog. */

#dclDialog > .dclBar,
#dclDialog > .dclMsg,
#dclDialog > .dclLinked,
#dclDialog > .dclFoot {
    flex: 0 0 auto;
}

/* min-height:0 is required or a flex item refuses to shrink below its content. */
#dclDialog > .dclWrap {
    flex: 1 1 auto;
    min-height: 120px;
    max-height: none;
}

#dclDialog .dclWrapLinked {
    flex: 0 0 auto;
    max-height: 130px;
}

/* Toolbar ------------------------------------------------------------------ */

#dclDialog .dclBar {
    padding: 6px 4px;
    margin-bottom: 6px;
    background: var(--dcl-bar-bg);
    border: solid 1px var(--dcl-border);
    color: var(--dcl-text);
}

#dclDialog .dclBar label {
    margin-right: 14px;
    color: var(--dcl-text);
    white-space: nowrap;
}

#dclDialog input[type=text] {
    width: 190px;
    background: var(--dcl-input-bg);
    color: var(--dcl-input-text);
    border: solid 1px var(--dcl-input-border);
    padding: 2px 4px;
    font-family: 'Open Sans';
    font-size: 13px;
}

#dclDialog input[type=text]::-webkit-input-placeholder { color: var(--dcl-muted); }
#dclDialog input[type=text]::-moz-placeholder { color: var(--dcl-muted); opacity: 1; }
#dclDialog input[type=text]:-ms-input-placeholder { color: var(--dcl-muted); }

#dclDialog .dclSpin {
    display: none;
    color: var(--dcl-accent);
    font-weight: bold;
    margin-left: 8px;
}

/* Counters and status ------------------------------------------------------ */

#dclDialog .dclCount {
    font-weight: bold;
    color: var(--dcl-accent);
}

/* Over the 50-id cap (ValidationError 211) — must read as a stop. */
#dclDialog .dclCount.over {
    color: var(--dcl-err);
}

#dclDialog .dclMsg {
    padding: 6px 4px;
    min-height: 18px;
    font-weight: bold;
    color: var(--dcl-text);
}

#dclDialog .dclOk { color: var(--dcl-ok); }
#dclDialog .dclErr { color: var(--dcl-err); }
#dclDialog .dclWarn { color: var(--dcl-warn); }

/* Grids -------------------------------------------------------------------- */

#dclDialog .dclWrap {
    max-height: 380px;
    overflow: auto;
    border: solid 1px var(--dcl-frame);
    background: var(--dcl-row-bg);
}

#dclDialog .dclTbl {
    width: 100%;
    border-collapse: collapse;
    background: var(--dcl-row-bg);
}

#dclDialog .dclTbl th {
    font-size: 13px;
    font-weight: normal;
    color: var(--dcl-head-text);
    background: var(--dcl-head-bg);
    padding: 4px 6px;
    text-align: left;
    white-space: nowrap;
    border: solid 1px var(--dcl-border);
    cursor: pointer;
    user-select: none;
    /* Sticky needs an opaque background or rows show through while scrolling. */
    position: sticky;
    top: 0;
    z-index: 2;
}

#dclDialog .dclTbl th.dclChkCol {
    width: 26px;
    cursor: default;
}

#dclDialog .dclTbl td {
    padding: 3px 6px;
    color: var(--dcl-row-text);
    background: var(--dcl-row-bg);
    border: solid 1px var(--dcl-border);
    white-space: nowrap;
}

#dclDialog .dclTbl tbody tr:nth-child(even) td {
    background: var(--dcl-row-alt-bg);
}

#dclDialog .dclTbl tbody tr:hover td {
    background: var(--dcl-hover-bg);
    color: var(--dcl-hover-text);
}

#dclDialog .dclTbl tbody tr.dclSel td {
    background: var(--dcl-sel-bg);
    color: var(--dcl-sel-text);
    font-weight: bold;
}

/* Locally unlinked rows: still legible, clearly no longer in force. */
#dclDialog .dclTbl tbody tr.dclDropped td {
    color: var(--dcl-muted);
    font-style: italic;
    background: var(--dcl-row-alt-bg);
}

#dclDialog .dclEmpty {
    padding: 12px;
    background: var(--dcl-row-bg);
    color: var(--dcl-muted);
}

#dclDialog .dclTbl td .dclWarn {
    font-weight: bold;
    cursor: help;
}

/* Links — several themes set a:link to #fff for their dark chrome, which would
   be invisible on a grid row. */
#dclDialog a,
#dclDialog a:link,
#dclDialog a:visited {
    color: var(--dcl-link);
    text-decoration: underline;
    font-weight: bold;
}

#dclDialog a:hover {
    color: var(--dcl-link-hover);
    text-decoration: underline;
}

/* Linked-entries section ---------------------------------------------------- */

#dclDialog .dclLinked {
    margin-top: 10px;
}

#dclDialog .dclLinked h4 {
    margin: 6px 0;
    font-size: 13px;
    font-weight: bold;
    color: var(--dcl-text);
    text-transform: none;
}

/* Footer -------------------------------------------------------------------- */

#dclDialog .dclFoot {
    padding-top: 10px;
    text-align: right;
}

#dclDialog .dclFoot .button,
#dclDialog .dclBar .button {
    margin-left: 6px;
    padding: 4px 10px;
    cursor: pointer;
}

/* A disabled .button keeps its normal background, so without this it looks
   clickable while doing nothing. */
#dclDialog .button[disabled] {
    background-color: var(--dcl-disabled-bg);
    color: var(--dcl-disabled-text);
    cursor: default;
}