/* ==========================================================================
   Drivers → Driver applications tab
   Figma: Dispatch Desktop / node 20166-228331

   Padding, font sizes, colours and row borders come from the shared .sd-table /
   .sd-table-v2 rules in pages/table.css — this table is styled to sit alongside
   Driver List and Daily Payment, NOT to the standalone sizes in the Figma frame.
   Only cell content (name block, status pill, action button) is styled here, scaled
   to the 13px row type. Colours go through self-theming tokens throughout.
   ========================================================================== */

/* ── status filter ──────────────────────────────────────────────────────
   Sits in the shared Drivers header next to the search box, so it is sized to the
   neighbouring .sd-btn-v2 buttons (36px / 4px radius) rather than to the standalone
   toolbar in the Figma frame. Shown only on the applications tab. */

.sd-da-select-wrap {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 8px;
}

.sd-da-select {
    height: 36px;
    padding: 8px 34px 8px 12px;
    background: var(--input-background);
    color: var(--sd-neutral-900);
    border: 1px solid var(--sd-neutral-300);
    border-radius: 4px;
    font-family: inherit;
    font-size: 15px;
    line-height: 20px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.sd-da-select:hover,
.sd-da-select:focus {
    outline: none;
    border-color: var(--sd-neutral-400);
    box-shadow: none;
}

.sd-da-select-caret {
    position: absolute;
    right: 8px;
    font-size: 20px;
    line-height: 20px;
    color: var(--sd-neutral-700);
    pointer-events: none;
}

/* ── table ──────────────────────────────────────────────────────────────
   Deliberately thin: padding, font sizes, colours and row borders all come from
   the shared .sd-table / .sd-table-v2 rules in pages/table.css so this table reads
   identically to Driver List and Daily Payment. The only rule here mirrors the
   `#table_id_carrier, #table_driver_payment { padding: 8px }` cell rule those two
   tables use — the left/right 20px/8px still come from .sd-table-v2. */

/* 12px rather than the 8px Driver List uses — these rows carry a two-line name block
   and a pill, so they need the extra breathing room. Left/right stay at the shared
   20px/8px, which .sd-table-v2 sets with !important. */
#table_driver_applications.sd-avatar-container.sd-table-v2 tbody td {
    padding: 12px;
    vertical-align: middle;
}

#table_driver_applications.sd-table-v2 tbody td.sd-da-actions-cell {
    text-align: right;
}

/* ── name cell ──────────────────────────────────────────────────────────── */

.sd-da-name-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sd-da-avatar {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
}

/* 11px uppercase initials, same as .sd-avatar-container .asana-avatar abbr. */
.sd-da-avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--card-background);
    color: var(--sd-neutral-700);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.sd-da-name-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sd-da-name {
    color: var(--sd-neutral-900);
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-da-email {
    color: var(--sd-neutral-500);
    font-size: 12px;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── vehicle cell ───────────────────────────────────────────────────────── */

.sd-da-vehicle-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.sd-da-vehicle-icon {
    font-size: 20px;
    line-height: 20px;
    color: var(--sd-neutral-600);
}

/* ── status pill ────────────────────────────────────────────────────────── */

.sd-da-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 4px 12px 4px 8px;
    border-radius: 88px;
    color: var(--sd-neutral-950);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
}

.sd-da-pill-icon {
    font-size: 16px;
    line-height: 16px;
    /* The mock's icons are light outlines, not the default filled weight. */
    font-variation-settings: 'FILL' 0, 'wght' 400;
}

.sd-da-pill-pending {
    /* Figma background/badges/yellow-started */
    background: var(--sd-da-pill-pending-bg, #fffbd7);
}

.sd-da-pill-pending .sd-da-pill-icon {
    color: #b78103;
    font-size: 18px;
}

.sd-da-pill-rejected {
    background: var(--sd-status-red-bg);
}

.sd-da-pill-rejected .sd-da-pill-icon {
    color: #d64545;
    font-size: 18px;
}

/* Not in the mock (it only shows Pending and Rejected) but reachable once approve lands. */
.sd-da-pill-approved {
    background: var(--sd-status-green-bg);
}

.sd-da-pill-approved .sd-da-pill-icon {
    color: var(--sd-dark-green);
}

[data-theme="dark"] .sd-da-pill-pending {
    --sd-da-pill-pending-bg: #2b2610;
}

[data-theme="dark"] .sd-da-pill {
    color: var(--sd-neutral-700);
}

/* ── actions ────────────────────────────────────────────────────────────── */

/* Sized off .sd-btn-v2 (4px radius, 15px/20px) but scaled to the 13px row type. */
.sd-da-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    background: var(--sd-neutral-100);
    color: var(--sd-neutral-950);
    border: 1px solid var(--sd-neutral-400-route);
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    line-height: 16px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s;
}

.sd-da-view-btn:hover {
    background: var(--sd-neutral-50);
}

/* ==========================================================================
   View details — documents viewer (Figma node 20320-86383)
   Lives in modalSet.scala.html, i.e. outside the Vue root.
   ========================================================================== */

.sd-da-details-modal .modal-dialog {
    width: 600px;
    max-width: calc(100% - 32px);
}

.sd-da-details-modal .modal-content {
    /* custom_fonts_colors.css:576 sets .modal-content background with !important. */
    background: var(--sd-neutral-100) !important;
    border: none;
    border-radius: 24px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.16);
    overflow: hidden;
}

.sd-da-details-modal .modal-header {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 28px 28px 0;
    border-bottom: none;
}

.sd-da-details-modal .modal-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sd-neutral-900);
}

.sd-da-details-close {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--sd-neutral-600);
    cursor: pointer;
}

.sd-da-details-close:hover {
    background: var(--card-background);
}

.sd-da-details-close .material-symbols-rounded {
    font-size: 24px;
    line-height: 24px;
}

.sd-da-details-modal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 28px 4px;
}

.sd-da-details-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 340px;
    padding: 24px;
    background: var(--card-background);
    border-radius: 24px;
    overflow: hidden;
}

.sd-da-details-stage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
}

.sd-da-details-thumbs {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.sd-da-details-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 82px;
    padding: 16px;
    background: var(--card-background);
    border: 1px solid var(--sd-neutral-400-route);
    border-radius: 14px;
    cursor: pointer;
    overflow: hidden;
}

/* Selected thumb: 3px white inset ring plus a 1px green outline, per the mock. */
.sd-da-details-thumb.is-selected {
    border: 3px solid var(--sd-neutral-100);
    box-shadow: 0 0 0 1px #01AD85;
}

.sd-da-details-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 3px;
}

.sd-da-details-empty {
    margin: 0;
    color: var(--sd-neutral-500);
    font-size: 13px;
}

.sd-da-details-modal .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 28px;
    border-top: none;
}

.sd-da-details-done {
    padding: 10px 24px;
    background: var(--sd-dark-green);
    color: #ffffff;
    border: 1px solid var(--sd-dark-green);
    border-radius: 8px;
    font-family: inherit;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.sd-da-details-done:hover {
    background-color: var(--sd-darker-green);
    border-color: var(--sd-darker-green);
}

/* ==========================================================================
   Application details modal (Figma node 20317-85501)
   ========================================================================== */

.sd-da-app-modal .modal-dialog {
    width: 600px;
    max-width: calc(100% - 32px);
}

.sd-da-app-modal .modal-content {
    background: var(--sd-neutral-100) !important;
    border: none;
    border-radius: 24px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.16);
    overflow: hidden;
}

.sd-da-app-modal .modal-header {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 28px 28px 0;
    border-bottom: none;
}

.sd-da-app-heading h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sd-neutral-900);
}

.sd-da-app-heading p {
    margin: 4px 0 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--sd-neutral-600);
}

.sd-da-app-close {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--sd-neutral-600);
    cursor: pointer;
}

.sd-da-app-close:hover {
    background: var(--card-background);
}

.sd-da-app-close .material-symbols-rounded {
    font-size: 24px;
    line-height: 24px;
}

.sd-da-app-modal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 24px 28px 32px;
}

/* ── applicant card ─────────────────────────────────────────────────────── */

.sd-da-app-card {
    border: 1px solid var(--sd-neutral-400-route);
    border-radius: 16px;
    overflow: hidden;
}

.sd-da-app-identity {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px 17px;
    border-bottom: 1px solid var(--sd-neutral-400-route);
}

.sd-da-app-avatar .sd-da-avatar {
    width: 56px;
    height: 56px;
    font-size: 18px;
}

.sd-da-app-identity-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 0 0;
    min-width: 0;
}

.sd-da-app-identity-text strong {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sd-neutral-900);
}

.sd-da-app-identity-text span {
    font-size: 16px;
    line-height: 1.4;
    color: var(--sd-neutral-700);
}

/* The pill is the same component the table uses, one step smaller. */
.sd-da-app-status .sd-da-pill {
    height: 28px;
    padding: 5px 12px 5px 8px;
    font-size: 13px;
}

.sd-da-app-status .sd-da-pill-icon {
    font-size: 18px;
    line-height: 18px;
}

/* ── attribute grid ─────────────────────────────────────────────────────── */

.sd-da-app-attributes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sd-da-app-attribute {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 18px 13px;
}

.sd-da-app-attribute:nth-child(odd) {
    border-right: 1px solid var(--sd-neutral-400-route);
}

.sd-da-app-attribute:nth-child(1),
.sd-da-app-attribute:nth-child(2) {
    border-bottom: 1px solid var(--sd-neutral-400-route);
}

.sd-da-app-attribute-name {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--sd-neutral-500);
}

.sd-da-app-attribute-value {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--sd-neutral-900);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── documents ──────────────────────────────────────────────────────────── */

.sd-da-app-documents {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sd-da-app-documents h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--sd-neutral-900);
}

.sd-da-app-doc-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sd-da-app-doc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border: 1px solid var(--sd-neutral-400-route);
    border-radius: 14px;
}

.sd-da-app-doc-info {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.sd-da-app-doc-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 48px;
    flex: none;
    border-radius: 4px;
    overflow: hidden;
    background: var(--card-background);
}

.sd-da-app-doc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sd-da-app-doc-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sd-da-app-doc-text strong {
    font-size: 16px;
    font-weight: 500;
    color: var(--sd-neutral-900);
}

.sd-da-app-doc-text span {
    font-size: 14px;
    color: var(--sd-neutral-600);
}

.sd-da-app-doc-view {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--sd-neutral-700);
    cursor: pointer;
}

.sd-da-app-doc-view:hover {
    background: var(--card-background);
}

.sd-da-app-doc-view .material-symbols-rounded {
    font-size: 24px;
    line-height: 24px;
}

/* ── footer ─────────────────────────────────────────────────────────────── */

.sd-da-app-modal .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 28px;
    border-top: 1px solid var(--sd-neutral-400-route);
}

.sd-da-app-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px 10px 16px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.sd-da-app-btn .material-symbols-rounded {
    font-size: 20px;
    line-height: 20px;
}

.sd-da-app-btn--reject {
    background: var(--sd-neutral-100);
    color: var(--sd-neutral-950);
    border: 1px solid var(--sd-neutral-400-route);
}

.sd-da-app-btn--reject .material-symbols-rounded {
    color: #d64545;
}

.sd-da-app-btn--reject:hover {
    background: var(--sd-neutral-50);
}

.sd-da-app-btn--approve {
    background: var(--sd-dark-green);
    color: #ffffff;
    border: 1px solid var(--sd-dark-green);
}

.sd-da-app-btn--approve:hover:not(:disabled) {
    background-color: var(--sd-darker-green);
    border-color: var(--sd-darker-green);
}

.sd-da-app-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Pending-count badge on the tab. Reuses .order-tab-count (pages/order.css) — only the red is
   new, and the active-state rule is overridden too so it does not turn green when selected. */
.order-tab-count.sd-da-count-alert,
.sd-btn-tab.active .order-tab-count.sd-da-count-alert {
    background: var(--sd-error-red);
    color: #ffffff;
}