/* Master Panel — DataTables restyled to match the panel theme */
/* Channel values (no rgb() wrapper) so Tailwind's /opacity modifiers work. */
:root{
  --ink-900:7 11 20; --ink-800:11 17 32; --ink-700:15 21 34; --ink-600:20 28 44;
  --line:30 39 57; --muted:133 146 172; --paper:230 234 242;
  --blue:61 123 255; --blue-600:43 99 219;
  --cyan:76 201 224; --ok:52 211 154; --bad:242 85 90;
  --shadow:0 0 0;
  color-scheme:dark;
}
html.light{
  --ink-900:246 247 251; --ink-800:255 255 255; --ink-700:255 255 255; --ink-600:237 241 249;
  --line:220 226 238; --muted:100 111 137; --paper:19 26 42;
  --blue:45 106 240; --blue-600:32 84 200;
  --cyan:13 124 147; --ok:15 157 110; --bad:212 45 51;
  --shadow:100 110 140;
  color-scheme:light;
}
html.light body{background:rgb(var(--ink-900))}
html.light .mp-card{box-shadow:0 1px 2px rgb(var(--shadow)/.06)}
::selection{background:rgb(var(--blue));color:#fff}
:focus-visible{outline:2px solid rgb(var(--blue));outline-offset:2px}
html{scrollbar-color:rgb(var(--line)) transparent}
html,body{transition:background-color .18s ease,color .18s ease}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgb(var(--line));border-radius:99px}

/* --- DataTables ---------------------------------------------------- */
.dataTables_wrapper{color:rgb(var(--paper))}
.mp-dt-head,.mp-dt-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mp-dt-head{padding:4px 4px 14px}
.mp-dt-foot{padding:14px 4px 4px}
.mp-dt-head .dataTables_length,.mp-dt-head .dataTables_filter{margin:0;float:none;width:auto}
.mp-dt-head .dataTables_filter{margin-left:auto}
.mp-dt-head .dataTables_filter input{width:230px;max-width:46vw}
.mp-dt-foot .dataTables_info{padding:0}
.mp-dt-foot .dataTables_paginate{margin-left:auto;padding:0}
@media (max-width:560px){
  .mp-dt-head .dataTables_filter{margin-left:0;width:100%}
  .mp-dt-head .dataTables_filter input{width:100%;max-width:none;margin-left:0}
  .mp-dt-foot .dataTables_paginate{margin-left:0}
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  background:rgb(var(--ink-700));border:1px solid rgb(var(--line));color:rgb(var(--paper));
  border-radius:8px;padding:6px 10px;margin-left:8px;font-size:13px
}
.dataTables_wrapper .dataTables_filter input::placeholder{color:rgb(var(--muted))}
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info{color:rgb(var(--muted));font-size:13px}
table.dataTable{width:100%!important}
.mp-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:auto}

.mp-table thead th{
  background:rgb(var(--ink-800));color:rgb(var(--muted));font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;font-weight:600;text-align:left;padding:12px 16px;
  border-bottom:1px solid rgb(var(--line));white-space:nowrap
}

.mp-table tbody td{padding:14px 16px;border-bottom:1px solid rgb(var(--line));font-size:14px;vertical-align:middle}

.mp-table tbody tr{background:transparent;transition:background .15s}
.mp-table tbody tr:hover{background:rgb(var(--ink-700))}
.mp-table tbody tr:last-child td{border-bottom:0}
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after{opacity:.5}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  color:rgb(var(--muted))!important;border:1px solid rgb(var(--line))!important;background:rgb(var(--ink-700))!important;
  border-radius:8px!important;margin:0 2px;padding:5px 11px!important;font-size:13px
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:rgb(var(--blue))!important;color:#fff!important;border-color:rgb(var(--blue))!important;font-weight:600
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled{opacity:.35}
.dataTables_wrapper .dataTables_empty{color:rgb(var(--muted));padding:48px 16px!important;text-align:center}

/* --- components ------------------------------------------------------------ */
.mp-card{background:rgb(var(--ink-700));border:1px solid rgb(var(--line));border-radius:14px}
/* One look for every control: text, select and date all share this box.
   The class is doubled on purpose. Tailwind's forms plugin styles inputs with
   attribute selectors such as [type='date'], which carry the same specificity as
   a single class, and the CDN injects its stylesheet after this file, so a plain
   .mp-input would lose to it. .mp-input.mp-input outranks those rules.
   background-color, not the background shorthand, so the select chevron and the
   date picker icon below survive. */
.mp-input.mp-input{background-color:rgb(var(--ink-800));border:1px solid rgb(var(--line));
  border-radius:10px;color:rgb(var(--paper));padding:10px 12px;width:100%;min-height:42px;
  font-size:14px;font-family:inherit;line-height:1.35;box-shadow:none;
  transition:border-color .15s,box-shadow .15s}
.mp-input.mp-input:focus{border-color:rgb(var(--blue));outline:none;
  box-shadow:0 0 0 3px rgb(var(--blue)/.20)}
.mp-input.mp-input::placeholder{color:rgb(var(--muted));opacity:1}
.mp-input.mp-input:disabled{opacity:.55;cursor:not-allowed}

/* select: drop the native arrow and draw one that follows the theme */
select.mp-input.mp-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:36px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238592AC' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:18px}
html.light select.mp-input.mp-input{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23646F89' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E")}
select.mp-input option{background:rgb(var(--ink-800));color:rgb(var(--paper))}

/* date: restate the whole box rather than inherit it, and recolour the picker
   button, which browsers draw for a light background by default */
input[type="date"].mp-input.mp-input{
  background-color:rgb(var(--ink-800));border:1px solid rgb(var(--line));border-radius:10px;
  color:rgb(var(--paper));padding:10px 12px;min-height:42px;font-size:14px;font-family:inherit;
  line-height:1.35;cursor:pointer;font-variant-numeric:tabular-nums}
input[type="date"].mp-input.mp-input:focus{border-color:rgb(var(--blue));
  box-shadow:0 0 0 3px rgb(var(--blue)/.20)}
input[type="date"].mp-input::-webkit-datetime-edit{padding:0;color:rgb(var(--paper))}
input[type="date"].mp-input::-webkit-datetime-edit-fields-wrapper{padding:0}
input[type="date"].mp-input::-webkit-calendar-picker-indicator{
  opacity:.55;cursor:pointer;padding:2px;margin-left:4px;border-radius:4px;transition:opacity .15s}
input[type="date"].mp-input::-webkit-calendar-picker-indicator:hover{opacity:1}
input[type="date"].mp-input::-webkit-inner-spin-button,
input[type="date"].mp-input::-webkit-clear-button{display:none;-webkit-appearance:none}

.mp-label{display:block;font-size:12px;color:rgb(var(--muted));margin-bottom:6px;letter-spacing:.02em}
.mp-btn{border-radius:10px;padding:10px 16px;font-size:14px;font-weight:500;transition:.15s;cursor:pointer}
.mp-btn-primary{background:rgb(var(--blue));color:#fff;font-weight:600}
.mp-btn-primary:hover{background:rgb(var(--blue-600))}
.mp-btn-ghost{border:1px solid rgb(var(--line));color:rgb(var(--muted));background:transparent}
.mp-btn-ghost:hover{color:rgb(var(--paper));border-color:rgb(var(--muted))}
.mp-btn[disabled]{opacity:.5;cursor:not-allowed}

/* segmented choice (application type) */
.mp-seg{display:block;cursor:pointer;border:1px solid rgb(var(--line));border-radius:10px;
  background:rgb(var(--ink-800));padding:11px 13px;transition:.15s}
.mp-seg:hover{border-color:rgb(var(--muted))}
.mp-seg-title{display:block;font-size:13px;font-weight:600;color:rgb(var(--paper))}
.mp-seg-sub{display:block;margin-top:2px;font-size:11px;color:rgb(var(--muted));line-height:1.35}
.mp-seg:has(input:checked),.mp-seg.is-on{border-color:rgb(var(--blue));background:rgb(var(--blue)/.10)}
.mp-seg:has(input:checked) .mp-seg-title,.mp-seg.is-on .mp-seg-title{color:rgb(var(--blue))}
.mp-seg:focus-within{outline:2px solid rgb(var(--blue));outline-offset:2px}

/* numeric columns line up on the right; footer carries the totals */
.mp-table th.mp-num,.mp-table td.mp-num{text-align:right}
.mp-table td.mp-logo-col{width:56px}
.mp-table thead th:first-child,.mp-table td:first-child{white-space:nowrap}

.mp-table tfoot th{background:rgb(var(--ink-800));color:rgb(var(--paper));
  padding:14px 16px;font-size:13px;font-weight:600;text-align:left;
  border-top:1px solid rgb(var(--line))}
.mp-table tfoot th.mp-num{text-align:right}
.tabular-nums{font-variant-numeric:tabular-nums}

/* Logo tiles.
   Tailwind's preflight sets img{max-width:100%}, so in a narrow cell the width
   collapsed while the height held, leaving a tile that was not quite square.
   Pinning min/max width and aspect-ratio keeps every tile square everywhere. */
.mp-op-logo{width:36px;min-width:36px;max-width:36px;height:36px;aspect-ratio:1/1;
  display:block;flex:none;border:0;background:transparent;border-radius:6px;
  object-fit:contain;object-position:center}
.mp-op-chip{width:34px;min-width:34px;height:34px;aspect-ratio:1/1;flex:none;
  border-radius:8px;display:grid;place-items:center;
  background:rgb(var(--ink-600));border:1px dashed rgb(var(--line));color:rgb(var(--muted));
  font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:14px;text-transform:uppercase}

/* paired date inputs read as a single range control */
.mp-range{display:flex;align-items:center;gap:8px}
.mp-range .mp-input{flex:1 1 0;min-width:0}
.mp-range-sep{flex:0 0 auto;font-size:12px;color:rgb(var(--muted))}

/* loading overlay: sits over the table while a request is in flight */
.mp-table-box{position:relative;min-height:120px}
.mp-loader{position:absolute;inset:0;z-index:5;display:none;align-items:center;justify-content:center;
  gap:10px;font-size:13px;color:rgb(var(--muted));background:rgb(var(--ink-700)/.72)}
.mp-loader.is-on{display:flex}
.mp-spinner{width:17px;height:17px;border:2px solid rgb(var(--line));border-top-color:rgb(var(--blue));
  border-radius:50%;animation:mp-spin .7s linear infinite}
@keyframes mp-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.mp-spinner{animation-duration:2s}}

/* brand mark */
.mp-brand{aspect-ratio:1/1;object-fit:cover;object-position:center;flex:none}

/* theme toggle */
.mp-theme-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  border:1px solid rgb(var(--line));color:rgb(var(--muted));background:transparent;cursor:pointer;transition:.15s}
.mp-theme-btn:hover{color:rgb(var(--paper));border-color:rgb(var(--muted))}
.mp-theme-btn svg{width:18px;height:18px}

/* logo chip — falls back to a monogram when the image fails to load */
/* App icons: cover fills the tile edge to edge, no side gap */
.mp-logo{width:38px;min-width:38px;max-width:38px;height:38px;aspect-ratio:1/1;
  display:block;flex:none;border-radius:9px;object-fit:cover;object-position:center;
  background:rgb(var(--ink-800));border:1px solid rgb(var(--line))}
.mp-mono-chip{width:38px;min-width:38px;height:38px;aspect-ratio:1/1;flex:none;
  border-radius:9px;display:grid;place-items:center;
  background:rgb(var(--ink-600));border:1px dashed rgb(var(--line));color:rgb(var(--muted));
  font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:15px}

@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}