/* Meridian — custom styles layered over Tailwind Play CDN.
   Fonts are <link>ed in each page head. */

:root {
  --brand: #0D1627;
  --brand-600: #0D1627;
  --ring: rgba(13, 22, 39, 0.28);
}

html { -webkit-text-size-adjust: 100%; }
body { font-family: "Hanken Grotesk", system-ui, sans-serif; }

/* Editorial headings use Newsreader with optical sizing */
.font-serif { font-optical-sizing: auto; }
.headline { font-feature-settings: "liga" 1; letter-spacing: -0.012em; }

/* ---- Selection + focus ---- */
::selection { background: #D0DAEC; color: #03060C; }
.focus-ring:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }

/* ---- Thin scrollbars ---- */
.scrollbar-thin { scrollbar-width: thin; scrollbar-color: #d4d4d8 transparent; }
.scrollbar-thin::-webkit-scrollbar { height: 8px; width: 8px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 99px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---- Skeleton shimmer ---- */
.skeleton { position: relative; overflow: hidden; background: #ececef; }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* ---- Checkerboard behind transparent assets (logos/icons) ---- */
.checkerboard {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #f1f1f3 25%, transparent 25%),
    linear-gradient(-45deg, #f1f1f3 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f1f1f3 75%),
    linear-gradient(-45deg, transparent 75%, #f1f1f3 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

/* ---- Card hover lift ---- */
.res-card { transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s; }
.res-card:hover { transform: translateY(-3px); }
.res-card:hover .card-quick { opacity: 1; transform: translateY(0); }
.card-quick { transition: opacity .2s, transform .2s; }
@media (hover: none) { .card-quick { opacity: 1 !important; transform: none !important; } }

/* ---- Drawer / sheet transitions ---- */
.drawer { transition: transform .32s cubic-bezier(.2,.7,.2,1); }
.scrim { transition: opacity .3s; }

/* ---- Modal ---- */
.modal-backdrop { backdrop-filter: blur(4px); }

/* ============ Select2 theme to match Meridian ============ */
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single {
  border: 1px solid #e4e4e7 !important;
  border-radius: 0.7rem !important;
  min-height: 44px !important;
  background: #fff;
  padding: 3px 6px;
  display: flex; align-items: center;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: #A9BADA !important;
  box-shadow: 0 0 0 3px var(--ring);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 38px; color: #27272a; padding-left: 6px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: #F4F6FB !important; border: 1px solid #D0DAEC !important;
  color: #070D18 !important; border-radius: 999px !important;
  padding: 3px 9px 3px 26px !important; font-size: 13px; font-weight: 600; margin-top: 5px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #0D1627 !important; border: none !important; left: 6px; font-size: 15px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: #0D1627 !important;
}
.select2-dropdown { border-color: #e4e4e7 !important; border-radius: 0.7rem !important; box-shadow: 0 24px 60px -20px rgba(24,24,27,.32); overflow: hidden; }
.select2-search--dropdown .select2-search__field { border-radius: .5rem; border-color: #e4e4e7; }
.select2-container { width: 100% !important; }

/* ============ DataTables theme ============ */
table.dataTable { border-collapse: separate !important; border-spacing: 0; }
table.dataTable thead th {
  font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: #71717a; font-weight: 600;
  border-bottom: 1px solid #e4e4e7 !important; padding: 12px 16px !important; white-space: nowrap;
}
table.dataTable tbody td { padding: 12px 16px !important; border-bottom: 1px solid #f4f4f5 !important; vertical-align: middle; }
table.dataTable tbody tr:hover { background: #faf9ff; }
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid #e4e4e7; border-radius: .6rem; padding: 8px 12px; margin-left: 8px; min-width: 220px;
}
.dataTables_wrapper .dataTables_filter input:focus { outline: none; border-color: #A9BADA; box-shadow: 0 0 0 3px var(--ring); }
.dataTables_wrapper .dataTables_length select { border: 1px solid #e4e4e7; border-radius: .5rem; padding: 6px 8px; }
.dataTables_wrapper .dataTables_info { color: #71717a; font-size: 13px; padding-top: 14px !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: .5rem !important; border: 1px solid transparent !important; padding: 6px 12px !important;
  color: #52525b !important; font-size: 13px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #0D1627 !important; border-color: #0D1627 !important; color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #f4f4f5 !important; border-color: #e4e4e7 !important; color: #18181b !important;
}
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after { opacity: .4; }

/* DataTables 2.x renamed control classes — mirror the brand styling */
.dt-container div.dt-search input.dt-input, .dt-container div.dt-length select.dt-input {
  border: 1px solid #e4e4e7 !important; border-radius: .6rem !important; padding: 8px 12px; height: 40px;
  font-size: 14px; color: #27272a; background: #fff;
}
.dt-container div.dt-search input.dt-input { margin-left: 8px; min-width: 220px; }
.dt-container div.dt-length select.dt-input { padding: 6px 30px 6px 12px; }
.dt-container .dt-search input:focus, .dt-container .dt-length select:focus {
  outline: none; border-color: #A9BADA !important; box-shadow: 0 0 0 3px var(--ring);
}
.dt-container .dt-info { color: #71717a; font-size: 13px; padding-top: 14px !important; }
.dt-container .dt-paging button.dt-paging-button {
  border-radius: .5rem !important; border: 1px solid transparent !important; padding: 6px 12px !important;
  margin: 0 2px; color: #52525b !important; font-size: 13px; min-width: 38px;
}
.dt-container .dt-paging button.dt-paging-button.current,
.dt-container .dt-paging button.dt-paging-button.current:hover {
  background: #0D1627 !important; border-color: #0D1627 !important; color: #fff !important;
}
.dt-container .dt-paging button.dt-paging-button:hover:not(.current):not(.disabled) {
  background: #f4f4f5 !important; border-color: #e4e4e7 !important; color: #18181b !important;
}
.dt-container .dt-paging button.dt-paging-button.disabled { color: #d4d4d8 !important; }
.dt-container .dt-layout-row { margin: 0; align-items: center; }

/* line clamp helper (fallback) */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* flatpickr accent */
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected:hover { background: #0D1627; border-color: #0D1627; }
.flatpickr-day.inRange { background: #E9EEF6; border-color: #E9EEF6; box-shadow: -5px 0 0 #E9EEF6, 5px 0 0 #E9EEF6; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month { color: #3f3f46; }
.flatpickr-calendar { border-radius: .8rem; box-shadow: 0 24px 60px -20px rgba(24,24,27,.32); }

/* prevent horizontal scroll safety */
html, body { overflow-x: hidden; }