.common-timepicker {
  display: block;
  position: relative;
  width: 100%;
}

.common-timepicker .gj-timepicker,
.common-timepicker .input-group {
  width: 100%;
}

.common-timepicker .gj-timepicker {
  border-radius: 9px !important;
  overflow: hidden !important;
}

.common-timepicker .form-control,
.common-timepicker .gj-timepicker input.form-control {
  background: var(--hrms-card, #ffffff);
  border: 1px solid var(--hrms-border, #EBEBEB);
  border-radius: 9px !important;
  color: var(--hrms-text, #111111);
  padding-right: 42px !important;
  transition: border-color .18s, box-shadow .18s;
}

.common-timepicker .form-control::placeholder,
.common-timepicker .gj-timepicker input.form-control::placeholder {
  color: var(--hrms-muted, #6B7280);
}

.common-timepicker .form-control:focus,
.common-timepicker .gj-timepicker input.form-control:focus {
  background: var(--hrms-card, #ffffff);
  border-color: var(--hrms-primary, #22c55e) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hrms-primary, #22c55e) 18%, transparent) !important;
  color: var(--hrms-text, #111111);
  outline: none;
}

/* Dark mode input overrides */
html.hrms-dark .common-timepicker .form-control,
html.hrms-dark .common-timepicker .gj-timepicker input.form-control {
  background: rgba(13,18,26,.92);
  border-color: rgba(49,59,72,.95);
  color: #f8fafc;
}

html.hrms-dark .common-timepicker .form-control::placeholder,
html.hrms-dark .common-timepicker .gj-timepicker input.form-control::placeholder {
  color: #7f93a8;
}

html.hrms-dark .common-timepicker .form-control:focus,
html.hrms-dark .common-timepicker .gj-timepicker input.form-control:focus {
  background: rgba(13,18,26,.92);
  color: #f8fafc;
}

.common-timepicker .gj-timepicker [role="right-icon"] {
  display: none;
}

.common-timepicker-clock {
  align-items: center;
  background-color: var(--hrms-card-alt);
  border: 1px solid var(--hrms-border);
  border-left: none;
  border-radius: 0 9px 9px 0;
  color: var(--hrms-muted);
  cursor: pointer;
  display: flex;
  height: 100%;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 42px;
  z-index: 2;
}

.common-timepicker-clock:hover,
.common-timepicker-clock:focus {
  background-color: var(--hrms-hover);
  border-color: color-mix(in srgb, var(--hrms-primary) 48%, var(--hrms-border));
  color: var(--hrms-primary);
  outline: none;
}

.gj-modal:has(.gj-picker.timepicker) {
  background: rgba(0, 0, 0, .55) !important;
}

.gj-picker.timepicker {
  --common-timepicker-accent: var(--hrms-primary);
  --common-timepicker-accent-soft: var(--hrms-primary-muted);
  --common-timepicker-panel: var(--hrms-card);
  --common-timepicker-soft: var(--hrms-card-alt);
  --common-timepicker-border: var(--hrms-border);
  --common-timepicker-text: var(--hrms-text);
  --common-timepicker-muted: var(--hrms-muted);
  --common-timepicker-shadow: var(--hrms-shadow-modal);
  background: var(--common-timepicker-panel) !important;
  border: 1px solid var(--common-timepicker-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--common-timepicker-shadow) !important;
  color: var(--common-timepicker-text) !important;
  overflow: hidden;
}

/* Dark mode: --hrms-card is semi-transparent (#0b0e165e) — force solid surfaces */
html.hrms-dark .gj-picker.timepicker {
  --common-timepicker-panel: #161b26;
  --common-timepicker-soft: #1d2333;
  --common-timepicker-border: #2a3445;
  --common-timepicker-text: #dbe7f3;
  --common-timepicker-muted: #8b9eb5;
}

.gj-picker.timepicker [role="header"] {
  background: var(--common-timepicker-soft) !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  color: var(--common-timepicker-text) !important;
}

.gj-picker.timepicker [role="header"] [role="hour"],
.gj-picker.timepicker [role="header"] [role="minute"] {
  color: var(--common-timepicker-text) !important;
}

.gj-picker.timepicker [role="header"] [role="mode"] span {
  color: var(--common-timepicker-accent) !important;
}

.gj-picker.timepicker [role="header"] [role="mode"] span.selected {
  background: var(--common-timepicker-accent) !important;
  color: var(--hrms-primary-fg) !important;
}



.gj-picker.timepicker [role="dial"] {
  background: var(--common-timepicker-soft) !important;
  color: var(--common-timepicker-text) !important;
}

.gj-picker.timepicker [role="body"] span {
  background: transparent !important;
  border-radius: 50% !important;
  color: var(--common-timepicker-text) !important;
}

.gj-picker.timepicker [role="body"] span.selected {
  background: var(--common-timepicker-accent) !important;
  border-radius: 50% !important;
  color: #ffffff !important;
}

.gj-picker.timepicker [role="arrow"] {
  background: var(--common-timepicker-accent) !important;
  border-color: var(--common-timepicker-accent) !important;
}

.gj-picker.timepicker [role="arrow"] .arrow-begin {
  background: var(--common-timepicker-accent) !important;
  border-color: var(--common-timepicker-accent) !important;
}

/* arrow-end circle sits on top of the selected number span and covers its text;
   hide it — the .selected span already renders its own green circle + white text */
.gj-picker.timepicker [role="arrow"] .arrow-end {
  background: transparent !important;
  border-color: transparent !important;
}

.gj-picker.timepicker [role="footer"] {
  border: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
  gap: 12px;
  justify-content: flex-end !important;
  padding: 10px 22px 12px !important;
}

.gj-picker.timepicker [role="footer"] button {
  background: transparent !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  color: var(--common-timepicker-accent) !important;
  font-weight: 700;
  min-width: auto !important;
  padding: 0px 9px !important;
  text-transform: uppercase;
}

.gj-picker.timepicker [role="footer"] button:focus,
.gj-picker.timepicker [role="footer"] button:hover {
  background: var(--common-timepicker-accent-soft) !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--common-timepicker-accent) !important;
}