/* Shared layout and current Bootstrap controls. */
html { scrollbar-gutter: stable; }
body { background: #f8f9fa; color: #333; font-family: sans-serif; font-size: 16px; }
a { text-decoration: none; }
.app-container { min-height: 100vh; padding-bottom: 24px; }
.content-container { margin: 0; }
.content-container > .container-fluid,
.top-navigation > .container-fluid { width: 100%; max-width: 1728px; padding-left: 32px; padding-right: 32px; }
.app-container .side-body { max-width: none; padding: 28px 12px; }
.side-body > .row > .col-md-6 { flex: 0 1 600px; width: 100%; max-width: 600px; }
.center-block { margin-left: auto; margin-right: auto; }
.top-navigation { position: sticky; top: 0; z-index: 1030; min-height: 64px; background: white; border-bottom: 1px solid #ddd; }
.top-navigation > .container-fluid { display: flex; flex-wrap: wrap; gap: 24px; }
.navbar-header { display: flex; align-items: center; }
.navbar-logo { display: inline-flex; align-items: center; min-height: 48px; }
.top-navigation .navbar-logo img { max-height: 48px; width: auto; height: auto; margin: 0; object-fit: contain; }
.top-navigation .navbar-nav { margin: 0; flex-direction: row; gap: 16px; align-items: center; }
.navbar-nav > li > a { display: block; padding: 12px 4px; color: #555; }
.navbar-nav > .active > a { color: #087fa7; border-bottom: 2px solid currentColor; }
.navbar-right { margin-left: auto !important; }
.header-actions { display: none; }
.mobile-menu-toggle { display: none; }
.notification-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 4px; border: 0; background: transparent; color: #555; }
.notification-count { margin-left: 4px; }
.dropdown-menu li > a { display: block; padding: 10px 14px; }
.top-navigation .navbar-nav .dropdown-menu { position: absolute; top: 100%; left: auto; right: 0; min-width: 260px; border: 1px solid #ddd; box-shadow: 0 6px 12px rgba(0, 0, 0, .175); }
.top-navigation .account-dropdown .account-links a { display: flex; align-items: center; flex: 1; min-height: 44px; padding: 0; }
.top-navigation .navbar-nav .notifications-dropdown { width: max-content; max-width: calc(100vw - 32px); }
.top-navigation .notification-links a { display: flex; align-items: center; gap: 6px; min-height: 44px; white-space: nowrap; }
.top-navigation .account-links .list-group-item { display: flex; align-items: center; gap: 10px; padding: 0 10px; }
.top-navigation .account-links .list-group-item i { width: 18px; text-align: center; }
.card { border: 1px solid #ddd; border-radius: 4px; background: white; }
.card-body { padding: 20px; }
.sub-title { margin: 16px 0 8px; font-size: 18px; }
.help-block { color: #666 !important; font-size: 14px; }
.pull-right { float: right; }
.pull-left { float: left; }
.btn { min-height: 40px; }
.btn-default { --bs-btn-color: #333; --bs-btn-bg: #eee; --bs-btn-border-color: #ddd; --bs-btn-hover-bg: #ddd; }
.btn-info { --bs-btn-color: #fff; --bs-btn-bg: #087fa7; --bs-btn-border-color: #087fa7; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #066782; --bs-btn-hover-border-color: #066782; --bs-btn-active-color: #fff; --bs-btn-active-bg: #066782; --bs-btn-active-border-color: #066782; --bs-btn-disabled-color: #fff; }
.btn-xs { padding: 4px 8px; font-size: 14px; }
.label { display: inline-block; padding: 3px 6px; border-radius: 3px; font-size: 12px; }
.label-default { background: #e9ecef; color: #333; }
.hidden { display: none !important; }
.app-footer { margin: 30px auto 0; color: #666; font-size: 14px; padding: 0 16px; }
.app-footer a { display: inline-flex; align-items: center; min-height: 44px; }
.job-message, .side-body > .alert { max-width: 560px; margin-left: auto; margin-right: auto; overflow-wrap: anywhere; }
.side-body .alert.alert-warning { color: #332706 !important; }
.side-body .alert.alert-success { background-color: #3f7f2b !important; }
.form-control { margin-bottom: 12px; min-height: 44px; font-size: 16px; }
.close { background: none; border: 0; font-size: 26px; margin-left: auto; order: 2; min-width: 44px; min-height: 44px; }
.list-unstyled { padding-left: 0; }
.add-job-window .sub-title { display: block; margin: 16px 0 8px !important; }
.add-job-window .job-name { margin-top: 0 !important; }
.add-job-window #periodSlider, .add-job-window #alertDelaySlider { margin-top: 0; }
.add-job-window .help-block { margin: 4px 0 12px; }
.job-slider-field { padding-bottom: 48px; }
.job-slider-field .noUi-pips-horizontal { left: 0 !important; width: 100%; }
.job-slider-field .noUi-value { font-size: 12px; white-space: nowrap; }
.job-slider-field .noUi-value[data-value="1"] { transform: translate(0, 50%); }
.job-slider-field .noUi-value[data-value="43200"] { transform: translate(-100%, 50%); }
.noUi-touch-area { position: absolute; min-width: 44px; min-height: 44px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.tagify { width: 100%; min-height: 44px; }
.side-body .docs { font-size: 16px; line-height: 1.65; }
.docs .snippet-pane { padding: 16px; }
.docs .snippet-pane p { margin-bottom: 0; }
.docs pre { margin: 0; max-width: 100%; overflow-x: auto; font-size: 14px; line-height: 1.6; }
.docs pre code { white-space: pre; background: transparent; }
.docs .nav-link { min-height: 44px; }
.legal-copy { max-width: 80ch; margin-inline: auto; line-height: 1.65; overflow-wrap: anywhere; }
.legal-copy h2 { font-size: clamp(24px, 2vw, 32px); line-height: 1.25; margin: 24px 0 16px; }
.about-container { font-size: 16px; }
.about-container h2 { font-size: clamp(24px, 3vw, 40px); line-height: 1.25; }
.about-container h3 { font-size: clamp(18px, 2vw, 26px); line-height: 1.4; }
.about-container .about-image { width: 100%; max-width: 1020px; padding: 0; margin: 24px auto; box-shadow: 0 4px 16px rgba(0, 0, 0, .18); }
.about-image img { display: block; width: 100%; height: auto; }
.about-container p { margin: 0; }
.jobs-workspace .job-actions { visibility: visible !important; }
.job-list-table .job-link input { max-width: calc(100% - 44px); }
.job-actions-dropdown { min-width: 220px; }
.job-actions-dropdown a { min-height: 44px; }
.job-actions .dropdown-toggle { min-width: 44px; min-height: 44px; }
.dt-search input { min-height: 44px; font-size: 16px; }
.modal-body { overflow: auto; max-height: min(65vh, 640px); overflow-wrap: anywhere; }
.modal-title { font-size: 20px; }
.text-align-center { text-align: center; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid #087fa7; outline-offset: 3px; }
@media (min-width: 900px) {
    .site-navigation { display: flex !important; flex: 1; align-items: center; gap: 16px; min-width: 0; }
}
@media (min-width: 1100px) {
    .jobs-workspace .job-list-table th, .jobs-workspace .job-list-table td { padding: 16px 14px; }
    .jobs-workspace .job-list-table td.job-name { max-width: none; }
    .jobs-workspace .add-job-window .col-lg-6 { flex: 0 1 840px; width: 840px; max-width: 100%; }
    .jobs-workspace .add-job-card { padding: 28px; }
}
@media (min-width: 1600px) {
    .jobs-workspace .job-list-table { font-size: 18px; }
    .jobs-workspace .job-list-table td.job-name { width: 28%; }
    .jobs-workspace .job-list-table td.job-link { width: 30%; }
    .jobs-workspace input.job-link { width: calc(100% - 44px); font-size: 16px; }
    .jobs-workspace .job-list-table .period, .jobs-workspace .job-list-table .alert-delay, .jobs-workspace .job-list-table .last-ping { white-space: nowrap; }
    .jobs-workspace .job-actions .dropdown-toggle { padding: 10px 14px; font-size: 16px; }
    .jobs-workspace .add-job-window .form-control, .jobs-workspace .add-job-window .sub-title { font-size: 20px; }
    .jobs-workspace .dt-search input { min-width: 280px; }
}
@media (max-width: 1099px) {
    .content-container > .container-fluid, .top-navigation > .container-fluid { padding-left: 16px; padding-right: 16px; }
    .job-list-table td { padding: 12px 8px; }
}
@media (max-width: 899px) {
    .top-navigation { min-height: 60px; padding: 6px 0; }
    .top-navigation > .container-fluid { gap: 0; }
    .navbar-header { width: 100%; justify-content: space-between; }
    .navbar-header { position: relative; }
    .header-actions { display: flex; align-items: center; gap: 8px; }
    .top-navigation .navbar-logo img { max-height: 36px; }
    .mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px; border: 1px solid #ddd; color: #333; font-size: 20px; }
    .top-navigation .navbar-nav .desktop-notifications { display: none; }
    .mobile-notifications { position: static; }
    .mobile-notifications .notification-toggle { position: relative; width: 44px; height: 44px; padding: 8px; border: 1px solid #ddd; border-radius: 6px; font-size: 18px; }
    .mobile-notifications .notification-toggle::after { display: none; }
    .mobile-notifications .notification-count { position: absolute; top: 2px; right: 2px; margin: 0; padding: 1px 4px; border-radius: 9px; background: #087fa7; color: white; font-size: 11px; line-height: 14px; }
    .mobile-notifications .notifications-dropdown { position: absolute; top: calc(100% + 8px); left: auto; right: 0; width: max-content; min-width: 0; max-width: 100%; max-height: calc(100dvh - 84px); overflow-y: auto; border: 1px solid #ddd; box-shadow: 0 6px 12px rgba(0, 0, 0, .175); }
    .site-navigation { flex-basis: 100%; max-height: calc(100dvh - 68px); overflow-x: hidden; overflow-y: auto; }
    .site-navigation.show { display: flex; flex-direction: column; gap: 12px; padding: 12px 0 6px; }
    .top-navigation .navbar-nav { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
    .top-navigation .navbar-nav > li > a { min-height: 44px; padding: 10px 12px; border-radius: 4px; }
    .navbar-nav > .active > a { border-bottom: 0; background: #edf7fa; }
    .top-navigation .navbar-right { margin-left: 0 !important; border-top: 1px solid #eee; padding-top: 8px; }
    .top-navigation .profile > .dropdown-toggle { white-space: normal; overflow-wrap: anywhere; }
    .top-navigation .navbar-nav .dropdown-menu { position: static; width: 100%; min-width: 0; max-width: 100%; box-shadow: none; margin: 0 0 8px; }
    .top-navigation .navbar-nav .profile .dropdown-menu { width: 100%; }
    .top-navigation .notification-links a { white-space: normal; }
    .app-container .side-body { padding: 20px 0; }
    .side-body > .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
    .side-body h2, .side-body h3 { font-size: 24px; line-height: 1.3; }
    .side-body h3 { font-size: 20px; }
    .card-body, .jobs-workspace .add-job-card { padding: 16px !important; }
    .btn, form input[type="submit"] { min-height: 44px; font-size: 16px; }
    .btn-lg { font-size: 18px; padding: 10px 16px; }
    form label { font-size: 16px; margin-top: 16px; }
    .form-control { height: auto; padding: 10px 12px; }
    .side-body .form-buttons, .job-form-buttons { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 20px; }
    .side-body .form-buttons > div, .job-form-buttons > div { flex: none; padding: 0; margin: 0; text-align: left !important; }
    .side-body .form-buttons .btn, .job-form-buttons .btn { width: 100%; }
    .side-body .form-buttons .alt-action-button > a { display: flex; align-items: center; min-height: 44px; }
    .add-job-window .sub-title { font-size: 16px; }
    #periodSliderValue, #alertDelaySliderValue { font-size: 100%; }
    .job-slider-field .noUi-value { font-size: 11px; }
    .job-slider-field .noUi-value[data-value="30"], .job-slider-field .noUi-value[data-value="720"], .job-slider-field .noUi-value[data-value="10080"] { display: none; }
    .docs .nav-tabs .nav-link { padding: 10px; font-size: 14px; }
    .docs .snippet-pane { padding: 12px; }
    .docs pre { font-size: 13px; }
    .docs .steps { padding-left: 24px; }
    .docs .steps li { margin-bottom: 12px; }
    .about-container h2 { font-size: 24px; }
    .about-container h3 { font-size: 18px; }
    .about-container .about-image { max-width: 420px; }
    .app-footer { margin-top: 8px; line-height: 1.6; }
}
@media (max-width: 1099px) {
    #jobsList > .main-col { padding: 0; }
    #jobsList > .main-col > .card { border: 0; background: transparent; }
    #jobsList .card-body { padding: 0 !important; }
    #jobsList .dt-layout-row { margin: 0 0 12px; }
    #jobsList .dt-layout-cell, #jobsList .dt-search { width: 100%; }
    #jobsList .dt-search input { width: 100%; margin-left: 0; }
    .job-list-table { display: block; width: 100% !important; }
    .job-list-table thead { display: none; }
    .job-list-table tbody { display: grid; gap: 12px; }
    .job-list-table tbody tr { display: grid; grid-template-columns: 36px minmax(0, 1fr) 44px; grid-template-areas: "status name actions" "period period period" "delay delay delay" "last last last" "link link link"; gap: 8px 10px; padding: 14px; background: white; border: 1px solid #ddd; border-radius: 4px; }
    .job-list-table tbody td { display: block; padding: 0; border: 0; background: transparent !important; box-shadow: none !important; min-width: 0; }
    .job-list-table td.job-status { grid-area: status; align-self: start; padding-top: 8px; }
    .job-list-table td.job-name { grid-area: name; max-width: none; overflow-wrap: anywhere; }
    .job-list-table td.job-name > strong > a { display: inline-flex; align-items: center; min-height: 44px; }
    .job-list-table td.job-actions-cell { grid-area: actions; }
    .job-list-table td.period { grid-area: period; }
    .job-list-table td.alert-delay { grid-area: delay; }
    .job-list-table td.last-ping { grid-area: last; text-align: left; }
    .job-list-table td.period, .job-list-table td.alert-delay, .job-list-table td.last-ping { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
    .job-list-table td[data-label]::before { content: attr(data-label); color: #666; }
    .job-list-table td.job-link { grid-area: link; padding-top: 8px; border-top: 1px solid #eee; }
    .job-list-table td.job-link::before { display: block; font-size: 14px; margin-bottom: 4px; }
    .job-list-table td.job-link > small { display: inline; }
    .job-list-table input.job-link { width: calc(100% - 50px); max-width: none; min-height: 44px; font-size: 14px; background: transparent; }
    .job-list-table .copy-tooltip { visibility: visible !important; }
    .copy-tooltip .btn { min-width: 44px; min-height: 44px; }
    .job-actions .btn-group { display: block; }
    .job-actions .dropdown-toggle { padding: 8px; }
    .job-actions .actions-menu-title { display: none; }
    .job-actions i.actions-menu-icon { display: inline-block; }
    .job-actions .dropdown-toggle { width: 44px; height: 44px; }
    .show-job-ping-url { display: list-item; }
    .job-list-table .dt-empty { grid-column: 1 / -1; }
    .modal-dialog { margin: 12px; max-width: calc(100% - 24px); }
    .modal-footer { flex-direction: column; align-items: stretch; }
    .modal-footer .btn { width: 100%; margin: 4px 0; }
}
