/*
 * Shared visual theme
 * This stylesheet is intentionally presentation-only: template structure,
 * element IDs and JavaScript hooks remain untouched.
 */
:root {
  color-scheme: light;
  --ui-ink: #182230;
  --ui-muted: #667085;
  --ui-line: #dbe3ee;
  --ui-soft: #f6f8fb;
  --ui-soft-blue: #eff6ff;
  --ui-primary: #2563eb;
  --ui-primary-strong: #1d4ed8;
  --ui-danger: #dc2626;
  --ui-success: #15803d;
  --ui-shadow: 0 12px 32px rgba(15, 23, 42, .08);

  /* Existing page-level variables are remapped to the common light theme. */
  --bg: #ffffff !important;
  --bg0: #ffffff !important;
  --bg1: #ffffff !important;
  --bg2: #ffffff !important;
  --bg-start: #ffffff !important;
  --bg-end: #f6f8fb !important;
  --surface: #ffffff !important;
  --surface2: #f6f8fb !important;
  --card-bg: #ffffff !important;
  --stroke: #dbe3ee !important;
  --stroke2: #cbd5e1 !important;
  --glass-border: 1px solid #dbe3ee !important;
  --text: #182230 !important;
  --muted: #667085 !important;
  --brand: #2563eb !important;
  --brand2: #60a5fa !important;
  --brand-strong: #1d4ed8 !important;
  --ring: rgba(37, 99, 235, .22) !important;
  --shadow: 0 12px 32px rgba(15, 23, 42, .08) !important;
}

html, body {
  min-height: 100%;
  background: #ffffff !important;
  color: var(--ui-ink) !important;
}

body {
  font-family: Inter, "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before,
body::after,
.bg-grid,
.bg-orb {
  opacity: .08 !important;
}

h1, h2, h3, h4, h5, h6,
.title, .section-title, .page-title, .modal-title,
.calendar-title, .notify-title, .detail-title {
  color: var(--ui-ink) !important;
  letter-spacing: -.015em;
}

p, li, label, legend, small, .subtitle, .small-muted,
.text-muted, .form-text, .calendar-header-desc, .notify-item,
.empty-panel, .muted, .lead, .site-footer {
  color: var(--ui-muted) !important;
}

a:not(.btn) {
  color: #1d4ed8;
  text-underline-offset: 3px;
}

a:not(.btn):hover {
  color: #1e40af;
}

/* Cards, panels and popovers */
.card, .glass-card, .card-glass, .top-card, .content-card,
.header-section, .soft-panel, .mini-card, .panel, .app-card,
.generated-shift-panel, .shift-picker-panel, .detail-panel,
.notify-tray, .pdf-modal-window, .dnd-action-panel, .app-dialog-panel,
.modal-content, .trust-card, .feature-card, .pricing-card, .step,
.faq-item, .price-box, .container > .shift-item {
  background: #ffffff !important;
  color: var(--ui-ink) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--ui-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.card-header, .modal-header, .generated-shift-header, .shift-picker-header,
.detail-header, .pdf-modal-header, .employee-modal-header,
.calendar-header, .section-header-row, .employee-list-header {
  background: var(--ui-soft) !important;
  color: var(--ui-ink) !important;
  border-color: var(--ui-line) !important;
}

.card-footer, .modal-footer, .footer-bar {
  background: #ffffff !important;
  border-color: var(--ui-line) !important;
}

/* Inputs remain unmistakably light, including legacy controls. */
input:not([type="checkbox"]):not([type="radio"]), select, textarea,
.form-control, .form-select, .custom-input, .custom-select {
  background: #ffffff !important;
  color: var(--ui-ink) !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

input::placeholder, textarea::placeholder {
  color: #98a2b3 !important;
  opacity: 1;
}

input:focus, select:focus, textarea:focus,
.form-control:focus, .form-select:focus {
  border-color: var(--ui-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .16) !important;
  outline: 0;
}

input:disabled, select:disabled, textarea:disabled,
.form-control:disabled, .form-select:disabled {
  background: #f1f5f9 !important;
  color: #667085 !important;
}

/* Buttons retain their existing behavior while sharing one visual system. */
.btn, button, input[type="button"], input[type="submit"], input[type="reset"],
.custom-add-button, .custom-delete-button, .btn-dl-calender {
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease !important;
}

.btn:hover, button:hover, input[type="button"]:hover,
input[type="submit"]:hover, input[type="reset"]:hover {
  transform: translateY(-1px);
}

.btn-primary, .btn-brand, .btn-save, .btn-dl-calender,
.custom-add-button, .btn-success, .btn-info {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  color: #111 !important;
  box-shadow: 0 5px 14px rgba(37, 99, 235, .18) !important;
}

.btn-primary:hover, .btn-brand:hover, .btn-save:hover, .btn-dl-calender:hover,
.custom-add-button:hover, .btn-success:hover, .btn-info:hover {
  background: var(--ui-primary-strong) !important;
  border-color: var(--ui-primary-strong) !important;
  color: #111 !important;
}

.btn-secondary, .btn-light, .btn-menu, .btn-outline-secondary,
.btn-outline-primary, .btn-outline-dark {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
  box-shadow: none !important;
}

.btn-secondary:hover, .btn-light:hover, .btn-menu:hover,
.btn-outline-secondary:hover, .btn-outline-primary:hover, .btn-outline-dark:hover {
  background: var(--ui-soft-blue) !important;
  border-color: #93c5fd !important;
  color: #1d4ed8 !important;
}

.btn-danger, .btn-outline-danger, .custom-delete-button {
  background: #ffffff !important;
  border-color: #fca5a5 !important;
  color: var(--ui-danger) !important;
  box-shadow: none !important;
}

.btn-danger:hover, .btn-outline-danger:hover, .custom-delete-button:hover {
  background: #fef2f2 !important;
  border-color: var(--ui-danger) !important;
  color: #b91c1c !important;
}

.btn-close, .employee-modal-x {
  filter: none !important;
}

/* Tables and schedules */
table, .table, .calendar-table, table.calendar {
  color: var(--ui-ink) !important;
  border-color: var(--ui-line) !important;
}

table th, .table th, .calendar-table th, table.calendar th {
  background: var(--ui-soft) !important;
  color: #334155 !important;
  border-color: var(--ui-line) !important;
  font-weight: 800 !important;
}

table td, .table td, .calendar-table td, table.calendar td {
  background: #ffffff !important;
  color: var(--ui-ink) !important;
  border-color: var(--ui-line) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > *,
.table-hover > tbody > tr:hover > * {
  background: #f8fafc !important;
  color: var(--ui-ink) !important;
}

.shift-item, .custom-shift-item, .emp-card, .day-cell,
.calendar-day, .calendar-shift, .role-list-container, #shift-json-panel {
  background: #ffffff !important;
  color: var(--ui-ink) !important;
  border-color: var(--ui-line) !important;
  box-shadow: none !important;
}

/* Landing page details */
.landing-page .site-header,
.landing-page .site-footer {
  background: transparent !important;
}

.landing-page .glass,
.landing-page .visual-stack {
  background: rgba(255, 255, 255, .94) !important;
  border-color: var(--ui-line) !important;
  box-shadow: var(--ui-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.landing-page .lightgreen, .feature-number, .price-badge {
  color: #1d4ed8 !important;
}

.landing-page .nav a, .landing-page .brand-text {
  color: #475467 !important;
}

/* Native and custom dialogs, selections and alerts */
.alert, .toast, .dropdown-menu, .list-group-item,
.employee-modal-body, .pdf-modal-body, .detail-body {
  background: #ffffff !important;
  color: var(--ui-ink) !important;
  border-color: var(--ui-line) !important;
}

.nav-pills .nav-link, .nav-tabs .nav-link {
  color: #475467 !important;
  border-radius: 9px !important;
}

.nav-pills .nav-link.active, .nav-tabs .nav-link.active {
  background: var(--ui-primary) !important;
  color: #111 !important;
}

/* Dark floating controls used by the scheduling screens. */
#menu-panel, #menu-extra-buttons, .top-panel-backups,
.tier-popup, .mobile-shift-popup-panel, .shift-chip, .pref-shift-item,
.toast-item, .detail-shift, .employee-picker-item {
  background: #ffffff !important;
  color: var(--ui-ink) !important;
  border-color: var(--ui-line) !important;
  box-shadow: var(--ui-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#menu-panel a, .tier-popup .tier-popup-body,
.tier-popup .tier-popup-close, .employee-picker-item,
.employee-picker-meta, .app-dialog-title, .app-dialog-desc,
#app-dialog-title, #app-dialog-desc {
  color: var(--ui-ink) !important;
}

.shift-tabs .nav-link.active {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  color: #111 !important;
}

.card-header *, .modal-header *, .generated-shift-header *,
.shift-picker-header *, .detail-header * {
  color: var(--ui-ink) !important;
}

.card-header .btn-primary, .card-header .btn-brand,
.modal-header .btn-primary, .modal-header .btn-brand,
.generated-shift-header .btn-primary, .shift-picker-header .btn-primary,
.detail-header .btn-primary {
  color: #111 !important;
}

::selection {
  background: #bfdbfe;
  color: #172554;
}

@media (max-width: 640px) {
  .card, .glass-card, .card-glass, .top-card, .content-card,
  .header-section, .soft-panel, .mini-card, .panel {
    border-radius: 13px !important;
  }
}

/* Shared authentication surface and site footer. */
.auth-wrap, .wrap{
  background: #ffffff !important;
}
.auth-wrap .glass-card, .wrap .card-glass,
.auth-wrap .card-glass, .wrap .glass-card{
  border-color: var(--ui-line) !important;
  box-shadow: var(--ui-shadow) !important;
}
.common-site-footer{
  margin-top: 36px;
  padding: 24px 16px;
  background: #ffffff;
  border-top: 1px solid var(--ui-line);
}
.common-footer-inner{
  width: min(100%, 1240px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(0, 2.2fr);
  gap: 28px;
  align-items: center;
}
.common-footer-brand{
  color: var(--ui-muted);
  font-size: .8rem;
  font-weight: 600;
  text-align: left;
}
.common-footer-logo{
  display: block;
  width: auto;
  max-width: 150px;
  height: 38px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 7px;
}
.common-footer-links{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.common-footer-links a{
  color: #475467;
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
}
.common-footer-links a:hover{ color: #1d4ed8; }
@media (max-width: 720px){
  .common-footer-inner{ grid-template-columns: 1fr; gap: 18px; }
  .common-footer-links{ justify-content: flex-start; }
}

/* UI-only visibility refinement: black text and gray outlines across pages. */
html body,
html body *:not(script):not(style) {
  color: #111 !important;
}

.card,
.panel,
.glass-card,
.glass-panel,
.app-card,
.table,
table,
th,
td,
.modal-content,
.dropdown-menu,
.list-group-item,
.form-control,
.form-select,
textarea,
input,
select,
.btn,
.badge,
.alert,
.toast,
.popover,
.navbar,
.menu-panel,
.calendar-day,
.calendar-cell,
.shift-card,
.shift-tile,
.employee-card,
.role-card,
.request-card,
.backup-card {
  border-color: #b8c0cc !important;
}

.card,
.panel,
.glass-card,
.glass-panel,
.app-card,
.modal-content,
.dropdown-menu,
.list-group-item,
.form-control,
.form-select,
textarea,
input,
select,
.calendar-day,
.calendar-cell,
.shift-card,
.shift-tile,
.employee-card,
.role-card,
.request-card,
.backup-card {
  box-shadow: 0 0 0 1px rgba(107, 114, 128, .25), 0 12px 28px rgba(15, 23, 42, .08) !important;
}

table,
.table {
  border: 1px solid #b8c0cc !important;
  border-collapse: separate;
  border-spacing: 0;
}

th,
td {
  border-color: #b8c0cc !important;
}