:root{
  --dros-blue:#1677ff;
  --dros-green:#16a34a;
  --dros-red:#ef4444;
  --dros-orange:#f59e0b;
  --dros-text:#18212f;
  --dros-muted:#667085;
  --dros-line:#d9e0e8;
  --dros-soft:#f8fbff;
}

.filters select,
.filters input:not([type=checkbox]):not([type=radio]),
.filters button,
.toolbar select,
.toolbar input:not([type=checkbox]):not([type=radio]),
.toolbar button,
.actions select,
.actions input:not([type=checkbox]):not([type=radio]),
.actions button,
.btnline select,
.btnline input:not([type=checkbox]):not([type=radio]),
.btnline button,
.detail-filters select,
.detail-filters input:not([type=checkbox]):not([type=radio]),
.detail-filters button,
.ops-period-tools select,
.ops-period-tools input:not([type=checkbox]):not([type=radio]),
.ops-period-tools button,
.field select,
.field input:not([type=checkbox]):not([type=radio]){
  min-height:34px;
  border:1px solid var(--dros-line);
  border-radius:8px;
  background:#fff;
  color:var(--dros-text);
  font-size:13px;
  padding:0 10px;
  outline:none;
}

.filters select:focus,
.filters input:not([type=checkbox]):not([type=radio]):focus,
.toolbar select:focus,
.toolbar input:not([type=checkbox]):not([type=radio]):focus,
.actions select:focus,
.actions input:not([type=checkbox]):not([type=radio]):focus,
.btnline select:focus,
.btnline input:not([type=checkbox]):not([type=radio]):focus,
.detail-filters select:focus,
.detail-filters input:not([type=checkbox]):not([type=radio]):focus,
.ops-period-tools select:focus,
.ops-period-tools input:not([type=checkbox]):not([type=radio]):focus,
.field select:focus,
.field input:not([type=checkbox]):not([type=radio]):focus{
  border-color:var(--dros-blue);
  box-shadow:0 0 0 3px rgba(22,119,255,.12);
}

.filters button,
.toolbar button,
.actions button,
.btnline button,
.detail-filters button,
.ops-period-tools button,
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:34px;
  border-radius:8px;
  border:1px solid var(--dros-line);
  background:#fff;
  color:var(--dros-text);
  font-size:13px;
  font-weight:800;
  padding:0 12px;
  cursor:pointer;
  white-space:nowrap;
}

.filters button:hover,
.toolbar button:hover,
.actions button:hover,
.btnline button:hover,
.detail-filters button:hover,
.ops-period-tools button:hover,
.btn:hover{
  border-color:var(--dros-blue);
  color:var(--dros-blue);
  background:var(--dros-soft);
}

button.primary,
.btn.primary,
.btn-blue,
.btn.blue,
button.blue{
  background:var(--dros-blue);
  border-color:var(--dros-blue);
  color:#fff;
}

button.green,
.btn.green,
.btn-green{
  background:var(--dros-green);
  border-color:var(--dros-green);
  color:#fff;
}

button.danger,
button.red,
.btn.red,
.btn-red,
.btn.danger{
  background:var(--dros-red);
  border-color:var(--dros-red);
  color:#fff;
}

button.ghost,
.btn.ghost{
  background:#fff;
  color:var(--dros-text);
}

button.primary:hover,
.btn.primary:hover,
.btn-blue:hover,
.btn.blue:hover,
button.blue:hover,
button.green:hover,
.btn.green:hover,
.btn-green:hover,
button.green:hover,
button.danger:hover,
button.red:hover,
.btn.red:hover,
.btn-red:hover,
.btn.danger:hover{
  color:#fff;
  filter:brightness(.96);
}

.field label,
.fg label{
  color:var(--dros-muted);
  font-weight:850;
}

.standard-date-filter{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.standard-date-trigger{
  height:38px;
  border:1px solid var(--dros-line);
  border-radius:10px;
  background:#fff;
  color:var(--dros-text);
  font-size:14px;
  font-weight:850;
  padding:0 14px;
  min-width:260px;
  text-align:left;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  cursor:pointer;
}

.standard-date-trigger span{
  font-size:14px;
  color:var(--dros-text);
  font-weight:850;
}

.standard-date-trigger:hover,
.standard-date-trigger.active{
  border-color:var(--dros-blue);
  box-shadow:0 0 0 3px rgba(22,119,255,.12);
}

.standard-date-trigger:after{
  content:'\2304';
  font-size:14px;
  color:var(--dros-muted);
}

.standard-date-pop{
  display:none;
  position:absolute;
  top:44px;
  left:0;
  z-index:120;
  width:430px;
  padding:14px;
  background:#fff;
  border:1px solid var(--dros-line);
  border-radius:10px;
  box-shadow:0 18px 50px rgba(15,23,42,.18);
}

.standard-date-pop.show{display:block}

.standard-date-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:12px;
}

.standard-date-fields label{
  font-size:12px;
  color:var(--dros-muted);
  font-weight:850;
}

.standard-date-fields input{
  width:100%;
  height:38px;
  margin-top:6px;
  border:1px solid var(--dros-line);
  border-radius:8px;
  padding:0 10px;
  font-size:14px;
}

.standard-date-presets{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:8px;
  border-top:1px solid #edf0f5;
  padding-top:12px;
}

.standard-date-presets .quick{
  height:36px;
  border:1px solid var(--dros-line);
  background:#fff;
  border-radius:8px;
  font-size:13px;
  font-weight:850;
  cursor:pointer;
}

.standard-date-presets .quick:hover{
  border-color:var(--dros-blue);
  color:var(--dros-blue);
  background:var(--dros-soft);
}

.ops-date-trigger,
.ops-store-trigger{
  border-color:var(--dros-line);
  border-radius:8px;
}

.ops-date-trigger:hover,
.ops-store-trigger:hover,
.ops-date-trigger.active,
.ops-store-trigger.active{
  border-color:var(--dros-blue);
  box-shadow:0 0 0 3px rgba(22,119,255,.12);
}

.ops-date-presets .quick:hover,
.ops-query-shortcuts .quick:hover,
.dept-query-shortcuts .quick:hover{
  border-color:var(--dros-blue);
  color:var(--dros-blue);
  background:var(--dros-soft);
}

.dros-date-native{display:none!important}

.standard-date-trigger.dros-date-trigger,
.ops-date-trigger.dros-date-trigger,
.date-range-trigger.dros-date-trigger{
  min-width:260px;
  height:42px;
  border-radius:8px;
  border-color:#d8dee8;
  background:#fff;
  color:#172033;
  font-size:14px;
  font-weight:900;
  padding:0 14px;
}

.standard-date-trigger.dros-date-trigger span,
.ops-date-trigger.dros-date-trigger span,
.date-range-trigger.dros-date-trigger span{
  color:#172033;
  font-size:14px;
  font-weight:900;
}

.standard-date-trigger.dros-date-trigger:hover,
.standard-date-trigger.dros-date-trigger.active,
.ops-date-trigger.dros-date-trigger:hover,
.ops-date-trigger.dros-date-trigger.active,
.date-range-trigger.dros-date-trigger:hover,
.date-range-trigger.dros-date-trigger.active{
  border-color:#facc15;
  box-shadow:0 0 0 4px rgba(250,204,21,.18);
}

.standard-date-trigger.dros-date-trigger:after,
.ops-date-trigger.dros-date-trigger:after,
.date-range-trigger.dros-date-trigger:after{
  content:'▦';
  color:#94a3b8;
  font-size:16px;
}

.standard-date-pop.dros-date-popover,
.ops-date-pop.dros-date-popover,
.date-popover.dros-date-popover{
  width:430px;
  max-width:min(430px,calc(100vw - 32px));
  padding:12px;
  border-color:#d8dee8;
  border-radius:10px;
  box-shadow:0 18px 48px rgba(15,23,42,.18);
}

.dros-date-panel{
  color:#172033;
}

.dros-date-panel .dros-date-head{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:10px;
  align-items:center;
  margin-bottom:12px;
}

.dros-date-panel .dros-date-arrow{
  color:#98a2b3;
  font-size:24px;
  font-weight:950;
}

.dros-date-panel .dros-date-part{
  display:block;
  min-width:0;
  flex:none;
  min-height:54px;
  border:1px solid #e4eaf2;
  border-radius:8px;
  background:#fbfcff;
  padding:8px 10px;
  text-align:left;
  cursor:pointer;
}

.dros-date-panel .dros-date-part span{
  display:block;
  color:#667085;
  font-size:12px;
  font-weight:900;
  line-height:1.2;
}

.dros-date-panel .dros-date-part b{
  display:block;
  margin-top:4px;
  color:#172033;
  font-size:18px;
  font-weight:950;
  line-height:1.1;
}

.dros-date-panel .dros-date-part.active{
  border-color:#facc15;
  background:#fff9db;
}

.dros-date-panel .dros-calendar-head{
  display:grid;
  grid-template-columns:34px 34px 1fr 34px 34px;
  gap:5px;
  align-items:center;
  border-top:1px solid #edf1f6;
  padding-top:10px;
  margin-bottom:8px;
}

.dros-date-panel .dros-calendar-head button{
  display:block;
  min-width:0;
  min-height:0;
  flex:none;
  height:32px;
  border:0;
  border-radius:7px;
  background:#fff;
  color:#98a2b3;
  font-size:20px;
  font-weight:950;
  cursor:pointer;
}

.dros-date-panel .dros-calendar-head button:hover{
  background:#f8fafc;
  color:#172033;
}

.dros-date-panel .dros-calendar-title{
  text-align:center;
  color:#172033;
  font-size:20px;
  font-weight:950;
}

.dros-date-panel .dros-calendar-week,
.dros-date-panel .dros-calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:0;
}

.dros-date-panel .dros-calendar-week span{
  padding:8px 0;
  text-align:center;
  color:#667085;
  font-size:14px;
  font-weight:950;
}

.dros-date-panel .dros-calendar-day{
  display:block;
  min-width:0;
  min-height:0;
  padding:0;
  flex:none;
  height:38px;
  border:0;
  border-radius:0;
  background:#fff;
  color:#475467;
  font-size:15px;
  font-weight:900;
  cursor:pointer;
  user-select:none;
  touch-action:none;
}

.dros-date-panel .dros-calendar-day:hover{
  background:#fff7bf;
}

.dros-date-panel .dros-calendar-day.outside{
  color:#cbd5e1;
  background:#f8fafc;
}

.dros-date-panel .dros-calendar-day.in-range{
  background:#fff4a3;
  color:#172033;
}

.dros-date-panel .dros-calendar-day.active{
  background:#ffd000;
  color:#172033;
}

.dros-date-panel .dros-calendar-day.today{
  box-shadow:inset 0 0 0 2px #facc15;
}

.dros-date-panel .dros-calendar-day:disabled{
  cursor:not-allowed;
  color:#cbd5e1;
  background:#f3f4f6;
}

.dros-date-panel .dros-date-presets{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:4px;
  border-top:1px solid #edf1f6;
  margin-top:12px;
  padding-top:10px;
}

.dros-date-panel .dros-date-presets button{
  display:block;
  min-width:0;
  min-height:0;
  padding:0;
  flex:none;
  height:34px;
  border:0;
  border-radius:7px;
  background:#fff;
  color:#475467;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}

.dros-date-panel .dros-date-presets button:hover{
  background:#fff7bf;
  color:#172033;
}

.dros-date-panel .dros-date-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-top:1px solid #edf1f6;
  margin-top:10px;
  padding-top:10px;
}

.dros-date-panel .dros-date-actions .hint{
  color:#667085;
  font-size:12px;
  font-weight:900;
}

.dros-date-panel .dros-date-done{
  display:block;
  min-height:0;
  padding:0;
  flex:none;
  min-width:70px;
  height:38px;
  border:1px solid var(--dros-blue);
  border-radius:8px;
  background:var(--dros-blue);
  color:#fff;
  font-size:14px;
  font-weight:950;
  cursor:pointer;
}

/* Keep the shared date panel isolated from generic toolbar/filter button styles. */
:is(.filters,.toolbar,.actions,.btnline,.detail-filters,.ops-period-tools) .dros-date-panel .dros-date-part{
  color:#000;
  font-size:13.3333px;
  font-weight:400;
  justify-content:normal;
  align-items:normal;
  gap:normal;
}

:is(.filters,.toolbar,.actions,.btnline,.detail-filters,.ops-period-tools) .dros-date-panel :is(.dros-calendar-head button,.dros-calendar-day,.dros-date-presets button,.dros-date-done){
  padding:0;
  justify-content:normal;
  align-items:normal;
  gap:normal;
}

@media(max-width:900px){
  .filters select,
  .filters input:not([type=checkbox]):not([type=radio]),
  .filters button,
  .toolbar select,
  .toolbar input:not([type=checkbox]):not([type=radio]),
  .toolbar button,
  .actions button,
  .btnline button,
  .detail-filters select,
  .detail-filters input:not([type=checkbox]):not([type=radio]),
  .detail-filters button,
  .btn{
    min-width:120px;
    flex:1 1 120px;
  }

  .standard-date-filter,
  .standard-date-trigger{
    width:100%;
    min-width:0;
  }

  .standard-date-pop,
  .standard-date-pop.dros-date-popover,
  .ops-date-pop.dros-date-popover,
  .date-popover.dros-date-popover{
    width:min(430px,calc(100vw - 28px));
  }
}

@media(max-width:560px){
  .standard-date-fields,
  .standard-date-presets{
    grid-template-columns:1fr 1fr;
  }

  .dros-date-presets{
    grid-template-columns:repeat(3,1fr);
  }

  .dros-date-part b,
  .dros-calendar-title{
    font-size:16px;
  }
}