/*
 * Driver / store card polish (صفحة السائقين والمتاجر).
 * Replaces the old filler cover image + cramped footer with a compact, aligned
 * card: header (avatar + identity + actions), a 3-up stats strip, a regions line
 * and a tidy footer. Equal-height cards so rows line up.
 * Removable: delete this file + its <link> in layout/head.php.
 */

/* Vertical spacing between wrapped card rows. A plain Bootstrap .row has no
   vertical gutter, and h-100 cards leave no margin of their own, so wrapped
   rows would touch without this. */
#dataContainer {
    row-gap: 1.5rem;
}

.driver-card {
    border-radius: 12px;
    transition: box-shadow .18s ease, transform .18s ease;
    margin-bottom: 0;               /* spacing comes from the row gap above */
}
.driver-card:hover {
    box-shadow: 0 6px 18px rgba(15, 23, 42, .10);
    transform: translateY(-2px);
}

/* Actions menu fix (Edit / Delete): the theme's .custom-card clips its content
   with overflow:hidden, which chopped the open dropdown and let the next card
   paint over it. Let the header + its dropdown escape the card, and lift the
   card whose menu is open above its neighbours so the menu is never covered. */
.card.driver-card,
.driver-card > .card-body,
.driver-card-head {
    overflow: visible;
}
.driver-card:has(.dropdown-menu.show) {
    position: relative;
    z-index: 20;
}

/* Header readability: with several action icons the name/phone column was
   crushed to one or two characters (e.g. "...1"). Drop the action cluster onto
   its own line so the identity takes the full width of the card above it. */
.driver-card-head {
    flex-wrap: wrap;
    row-gap: .5rem;
}
.driver-card-head > .flex-fill {         /* name + phone */
    flex: 1 1 auto;
    min-width: 0;
}
.driver-card-head > .flex-fill p,
.driver-card-head > .flex-fill a {
    white-space: normal;                 /* let the name wrap instead of ellipsis */
    word-break: break-word;
}
.driver-card-head > .dropdown {          /* action buttons cluster */
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

/* Avatar with a status dot pinned to its corner. */
.driver-card-avatar {
    position: relative;
    flex-shrink: 0;
    background: #eef1f7;
}
.driver-card-avatar img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
/* The status indicator sits on the avatar instead of floating over a banner. */
.driver-card-avatar .spinner-grow {
    position: absolute;
    inset-inline-end: -2px;
    bottom: -2px;
    height: .7rem !important;
    width: .7rem;
    border: 2px solid #fff;
    border-radius: 50%;
    opacity: 1;
    animation: none;
}

/* Stats strip: three equal cells separated by hairlines. */
.driver-card-stats {
    border-top: 1px solid #eef0f4;
    border-bottom: 1px solid #eef0f4;
    padding: 10px 0;
    background: #fafbfd;
}
.driver-card-stats > div + div {
    border-inline-start: 1px solid #eef0f4;
}

.driver-card-regions {
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;          /* keep long region lists from stretching cards */
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 38px;
}

.driver-card-footer {
    border-top: 1px dashed #e6e9f0;
    padding: 12px;
}
.driver-card-footer .btn { white-space: nowrap; }
/* The status/subscription buttons share the row evenly. */
.driver-card-footer .btn-sm { flex: 1 1 auto; }

/* Pagination: center it and give it breathing room. */
.pagination { flex-wrap: wrap; gap: 4px; }
.pagination .page-link { border-radius: 8px; }
/* Keep the pager clear of the card grid instead of hugging the last row. */
#paginationContainer { margin-top: 1.5rem; }

/* Driver name opens the driver 360 / settlement popup (same idea as the client
   name on the customers page). Falls back to the driver details link. */
.driver-card-name-link { color: inherit; text-decoration: none; }
.driver-card-name-link:hover { color: #435ebe; text-decoration: underline; }

/* Clickable waybill number → opens the shipment quick-view popup. The dashed
   underline signals it is interactive (used across shipments / drivers / stores). */
.waybill-quickview {
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    color: inherit;
}
.waybill-quickview:hover { color: #435ebe; }
.waybill-quickview:focus-visible { outline: 2px solid #435ebe; outline-offset: 2px; border-radius: 3px; }

[data-theme-mode="dark"] .driver-card-stats { background: #1f2536; border-color: #2b3244; }
[data-theme-mode="dark"] .driver-card-stats > div + div { border-color: #2b3244; }
[data-theme-mode="dark"] .driver-card-footer { border-color: #2b3244; }
[data-theme-mode="dark"] .driver-card-avatar { background: #2b3244; }