/* =============================================================
   app.css  —  Central stylesheet for all custom page styles
   Edit this file for all future CSS additions.
   Source: resources/css/app.css (mirrored here for direct serving)
   ============================================================= */


/* ── Product List ─────────────────────────────────────────── */
.group-fee-panel {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
    background: #f9fafb;
}


/* ── VK Products / Ingredients table ─────────────────────── */
#vkProductsTable td,
#vkIngredientsTable td { color: #344054; font-size: 13px; }
#vkProductsTable td p,
#vkIngredientsTable td p { color: #344054; }
.upload-dropzone { cursor: pointer; border: 2px dashed #d0d5dd; border-radius: 12px; }
.upload-dropzone:hover { border-color: #2d9e6b; background: #f6fef9; }

.ingredient-group-head { background: #f8f9fa; }
.ingredient-group-row.group-hide { display: none; }


/* ── Form validation ──────────────────────────────────────── */
label.error { color: #e03137; font-size: 12px; margin-top: 3px; display: block; }
input.error, textarea.error, select.error + * { border-color: #e03137 !important; }


/* ── Category & Sections ──────────────────────────────────── */
.category-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e7f6eb;
    color: #0b7a3e;
    border: 1px solid #a7ddb8;
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 13px;
    margin: 4px;
}
.category-chip .remove-cat {
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    font-weight: 600;
    opacity: .7;
}
.category-chip .remove-cat:hover { opacity: 1; }
.category-selection-area {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    min-height: 80px;
    padding: 12px 16px;
    background: #fff;
}
.section-upload-box {
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    min-height: 155px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    background: #fafafa;
    transition: border-color .2s;
    overflow: hidden;
}
.section-upload-box:hover { border-color: #0aa437; }
.section-upload-box input[type=file] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2;
}
.add-product-toggle-row {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px 20px;
    background: #f9fafb;
}
.form-switch .form-check-input { width: 3em; height: 1.5em; cursor: pointer; }
.form-switch .form-check-input:checked { background-color: #0aa437; border-color: #0aa437; }

/* Category index accordion */
.cat-accordion-item { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.cat-accordion-header {
    padding: 14px 18px;
    background: #fff;
    cursor: pointer;
    transition: background .15s;
    user-select: none;
}
.cat-accordion-header:hover { background: #f9fafb; }
.cat-accordion-header.is-open { background: #f0fdf4; border-bottom: 1px solid #e5e7eb; }
.cat-accordion-body { background: #fff; }
.cat-icon { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.section-row-drag { cursor: grab; }
.view-all-link { color: #ef7c00; font-weight: 600; font-size: 13px; }
.view-all-link:hover { text-decoration: underline; color: #ef7c00; }
.cat-page-btn {
    width: 30px; height: 30px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 14px; color: #374151;
}
.cat-page-btn:disabled { opacity: .4; cursor: not-allowed; }
.cat-page-btn.active { background: #0aa437; color: #fff; border-color: #0aa437; }
.cat-upload-box {
    border: 2px dashed #d1d5db; border-radius: 10px; padding: 20px;
    text-align: center; cursor: pointer; transition: border-color .2s;
    position: relative; min-height: 110px;
    display: flex; align-items: center; justify-content: center; background: #fafafa;
}
.cat-upload-box:hover { border-color: #0aa437; }
.cat-upload-box .preview-img { max-height: 80px; max-width: 100%; border-radius: 6px; }
.seo-toggle-panel { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
.seo-toggle-head { padding: 12px 16px; background: #f8f9fa; display: flex; align-items: center; justify-content: space-between; }
.seo-toggle-body { padding: 16px; }


/* ── Delivery Zone — Create / Edit ───────────────────────── */
.pin-section { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
.pin-header  { background: #f3f4f6; padding: 10px 16px; font-weight: 600; font-size: 13px; color: #374151; }
.pin-title   { font-weight: 600; font-size: 15px; color: #111827; margin-bottom: 10px; }
.pin-table   { width: 100%; border-collapse: collapse; }
.pin-table td { padding: 10px 16px; border-bottom: 1px solid #f3f4f6; font-size: 13px; color: #374151; vertical-align: middle; }
.pin-table tr:last-child td { border-bottom: none; }
.pin-table tr:hover td { background: #f9fafb; }
.empty-state-box { background: #f9fafb; border: 1px dashed #d1d5db; border-radius: 10px; padding: 40px 20px; }
.empty-icon  { width: 36px; height: 36px; border-radius: 50%; background: #e5e7eb; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #6b7280; margin: 0 auto; }
.empty-title { font-weight: 600; color: #374151; }
.empty-subtext { font-size: 13px; color: #9ca3af; max-width: 300px; margin: 0 auto; }

.selection-card  { border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; background: #fff; }
.section-title   { font-weight: 600; font-size: 15px; color: #111827; }
.selection-empty { background: #f9fafb; border: 1px dashed #d1d5db; border-radius: 8px; padding: 30px; text-align: center; font-size: 13px; color: #9ca3af; }
.alert-box       { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; padding: 10px 14px; font-size: 12px; color: #92400e; display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; }
.alert-svg       { width: 16px; height: 16px; flex-shrink: 0; stroke: #f97316; fill: none; stroke-width: 2; margin-top: 1px; }

.list-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 8px; cursor: pointer; transition: border-color .15s; }
.list-item input[type=radio] { margin-top: 3px; accent-color: #0AA437; flex-shrink: 0; }
.list-item:has(input:checked) { border-color: #0AA437; background: #f0fdf4; }
.item-box        { flex: 1; }
.normal-view     { display: flex; justify-content: space-between; align-items: center; }
.normal-view .place { font-size: 13px; color: #374151; font-weight: 500; }
.normal-view .pin   { font-size: 13px; color: #6b7280; }
.expanded-view   { display: none; margin-top: 10px; }
.list-item:has(input:checked) .expanded-view { display: block; }
.warehouse-title { font-size: 10px; font-weight: 700; color: #0AA437; letter-spacing: .05em; border: 1px solid #0AA437; display: inline-block; padding: 1px 6px; border-radius: 4px; margin-bottom: 8px; }
.row-line        { display: flex; justify-content: space-between; font-size: 13px; color: #374151; margin-bottom: 10px; }
.warehouse-input label { font-size: 12px; color: #6b7280; margin-bottom: 4px; display: block; }
.warehouse-input input { width: 100%; border: 1px solid #d1d5db; border-radius: 6px; padding: 6px 10px; font-size: 13px; }
.info-hint { font-size: 11px; color: #3b82f6; margin-top: 4px; }

.zone-btn-wrap   { padding-top: 8px; }
.zone-btn        { padding: 8px 22px; border-radius: 8px; font-size: 14px; font-weight: 500; border: none; cursor: pointer; }
.zone-btn-cancel { background: #fff; border: 1px solid #d1d5db; color: #374151; padding: 8px 20px; border-radius: 8px; cursor: pointer; }
.zone-btn-create { background: #0AA437; color: #fff; }
.zone-btn-create:disabled { background: #9ca3af; cursor: not-allowed; }

.zone-modal        { border-radius: 12px; padding: 24px; }
.zone-modal-header { font-size: 17px; font-weight: 700; color: #111827; margin-bottom: 12px; }
.zone-modal-body   { font-size: 14px; color: #374151; }
.inactive-text     { color: #ef4444; font-weight: 600; }
.zone-alert        { background: #fef3c7; border: 1px solid #fde68a; border-radius: 8px; padding: 10px 14px; font-size: 12px; color: #92400e; display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.alert-icon        { width: 20px; height: 20px; border-radius: 50%; background: #f59e0b; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0; }
.zone-modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.zone2-modal       { border-radius: 12px; padding: 24px; }
.zone2-header      { font-size: 17px; font-weight: 700; color: #111827; margin-bottom: 12px; }
.zone2-body        { font-size: 14px; color: #374151; }
.zone2-body span   { font-weight: 600; }
.zone2-info        { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 10px 14px; font-size: 12px; display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; }
.zone2-info-icon   { width: 16px; height: 16px; flex-shrink: 0; stroke: #3b82f6; fill: none; stroke-width: 2; margin-top: 1px; }
.text-green        { color: #374151; }
.zone2-footer      { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.zone2-cancel      { background: #fff; border: 1px solid #d1d5db; color: #374151; padding: 8px 20px; border-radius: 8px; cursor: pointer; }

.spin { display: inline-block; width: 16px; height: 16px; border: 2px solid #e5e7eb; border-top-color: #0AA437; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }


/* ── Delivery Zone — Detail ───────────────────────────────── */
.zone-detail-wrapper { display: flex; flex-direction: column; gap: 16px; }
.zone-detail-card    { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px 24px; }
.zone-detail-header  { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; }
.zone-title          { font-size: 20px; font-weight: 700; color: #111827; }
.zone-meta           { font-size: 13px; color: #6b7280; margin-top: 4px; }
.zone-meta b         { color: #374151; }
.zone-warehouse      { text-align: right; }
.warehouse-label     { font-size: 11px; font-weight: 700; color: #0AA437; letter-spacing: .05em; text-transform: uppercase; }
.warehouse-name      { font-size: 14px; font-weight: 600; color: #374151; }
.warehouse-km        { font-size: 12px; color: #6b7280; }
.zone-table-card     { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px 24px; }
.zone-table-title    { font-size: 15px; font-weight: 600; color: #111827; margin-bottom: 12px; }
.zone-table-head     { display: flex; justify-content: space-between; background: #f3f4f6; padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 4px; }
.zone-row            { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid #f3f4f6; font-size: 13px; color: #374151; }
.zone-row:last-child { border-bottom: none; }
.zone-row.active     { background: #f0fdf4; border-left: 3px solid #0AA437; }
.zone-place          { display: flex; align-items: center; gap: 8px; }
.warehouse-badge     { font-size: 10px; font-weight: 700; color: #0AA437; border: 1px solid #0AA437; padding: 1px 6px; border-radius: 4px; letter-spacing: .04em; }
.zone-pin            { color: #6b7280; }
.btn-inactive        { background: #fff; border: 1px solid #f97316; color: #f97316; padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; }
.btn-active          { background: #fff; border: 1px solid #0AA437; color: #0AA437; padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; }
.btn-edit            { background: #fff; border: 1px solid #6b7280; color: #374151; padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 500; text-decoration: none; }
.btn-delete          { background: #fff; border: 1px solid #ef4444; color: #ef4444; padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; }
.status-badge-active   { background: #dcfce7; color: #166534; font-size: 11px; padding: 3px 10px; border-radius: 20px; font-weight: 600; }
.status-badge-inactive { background: #fff7ed; color: #c2410c; font-size: 11px; padding: 3px 10px; border-radius: 20px; font-weight: 600; }
.status-badge-draft    { background: #f3f4f6; color: #6b7280; font-size: 11px; padding: 3px 10px; border-radius: 20px; font-weight: 600; }
.no-warehouse-notice   { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; padding: 10px 14px; font-size: 13px; color: #92400e; display: flex; align-items: center; gap: 8px; }

/* ── Zone Index — Cards ───────────────────────────────────── */
.zone-card             { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; }
.zone-card:hover       { box-shadow: 0 2px 12px rgba(0,0,0,.07); }
.zone-card-header      { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.zone-card-name        { font-size: 17px; font-weight: 600; color: #111827; }
.zone-card-meta        { font-size: 13px; color: #6b7280; }
.zone-card-actions     { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.zone-action-icon      { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; }
.zone-action-icon:hover{ background: #f3f4f6; }
.zone-action-icon img  { width: 18px; height: 18px; }
.btn-view-zone         { background: #0AA437; color: #fff; border: none; border-radius: 8px; padding: 7px 16px; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.btn-view-zone:hover   { background: #088c2e; color: #fff; }
.zone-card-divider     { border-color: #f3f4f6; margin: 14px 0 12px; }
.zone-card-bottom      { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.zone-wh-label         { font-size: 12px; font-weight: 700; color: #9ca3af; letter-spacing: .5px; text-transform: uppercase; margin-right: 4px; }
.zone-wh-name          { font-size: 14px; color: #111827; text-decoration: underline; }
.zone-pins-text        { font-size: 13px; color: #374151; }
.zone-pins-more        { color: #0AA437; font-weight: 600; }
.zone-no-wh-bar        { background: #fff7ed; border-radius: 8px; padding: 10px 14px; font-size: 13px; color: #92400e; display: flex; align-items: center; gap: 8px; }
.zone-no-wh-icon       { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #d97706; color: #d97706; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-style: italic; font-weight: 700; flex-shrink: 0; }
.zone-no-wh-bar a      { color: #d97706; font-weight: 700; text-decoration: underline; margin-left: 4px; }

/* ── Manage Fee Bands — Accordion ────────────────────────── */
.fb-item               { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; transition: border-color .2s; }
.fb-item.fb-expanded   { border-color: #0AA437; }
.fb-header             { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; cursor: pointer; user-select: none; gap: 12px; }
.fb-header.collapsed .fb-chevron i { transform: rotate(180deg); }
.fb-chevron i          { font-size: 22px; color: #6b7280; transition: transform .25s; }
.fb-title              { font-size: 16px; font-weight: 600; color: #111827; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-meta               { font-size: 12px; color: #6b7280; margin-top: 3px; }
.fb-header-right       { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.fb-band-count         { text-align: right; }
.fb-count-label        { font-size: 11px; color: #9ca3af; }
.fb-count-num          { font-size: 22px; font-weight: 700; color: #f97316; line-height: 1.1; }
.fb-body               { padding: 0 20px 16px; }
.fb-table-wrap         { border: 1px solid #f3f4f6; border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
.fb-table              { width: 100%; border-collapse: collapse; font-size: 13px; }
.fb-table thead tr     { background: #f9fafb; }
.fb-table th           { padding: 10px 14px; font-weight: 600; color: #374151; font-size: 13px; border-bottom: 1px solid #f3f4f6; }
.fb-table td           { padding: 12px 14px; color: #374151; border-bottom: 1px solid #f9fafb; vertical-align: middle; }
.fb-table tbody tr:last-child td { border-bottom: none; }
.fb-last-row td        { background: #fef9f0; }
.fb-last-label         { font-size: 13px; color: #374151; }
.fb-free               { color: #0AA437; font-weight: 500; }
.fb-status-pill        { display: inline-block; }
.fb-icon-btn           { background: none; border: none; padding: 4px 6px; cursor: pointer; border-radius: 6px; }
.fb-icon-btn:hover     { background: #f3f4f6; }
.fb-footer             { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; }
.fb-add-btn            { background: none; border: none; cursor: pointer; font-size: 13px; color: #374151; font-weight: 500; display: flex; align-items: center; gap: 6px; padding: 0; }
.fb-add-btn:hover      { color: #0AA437; }
.fb-add-icon           { width: 22px; height: 22px; border-radius: 50%; background: #f97316; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; line-height: 1; flex-shrink: 0; }
.fb-add-covered        { font-size: 12px; color: #9ca3af; font-style: italic; }
.fb-max-km-label       { font-size: 13px; color: #6b7280; }
.fb-max-km-label strong { color: #111827; }

/* ── PIN table — used-by-another-zone rows ────────────────── */
.pin-row-used td   { background: #fafafa; opacity: 0.6; cursor: not-allowed; }
.pin-used-tag      { display: inline-block; font-size: 11px; background: #fef3c7; color: #c2410c; border-radius: 4px; padding: 1px 7px; margin-left: 7px; font-weight: 600; white-space: nowrap; }


/* ── Zone create/edit — Select2 match custom-input ────────── */
#stateSelect + .select2-container .select2-selection--single,
#districtSelect + .select2-container .select2-selection--single {
    border: 1px solid #d9ead7 !important;
    border-radius: 8px !important;
    height: 40px !important;
    display: flex;
    align-items: center;
    padding: 0 12px;
}
#stateSelect + .select2-container .select2-selection__rendered,
#districtSelect + .select2-container .select2-selection__rendered {
    line-height: 40px !important;
    padding: 0 !important;
    font-size: 14px;
    color: #344054;
}
#stateSelect + .select2-container .select2-selection__arrow,
#districtSelect + .select2-container .select2-selection__arrow { height: 40px !important; top: 0 !important; }
#stateSelect + .select2-container.select2-container--focus .select2-selection--single,
#districtSelect + .select2-container.select2-container--focus .select2-selection--single,
#stateSelect + .select2-container.select2-container--open .select2-selection--single,
#districtSelect + .select2-container.select2-container--open .select2-selection--single {
    border-color: #a8d5a2 !important;
    box-shadow: 0 0 0 2px rgba(10,164,55,.08) !important;
}

/* ── Delivery Team — Upload Box ──────────────────────────── */
.upload-dropzone          { min-height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; position: relative; }
.upload-dropzone.drag-active { border-color: #0AA437; background: #f0fdf4; }
.replace-btn              { position: absolute; bottom: 10px; right: 10px; background: #fff; border: 1px solid #d1d5db; color: #374151; font-size: 12px; font-weight: 500; border-radius: 6px; padding: 4px 12px; cursor: pointer; z-index: 2; }
.replace-btn:hover        { background: #f9fafb; }

/* ── Delivery Team — Action Buttons (person-detail header) ── */
.btn-save-draft           { background: #fff; border: 1px solid #6b7280; color: #374151; padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; }
.btn-save-draft:hover     { background: #f9fafb; }

/* ── Delivery Team — Modals ──────────────────────────────── */
.custom-modal             { border-radius: 12px; overflow: hidden; border: none; }
.custom-modal .modal-header { border-bottom: none; padding: 16px 20px; }
.custom-modal .modal-body  { padding: 0 20px 8px; font-size: 14px; color: #374151; }
.inactive-header          { background: #fff7ed; }
.inactive-header h5       { color: #c2410c; font-weight: 600; }
.activate-header          { background: #f0fdf4; }
.activate-header h5       { color: #166534; font-weight: 600; }
.delete-header            { background: #fef2f2; }
.delete-header h5         { color: #dc2626; font-weight: 600; }
.custom-footer            { border-top: 1px solid #f3f4f6; padding: 12px 20px; gap: 8px; }
.btn-cancel               { background: #fff; border: 1px solid #d1d5db; color: #374151; padding: 8px 20px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.btn-cancel:hover         { background: #f9fafb; }
.btn-inactive-action      { background: #f97316; border: none; color: #fff; padding: 8px 20px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; }
.btn-inactive-action:hover{ background: #ea6d0f; }
.btn-activate-action      { background: #0AA437; border: none; color: #fff; padding: 8px 20px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; }
.btn-activate-action:hover{ background: #088c2e; }
.btn-delete-action        { background: #ef4444; border: none; color: #fff; padding: 8px 20px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; }
.btn-delete-action:hover  { background: #dc2626; }

/* ── Delivery Team — Person Detail ──────────────────────── */
.dt-person-photo          { width: 80px; height: 80px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: #f3f4f6; border: 1px solid #e5e7eb; }
.dt-person-photo img      { width: 100%; height: 100%; object-fit: cover; }
.dt-person-initials       { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; color: #6b7280; }
.dt-info-label            { font-size: 11px; font-weight: 600; color: #9ca3af; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 3px; }
.dt-info-value            { font-size: 14px; color: #111827; font-weight: 500; }
.dt-summary-row           { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #f3f4f6; }
.dt-summary-row:last-child{ border-bottom: none; }
.dt-summary-label         { font-size: 13px; color: #6b7280; }
.dt-summary-val           { font-size: 13px; color: #111827; font-weight: 500; }

/* ── Delivery Team — Index Table ─────────────────────────── */
.dt-avatar                { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: #e5e7eb; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.dt-avatar img            { width: 100%; height: 100%; object-fit: cover; }
.dt-avatar span           { font-size: 14px; font-weight: 700; color: #6b7280; }
.dt-icon-btn              { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; cursor: pointer; font-size: 16px; text-decoration: none; transition: background .15s; }
.dt-icon-btn:hover        { background: #f3f4f6; }
.dt-icon-view             { color: #0ea5e9; }
.dt-icon-view:hover       { color: #0284c7; }
.dt-icon-edit             { color: #374151; }
.dt-icon-edit:hover       { color: #111827; }
.dt-icon-delete           { color: #ef4444; }
.dt-icon-delete:hover     { color: #dc2626; }

/* ── Delivery Team Index — bordered action buttons ────────── */
.dt-act-btn               { width: 30px; height: 30px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: transparent; cursor: pointer; font-size: 15px; text-decoration: none; transition: opacity .15s; }
.dt-act-btn:hover         { opacity: .75; }
.dt-act-view              { border: 1px solid #0ea5e9; color: #0ea5e9; }
.dt-act-edit              { border: 1px solid #9ca3af; color: #6b7280; }
.dt-act-delete            { border: 1px solid #ef4444; color: #ef4444; }
.dt-page-btn              { width: 30px; height: 30px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: #374151; text-decoration: none; }
.dt-page-btn:disabled     { opacity: .4; cursor: default; }
.dt-page-btn:not(:disabled):hover { background: #f9fafb; }
.dt-page-current          { min-width: 30px; height: 30px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #111827; padding: 0 8px; }

/* ── Person Detail Page ───────────────────────────────────── */
.pd-btn-status-inactive   { background: #fff; border: 1.5px solid #f97316; color: #f97316; padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; }
.pd-btn-status-inactive:hover { background: #fff7ed; }
.pd-btn-status-active     { background: #fff; border: 1.5px solid #0AA437; color: #0AA437; padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; }
.pd-btn-status-active:hover { background: #f0fdf4; }
.pd-btn-edit-person       { background: #0AA437; color: #fff; border: none; padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pd-btn-edit-person:hover { background: #088c2e; color: #fff; }
.pd-btn-delete-person     { background: #ef4444; color: #fff; border: none; padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pd-btn-delete-person:hover { background: #dc2626; }

.pd-summary-card          { background: #f0fdf4; border: 1px solid #d1fae5; border-radius: 12px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pd-photo                 { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: #d1d5db; flex-shrink: 0; }
.pd-photo img             { width: 100%; height: 100%; object-fit: cover; }
.pd-photo-placeholder     { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #9ca3af; }
.pd-summary-name          { font-size: 18px; font-weight: 700; color: #111827; margin-bottom: 4px; }
.pd-summary-meta          { font-size: 13px; color: #6b7280; }
.pd-status-label          { font-size: 12px; color: #6b7280; margin-bottom: 2px; }
.pd-status-val-active     { font-size: 20px; font-weight: 700; color: #0AA437; }
.pd-status-val-inactive   { font-size: 20px; font-weight: 700; color: #f97316; }
.pd-status-val-draft      { font-size: 20px; font-weight: 700; color: #9ca3af; }

.pd-info-card             { border: 1.5px solid #3b82f6; border-radius: 12px; padding: 20px; background: #fff; }
.pd-section-title         { font-size: 15px; font-weight: 700; color: #111827; }
.pd-field-label           { font-size: 12px; color: #9ca3af; margin-bottom: 4px; }
.pd-field-value           { font-size: 14px; font-weight: 600; color: #111827; }
.pd-doc-img               { width: 100%; height: 140px; object-fit: cover; border-radius: 8px; border: 1px solid #e5e7eb; display: block; }
.pd-doc-placeholder       { width: 100%; height: 140px; background: #d1d5db; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 36px; color: #9ca3af; }