/**
* All of the CSS for your admin-specific functionality should be
* included in this file.
*/
.lddfw-text-center {
text-align: center !important;
}
.lddfw_admin_bar {
margin-bottom: 15px;
}
.column-lddfw_driver_claim,
.column-lddfw_driver_availability,
.column-lddfw_driver_account {
text-align: center !important;
}
.lddfw_premium_icon {
cursor: pointer;
vertical-align: bottom;
}
.driver_app {
margin-top: 25px;
}
.driver_app img {
float: left;
margin-right: 10px;
}
.lddfw-text-center a {
transition: none !important;
outline: none !important;
box-shadow: none !important;
}
#lddfw_dates_custom_range,
#lddfw_dates_range_select,
#lddfw_dates_range_submit {
margin-right: 15px;
float: left;
}
#lddfw_dates_range_wrap {
margin-bottom: 15px;
display: inline-block;
width: 100%;
}
.lddfw_order_image {
display: inline-block;
}
body.rtl .driver_app a {
direction: ltr;
display: inline-block;
}
body.rtl .driver_app img {
float: right;
margin-left: 10px;
margin-right: 0px;
}
.lddfw_driver_box .lddfw_line {
width: 100%;
height: 6px;
margin-top: 2px;
}
.lddfw_driver_box {
margin-bottom: 10px;
margin-right: 10px;
border: 1px solid silver;
text-align: left;
width: 100%;
line-height: 28px;
background: #fff;
display: block;
padding: 10px;
box-sizing: border-box;
font-size: 16px;
position: relative;
}
.lddfw_directions-panel-listing {
display: none;
height: 200px;
overflow-y: auto;
margin-top: 10px;
}
.lddfw_driver_box.open .lddfw_directions-panel-listing {
display: block;
}
span.lddfw_point {
margin-left: 0px;
color: #fff;
top: -5px;
font-weight: bold;
font-size: 14px;
}
.lddfw_driver_box.active {
background: rgba(255, 255, 255, 1);
}
.lddfw_driver_box svg {
width: 18px;
color: #2d2d2d;
}
.lddfw_driver_box .col-2.text-center {
width: 50px;
text-align: center;
display: inline-block;
position: relative;
}
.lddfw_total_route {
margin-bottom: 10px;
}
.lddfw_driver_box img {
max-width: 50px;
max-height: 50px;
margin-right: 10px;
min-height: 50px;
}
.lddfw_driver_name {
font-size: 16px;
display: inline-block;
top: -18px;
position: relative;
font-weight: bold;
}
.lddfw_button {
width: 25px;
height: 22px;
float: right;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
position: absolute;
right: 9px;
top: 7px;
}
.lddfw_driver_box.active .lddfw_button {
background-image: url("data:image/svg+xml;utf8,");
}
.lddfw_handle {
width: 18px;
height: 29px;
float: right;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
position: absolute;
top: 36px;
right: 12px;
}
.lddfw_driver_box.open .lddfw_handle {
background-image: url("data:image/svg+xml;utf8,");
}
.lddfw_driver_box .lddfw_tracking {
float: right;
margin-right: 50px;
margin-top: -2px;
}
.lddfw_driver_box .col-10 {
width: 80%;
text-align: left;
display: inline-block;
position: relative;
top: 0;
font-size: 16px;
line-height: 16px;
}
.lddfw_driver_box .col-10.middle {
top: -23px;
}
#lddfw_map123 {
height: 600px;
position: relative;
overflow: hidden;
border: 1px solid silver;
display: inline-block;
}
div#driver-panel {
float: right;
}
.lddfw_track_drivers button {
width: 100%;
}
.lddfw_tracking a:active,
.lddfw_tracking a:focus {
outline: 0;
border: none;
box-shadow: none;
}
#lddfw_map123 {
width: 100%;
}
div#driver-panel {
margin-top: 10px;
width: 100%;
}
.lddfw_track_drivers {
margin-bottom: 10px;
}
.lddfw_premium_feature {
position: relative;
display: inline-block;
}
.lddfw_premium_feature_note h2,
.lddfw_premium_feature_note p {
margin: 0px !important;
color: #000 !important;
}
.lddfw_premium_feature_note h2 {
margin-bottom: 4px !important;
}
/* Premium feature note bubble.
Rendered with position: fixed so it escapes any ancestor with
overflow: hidden (e.g. .lddfw-card, .lddfw-modern-table-wrap, .lddfw-stat-card
rounded wrappers). JS positions it relative to the clicked star on open. */
.lddfw_premium_feature_note {
position: fixed;
width: 250px;
background-color: #fff;
padding: 15px;
text-align: center;
box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px;
top: 0;
left: 0;
/* Above #wpadminbar (~99999) and the driver modal (.lddfw-driver-dialog 100051) so the bubble is visible when opened from the Add/Edit driver dialog. */
z-index: 200000;
border-radius: 6px;
box-sizing: border-box;
}
.lddfw_star_button:focus {
box-shadow: none !important;
}
.lddfw_star_button {
margin-right: 5px;
}
.lddfw_star_button svg {
top: 3px;
position: relative;
}
/* Decorative arrow removed - the bubble is now position: fixed and
dynamically placed either above or below the clicked star, so a
hard-coded arrow location no longer makes sense. */
.lddfw_premium_feature_note:after {
content: none;
}
.lddfw_premium_close {
position: absolute !important;
top: 10px;
right: 10px;
color: #575758 !important;
text-decoration: none !important;
display: inline-block !important;
height: 16px !important;
}
.lddfw_premium_buynow {
display: inline-block !important;
font-weight: 400 !important;
text-align: center !important;
white-space: nowrap !important;
vertical-align: middle !important;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent !important;
padding: 0.375rem 0.75rem !important;
font-size: 1rem !important;
line-height: 1.5 !important;
border-radius: 0.25rem !important;
transition:
color 0.15s ease-in-out,
background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out;
color: #fff !important;
background-color: #28a745 !important;
border-color: #28a745 !important;
text-decoration: none !important;
margin-top: 10px !important;
margin-bottom: 6px !important;
}
.lddfw_premium_buynow:hover {
background-color: #218838 !important;
border-color: #1e7e34 !important;
color: #fff !important;
}
#lddfw_check_google_keys_wrap.lddfw-gtest {
margin-top: 16px;
padding: 20px;
background: #fff;
border: 1px solid #e0e0e1;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.lddfw-gtest-header {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 600;
color: #1d2327;
padding-bottom: 12px;
margin-bottom: 16px;
border-bottom: 1px solid #f0f0f1;
}
.lddfw-gtest-header .dashicons {
color: #28a745;
font-size: 20px;
width: 20px;
height: 20px;
line-height: 20px;
}
.lddfw-gtest-loading {
padding: 14px;
color: #646970;
}
.lddfw-gtest-notice {
padding: 12px 14px;
background: #fcf0f1;
border: 1px solid #f2cfd3;
color: #8a1f11;
border-radius: 6px;
}
.lddfw-gtest-group {
margin-bottom: 18px;
}
.lddfw-gtest-group:last-child {
margin-bottom: 0;
}
.lddfw-gtest-group__title {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}
.lddfw-gtest-group__title .dashicons {
color: #28a745;
font-size: 18px;
width: 18px;
height: 18px;
line-height: 18px;
}
.lddfw-gtest-group__title-text {
font-weight: 600;
color: #1d2327;
font-size: 13px;
}
.lddfw-gtest-group__key {
background: #f6f7f7;
border: 1px solid #e0e0e1;
border-radius: 4px;
padding: 2px 8px;
font-size: 12px;
color: #50575e;
word-break: break-all;
max-width: 100%;
}
.lddfw-gtest-group__body {
background: #fafafa;
border: 1px solid #f0f0f1;
border-radius: 8px;
padding: 4px 12px;
}
.lddfw-gtest-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 4px;
border-bottom: 1px solid #f0f0f1;
}
.lddfw-gtest-row:last-child {
border-bottom: 0;
}
.lddfw-gtest-row__label {
font-weight: 500;
color: #1d2327;
font-size: 13px;
}
.lddfw-gtest-row__badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
white-space: nowrap;
}
.lddfw-gtest-row.is-ok .lddfw-gtest-row__badge {
background: #e6f4ea;
color: #1e7e34;
border: 1px solid #c7e8d1;
}
.lddfw-gtest-row.is-error .lddfw-gtest-row__badge {
background: #fcf0f1;
color: #8a1f11;
border: 1px solid #f2cfd3;
text-transform: none;
letter-spacing: normal;
max-width: 60%;
white-space: normal;
text-align: right;
}
.lddfw-gtest-maps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px;
margin-top: 14px;
}
.lddfw-gtest-map-card {
background: #fff;
border: 1px solid #e0e0e1;
border-radius: 8px;
padding: 12px;
}
.lddfw-gtest-map-card__title {
font-size: 12px;
font-weight: 600;
color: #646970;
text-transform: uppercase;
letter-spacing: 0.4px;
margin-bottom: 8px;
}
.lddfw-gtest-map-card iframe,
.lddfw-gtest-map-card > div {
display: block;
width: 100%;
}
@media (min-width: 1200px) {
#lddfw_map123 {
width: 70%;
}
div#driver-panel {
margin-top: 0px;
}
}
@media (min-width: 1740px) {
#lddfw_map123 {
width: 80%;
}
div#driver-panel {
margin-top: 0px;
}
}
.rtl .lddfw_driver_box {
margin-right: 0px;
direction: ltr;
}
.rtl #lddfw_routes {
text-align: left;
}
.lddfw_delete_variable_button {
position: absolute;
top: -4px;
right: 6px;
background: transparent;
border: none;
cursor: pointer;
font-weight: bold;
font-style: normal;
font-size: 20px;
}
.lddfw_variable_input {
position: relative;
margin-top: 10px;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}
/* Gallery container */
.lddfw-gallery-container {
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 10px;
justify-content: center;
}
/* Image wrapper – 2 columns */
.lddfw-gallery-container a.lddfw_order_image {
display: flex;
justify-content: center;
align-items: center;
width: calc(50% - 16px); /* 2 columns with gap */
height: 100px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
background-color: #f9f9f9;
}
.lddfw-gallery-container a.lddfw_order_image:hover {
transform: scale(1.03);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
/* Images */
.lddfw-gallery-container a.lddfw_order_image img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}
/* SMS CTA Banner */
.lddfw_sms_cta_banner {
position: relative;
background: #fff;
border: 1px solid #c3c4c7;
border-left: 4px solid #28a745;
padding: 20px 24px;
margin: 16px 0;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}
.lddfw_sms_cta_banner h3 {
margin: 0 0 8px;
font-size: 15px;
color: #1d2327;
}
.lddfw_sms_cta_banner p {
margin: 0 0 14px;
color: #50575e;
font-size: 13px;
max-width: 600px;
}
.lddfw_sms_cta_button {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
border: 1px solid transparent;
padding: 6px 16px;
font-size: 13px;
line-height: 1.5;
border-radius: 3px;
color: #fff !important;
background-color: #28a745;
border-color: #28a745;
text-decoration: none;
cursor: pointer;
}
.lddfw_sms_cta_button:hover {
background-color: #218838;
border-color: #1e7e34;
color: #fff !important;
}
.lddfw_banner_dismiss {
position: absolute;
top: 10px;
right: 12px;
background: none;
border: none;
font-size: 20px;
line-height: 1;
color: #787c82;
cursor: pointer;
padding: 0 4px;
}
.lddfw_banner_dismiss:hover {
color: #1d2327;
}
.lddfw_premium_cta_banner {
border-left-color: #2271b1;
}
.lddfw_app_cta_banner {
border-left-color: #8c52ff;
}
.lddfw_app_cta_banner .lddfw_sms_cta_button {
background: #8c52ff;
border-color: #8c52ff;
}
.lddfw_app_cta_banner .lddfw_sms_cta_button:hover,
.lddfw_app_cta_banner .lddfw_sms_cta_button:focus {
background: #6f3dd6;
border-color: #6f3dd6;
color: #fff;
}
.lddfw_app_cta_banner h3 .dashicons {
color: #8c52ff;
vertical-align: middle;
margin-right: 4px;
}
/* ============================================================
Dashboard & Reports page redesign (v2.x)
Card-based layout - KPI stat cards, modern tables, badges.
============================================================ */
/* KPI stat cards grid */
.lddfw-stat-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
margin: 20px 0 24px;
}
.lddfw-stat-card {
background: #fff;
border: 1px solid #e0e0e1;
border-radius: 10px;
padding: 18px 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
display: flex;
align-items: center;
gap: 14px;
transition:
transform 0.15s ease,
box-shadow 0.15s ease;
}
.lddfw-stat-card:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.lddfw-stat-icon {
flex: 0 0 44px;
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #e8f5e9;
color: #28a745;
}
.lddfw-stat-icon .dashicons {
font-size: 22px;
width: 22px;
height: 22px;
line-height: 22px;
}
.lddfw-stat-icon--success {
background: #e8f5e9;
color: #28a745;
}
.lddfw-stat-icon--warning {
background: #fff3e0;
color: #fd7e14;
}
.lddfw-stat-icon--danger {
background: #fdecea;
color: #dc3545;
}
.lddfw-stat-icon--info {
background: #e7f3fb;
color: #2271b1;
}
.lddfw-stat-icon--muted {
background: #f0f0f1;
color: #646970;
}
.lddfw-stat-body {
flex: 1 1 auto;
min-width: 0;
}
.lddfw-stat-value {
display: block;
font-size: 24px;
font-weight: 600;
color: #1d2327;
line-height: 1.1;
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lddfw-stat-label {
display: block;
font-size: 12px;
color: #646970;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Modern table - replacement for bare wp-list-table */
.lddfw-modern-table-wrap {
background: #fff;
border: 1px solid #e0e0e1;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
margin-bottom: 24px;
}
.lddfw-modern-table {
width: 100%;
border-collapse: collapse;
background: #fff;
}
.lddfw-modern-table thead {
background: #1d2327;
}
.lddfw-modern-table thead th {
color: #fff;
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 12px 16px;
text-align: left;
border: none;
}
.lddfw-modern-table tbody td {
padding: 14px 16px;
border-top: 1px solid #f0f0f1;
vertical-align: middle;
color: #2c3338;
}
.lddfw-modern-table tbody tr:hover {
background: #fafbfc;
}
.lddfw-modern-table tbody tr:first-child td {
border-top: none;
}
.lddfw-modern-table .lddfw-text-center,
.lddfw-modern-table th.lddfw-text-center {
text-align: center !important;
}
.lddfw-modern-table tfoot td {
padding: 14px 16px;
background: #f8faf8;
font-weight: 600;
color: #1d2327;
border-top: 2px solid #28a745;
}
.lddfw-modern-table tfoot td a,
.lddfw-modern-table tbody td a {
color: #2271b1;
text-decoration: none;
}
.lddfw-modern-table tfoot td a:hover,
.lddfw-modern-table tbody td a:hover {
color: #135e96;
text-decoration: underline;
}
/* Status badges (colored pills) */
.lddfw-badge {
display: inline-block;
min-width: 28px;
padding: 3px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
line-height: 1.4;
text-align: center;
background: #f0f0f1;
color: #50575e;
text-decoration: none;
}
.lddfw-badge:hover {
opacity: 0.85;
text-decoration: none;
}
.lddfw-badge-success {
background: #e8f5e9;
color: #1e7e34;
}
.lddfw-badge-warning {
background: #fff3e0;
color: #b45f06;
}
.lddfw-badge-danger {
background: #fdecea;
color: #c62828;
}
.lddfw-badge-info {
background: #e7f3fb;
color: #135e96;
}
.lddfw-badge-muted {
background: #f0f0f1;
color: #646970;
}
.lddfw-badge-neutral {
background: #eef0f2;
color: #2c3338;
}
/* Driver avatar (initials circle) */
.lddfw-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: #28a745;
color: #fff;
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
vertical-align: middle;
margin-right: 10px;
flex: 0 0 34px;
}
.lddfw-avatar-name {
display: inline-flex;
align-items: center;
gap: 0;
}
/* Palette rotation for driver avatars (deterministic via %8) */
.lddfw-avatar-c0 {
background: #28a745;
}
.lddfw-avatar-c1 {
background: #2271b1;
}
.lddfw-avatar-c2 {
background: #9c27b0;
}
.lddfw-avatar-c3 {
background: #ff9800;
}
.lddfw-avatar-c4 {
background: #009688;
}
.lddfw-avatar-c5 {
background: #e91e63;
}
.lddfw-avatar-c6 {
background: #3f51b5;
}
.lddfw-avatar-c7 {
background: #795548;
}
.lddfw-avatar--photo {
background: transparent;
overflow: hidden;
}
.lddfw-avatar--photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 50%;
}
/* Section heading for grouped dashboard widgets */
.lddfw-section-title {
font-size: 15px;
font-weight: 600;
color: #1d2327;
margin: 15px 0 15px;
display: flex;
align-items: center;
gap: 8px;
}
.lddfw-section-title .dashicons {
color: #28a745;
}
/* Filter bar - Reports date range */
.lddfw-filter-bar {
background: #fff;
border: 1px solid #e0e0e1;
border-radius: 10px;
padding: 16px 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
margin-bottom: 20px;
}
.lddfw-filter-bar form {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.lddfw-filter-bar #lddfw_dates_range_select,
.lddfw-filter-bar #lddfw_dates_custom_range,
.lddfw-filter-bar #lddfw_dates_range_submit {
float: none !important;
margin-right: 0 !important;
}
.lddfw-filter-bar label,
.lddfw-filter-bar #lddfw_dates_range_select {
font-weight: 500;
color: #1d2327;
display: inline-flex;
align-items: center;
gap: 8px;
}
.lddfw-filter-bar-range-label {
margin-top: 10px;
font-size: 13px;
color: #50575e;
width: 100%;
flex-basis: 100%;
}
.lddfw-filter-bar-range-label b {
color: #1d2327;
}
/* Export CSV button */
.lddfw-export-btn {
display: inline-flex !important;
align-items: center;
gap: 6px;
background: #fff !important;
border: 1px solid #28a745 !important;
color: #28a745 !important;
padding: 4px 14px !important;
border-radius: 4px !important;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition:
background 0.15s ease,
color 0.15s ease;
}
.lddfw-export-btn:hover,
.lddfw-export-btn:focus {
background: #28a745 !important;
color: #fff !important;
border-color: #28a745 !important;
box-shadow: none !important;
outline: none !important;
}
.lddfw-export-btn .dashicons {
font-size: 16px;
width: 16px;
height: 16px;
line-height: 16px;
}
/* Empty state inside modern tables */
.lddfw-empty-row td {
text-align: center !important;
color: #646970;
padding: 32px 16px !important;
font-style: italic;
}
/* Page section spacing between redesigned blocks */
.lddfw-page-section {
margin-bottom: 28px;
}
/* Two-column grid shell for narrow dashboard panels.
Collapses to a single column on narrow admin widths. */
.lddfw-dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
gap: 20px;
margin-bottom: 8px;
}
.lddfw-dashboard-grid__col {
min-width: 0;
}
.lddfw-dashboard-grid__col > .lddfw-page-section,
.lddfw-dashboard-grid__col > .lddfw-modern-table-wrap,
.lddfw-dashboard-grid__col > .lddfw-reviews-feed {
margin-bottom: 0;
}
/* Section title bar - title on the left, context actions wrapping underneath
on narrow screens. Used by drivers_summary_card() so the "Add new driver /
Manage drivers / View applications" buttons stop breaking awkwardly on
phones. */
.lddfw-section-title-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
}
.lddfw-section-title-bar .lddfw-section-title,
.lddfw-section-title--inline {
margin: 0;
}
.lddfw-section-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.lddfw-section-actions .page-title-action {
margin: 0;
}
@media (max-width: 782px) {
.lddfw-section-title-bar {
flex-direction: column;
align-items: flex-start;
}
.lddfw-section-actions {
width: 100%;
}
.lddfw-section-actions .page-title-action {
flex: 1 1 auto;
text-align: center;
}
}
/* =========================================================================
Driver panel + Driver mobile app cards
-------------------------------------------------------------------------
These two sections render side-by-side in a 2-column grid on the Dashboard
(`.lddfw-dashboard-grid--apps`) and are intentionally built as a matched
pair - same card chrome, same internal rhythm (top action row + QR panel
below), so they look visually balanced at a glance.
========================================================================= */
/* The grid variant used for the apps pair - tighter min-col so two cards
actually stay side-by-side at typical dashboard widths, yet collapse
gracefully on tablet. */
.lddfw-dashboard-grid--apps {
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
align-items: stretch;
margin-top: 8px;
}
.lddfw-dashboard-grid--apps .lddfw-dashboard-grid__col {
display: flex;
flex-direction: column;
}
/* `--card` variant turns a `.lddfw-page-section` into a full-height flex
container so the inner card stretches to match its grid neighbour. */
.lddfw-page-section--card {
display: flex;
flex-direction: column;
height: 100%;
margin-bottom: 0;
}
.lddfw-page-section--card > .lddfw-section-title {
margin-bottom: 15px;
}
/* Card chrome - clean, rounded, subtle shadow. Equal heights inside the
grid are achieved by making the card a column flexbox; the QR panel
then gets `flex: 1` so description + codes fill the remaining space.
Double-class selector used intentionally: the legacy `.lddfw-qr-card`
rule further down in this file sets `display: flex; align-items: center`
for the old `driver_panel_qr_widget()` markup - bumping specificity here
keeps that rule working for backward compatibility while our new
matched-card layout takes priority. */
.lddfw-qr-card.lddfw-quicklinks-card {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0;
background: #fff;
border: 1px solid #e0e0e1;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
padding: 18px 20px;
flex: 1 1 auto;
}
/* Top action row (buttons or official store badges) */
.lddfw-quicklinks {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.lddfw-quicklinks--actions {
justify-content: flex-start;
}
.lddfw-quicklink {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 14px;
min-height: 36px;
border: 1px solid #dcdcde;
border-radius: 6px;
background: #f6f7f7;
color: #1d2327;
font-size: 13px;
font-weight: 500;
line-height: 1.4;
text-decoration: none;
cursor: pointer;
transition:
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease,
box-shadow 0.15s ease;
}
.lddfw-quicklink:hover,
.lddfw-quicklink:focus {
background: #fff;
border-color: #8c8f94;
color: #000;
text-decoration: none;
outline: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.lddfw-quicklink--primary,
.lddfw-quicklink--primary:visited {
background: #2271b1;
border-color: #2271b1;
color: #fff;
}
.lddfw-quicklink--primary:hover,
.lddfw-quicklink--primary:focus {
background: #135e96;
border-color: #135e96;
color: #fff;
}
.lddfw-quicklink__icon {
flex: 0 0 auto;
display: block;
}
/* Hidden readonly input used by the .lddfw-qr-copy handler. Kept in the
DOM but visually removed so the row stays compact. */
.lddfw-quicklinks .lddfw-qr-card__url {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
/* =========================================================================
Store badges (Apple App Store + Google Play)
-------------------------------------------------------------------------
Plain image links - no background / border / padding around the badge so
the official brand art renders pixel-accurate. A small hover/focus ring
keeps the click target discoverable.
========================================================================= */
.lddfw-app-badges {
gap: 10px;
}
.lddfw-app-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
background: transparent;
border-radius: 8px;
text-decoration: none;
transition:
transform 0.15s ease,
box-shadow 0.15s ease,
opacity 0.15s ease;
line-height: 0;
}
.lddfw-app-badge img {
display: block;
height: 44px;
width: auto;
border-radius: 6px;
}
.lddfw-app-badge:hover,
.lddfw-app-badge:focus {
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
outline: none;
opacity: 0.95;
}
.lddfw-app-badge:focus-visible {
box-shadow: 0 0 0 2px #2271b1;
}
/* =========================================================================
QR panel beneath the action row
-------------------------------------------------------------------------
One shared layout for both the single QR (Driver panel) and the multi-QR
(Driver mobile app) variants - QR codes sit at the top of the panel with
a caption underneath, and the description reads below / next to them.
========================================================================= */
.lddfw-qr-panel {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #f0f0f1;
display: flex;
flex-direction: column;
gap: 14px;
flex: 1 1 auto;
}
.lddfw-qr-panel__codes {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: flex-start;
}
.lddfw-qr-panel__code {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 10px;
background: #fafafa;
border: 1px solid #eaeaea;
border-radius: 10px;
}
.lddfw-qr-panel__code .lddfw-qr-card__image {
width: 140px;
height: 140px;
background: #fff;
border-radius: 6px;
}
.lddfw-qr-panel__code .lddfw-qr-card__image svg {
display: block;
max-width: 100%;
height: auto;
}
.lddfw-qr-panel__caption {
font-size: 11px;
color: #50575e;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.lddfw-qr-panel .description {
margin: 0;
color: #50575e;
font-size: 13px;
line-height: 1.5;
}
/* RTL overrides */
body.rtl .lddfw-avatar {
margin-right: 0;
margin-left: 10px;
}
body.rtl .lddfw-modern-table thead th,
body.rtl .lddfw-modern-table tbody td,
body.rtl .lddfw-modern-table tfoot td {
text-align: right;
}
/* Responsive tweak */
@media (max-width: 782px) {
.lddfw-stat-cards {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
}
.lddfw-stat-card {
padding: 14px 14px;
}
.lddfw-stat-value {
font-size: 20px;
}
.lddfw-modern-table thead th,
.lddfw-modern-table tbody td,
.lddfw-modern-table tfoot td {
padding: 10px 10px;
}
}
/* ============================================================
Dashboard Monitoring Widgets (v2.3.x)
Stuck alert, health check, earnings, payments, reviews feed,
delta indicators.
============================================================ */
/* Stuck Orders Alert - red banner */
.lddfw-stuck-alert {
display: flex;
align-items: center;
gap: 14px;
background: linear-gradient(90deg, #fdecea 0%, #fff5f4 100%);
border: 1px solid rgba(220, 53, 69, 0.35);
border-left: 4px solid #dc3545;
border-radius: 8px;
padding: 14px 18px;
margin: 20px 0;
box-shadow: 0 1px 3px rgba(220, 53, 69, 0.08);
}
.lddfw-stuck-alert--warn {
background: linear-gradient(90deg, #fff3e0 0%, #fff9f1 100%);
border-color: rgba(253, 126, 20, 0.35);
border-left-color: #fd7e14;
box-shadow: 0 1px 3px rgba(253, 126, 20, 0.08);
}
.lddfw-orphan-orders-notice {
margin-top: 12px;
}
.lddfw-stuck-alert-icon {
flex: 0 0 32px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
color: #dc3545;
}
.lddfw-stuck-alert--warn .lddfw-stuck-alert-icon {
color: #fd7e14;
}
.lddfw-stuck-alert-icon .dashicons {
font-size: 24px;
width: 24px;
height: 24px;
line-height: 24px;
}
.lddfw-stuck-alert-body {
flex: 1 1 auto;
min-width: 0;
}
.lddfw-stuck-alert-title {
display: block;
font-weight: 600;
font-size: 14px;
color: #1d2327;
margin-bottom: 2px;
}
.lddfw-stuck-alert-meta {
display: block;
font-size: 13px;
color: #50575e;
}
.lddfw-stuck-alert-meta a {
color: #c62828;
text-decoration: none;
font-weight: 500;
}
.lddfw-stuck-alert-meta a:hover {
text-decoration: underline;
}
.lddfw-stuck-alert-meta .lddfw-stuck-sep {
margin: 0 8px;
color: #c9c9cc;
}
/* Plugin Health Check card */
.lddfw-health-check {
background: #fff;
border: 1px solid #e0e0e1;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
margin-bottom: 24px;
overflow: hidden;
}
.lddfw-health-check summary {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
cursor: pointer;
font-weight: 600;
color: #1d2327;
list-style: none;
user-select: none;
background: #fafbfc;
border-bottom: 1px solid transparent;
transition: background 0.15s ease;
}
.lddfw-health-check summary::-webkit-details-marker {
display: none;
}
.lddfw-health-check summary:hover {
background: #f4f6f8;
}
.lddfw-health-check[open] summary {
border-bottom-color: #e0e0e1;
}
.lddfw-health-check-summary-badge {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
padding: 3px 10px;
border-radius: 12px;
}
.lddfw-health-check-summary-badge--ok {
background: #e8f5e9;
color: #1e7e34;
}
.lddfw-health-check-summary-badge--warn {
background: #fff3e0;
color: #b45f06;
}
.lddfw-health-check-summary-badge--fail {
background: #fdecea;
color: #c62828;
}
.lddfw-health-check-body {
padding: 4px 0;
}
.lddfw-health-check-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 18px;
border-top: 1px solid #f4f6f8;
font-size: 13px;
color: #2c3338;
}
.lddfw-health-check-row:first-child {
border-top: none;
}
.lddfw-health-check-icon {
flex: 0 0 20px;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.lddfw-health-check-icon .dashicons {
font-size: 18px;
width: 18px;
height: 18px;
line-height: 18px;
}
.lddfw-health-check-icon--ok {
color: #28a745;
}
.lddfw-health-check-icon--warn {
color: #fd7e14;
}
.lddfw-health-check-icon--fail {
color: #dc3545;
}
.lddfw-health-check-label {
flex: 1 1 auto;
min-width: 0;
}
.lddfw-health-check-fix-link {
text-decoration: none;
font-size: 12px;
color: #2271b1;
white-space: nowrap;
}
.lddfw-health-check-fix-link:hover {
text-decoration: underline;
}
/* Payment Method Breakdown - compact table */
.lddfw-payments-table .lddfw-modern-table-wrap {
margin-bottom: 0;
}
.lddfw-payments-table .lddfw-modern-table tbody td:first-child {
font-weight: 500;
}
.lddfw-payments-table .lddfw-modern-table tbody td {
padding: 10px 16px;
}
/* Recent Reviews Feed card chrome (title now sits in outer .lddfw-page-section). */
.lddfw-reviews-feed {
background: #fff;
border: 1px solid #e0e0e1;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
overflow: hidden;
}
.lddfw-page-section > .lddfw-reviews-feed {
margin-bottom: 0;
}
.lddfw-reviews-feed-empty {
padding: 28px 18px;
text-align: center;
color: #646970;
font-style: italic;
}
.lddfw-review-item {
display: flex;
gap: 14px;
padding: 14px 18px;
border-top: 1px solid #f4f6f8;
border-left: 3px solid transparent;
background: #fff;
transition: background 0.15s ease;
}
.lddfw-review-item:hover {
background: #fafbfc;
}
.lddfw-review-item--low {
border-left-color: #dc3545;
background: linear-gradient(90deg, #fff5f5 0%, #fff 60%);
}
.lddfw-review-item-meta {
flex: 0 0 auto;
min-width: 140px;
}
.lddfw-review-item-driver {
font-weight: 600;
color: #1d2327;
font-size: 13px;
display: block;
margin-bottom: 2px;
}
.lddfw-review-item-rating {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: #50575e;
margin-bottom: 4px;
}
.lddfw-review-item-rating-stars {
color: #f5a623;
letter-spacing: 1px;
}
.lddfw-review-item-ago {
display: block;
font-size: 11px;
color: #8c8f94;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.lddfw-review-item-body {
flex: 1 1 auto;
min-width: 0;
}
.lddfw-review-item-comment {
color: #2c3338;
font-size: 13px;
line-height: 1.55;
margin-bottom: 6px;
font-style: italic;
overflow-wrap: anywhere;
}
.lddfw-review-item-comment-empty {
color: #8c8f94;
font-style: italic;
}
.lddfw-review-item-order {
font-size: 12px;
color: #2271b1;
text-decoration: none;
}
.lddfw-review-item-order:hover {
text-decoration: underline;
}
.lddfw-review-item-attention {
display: inline-block;
margin-left: 8px;
padding: 1px 8px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
background: #dc3545;
color: #fff;
border-radius: 10px;
vertical-align: middle;
}
.lddfw-reviews-feed-footer {
padding: 10px 18px;
background: #fafbfc;
border-top: 1px solid #e0e0e1;
text-align: right;
}
.lddfw-reviews-feed-footer a {
font-size: 12px;
color: #2271b1;
text-decoration: none;
}
.lddfw-reviews-feed-footer a:hover {
text-decoration: underline;
}
/* Delta indicators (today vs yesterday) */
.lddfw-delta {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: 11px;
font-weight: 600;
margin-left: 6px;
padding: 1px 6px;
border-radius: 8px;
line-height: 1.4;
vertical-align: middle;
}
.lddfw-delta--up {
background: #e8f5e9;
color: #1e7e34;
}
.lddfw-delta--down {
background: #fdecea;
color: #c62828;
}
.lddfw-delta--same {
background: #f0f0f1;
color: #646970;
}
.lddfw-delta--new {
background: #e7f3fb;
color: #135e96;
}
/* RTL tweaks for widgets */
body.rtl .lddfw-stuck-alert {
border-left: 1px solid rgba(220, 53, 69, 0.35);
border-right: 4px solid #dc3545;
}
body.rtl .lddfw-stuck-alert--warn {
border-right-color: #fd7e14;
}
body.rtl .lddfw-review-item {
border-left: none;
border-right: 3px solid transparent;
}
body.rtl .lddfw-review-item--low {
border-right-color: #dc3545;
background: linear-gradient(-90deg, #fff5f5 0%, #fff 60%);
}
body.rtl .lddfw-health-check-summary-badge {
margin-left: 0;
margin-right: auto;
}
body.rtl .lddfw-review-item-attention {
margin-left: 0;
margin-right: 8px;
}
body.rtl .lddfw-delta {
margin-left: 0;
margin-right: 6px;
}
body.rtl .lddfw-reviews-feed-footer {
text-align: left;
}
@media (max-width: 782px) {
.lddfw-review-item {
flex-wrap: wrap;
gap: 6px;
}
.lddfw-review-item .lddfw-avatar {
width: 28px;
height: 28px;
flex: 0 0 28px;
font-size: 11px;
}
.lddfw-review-item-meta {
flex: 1 1 0;
min-width: 0;
}
.lddfw-review-item-body {
flex-basis: 100%;
}
.lddfw-stuck-alert {
flex-wrap: wrap;
}
.lddfw-dashboard-grid--apps {
grid-template-columns: 1fr;
}
.lddfw-quicklinks-card {
padding: 14px 14px;
}
.lddfw-quicklinks--actions {
flex-direction: column;
align-items: stretch;
}
.lddfw-quicklinks--actions .lddfw-quicklink {
padding: 10px 14px;
min-height: 40px;
}
.lddfw-app-badges {
justify-content: center;
gap: 10px;
}
.lddfw-app-badge img {
height: 42px;
}
.lddfw-qr-panel {
align-items: center;
text-align: center;
}
.lddfw-qr-panel__codes {
justify-content: center;
gap: 16px;
width: 100%;
}
.lddfw-qr-card {
flex-direction: column;
align-items: stretch;
text-align: center;
}
.lddfw-qr-card__image {
margin: 0 auto 12px;
}
.lddfw-broadcast__row {
flex-direction: column;
align-items: flex-start;
}
.lddfw-broadcast__row > label:first-child {
margin-bottom: 6px;
}
}
/* =========================================================================
Plan 4 - Dashboard Operational Tools
========================================================================= */
/* Getting Started Checklist */
.lddfw-checklist {
background: #fff;
border: 1px solid #dcdcde;
border-left: 4px solid #2271b1;
border-radius: 6px;
padding: 16px 20px;
margin: 16px 0 24px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.lddfw-checklist__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.lddfw-checklist__header h2 {
margin: 0;
font-size: 15px;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
}
.lddfw-checklist__header h2 .dashicons {
color: #2271b1;
}
.lddfw-checklist__dismiss {
background: none;
border: none;
cursor: pointer;
color: #666;
padding: 4px;
}
.lddfw-checklist__dismiss:hover {
color: #111;
}
.lddfw-checklist__items {
list-style: none;
margin: 0 0 12px;
padding: 0;
}
.lddfw-checklist__item {
display: flex;
align-items: center;
padding: 6px 0;
border-bottom: 1px dashed #f0f0f1;
font-size: 13px;
}
.lddfw-checklist__item:last-child {
border-bottom: none;
}
.lddfw-checklist__item .dashicons {
width: 20px;
height: 20px;
font-size: 18px;
margin-right: 8px;
}
.lddfw-checklist__item.is-done .dashicons {
color: #2e8540;
}
.lddfw-checklist__item.is-done .lddfw-checklist__label {
text-decoration: line-through;
color: #777;
}
.lddfw-checklist__item.is-pending .dashicons {
color: #bbb;
}
.lddfw-checklist__fix {
margin-left: auto;
font-size: 12px;
text-decoration: none;
}
.lddfw-checklist__progress {
display: flex;
align-items: center;
gap: 10px;
margin-top: 8px;
}
.lddfw-progress-bar {
flex: 1;
height: 6px;
background: #eee;
border-radius: 3px;
overflow: hidden;
}
.lddfw-progress-bar__fill {
height: 100%;
background: #2271b1;
transition: width 0.25s ease;
}
.lddfw-checklist__count {
font-size: 12px;
color: #555;
white-space: nowrap;
}
/* Driver performance badge chips */
.lddfw-driver-badge {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 8px;
padding: 2px 8px;
font-size: 11px;
font-weight: 600;
border-radius: 999px;
vertical-align: middle;
line-height: 1.6;
}
.lddfw-driver-badge .dashicons {
width: 14px;
height: 14px;
font-size: 13px;
}
.lddfw-driver-badge--success {
background: #e6f7ea;
color: #2e8540;
}
.lddfw-driver-badge--warning {
background: #fff4cc;
color: #8a6d00;
}
.lddfw-driver-badge--info {
background: #e0f2ff;
color: #125e92;
}
.lddfw-driver-badge--neutral {
background: #f0f0f1;
color: #333;
}
/* Driver panel QR card */
.lddfw-qr-card {
display: flex;
align-items: center;
gap: 20px;
background: #fff;
border: 1px solid #dcdcde;
border-radius: 6px;
padding: 18px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.lddfw-qr-card__image {
flex-shrink: 0;
width: 180px;
height: 180px;
display: flex;
align-items: center;
justify-content: center;
background: #f6f7f7;
border: 1px solid #e0e0e0;
border-radius: 4px;
}
.lddfw-qr-card__image svg {
display: block;
max-width: 100%;
height: auto;
}
.lddfw-qr-card__info {
flex: 1;
min-width: 0;
}
.lddfw-qr-card__label {
margin: 0 0 8px;
font-weight: 600;
font-size: 14px;
}
.lddfw-qr-card__url {
width: 100%;
max-width: 420px;
margin-bottom: 10px;
padding: 6px 8px;
font-family: Menlo, Consolas, monospace;
font-size: 12px;
}
.lddfw-qr-card__actions {
margin-bottom: 6px;
}
/* Broadcast widget */
.lddfw-broadcast {
background: #fff;
border: 1px solid #dcdcde;
border-radius: 6px;
padding: 18px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.lddfw-broadcast--disabled {
padding: 14px 18px;
color: #555;
}
.lddfw-broadcast__row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.lddfw-broadcast__row > label:first-child {
min-width: 100px;
font-weight: 600;
font-size: 13px;
}
.lddfw-broadcast__row label {
font-size: 13px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.lddfw-broadcast__row textarea {
width: 100%;
max-width: 640px;
font-family: inherit;
font-size: 13px;
}
.lddfw-broadcast__counter {
font-size: 12px;
color: #555;
}
.lddfw-broadcast__counter .lddfw-bc-over {
color: #b32d2e;
font-weight: 600;
}
.lddfw-broadcast__actions {
margin-top: 8px;
display: flex;
align-items: center;
gap: 10px;
}
.lddfw-broadcast__result {
margin-top: 12px;
}
.lddfw-broadcast__result .notice {
margin: 0;
padding: 8px 12px;
}
.lddfw-bc-errors {
margin: 8px 0 0 18px;
font-size: 12px;
color: #b32d2e;
}
/* =========================================================================
Plan 2 - Reports tabs, trends chart, failure reasons, performance rows
========================================================================= */
/* Reports tab nav - tweaks on top of WP's default nav-tab-wrapper. */
.lddfw-reports-nav {
margin: 14px 0 18px;
padding-left: 0;
border-bottom: 1px solid #c3c4c7;
}
.lddfw-reports-nav .nav-tab {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 500;
padding: 8px 14px;
}
.lddfw-reports-nav .nav-tab .dashicons {
font-size: 16px;
width: 16px;
height: 16px;
line-height: 1;
}
.lddfw-reports-nav .nav-tab-active {
box-shadow: inset 0 -3px 0 #2271b1;
background: #fff;
color: #2271b1;
}
.lddfw-subsection-title {
font-size: 14px;
font-weight: 600;
color: #1d2327;
margin: 24px 0 10px;
display: flex;
align-items: center;
gap: 6px;
}
.lddfw-empty-msg {
color: #646970;
font-style: italic;
padding: 16px;
margin: 0;
}
.lddfw-muted {
color: #a7aaad;
}
.lddfw-refund-amount {
color: #b32d2e;
font-weight: 500;
}
/* Pure-CSS daily trends bar chart. */
.lddfw-bar-chart {
background: #fff;
border: 1px solid #e0e3e6;
border-radius: 8px;
padding: 18px 14px 14px;
margin: 14px 0 18px;
display: flex;
align-items: flex-end;
gap: 6px;
overflow-x: auto;
min-height: 210px;
}
.lddfw-bar-chart__col {
flex: 1 1 28px;
min-width: 28px;
max-width: 80px;
height: 180px;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
cursor: default;
}
.lddfw-bar-chart__fill {
width: 72%;
background: linear-gradient(180deg, #2271b1 0%, #1e629a 100%);
border-radius: 4px 4px 0 0;
transition: opacity 0.15s ease;
min-height: 2px;
}
.lddfw-bar-chart__col:hover .lddfw-bar-chart__fill {
opacity: 0.85;
background: linear-gradient(180deg, #2e9fff 0%, #2271b1 100%);
}
.lddfw-bar-chart__count {
position: absolute;
top: -18px;
font-size: 11px;
font-weight: 600;
color: #1d2327;
opacity: 0;
transition: opacity 0.15s ease;
}
.lddfw-bar-chart__col:hover .lddfw-bar-chart__count {
opacity: 1;
}
.lddfw-bar-chart__label {
position: absolute;
bottom: -22px;
font-size: 11px;
color: #646970;
white-space: nowrap;
transform: translateY(0);
}
/* Failure reason breakdown bars. */
.lddfw-reason-bars {
background: #fff;
border: 1px solid #e0e3e6;
border-radius: 8px;
padding: 14px 18px;
}
.lddfw-reason-bar {
display: grid;
grid-template-columns: 200px 1fr 100px;
align-items: center;
gap: 14px;
margin-bottom: 10px;
}
.lddfw-reason-bar:last-child {
margin-bottom: 0;
}
.lddfw-reason-bar__label {
font-size: 13px;
color: #1d2327;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lddfw-reason-bar__track {
position: relative;
height: 14px;
background: #f0f2f4;
border-radius: 7px;
overflow: hidden;
}
.lddfw-reason-bar__fill {
height: 100%;
background: linear-gradient(90deg, #d63638 0%, #b32d2e 100%);
border-radius: 7px;
min-width: 2px;
}
.lddfw-reason-bar__count {
font-size: 13px;
font-weight: 600;
color: #1d2327;
text-align: right;
}
.lddfw-reason-bar__pct {
font-weight: 400;
color: #646970;
font-size: 12px;
}
/* Driver performance row - left border tinted by success rate. */
.lddfw-perf-row--green td:first-child {
box-shadow: inset 4px 0 0 #00a32a;
}
.lddfw-perf-row--amber td:first-child {
box-shadow: inset 4px 0 0 #dba617;
}
.lddfw-perf-row--red td:first-child {
box-shadow: inset 4px 0 0 #d63638;
}
/* Rating chip - color-coded emoji + numeric score. */
.lddfw-rating-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
line-height: 1.5;
background: #f0f2f4;
color: #1d2327;
}
.lddfw-rating-chip--excellent {
background: #e6f4ea;
color: #0a6b2a;
}
.lddfw-rating-chip--good {
background: #e5f3ff;
color: #1e5aa4;
}
.lddfw-rating-chip--neutral {
background: #fef6e2;
color: #735200;
}
.lddfw-rating-chip--bad {
background: #fdeaea;
color: #9a2a2a;
}
.lddfw-rating-chip--awful {
background: #f9d6d6;
color: #7a1414;
}
/* Review item inside the Ratings tab. */
.lddfw-reviews-feed {
background: #fff;
border: 1px solid #e0e3e6;
border-radius: 8px;
padding: 6px 0;
}
.lddfw-review-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 18px;
border-bottom: 1px solid #f0f2f4;
}
.lddfw-review-item:last-child {
border-bottom: 0;
}
.lddfw-review-item.is-bad {
border-left: 3px solid #d63638;
background: #fff8f8;
}
.lddfw-review-item__content {
flex: 1 1 0;
min-width: 0;
}
.lddfw-review-item__head {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
}
.lddfw-review-item__date {
color: #646970;
font-size: 12px;
margin-left: auto;
}
.lddfw-review-item__link {
font-size: 12px;
text-decoration: none;
}
.lddfw-review-item__body {
margin-top: 6px;
color: #3c434a;
font-size: 13px;
line-height: 1.5;
}
/* Failed orders collapsible. */
.lddfw-failed-orders-toggle {
margin-top: 18px;
}
.lddfw-failed-orders-toggle details {
background: #fff;
border: 1px solid #e0e3e6;
border-radius: 8px;
padding: 4px 12px;
}
.lddfw-failed-orders-toggle summary {
cursor: pointer;
padding: 8px 0;
font-weight: 600;
color: #1d2327;
list-style: none;
display: flex;
align-items: center;
gap: 6px;
}
.lddfw-failed-orders-toggle summary::-webkit-details-marker {
display: none;
}
.lddfw-failed-orders-toggle summary::after {
content: "\f347";
font-family: dashicons;
margin-left: auto;
transition: transform 0.15s ease;
}
.lddfw-failed-orders-toggle details[open] summary::after {
transform: rotate(180deg);
}
.lddfw-failed-orders-toggle details[open] summary {
border-bottom: 1px solid #f0f2f4;
margin-bottom: 8px;
}
/* RTL overrides. */
body.rtl .lddfw-perf-row--green td:first-child,
body.rtl .lddfw-perf-row--amber td:first-child,
body.rtl .lddfw-perf-row--red td:first-child {
box-shadow: inset -4px 0 0 currentColor;
}
body.rtl .lddfw-perf-row--green td:first-child {
box-shadow: inset -4px 0 0 #00a32a;
}
body.rtl .lddfw-perf-row--amber td:first-child {
box-shadow: inset -4px 0 0 #dba617;
}
body.rtl .lddfw-perf-row--red td:first-child {
box-shadow: inset -4px 0 0 #d63638;
}
body.rtl .lddfw-review-item.is-bad {
border-left: 0;
border-right: 3px solid #d63638;
}
body.rtl .lddfw-review-item__date {
margin-left: 0;
margin-right: auto;
}
body.rtl .lddfw-failed-orders-toggle summary::after {
margin-left: 0;
margin-right: auto;
}
body.rtl .lddfw-reason-bar__fill {
background: linear-gradient(-90deg, #d63638 0%, #b32d2e 100%);
}
/* Responsive tweaks. */
@media (max-width: 782px) {
.lddfw-reports-nav .nav-tab {
padding: 6px 10px;
font-size: 12px;
}
.lddfw-reports-nav .nav-tab .dashicons {
display: none;
}
.lddfw-bar-chart {
min-height: 180px;
padding: 18px 8px 10px;
}
.lddfw-bar-chart__col {
min-width: 22px;
height: 140px;
}
.lddfw-bar-chart__label {
font-size: 10px;
}
.lddfw-reason-bar {
grid-template-columns: 1fr;
gap: 4px;
}
.lddfw-reason-bar__count {
text-align: left;
}
}
/* =========================================================================
* Drivers & Applications admin page
* ========================================================================= */
.lddfw-drivers-page .lddfw-drivers-nav {
margin-bottom: 16px;
}
.lddfw-drivers-page .lddfw-drivers-nav .dashicons {
margin-top: 3px;
}
.lddfw-drivers-page .lddfw-tab-badge {
display: inline-block;
min-width: 18px;
height: 18px;
padding: 0 6px;
margin-left: 6px;
background: #d63638;
color: #fff;
border-radius: 9px;
font-size: 11px;
line-height: 18px;
font-weight: 600;
text-align: center;
vertical-align: middle;
}
/* Free build: premium upsell cards (Applications tab, Routes screen) - lddfw_premium_feature_notice_content() + CTA. */
.lddfw-drivers-page .lddfw-applications-premium-gate,
.lddfw-routes-wrap .lddfw-routes-premium-gate {
margin: 8px 0 24px;
padding: 22px 26px 24px;
background: #fff;
border: 1px solid #c3c4c7;
border-left-width: 4px;
border-left-color: #2271b1;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
box-sizing: border-box;
}
.lddfw-drivers-page
.lddfw-applications-premium-gate
.lddfw_premium-feature-content
.premium_feature_title
h2,
.lddfw-drivers-page
.lddfw-applications-premium-gate
.lddfw_premium-feature-content
h2,
.lddfw-routes-wrap
.lddfw-routes-premium-gate
.lddfw_premium-feature-content
.premium_feature_title
h2,
.lddfw-routes-wrap
.lddfw-routes-premium-gate
.lddfw_premium-feature-content
h2 {
margin: 0 0 8px;
font-size: 1.3em;
line-height: 1.25;
color: #1d2327;
}
.lddfw-drivers-page
.lddfw-applications-premium-gate
.lddfw_premium-feature-content
> p,
.lddfw-routes-wrap
.lddfw-routes-premium-gate
.lddfw_premium-feature-content
> p {
margin: 0 0 10px;
color: #50575e;
}
.lddfw-drivers-page .lddfw-applications-premium-gate .lddfw_content-subtitle,
.lddfw-routes-wrap .lddfw-routes-premium-gate .lddfw_content-subtitle {
margin: 14px 0 8px;
font-weight: 600;
color: #1d2327;
}
.lddfw-drivers-page
.lddfw-applications-premium-gate
.lddfw_premium-feature-content
p
+ p,
.lddfw-routes-wrap
.lddfw-routes-premium-gate
.lddfw_premium-feature-content
p
+ p {
margin-top: 8px;
}
.lddfw-drivers-page
.lddfw-applications-premium-gate
.lddfw_premium-feature-content
svg,
.lddfw-routes-wrap
.lddfw-routes-premium-gate
.lddfw_premium-feature-content
svg {
vertical-align: -4px;
margin-right: 4px;
}
.lddfw-drivers-page .lddfw-applications-premium-gate__cta,
.lddfw-routes-wrap .lddfw-routes-premium-gate__cta {
margin: 18px 0 0;
padding-top: 4px;
}
.lddfw-routes-wrap .lddfw-routes-premium-gate__preview {
margin: 18px 0 0;
padding: 0;
text-align: center;
}
.lddfw-routes-wrap .lddfw-routes-premium-gate__preview img {
max-width: 100%;
height: auto;
display: inline-block;
border-radius: 6px;
border: 1px solid #dcdcde;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.lddfw-drivers-page .lddfw-drivers-filter,
.lddfw-drivers-page .lddfw-applications-filter {
margin: 10px 0 12px;
}
.lddfw-drivers-page .lddfw-drivers-filter .search-box,
.lddfw-drivers-page .lddfw-applications-filter .search-box {
float: none;
display: inline-block;
vertical-align: middle;
}
/* Allow modern-table cells to show row-actions on hover. */
.lddfw-drivers-page .lddfw-modern-table tbody tr .row-actions {
visibility: hidden;
margin-top: 2px;
font-size: 12px;
color: #6b7280;
}
.lddfw-drivers-page .lddfw-modern-table tbody tr:hover .row-actions,
.lddfw-drivers-page .lddfw-modern-table tbody tr:focus-within .row-actions {
visibility: visible;
}
.lddfw-drivers-page .lddfw-modern-table tbody tr .row-actions a {
text-decoration: none;
}
.lddfw-drivers-page .lddfw-driver-col-vehicle {
max-width: 160px;
word-break: break-word;
}
.lddfw-drivers-page .lddfw-driver-col-vehicle .lddfw_premium_feature,
.lddfw-drivers-page .lddfw-driver-col-cities .lddfw_premium_feature {
display: flex;
justify-content: center;
align-items: center;
min-height: 28px;
}
.lddfw-drivers-page .lddfw-driver-col-cities {
max-width: 260px;
font-size: 13px;
line-height: 1.45;
color: #1d2327;
}
.lddfw-drivers-page .lddfw-driver-col-cities__list {
display: block;
color: #475569;
font-size: 12.5px;
}
.lddfw-drivers-page .lddfw-driver-col-cities__br {
margin: 0;
line-height: 1.35;
}
/* Applications list - compact icon toolbar (SVG + screen-reader labels). */
.lddfw-drivers-page .lddfw-applications-table .lddfw-app-actions-th,
.lddfw-drivers-page .lddfw-applications-table .lddfw-app-actions-td {
min-width: 200px;
white-space: normal;
}
.lddfw-drivers-page .lddfw-app-actions {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px;
max-width: 280px;
margin: 0 auto;
}
.lddfw-drivers-page .lddfw-app-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
margin: 0;
border: 1px solid #c3c4c7;
border-radius: 8px;
background: #f6f7f7;
color: #1d2327;
cursor: pointer;
box-shadow: 0 1px 0 #c3c4c7;
transition:
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease,
box-shadow 0.15s ease;
}
.lddfw-drivers-page .lddfw-app-icon-btn:hover {
background: #fff;
border-color: #8c8f94;
color: #000;
}
.lddfw-drivers-page .lddfw-app-icon-btn:focus {
outline: none;
box-shadow: 0 0 0 2px #2271b1;
border-color: #2271b1;
}
.lddfw-drivers-page .lddfw-app-icon-btn.is-primary {
background: #2271b1;
border-color: #2271b1;
color: #fff;
box-shadow: 0 1px 0 #135e96;
}
.lddfw-drivers-page .lddfw-app-icon-btn.is-primary:hover {
background: #135e96;
border-color: #135e96;
color: #fff;
}
.lddfw-drivers-page .lddfw-app-icon-btn.is-muted {
background: #fff;
border-color: #dcdcde;
color: #50575e;
box-shadow: none;
}
.lddfw-drivers-page .lddfw-app-icon-btn.is-muted:hover {
background: #f0f0f1;
border-color: #8c8f94;
color: #1d2327;
}
.lddfw-drivers-page a.lddfw-app-icon-btn {
text-decoration: none;
}
.lddfw-drivers-page .lddfw-app-icon-btn.is-danger {
background: #fff;
border-color: #e8b4b4;
color: #b32d2e;
box-shadow: none;
}
.lddfw-drivers-page .lddfw-app-icon-btn.is-danger:hover {
background: #fcf0f1;
border-color: #b32d2e;
color: #8a2424;
}
.lddfw-drivers-page .lddfw-app-action-icon {
display: block;
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* Application modal - image field previews */
.lddfw-app-details--modal .lddfw-app-file-block {
margin-top: 6px;
}
.lddfw-app-details--modal .lddfw-app-file-preview-link {
display: inline-block;
width: 180px;
height: 180px;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e2e8f0;
background: #f1f5f9;
line-height: 0;
vertical-align: top;
cursor: zoom-in;
transition:
border-color 0.15s ease,
box-shadow 0.15s ease;
}
.lddfw-app-details--modal .lddfw-app-file-preview-link:hover,
.lddfw-app-details--modal .lddfw-app-file-preview-link:focus {
border-color: #2271b1;
box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.25);
outline: none;
}
.lddfw-app-details--modal .lddfw-app-file-preview-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.lddfw-app-details--modal .lddfw-app-file-meta {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.lddfw-app-details--modal .lddfw-app-file-meta .description {
flex-basis: 100%;
}
/* Applicant name opens the same details modal as "View details". */
.lddfw-drivers-page
.lddfw-applications-table
.button-link.lddfw-app-view-details {
padding: 0;
margin: 0;
height: auto;
font-weight: 600;
line-height: inherit;
text-align: left;
vertical-align: baseline;
box-shadow: none;
}
/* Tighten the applications "message" column. */
.lddfw-drivers-page .lddfw-applications-table .lddfw-app-message {
max-width: 380px;
max-height: 3.6em;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
color: #4b5563;
font-size: 12.5px;
line-height: 1.4;
}
.lddfw-drivers-page .lddfw-app-details {
padding: 10px 12px;
background: #f6f7f7;
border-radius: 4px;
margin: 4px 0 8px;
}
.lddfw-drivers-page .lddfw-app-kv-list {
margin: 8px 0 0 18px;
list-style: disc;
}
.lddfw-drivers-page .lddfw-app-kv-list li {
margin-bottom: 6px;
word-break: break-word;
}
/* Status chips for applications and driver availability. */
.lddfw-chip {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
line-height: 1.6;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.lddfw-chip-new {
background: #e0f2fe;
color: #075985;
}
.lddfw-chip-reviewed {
background: #ede9fe;
color: #5b21b6;
}
.lddfw-chip-approved {
background: #dcfce7;
color: #166534;
}
.lddfw-chip-rejected {
background: #fee2e2;
color: #991b1b;
}
.lddfw-chip-converted {
background: #e0e7ff;
color: #3730a3;
}
.lddfw-chip-on {
background: #dcfce7;
color: #166534;
}
.lddfw-chip-off {
background: #fee2e2;
color: #991b1b;
}
.lddfw-chip-inactive {
background: #f1f5f9;
color: #475569;
}
/* Application status filter links. */
.lddfw-apps-status-filter {
list-style: none;
padding: 0;
margin: 0 0 12px;
display: flex;
flex-wrap: wrap;
gap: 10px;
font-size: 13px;
}
.lddfw-apps-status-filter li {
padding-right: 10px;
border-right: 1px solid #dcdcde;
}
.lddfw-apps-status-filter li:last-child {
border-right: none;
}
.lddfw-apps-status-filter li.current a {
font-weight: 600;
color: #1d2327;
}
/* Notification icons in the applications table. */
.lddfw-notif-cell {
white-space: nowrap;
}
.lddfw-notif-icon {
display: inline-block;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
margin-right: 4px;
border-radius: 4px;
font-size: 13px;
border: 1px solid transparent;
}
.lddfw-notif-icon .dashicons {
font-size: 14px;
line-height: 22px;
width: 14px;
height: 14px;
}
.lddfw-notif-icon.is-sent {
background: #dcfce7;
color: #166534;
border-color: #86efac;
}
.lddfw-notif-icon.is-skipped {
background: #f1f5f9;
color: #64748b;
border-color: #e2e8f0;
}
.lddfw-notif-icon.is-failed {
background: #fee2e2;
color: #991b1b;
border-color: #fca5a5;
}
.lddfw-notif-icon.is-idle {
background: #f8fafc;
color: #94a3b8;
border-color: #e2e8f0;
}
/* Driver modal - jQuery UI dialog: above wp-admin bar, dimmed overlay, scrollable body. */
body .lddfw-driver-dialog-overlay.ui-widget-overlay {
background: rgba(15, 23, 42, 0.45);
opacity: 1;
z-index: 100050 !important;
}
.lddfw-driver-dialog.ui-dialog {
padding: 0;
border: none;
border-radius: 10px;
box-shadow:
0 25px 50px -12px rgba(15, 23, 42, 0.35),
0 0 0 1px rgba(15, 23, 42, 0.06);
overflow: hidden;
z-index: 100051 !important;
background: #fff;
}
.lddfw-driver-dialog .ui-dialog-titlebar {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
color: #f8fafc;
border: 0;
border-radius: 10px 10px 0 0;
padding: 14px 44px 14px 18px;
font-size: 15px;
line-height: 1.35;
}
.lddfw-driver-dialog .ui-dialog-title {
float: none;
width: auto;
margin: 0;
padding: 0;
color: #f8fafc;
font-weight: 600;
white-space: normal;
overflow: visible;
text-overflow: clip;
}
.lddfw-driver-dialog .ui-dialog-titlebar-close {
right: 10px;
top: 50%;
margin-top: -16px;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 6px;
background: rgba(255, 255, 255, 0.12);
color: #f8fafc;
transition:
background 0.15s ease,
color 0.15s ease;
}
.lddfw-driver-dialog .ui-dialog-titlebar-close:hover,
.lddfw-driver-dialog .ui-dialog-titlebar-close:focus {
background: rgba(255, 255, 255, 0.28);
color: #fff;
}
/* jQuery UI close glyph is a dark PNG sprite - invert so the X reads clearly on the slate bar. */
.lddfw-driver-dialog .ui-dialog-titlebar-close .ui-icon {
filter: brightness(0) invert(1);
opacity: 0.95;
}
.lddfw-driver-dialog .ui-dialog-titlebar-close:hover .ui-icon,
.lddfw-driver-dialog .ui-dialog-titlebar-close:focus .ui-icon {
opacity: 1;
}
body.rtl .lddfw-driver-dialog .ui-dialog-titlebar-close {
right: auto;
left: 10px;
}
.lddfw-driver-dialog .ui-dialog-content {
padding: 0;
background: #f8fafc;
}
/* Application details modal (same jQuery UI dialog shell as Add/Edit driver). */
.lddfw-application-modal-inner {
padding: 0;
background: #fff;
border-radius: 0 0 10px 10px;
}
.lddfw-application-modal-head {
padding: 16px 18px 12px;
border-bottom: 1px solid #e2e8f0;
background: #fff;
}
.lddfw-application-modal-identity {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.lddfw-application-modal-titlewrap {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
}
.lddfw-application-modal-name {
font-size: 16px;
display: block;
}
.lddfw-application-modal-meta {
margin: 10px 0 0;
font-size: 13px;
color: #64748b;
}
.lddfw-application-modal-body {
padding: 0 18px 18px;
max-height: min(70vh, 560px);
overflow-y: auto;
background: #f8fafc;
}
.lddfw-application-modal-dl {
margin: 0 0 12px;
padding: 14px 0 0;
display: grid;
grid-template-columns: minmax(100px, 140px) 1fr;
gap: 8px 12px;
font-size: 13px;
}
.lddfw-application-modal-dl dt {
margin: 0;
padding: 0;
color: #64748b;
font-weight: 600;
}
.lddfw-application-modal-dl dd {
margin: 0;
padding: 0;
word-break: break-word;
}
.lddfw-application-modal-section {
margin: 0 0 12px;
padding: 12px 14px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
}
.lddfw-application-modal-section h4 {
margin: 0 0 8px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #64748b;
}
.lddfw-application-modal-message {
font-size: 13px;
line-height: 1.5;
color: #1e293b;
white-space: pre-wrap;
word-break: break-word;
}
.lddfw-app-details--modal {
margin-top: 4px;
}
.lddfw-driver-modal-loading {
margin: 0;
padding: 28px 24px;
text-align: center;
font-size: 14px;
color: #475569;
background: #fff;
}
.lddfw-driver-modal-loading .spinner {
float: none;
margin: 0 8px 0 0;
vertical-align: middle;
}
.lddfw-driver-dialog .ui-dialog-content > .notice {
margin: 16px 18px;
box-sizing: border-box;
}
#lddfw-admin-driver-form.lddfw-driver-form {
padding: 0 0 0;
background: #fff;
border-radius: 0 0 10px 10px;
}
#lddfw-admin-driver-form .lddfw-driver-form-status {
margin: 0;
padding: 12px 18px 0;
}
#lddfw-admin-driver-form .lddfw-driver-form-status .notice {
margin: 0;
}
#lddfw-admin-driver-form .lddfw-form-section {
margin: 0;
padding: 14px 18px 18px;
border-bottom: 1px solid #e2e8f0;
background: #fff;
}
#lddfw-admin-driver-form .lddfw-form-section:last-of-type {
border-bottom: none;
}
#lddfw-admin-driver-form .lddfw-form-section h3 {
margin: 0 0 12px;
padding: 0 0 8px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #64748b;
border-bottom: 1px solid #e2e8f0;
}
.lddfw-admin-photo-field {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
}
.lddfw-admin-photo-field__preview {
width: 64px;
height: 64px;
flex: 0 0 64px;
border-radius: 50%;
overflow: hidden;
background: #f0f0f1;
border: 2px solid #e0e3e6;
}
.lddfw-admin-photo-field__preview img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.lddfw-admin-photo-field__actions .description {
margin-top: 6px;
font-size: 11px;
}
.lddfw-admin-photo-field__remove {
color: #b32d2e !important;
}
#lddfw-admin-driver-form .form-table {
margin-top: 0;
}
#lddfw-admin-driver-form .form-table th {
width: 180px;
padding: 10px 12px 10px 0;
vertical-align: top;
color: #334155;
font-weight: 500;
}
#lddfw-admin-driver-form .form-table td {
padding: 10px 0;
}
#lddfw-admin-driver-form .form-table td .lddfw_premium_feature {
display: flex;
align-items: center;
min-height: 32px;
}
#lddfw-admin-driver-form .form-table .description {
margin-top: 6px;
color: #64748b;
}
#lddfw-admin-driver-form .regular-text,
#lddfw-admin-driver-form input[type="text"],
#lddfw-admin-driver-form input[type="email"],
#lddfw-admin-driver-form input[type="tel"],
#lddfw-admin-driver-form input[type="password"] {
width: 100%;
max-width: 360px;
}
#lddfw-admin-driver-form .lddfw-form-section-title {
margin: 18px 0 6px;
padding: 6px 0;
border-bottom: 1px solid #e5e7eb;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #4b5563;
}
#lddfw-admin-driver-form .lddfw-driver-form-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 10px;
padding: 14px 18px;
margin: 0;
border-top: 1px solid #e2e8f0;
background: #f1f5f9;
border-radius: 0 0 10px 10px;
}
#lddfw-admin-driver-form .lddfw-driver-form-actions .button {
min-height: 36px;
line-height: 1.2;
padding-left: 16px;
padding-right: 16px;
}
.lddfw-inline-notice {
margin: 10px 0 !important;
}
/* =====================================================================
LDDFW Routes admin page - dashboard-style cards, map, drivers, orders.
Matches the v2.x dashboard design language (rounded cards, soft shadow,
modern-table styling, KPI stat cards). LTR + RTL + mobile.
===================================================================== */
/* .lddfw-routes-wrap - uses default .wrap spacing. */
/* Reusable card wrapper - mirrors the dashboard card look. */
.lddfw-card {
background: #fff;
border: 1px solid #e0e0e1;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
overflow: hidden;
}
.lddfw-card__header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
border-bottom: 1px solid #f0f0f1;
background: #fff;
}
.lddfw-card__header .lddfw-section-title {
margin: 0;
flex: 0 0 auto;
}
.lddfw-card__body {
padding: 16px 18px;
}
/* KPI stat cards - tighter row specific to routes page. */
.lddfw-routes-kpi-section {
margin-top: 4px;
}
.lddfw-stat-cards--routes {
margin-top: 10px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* 3-column layout: map | shared panel | driver rail */
.lddfw-routes-layout {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 0;
margin-top: 0;
}
/* Col 1 - Map (grows to fill remaining space) */
.lddfw-routes-map-card {
flex: 1 1 auto;
min-width: 0;
margin: 0;
border-radius: 4px 0 0 4px;
border-right: none;
height: calc(100vh - 210px);
min-height: 400px;
overflow: hidden;
}
/* Col 2 - Shared panel (driver card or orders) */
.lddfw-routes-panel {
flex: 0 0 380px;
width: 380px;
min-width: 280px;
max-width: 420px;
margin: 0;
border-radius: 0;
border-left: 1px solid #e0e0e1;
border-right: none;
display: flex;
flex-direction: column;
height: calc(100vh - 210px);
min-height: 400px;
overflow: hidden;
}
/* Col 3 - Driver icons rail */
.lddfw-drivers-rail {
flex: 0 0 72px;
width: 72px;
border-left: 1px solid #e0e0e1;
border-radius: 0 4px 4px 0;
min-height: 400px;
overflow-y: auto;
}
/* ---------- Map card ---------- */
.lddfw-routes-map-card {
display: flex;
flex-direction: column;
}
.lddfw-routes-map-card .lddfw-card__header {
flex: 0 0 auto;
}
.lddfw-routes-map-card .lddfw-card__body {
padding: 0;
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
#lddfw_map123 {
width: 100%;
flex: 1 1 auto;
height: calc(100vh - 210px);
min-height: 400px;
background: linear-gradient(135deg, #f5f7fa 0%, #eef2f5 100%);
display: block;
}
/* Map toolbar (inside the card header). */
.lddfw-route-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0;
}
.lddfw-route-actions .button .dashicons {
font-size: 16px;
width: 16px;
height: 16px;
line-height: 1;
margin-inline-end: 4px;
}
.lddfw-route-actions .button {
display: inline-flex;
align-items: center;
}
.lddfw-route-actions .spinner {
float: none;
margin: 0;
}
.lddfw-route-actions-msg {
color: #50575e;
font-style: italic;
font-size: 12px;
}
/* ---------- Drivers on route card ---------- */
.lddfw-drivers-empty {
margin: 0;
color: #646970;
font-style: italic;
font-size: 13px;
}
/* ============================================================
Admin Routes - Driver Cards + Side Rail
Scoped under .lddfw-drivers-card-body to beat legacy CSS.
============================================================ */
/* Driver section inside shared panel */
#lddfw-driver-section {
display: flex;
flex-direction: column;
min-height: 0;
}
/* ---- Side rail (right side, now Col 3) ---- */
.lddfw-drivers-rail {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 10px 0;
background: #fafafa;
min-height: 200px;
}
/* Orders icon in the rail */
.lddfw-orders-rail-icon {
width: 48px;
height: 48px;
border-radius: 12px !important;
}
.lddfw-driver-icon__orders-icon {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.lddfw-driver-icon__orders-icon .dashicons {
font-size: 20px;
width: 20px;
height: 20px;
color: #2271b1;
}
.lddfw-orders-rail-icon.active .lddfw-driver-icon__orders-icon .dashicons {
color: #135e96;
}
.lddfw-orders-rail-icon.active {
background: #e7f3fb;
border-color: #7bb8e0 !important;
box-shadow:
0 0 0 2px #fff,
0 0 0 3px #2271b1 !important;
}
/* Separator between orders icon and driver icons */
.lddfw-drivers-rail::after {
content: "";
display: block;
width: 36px;
height: 1px;
background: #dcdcde;
margin: 2px 0;
order: 1;
/* inserted before driver icons via JS - we use a CSS trick: nth-child */
}
/* Driver icons come after the orders icon */
.lddfw-driver-icon:not(.lddfw-orders-rail-icon) {
order: 2;
}
.lddfw-driver-icon {
position: relative;
width: 44px;
height: 44px;
border: none;
background: none;
padding: 0;
cursor: pointer;
border-radius: 50%;
transition: transform 0.15s ease;
}
.lddfw-driver-icon:hover {
transform: scale(1.08);
}
.lddfw-driver-icon.active .lddfw-driver-icon__img {
box-shadow:
0 0 0 2px #fff,
0 0 0 4px #2271b1;
}
.lddfw-driver-icon__img {
display: block;
width: 44px;
height: 44px;
border-radius: 50%;
border: 3px solid #dcdcde;
background-size: cover;
background-position: center;
background-color: #e0e0e1;
box-sizing: border-box;
transition:
box-shadow 0.15s ease,
border-color 0.15s ease;
}
.lddfw-driver-icon__dot {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid #fafafa;
}
/* ---- Driver panel (single card at a time) ---- */
.lddfw-drivers-panel {
flex: 1 1 auto;
min-width: 0;
padding: 0;
float: none;
order: 1;
}
/* ---- Driver card ---- */
.lddfw-drivers-panel .lddfw_driver_box {
position: relative;
background: #fff;
border: none;
border-radius: 0;
padding: 0;
margin: 0;
width: 100%;
min-height: 0;
font-size: 13px;
line-height: 1.4;
text-align: start;
box-sizing: border-box;
float: none;
}
/* ---- Card header ---- */
.lddfw-drivers-panel .lddfw_driver_box__header {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 14px 10px;
}
/* Avatar - circular, driver-color ring when active */
.lddfw-drivers-panel .lddfw_driver_box__avatar-wrap {
flex: 0 0 56px;
position: relative;
}
.lddfw-drivers-panel .lddfw_driver_box__avatar-wrap img {
display: block;
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #e0e0e1;
background: #f0f0f1;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
transition: border-color 0.2s ease;
}
.lddfw-driver-availability-dot {
position: absolute;
top: 0;
left: 0;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid #fff;
}
/* Info column */
.lddfw-drivers-panel .lddfw_driver_box__info {
flex: 1 1 auto;
min-width: 0;
}
.lddfw-drivers-panel .lddfw_driver_name {
font-weight: 600;
font-size: 14px;
color: #1d2327;
line-height: 1.3;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: static;
top: auto;
}
/* Driver home address line below name */
.lddfw-drivers-panel .lddfw_driver_address {
font-size: 11px;
color: #646970;
margin: 2px 0 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Quick-action icons (home / call / WA / tracking) inline under address */
.lddfw-drivers-panel .lddfw_driver_box__quick-actions {
display: flex;
align-items: center;
gap: 6px;
margin-top: 6px;
}
.lddfw-drivers-panel .lddfw-qa-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid #dcdcde;
background: #fff;
color: #2c3338;
cursor: pointer;
text-decoration: none;
transition:
background 0.15s,
border-color 0.15s,
color 0.15s;
padding: 0;
}
.lddfw-drivers-panel .lddfw-qa-btn .dashicons {
font-size: 15px;
width: 15px;
height: 15px;
margin: 0;
line-height: 1;
}
.lddfw-drivers-panel .lddfw-qa-btn svg {
width: 14px;
height: 14px;
fill: currentColor;
display: block;
}
.lddfw-drivers-panel .lddfw-go-home:hover {
background: #f0f0f1;
border-color: #8c8f94;
color: #1d2327;
}
.lddfw-drivers-panel .lddfw-call-driver {
border-color: #00a32a;
color: #00a32a;
}
.lddfw-drivers-panel .lddfw-call-driver:hover {
background: #f0fdf4;
border-color: #007a1f;
color: #007a1f;
}
.lddfw-drivers-panel .lddfw-whatsapp-driver {
border-color: #25d366;
color: #25d366;
}
.lddfw-drivers-panel .lddfw-whatsapp-driver:hover {
background: #f0fdf4;
border-color: #128c49;
color: #128c49;
}
/* Show/hide route toggle - top-right corner of header */
.lddfw-drivers-panel .lddfw_button {
flex: 0 0 auto;
position: static;
float: none;
top: auto;
right: auto;
left: auto;
width: 32px;
height: 32px;
min-width: 32px;
padding: 0;
margin: 0;
border-radius: 8px;
border: 1px solid #dcdcde;
background: #fff;
background-image: none;
color: #2c3338;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
box-shadow: none;
transition:
background 0.15s,
color 0.15s,
border-color 0.15s;
}
.lddfw-drivers-panel .lddfw_button:hover {
background: #f0f6fc;
border-color: #c6d4e1;
color: #135e96;
}
.lddfw-drivers-panel .lddfw_button:focus {
outline: 2px solid #2271b1;
outline-offset: 1px;
}
.lddfw-drivers-panel .lddfw_driver_box.active .lddfw_button {
background: #e7f3fb;
border-color: #7bb8e0;
color: #135e96;
}
.lddfw-drivers-panel .lddfw_button .dashicons {
font-size: 16px;
width: 16px;
height: 16px;
margin: 0;
line-height: 1;
}
/* Color bar - now handled via border-top on the tab bar. Keep for compat. */
.lddfw-drivers-panel .lddfw_line {
display: none;
}
/* ---- Tab bar ---- */
.lddfw-drivers-panel .lddfw_driver_tabs {
display: flex;
border-bottom: 1px solid #dcdcde;
background: #f6f7f7;
}
.lddfw-drivers-panel .lddfw_tab_btn {
flex: 1 1 auto;
padding: 8px 10px;
background: none;
border: none;
border-bottom: 3px solid transparent;
font-size: 12px;
font-weight: 600;
color: #646970;
cursor: pointer;
text-align: center;
transition:
color 0.15s,
border-color 0.15s;
margin-bottom: -1px;
}
.lddfw-drivers-panel .lddfw_tab_btn:hover {
color: #2271b1;
}
.lddfw-drivers-panel .lddfw_tab_btn.active {
color: #2271b1;
border-bottom-color: #2271b1;
background: #fff;
}
/* ---- Tab panes ---- */
.lddfw-drivers-panel .lddfw_tab_pane {
padding: 0;
}
/* Route tab: route-actions bar */
.lddfw-drivers-panel .lddfw_driver_box__route-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
padding: 8px 12px;
border-bottom: 1px solid #f0f0f1;
background: #fafafa;
}
.lddfw-drivers-panel .lddfw_driver_box__route-actions .button {
height: 28px;
line-height: 26px;
padding: 0 8px;
font-size: 12px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.lddfw-drivers-panel .lddfw_driver_box__route-actions .button .dashicons {
font-size: 14px;
width: 14px;
height: 14px;
line-height: normal;
margin: 0;
}
.lddfw-drivers-panel .lddfw-driver-spinner {
float: none;
margin: 0 0 0 4px;
vertical-align: middle;
}
.lddfw-drivers-panel .lddfw-driver-route-msg {
font-size: 11px;
color: #646970;
margin-left: 4px;
}
/* Route tab: origin / destination selects */
.lddfw-drivers-panel .lddfw-route-selects {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px 12px 8px;
border-bottom: 1px solid #f0f0f1;
background: #fff;
}
.lddfw-drivers-panel .lddfw-route-select-label {
display: flex;
flex-direction: column;
gap: 3px;
font-size: 11px;
font-weight: 600;
color: #646970;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.lddfw-drivers-panel .lddfw-route-origin,
.lddfw-drivers-panel .lddfw-route-destination {
width: 100%;
max-width: 100%;
font-size: 12px;
padding: 3px 6px;
height: 30px;
border: 1px solid #dcdcde;
border-radius: 4px;
background: #fff;
color: #1d2327;
box-sizing: border-box;
cursor: pointer;
appearance: auto;
}
.lddfw-drivers-panel .lddfw-route-origin:focus,
.lddfw-drivers-panel .lddfw-route-destination:focus {
outline: 2px solid #2271b1;
outline-offset: 1px;
border-color: #2271b1;
}
/* ---- Route tab: sortable waypoints list ---- */
.lddfw-drivers-panel .lddfw_sortable_waypoints {
max-height: 400px;
overflow-y: auto;
min-height: 60px;
}
.lddfw-drivers-panel .lddfw_route_order {
position: relative;
border-bottom: 1px solid #e0e0e1;
background: #f9f9f9;
padding: 8px 36px 8px 10px;
font-size: 12px;
line-height: 1.5;
}
.lddfw-drivers-panel .lddfw_route_order a {
font-weight: 600;
text-decoration: none;
color: #2271b1;
}
.lddfw-drivers-panel .lddfw_route_order a:hover {
text-decoration: underline;
}
.lddfw-drivers-panel .lddfw_handle_column {
display: none;
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
cursor: move;
color: #8c8f94;
}
.lddfw-drivers-panel .lddfw-sorting-active .lddfw_handle_column {
display: block;
}
.lddfw-drivers-panel .lddfw_handle_column .dashicons {
font-size: 16px;
width: 16px;
height: 16px;
}
.lddfw-drivers-panel .lddfw-sort-placeholder {
background: #e7f3fb;
border: 1px dashed #2271b1;
min-height: 32px;
}
/* ---- Direction tab: step-by-step listing ---- */
.lddfw-drivers-panel .lddfw_directions-panel-listing {
max-height: 500px;
overflow-y: auto;
padding: 10px 12px;
}
.lddfw-drivers-panel .lddfw_total_route {
font-weight: 600;
font-size: 13px;
padding: 8px 0;
border-bottom: 1px solid #e0e0e1;
margin-bottom: 8px;
color: #1d2327;
}
.lddfw-drivers-panel .lddfw_address {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 6px 0;
font-size: 12px;
line-height: 1.4;
}
.lddfw-drivers-panel .lddfw_point {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
border-radius: 50%;
background: #2271b1;
color: #fff;
font-weight: 700;
font-size: 11px;
flex-shrink: 0;
}
.lddfw-drivers-panel .lddfw_addr_text {
flex: 1 1 auto;
min-width: 0;
}
.lddfw-drivers-panel .lddfw_drive {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0 4px 6px;
font-size: 11px;
color: #646970;
border-left: 2px dotted #dcdcde;
margin-left: 10px;
}
.lddfw-drivers-panel .lddfw_drive_time b {
color: #1d2327;
}
/* Orders tab: action buttons (legacy - kept for backward compat) */
.lddfw-drivers-panel .lddfw-orders-tab-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 12px;
}
.lddfw-drivers-panel .lddfw-orders-tab-actions .button {
display: inline-flex;
align-items: center;
gap: 4px;
height: 30px;
line-height: 28px;
padding: 0 10px;
font-size: 12px;
}
.lddfw-drivers-panel .lddfw-orders-tab-actions .button .dashicons {
font-size: 14px;
width: 14px;
height: 14px;
margin: 0;
}
.lddfw-drivers-panel .lddfw-show-driver-orders {
border-color: #0097a7;
color: #0097a7;
}
.lddfw-drivers-panel .lddfw-show-driver-orders:hover {
background: #e0f7fa;
border-color: #00838f;
color: #00838f;
}
.lddfw-drivers-panel .lddfw-hide-driver-orders {
border-color: #d63638;
color: #d63638;
}
.lddfw-drivers-panel .lddfw-hide-driver-orders:hover {
background: #fef2f2;
border-color: #b02a2a;
color: #b02a2a;
}
/* Tracking indicator inside driver card quick-actions row. */
.lddfw-drivers-panel .lddfw_tracking,
.lddfw-drivers-card-body .lddfw_tracking {
display: inline-flex;
align-items: center;
float: none;
margin: 0;
/* No border/background - the SVG icon already carries its own colored circle */
border: none !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
}
.lddfw-drivers-panel .lddfw_tracking a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
opacity: 0.45;
}
.lddfw-drivers-panel .lddfw_tracking a.active {
opacity: 1;
cursor: pointer;
}
.lddfw-drivers-panel .lddfw_tracking svg {
width: 26px;
height: 26px;
}
/* Driver directions listing - always visible inside the Route tab pane. */
.lddfw-drivers-panel .lddfw_directions-panel-listing {
display: block;
height: auto;
max-height: 400px;
overflow-y: auto;
overflow-x: hidden;
margin: 0;
padding: 8px 12px;
font-size: 12px;
}
.lddfw_total_route {
padding: 4px 0 10px;
color: #1d2327;
font-weight: 600;
font-size: 12px;
}
.lddfw_address {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 6px 0;
}
.lddfw_address .lddfw_point {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #2271b1;
color: #fff;
font-size: 11px;
font-weight: 700;
text-align: center;
line-height: 22px;
}
.lddfw_address .lddfw_addr_text {
flex: 1;
word-break: break-word;
color: #2c3338;
line-height: 1.4;
}
.lddfw_drive {
padding: 2px 0 2px 30px;
color: #646970;
font-size: 11px;
text-align: start;
display: flex;
align-items: center;
gap: 6px;
}
.lddfw-sort-placeholder {
background: #f6f7f7;
border: 1px dashed #c3c4c7;
border-radius: 6px;
height: 32px;
margin: 4px 0;
visibility: visible !important;
}
/* ---------- Orders section (inside shared panel) ---------- */
#lddfw-orders-section {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
#lddfw-orders-section .lddfw-card__header {
border-bottom: 1px solid #f0f0f1;
}
/* Tabs inside the sidebar - match wp-admin nav-tab but softened. */
.lddfw-orders-tabs {
margin: 0;
padding: 0 14px;
background: #fafbfc;
border-bottom: 1px solid #f0f0f1;
display: flex;
gap: 0;
}
.lddfw-orders-tabs .nav-tab {
margin: 0 0 -1px 0;
border: none;
background: transparent;
padding: 10px 14px;
font-weight: 500;
font-size: 13px;
color: #50575e;
display: inline-flex;
align-items: center;
gap: 6px;
border-bottom: 2px solid transparent;
border-radius: 0;
box-shadow: none;
}
.lddfw-orders-tabs .nav-tab .dashicons {
font-size: 15px;
width: 15px;
height: 15px;
line-height: 1;
}
.lddfw-orders-tabs .nav-tab:hover {
color: #2271b1;
background: transparent;
}
.lddfw-orders-tabs .nav-tab-active,
.lddfw-orders-tabs .nav-tab-active:focus {
color: #1d2327;
background: transparent;
border-bottom-color: #28a745;
box-shadow: none;
}
.lddfw-orders-tab-panel {
padding: 14px 18px 4px;
background: #fafbfc;
border-bottom: 1px solid #f0f0f1;
}
.lddfw-orders-tab-panel .lddfw-field {
margin: 0 0 12px;
}
.lddfw-orders-tab-panel label {
display: block;
font-weight: 600;
margin-bottom: 4px;
font-size: 12px;
color: #50575e;
text-transform: uppercase;
letter-spacing: 0.03em;
text-align: start;
}
.lddfw-orders-tab-panel select,
.lddfw-orders-tab-panel input[type="text"] {
width: 100%;
max-width: 100%;
}
.lddfw-orders-filter-actions,
.lddfw-orders-bulk-actions {
display: flex;
gap: 6px;
align-items: center;
margin: 14px 0 0;
padding-top: 10px;
border-top: 1px solid #f0f0f1;
}
.lddfw-bulk-message .notice {
margin: 10px 0 0;
}
/* ---------- Orders table (modern-table variant, sidebar-tight) ---------- */
.lddfw-orders-route-table {
padding: 14px;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.lddfw-orders-route-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 12px;
color: #646970;
margin: 0 0 10px;
font-weight: 500;
}
.lddfw-orders-route-summary__count {
display: inline-block;
background: #f0f0f1;
color: #2c3338;
padding: 3px 10px;
border-radius: 12px;
font-weight: 600;
font-size: 11px;
letter-spacing: 0.02em;
}
.lddfw-orders-map-toggle {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.lddfw-show-orders-on-map,
.lddfw-hide-orders-on-map {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1.4;
cursor: pointer;
border: none;
background: transparent;
outline: none;
box-shadow: none;
transition:
background 0.15s,
color 0.15s;
}
.lddfw-show-orders-on-map {
background: #e7f3fb;
color: #135e96;
}
.lddfw-show-orders-on-map:hover {
background: #cce5f6;
color: #0a3d6b;
}
.lddfw-hide-orders-on-map {
background: #fff3e0;
color: #b45f06;
}
.lddfw-hide-orders-on-map:hover {
background: #ffe0b2;
color: #7f4500;
}
.lddfw-show-orders-on-map .dashicons,
.lddfw-hide-orders-on-map .dashicons {
font-size: 13px;
width: 13px;
height: 13px;
line-height: 1;
vertical-align: middle;
}
.lddfw-orders-route-wrap {
border-radius: 8px;
margin-bottom: 0;
box-shadow: none;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
}
.lddfw-orders-route-list {
table-layout: fixed;
font-size: 12px;
}
.lddfw-orders-route-list thead th {
padding: 10px 10px;
font-size: 11px;
position: sticky;
top: 0;
z-index: 1;
background: #1d2327;
color: #fff;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
box-shadow: none;
}
.lddfw-orders-route-list tbody td {
padding: 12px 10px;
vertical-align: top;
word-break: break-word;
}
.lddfw-orders-route-list .lddfw-col-check {
width: 30px;
padding-left: 12px;
padding-right: 4px;
vertical-align: top;
padding-top: 12px;
text-align: center;
}
.lddfw-orders-route-list .lddfw-col-order {
width: 100%;
}
/* Highlight row when its map marker is clicked */
.lddfw-order-row.lddfw-row-selected {
background: #e7f3fb !important;
}
.lddfw-order-row.lddfw-row-selected td {
background: transparent;
}
.lddfw-order-primary {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-bottom: 4px;
}
.lddfw-order-number {
font-weight: 600;
text-decoration: none;
color: #1d2327;
}
.lddfw-order-number:hover {
color: #135e96;
text-decoration: underline;
}
/* Location icon pushed to the right of the primary row - clickable */
.lddfw-order-loc-icon {
margin-left: auto;
display: flex;
align-items: center;
cursor: pointer;
border-radius: 4px;
padding: 2px 4px;
transition: background 0.15s;
}
.lddfw-order-loc-icon:hover {
background: #e7f3fb;
}
/* Shipping address row - clickable */
.lddfw-order-meta--shipping {
cursor: pointer;
border-radius: 4px;
transition: background 0.15s;
}
.lddfw-order-meta--shipping:hover {
background: #e7f3fb;
}
/* Pickup address row - clickable */
.lddfw-order-meta--pickup {
cursor: pointer;
border-radius: 4px;
transition: background 0.15s;
}
.lddfw-order-meta--pickup:hover {
background: #fff3cd;
}
/* Secondary row: customer + driver inline */
.lddfw-order-secondary {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 2px;
flex-wrap: wrap;
}
.lddfw-order-customer {
color: #1d2327;
font-size: 12px;
margin-bottom: 0;
}
.lddfw-order-meta {
display: flex;
align-items: flex-start;
gap: 4px;
color: #50575e;
font-size: 11px;
line-height: 1.4;
margin-top: 2px;
}
.lddfw-order-meta--muted {
color: #646970;
}
.lddfw-order-meta .dashicons {
font-size: 16px;
width: 16px;
height: 16px;
line-height: 1;
color: #8c8f94;
flex: 0 0 16px;
}
.dashicons-store:before {
font-size: 12px;
}
/* Inline driver chip inside the order cell */
.lddfw-order-driver-inline {
display: inline-flex;
align-items: center;
gap: 4px;
background: #f0f0f1;
border-radius: 20px;
padding: 1px 8px 1px 2px;
}
.lddfw-avatar-sm {
width: 20px !important;
height: 20px !important;
font-size: 10px !important;
flex: 0 0 20px !important;
line-height: 20px !important;
}
.lddfw-order-driver-inline .lddfw-driver-name {
font-size: 11px;
color: #2c3338;
}
.lddfw-driver-none {
color: #c3c4c7;
}
/* Empty state. */
.lddfw-orders-empty-state {
text-align: center;
padding: 30px 16px;
color: #646970;
}
.lddfw-orders-empty-state .dashicons {
font-size: 36px;
width: 36px;
height: 36px;
color: #c3c4c7;
margin-bottom: 6px;
}
.lddfw-orders-empty-state p {
margin: 0;
font-style: italic;
}
/* Pagination (numbered nav). */
.lddfw-orders-pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 10px 14px 4px;
padding-top: 10px;
border-top: 1px solid #f0f0f1;
}
.lddfw-orders-pagination .displaying-num {
color: #50575e;
font-size: 12px;
margin-inline-end: auto;
}
.lddfw-orders-pagination .button {
min-width: 28px;
padding: 0 6px;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
}
.lddfw-orders-pagination .button .dashicons {
font-size: 16px;
width: 16px;
height: 16px;
line-height: 1;
}
.lddfw-orders-pagination .paging-input {
color: #50575e;
font-size: 12px;
padding: 0 6px;
}
/* Loading text. */
.lddfw-orders-loading {
margin: 0;
padding: 14px 16px;
color: #646970;
font-style: italic;
}
/* Location-type indicator colors. */
.lddfw-loc-icon {
font-size: 20px;
line-height: 1;
width: 20px;
height: 20px;
}
.lddfw-loc-rooftop {
color: #28a745;
}
.lddfw-loc-geometric {
color: #2271b1;
}
.lddfw-loc-approximate {
color: #f0ad4e;
}
.lddfw-loc-interpolated {
color: #646970;
}
.lddfw-loc-none {
color: #d63638;
}
/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
.lddfw-routes-panel {
flex: 0 0 340px;
width: 340px;
}
}
@media (max-width: 991px) {
.lddfw-routes-layout {
flex-direction: column;
}
.lddfw-routes-map-card,
.lddfw-routes-panel {
flex: none;
width: 100%;
max-width: 100%;
border-radius: 4px;
border-right: 1px solid #e0e0e1;
border-left: 1px solid #e0e0e1;
}
.lddfw-drivers-rail {
flex-direction: row;
flex-wrap: wrap;
width: 100%;
border-radius: 4px;
border: 1px solid #e0e0e1;
min-height: auto;
padding: 8px;
}
#lddfw_map123 {
height: 50vh;
min-height: 280px;
}
.lddfw-routes-panel,
.lddfw-drivers-rail {
height: auto;
overflow-y: visible;
}
}
@media (max-width: 600px) {
.lddfw-drivers-panel {
grid-template-columns: 1fr;
}
.lddfw-card__header {
padding: 12px 14px;
}
.lddfw-card__body {
padding: 14px;
}
.lddfw-orders-tab-panel {
padding: 12px 14px 4px;
}
.lddfw-orders-route-table {
padding: 12px;
}
.lddfw-route-actions {
width: 100%;
}
.lddfw-route-actions .button {
flex: 1 1 auto;
justify-content: center;
}
}
/* ---------- RTL ---------- */
body.rtl .lddfw-col-driver .lddfw-avatar {
margin-right: 0;
margin-left: 6px;
}
body.rtl .lddfw-route-actions .button .dashicons {
margin-inline-end: 0;
margin-inline-start: 4px;
}
body.rtl .lddfw_drive {
padding: 2px 30px 2px 0;
}
body.rtl .lddfw-orders-route-list thead th,
body.rtl .lddfw-orders-route-list tbody td {
text-align: right;
}
body.rtl .lddfw-orders-route-list .lddfw-col-check {
padding-right: 12px;
padding-left: 4px;
}
.rtl .lddfw_handle {
inset-inline-end: auto;
inset-inline-start: 40px;
}
.rtl .lddfw_driver_box {
padding: 10px 64px 10px 12px;
}
/* RTL overrides for the admin Routes page - beat the legacy `.rtl .lddfw_driver_box`
rule above by using higher specificity inside `.lddfw-drivers-panel`. */
body.rtl .lddfw-drivers-panel .lddfw_driver_box,
.rtl .lddfw-drivers-panel .lddfw_driver_box {
padding: 14px 16px;
margin: 0;
direction: rtl;
text-align: start;
}
body.rtl .lddfw-drivers-panel .lddfw_handle,
.rtl .lddfw-drivers-panel .lddfw_handle,
body.rtl .lddfw-drivers-panel .lddfw_button,
.rtl .lddfw-drivers-panel .lddfw_button {
position: static;
float: none;
top: auto;
right: auto;
left: auto;
inset-inline-start: auto;
inset-inline-end: auto;
}
/* ============================================================
Settings page redesign (v2.4.x)
Card-based layout matching the Dashboard design language.
Scoped under .lddfw-settings-page so no other admin pages
are affected.
============================================================ */
.lddfw-settings-page h1.wp-heading-inline {
font-size: 22px;
font-weight: 600;
color: #1d2327;
margin: 0 0 6px;
padding: 0;
}
.lddfw-settings-page .lddfw_admin_bar {
margin-bottom: 12px;
}
/* Tab bar - pill style with dashicons */
.lddfw-settings-page .lddfw-settings-nav {
border-bottom: 1px solid #e0e0e1;
padding: 0 0 0 2px;
margin: 16px 0 20px;
display: flex;
flex-wrap: wrap;
gap: 4px;
row-gap: 0;
overflow: visible;
}
.lddfw-settings-page .lddfw-settings-nav .nav-tab {
position: relative;
margin: 0;
padding: 10px 16px;
float: none;
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid transparent;
border-bottom: none;
border-radius: 8px 8px 0 0;
background: transparent;
color: #646970;
font-weight: 500;
font-size: 13px;
line-height: 1.4;
box-shadow: none;
transition:
background 0.15s ease,
color 0.15s ease,
border-color 0.15s ease;
bottom: -1px;
}
.lddfw-settings-page .lddfw-settings-nav .nav-tab:hover,
.lddfw-settings-page .lddfw-settings-nav .nav-tab:focus {
color: #1d2327;
background: #f6f7f7;
box-shadow: none;
outline: none;
}
.lddfw-settings-page .lddfw-settings-nav .nav-tab-active,
.lddfw-settings-page .lddfw-settings-nav .nav-tab-active:hover,
.lddfw-settings-page .lddfw-settings-nav .nav-tab-active:focus {
color: #28a745;
background: #fff;
border-color: #e0e0e1 #e0e0e1 #fff;
box-shadow: inset 0 -2px 0 #28a745;
}
.lddfw-settings-page .lddfw-settings-nav .nav-tab .dashicons {
font-size: 18px;
width: 18px;
height: 18px;
line-height: 18px;
color: inherit;
}
.lddfw-settings-page .lddfw-settings-nav .lddfw-tab-label {
display: inline-block;
}
/* Section cards */
.lddfw-settings-page .lddfw-settings-section {
background: #fff;
border: 1px solid #e0e0e1;
border-radius: 10px;
padding: 20px 24px;
margin-bottom: 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.lddfw-settings-page .lddfw-settings-section .lddfw-section-title {
margin: 0 0 14px;
padding-bottom: 12px;
border-bottom: 1px solid #f0f0f1;
font-size: 15px;
font-weight: 600;
color: #1d2327;
display: flex;
align-items: center;
gap: 8px;
}
.lddfw-settings-page .lddfw-settings-section .lddfw-section-title .dashicons {
color: #28a745;
font-size: 20px;
width: 20px;
height: 20px;
line-height: 20px;
}
/* Form table polish (scoped to settings page only) */
.lddfw-settings-page .lddfw-settings-section .form-table {
margin-top: 0;
border: 0;
}
.lddfw-settings-page .lddfw-settings-section .form-table tr {
border-top: 1px solid #f0f0f1;
}
.lddfw-settings-page .lddfw-settings-section .form-table tr:first-child {
border-top: 0;
}
.lddfw-settings-page .lddfw-settings-section .form-table th {
width: 220px;
padding: 16px 20px 16px 0;
color: #1d2327;
font-weight: 600;
font-size: 13px;
vertical-align: top;
}
.lddfw-settings-page .lddfw-settings-section .form-table td {
padding: 14px 10px;
vertical-align: top;
}
/* Inputs */
.lddfw-settings-page .lddfw-settings-section .form-table input[type="text"],
.lddfw-settings-page .lddfw-settings-section .form-table input[type="email"],
.lddfw-settings-page .lddfw-settings-section .form-table input[type="url"],
.lddfw-settings-page .lddfw-settings-section .form-table input[type="number"],
.lddfw-settings-page .lddfw-settings-section .form-table input[type="password"],
.lddfw-settings-page .lddfw-settings-section .form-table input[type="search"],
.lddfw-settings-page .lddfw-settings-section .form-table input[type="tel"],
.lddfw-settings-page .lddfw-settings-section .form-table select,
.lddfw-settings-page .lddfw-settings-section .form-table textarea {
border: 1px solid #dcdcde;
border-radius: 6px;
padding: 6px 10px;
box-shadow: none;
transition:
border-color 0.15s ease,
box-shadow 0.15s ease;
}
.lddfw-settings-page
.lddfw-settings-section
.form-table
input[type="text"]:focus,
.lddfw-settings-page
.lddfw-settings-section
.form-table
input[type="email"]:focus,
.lddfw-settings-page
.lddfw-settings-section
.form-table
input[type="url"]:focus,
.lddfw-settings-page
.lddfw-settings-section
.form-table
input[type="number"]:focus,
.lddfw-settings-page
.lddfw-settings-section
.form-table
input[type="password"]:focus,
.lddfw-settings-page
.lddfw-settings-section
.form-table
input[type="search"]:focus,
.lddfw-settings-page
.lddfw-settings-section
.form-table
input[type="tel"]:focus,
.lddfw-settings-page .lddfw-settings-section .form-table select:focus,
.lddfw-settings-page .lddfw-settings-section .form-table textarea:focus {
border-color: #28a745;
box-shadow: 0 0 0 1px #28a745;
outline: none;
}
.lddfw-settings-page .lddfw-settings-section .form-table textarea {
min-height: 80px;
}
/* Widen selects so the full selected label is visible (Delivery statuses, Providers, etc.) */
.lddfw-settings-page .lddfw-settings-section .form-table select {
min-width: 280px;
max-width: 100%;
background-color: #fff;
}
/* SMS / WhatsApp - "enable" notification cards */
.lddfw-settings-page .lddfw-settings-section .card {
max-width: none;
background: #fff;
border: 1px solid #e0e0e1;
border-radius: 8px;
padding: 0;
margin: 0 0 16px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
overflow: hidden;
min-width: 0;
}
.lddfw-settings-page .lddfw-settings-section .card .checkbox_toggle {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 14px 16px;
margin: 0;
background: #f9fafb;
border-bottom: 1px solid #f0f0f1;
font-weight: 600;
color: #1d2327;
font-size: 13px;
line-height: 1.5;
cursor: pointer;
transition: background 0.15s ease;
}
.lddfw-settings-page .lddfw-settings-section .card .checkbox_toggle:hover {
background: #f3f5f7;
}
.lddfw-settings-page
.lddfw-settings-section
.card
.checkbox_toggle
input[type="checkbox"] {
margin: 2px 0 0;
flex-shrink: 0;
}
/* Active (enabled) card: highlight with green accent */
.lddfw-settings-page
.lddfw-settings-section
.card:has(.checkbox_toggle input[type="checkbox"]:checked) {
border-color: #cbe8d3;
box-shadow: 0 1px 3px rgba(40, 167, 69, 0.08);
}
.lddfw-settings-page
.lddfw-settings-section
.card:has(.checkbox_toggle input[type="checkbox"]:checked)
.checkbox_toggle {
background: #eefaf2;
border-bottom-color: #cbe8d3;
color: #165a2a;
}
.lddfw-settings-page .lddfw-settings-section .card .lddfw_toggle_area {
padding: 16px;
background: #fff;
margin-top: 0 !important;
}
.lddfw-settings-page .lddfw-settings-section .card .lddfw_toggle_area textarea,
.lddfw-settings-page
.lddfw-settings-section
.card
.lddfw_toggle_area
input[type="text"] {
background: #fff;
border: 1px solid #dcdcde;
border-radius: 6px;
}
.lddfw-settings-page
.lddfw-settings-section
.card
.lddfw_toggle_area
textarea:focus,
.lddfw-settings-page
.lddfw-settings-section
.card
.lddfw_toggle_area
input[type="text"]:focus {
border-color: #28a745;
box-shadow: 0 0 0 1px #28a745;
outline: none;
}
.lddfw-settings-page
.lddfw-settings-section
.card
.lddfw_toggle_area
.lddf_button_toggle {
display: inline-block;
padding: 4px 10px;
background: #f6f7f7;
border: 1px solid #e0e0e1;
border-radius: 4px;
color: #50575e;
font-size: 12px;
text-decoration: none;
transition:
background 0.15s ease,
border-color 0.15s ease;
}
.lddfw-settings-page
.lddfw-settings-section
.card
.lddfw_toggle_area
.lddf_button_toggle:hover {
background: #28a745;
border-color: #28a745;
color: #fff;
}
/* Provider configuration rows (SMS / WhatsApp provider-specific fields) - subtle highlight */
.lddfw-settings-page .lddfw-settings-section .lddfw-provider-field {
padding: 10px 12px;
background: #f9fafb;
border: 1px dashed #e0e0e1;
border-radius: 6px;
margin-bottom: 8px;
}
.lddfw-settings-page .lddfw-settings-section .lddfw-provider-field .description,
.lddfw-settings-page
.lddfw-settings-section
.lddfw-provider-field
.lddfw_description {
margin-top: 6px;
}
/* Help text / description */
.lddfw-settings-page .lddfw_description,
.lddfw-settings-page .lddfw-settings-section .description {
display: block;
color: #646970;
font-size: 12px;
font-style: normal;
margin-top: 6px;
line-height: 1.5;
}
/* Checkbox/radio rows - remove cramped feeling */
.lddfw-settings-page .lddfw-settings-section .form-table fieldset label {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 6px;
}
/* Footer with submit button */
.lddfw-settings-page .lddfw-settings-footer {
background: #fff;
border: 1px solid #e0e0e1;
border-radius: 10px;
padding: 14px 20px;
margin-top: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
display: flex;
align-items: center;
justify-content: flex-start;
}
.lddfw-settings-page .lddfw-settings-footer p.submit {
margin: 0;
padding: 0;
}
.lddfw-settings-page .lddfw-settings-footer .button-primary {
background: #28a745;
border-color: #28a745;
color: #fff;
text-shadow: none;
box-shadow: 0 1px 2px rgba(40, 167, 69, 0.25);
padding: 6px 18px;
height: auto;
border-radius: 6px;
font-weight: 500;
transition:
background 0.15s ease,
border-color 0.15s ease,
box-shadow 0.15s ease;
}
.lddfw-settings-page .lddfw-settings-footer .button-primary:hover,
.lddfw-settings-page .lddfw-settings-footer .button-primary:focus {
background: #218838;
border-color: #1e7e34;
box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
color: #fff;
}
/* Responsive */
@media (max-width: 782px) {
.lddfw-settings-page .lddfw-settings-nav {
flex-wrap: wrap;
overflow: visible;
}
.lddfw-settings-page .lddfw-settings-nav .nav-tab {
padding: 8px 12px;
font-size: 12px;
}
.lddfw-settings-page .lddfw-settings-nav .nav-tab .dashicons {
font-size: 16px;
width: 16px;
height: 16px;
line-height: 16px;
}
.lddfw-settings-page .lddfw-settings-section {
padding: 16px;
}
.lddfw-settings-page .lddfw-settings-section .form-table th,
.lddfw-settings-page .lddfw-settings-section .form-table td {
display: block;
width: 100%;
padding: 8px 0;
}
.lddfw-settings-page .lddfw-settings-section .form-table th {
padding-top: 14px;
}
}
/* RTL */
body.rtl .lddfw-settings-page .lddfw-settings-section .form-table th,
.rtl .lddfw-settings-page .lddfw-settings-section .form-table th {
padding: 16px 0 16px 20px;
}