:root {
    --ink: #17212b;
    --muted: #657383;
    --line: #dde5ea;
    --bg: #f5f7f9;
    --panel: #ffffff;
    --brand: #0e52bc;
    --brand-dark: #093b8c;
    --accent: #d97706;
    --danger: #b42318;
    --ok: #11845b;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--ink);
    background: var(--bg);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.shell { min-height: 100vh; display: grid; grid-template-columns: 260px 1fr; }
.sidebar {
    background: #102331;
    color: #f8fafc;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.brand { display: flex; gap: 12px; align-items: center; min-width: 0; }
.brand div { min-width: 0; }
.brand strong {
    display: block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--brand);
    font-weight: 700;
}
.brand-logo {
    width: 48px;
    height: 48px;
    min-width: 48px;
    max-width: 48px;
    max-height: 48px;
    border-radius: 8px;
    object-fit: contain;
    background: #fff;
    padding: 5px;
    box-shadow: 0 5px 16px rgba(0,0,0,.14);
    display: block;
}
.avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    max-width: 44px;
    max-height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line);
    background: #eef3f5;
}
.avatar.large {
    width: 92px;
    height: 92px;
    min-width: 92px;
    max-width: 92px;
    max-height: 92px;
}
.logo-preview {
    width: 180px;
    height: 90px;
    max-width: 180px;
    max-height: 90px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px;
    display: block;
}
.login-logo {
    width: 180px !important;
    height: 90px !important;
    max-width: 180px !important;
    max-height: 90px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}
.login-logo-wrap {
    width: 100%;
    height: 100px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    overflow: hidden;
}
.brand small { color: #a9b7c4; display: block; margin-top: 4px; }
nav { display: grid; gap: 6px; }
.mobile-menu-toggle { display: none; }
.mobile-menu-panel { display: contents; }
nav a, .logout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 8px;
    color: #dce6ef;
}
.nav-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .9;
}
nav a.active, nav a:hover, .logout:hover { background: rgba(255,255,255,.11); color: #fff; }
.logout { margin-top: auto; }
.content { padding: 28px; min-width: 0; }
.topbar {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 24px;
}
.topbar-title-row {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}
.topbar-business {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 210px;
    max-width: 320px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}
.topbar-business img,
.topbar-business-mark {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e7edf2;
}
.topbar-business img {
    object-fit: contain;
    padding: 4px;
}
.topbar-business-mark {
    display: grid;
    place-items: center;
    color: var(--brand-dark);
    font-weight: 800;
}
.topbar-business div {
    min-width: 0;
}
.topbar-business small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 2px;
}
.topbar-business strong {
    display: block;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
h1 { font-size: 28px; margin: 0 0 6px; letter-spacing: 0; }
h2 { font-size: 20px; margin: 0 0 14px; letter-spacing: 0; }
p { margin: 0; color: var(--muted); }
.top-actions, .actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.management-chat-top-button {
    position: relative;
}
.chat-unread-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(220,38,38,.28);
}
.chat-unread-badge[hidden] {
    display: none;
}
.hidden-form { display: none; }
.btn, button {
    border: 0;
    border-radius: 8px;
    padding: 10px 14px;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
}
.btn.secondary, button.secondary { background: #e8eef2; color: var(--ink); }
.btn.is-disabled {
    cursor: not-allowed;
    opacity: .62;
    pointer-events: none;
}
.btn.whatsapp-action {
    background: #e7f7ee;
    color: #137b45;
    border: 1px solid #bfe8ce;
}
.btn.compact, button.compact {
    min-height: 38px;
    padding: 8px 13px;
    border-radius: 7px;
    font-size: 13px;
}
.btn.warn { background: var(--accent); }
.btn.danger, button.danger { background: var(--danger); }
.grid { display: grid; gap: 16px; }
.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 20px; }
.dashboard-summary-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cash-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat, .panel, .card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
}
.stat strong { display: block; font-size: 28px; margin-bottom: 6px; }
.stat span { color: var(--muted); }
.stat-link {
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.stat-link:hover {
    transform: translateY(-1px);
    border-color: var(--brand);
    box-shadow: 0 12px 28px rgba(16,35,49,.08);
}
.tone-red { border-color: #fecaca; background: #fff1f2; }
.tone-red strong { color: #b42318; }
.tone-orange { border-color: #fed7aa; background: #fff7ed; }
.tone-orange strong { color: #c2410c; }
.tone-green { border-color: #bbf7d0; background: #f0fdf4; }
.tone-green strong, .badge.done { color: var(--ok); }
.tone-neutral { border-color: #cbd5e1; background: #f8fafc; }
.support-card { transition: transform .15s ease, border-color .15s ease; }
.support-card:hover { transform: translateY(-1px); border-color: var(--brand); }
.service-alert-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin-bottom: 16px;
    border-color: #fecaca;
    background: linear-gradient(135deg, #fff1f2, #fff);
}
.service-alert-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--danger);
    white-space: nowrap;
}
.service-alert-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #fee2e2;
    color: var(--danger);
}
.service-alert-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.service-alert-list {
    position: relative;
    min-height: 42px;
    overflow: hidden;
}
.service-alert-list span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 9px 11px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: rgba(255,255,255,.72);
    color: #7f1d1d;
    font-weight: 700;
    line-height: 1.35;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .55s ease, transform .55s ease;
    pointer-events: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.service-alert-list span.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.dashboard-map-panel {
    margin-bottom: 16px;
}
.dashboard-map-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}
.dashboard-map-head > div {
    flex: 0 1 360px;
}
.dashboard-map-head h2 {
    margin-bottom: 4px;
}
.dashboard-map-filter {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
    flex: 1 1 auto;
}
.dashboard-map-filter label {
    min-width: 170px;
}
.route-limit-note {
    flex: 1 1 100%;
    text-align: right;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}
.map-result-count {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #c7ebe4;
    border-radius: 8px;
    background: #edf7f5;
    color: var(--brand-dark);
    font-size: 13px;
    font-weight: 800;
}
.dashboard-map-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    gap: 16px;
}
.dashboard-map-frame {
    width: 100%;
    min-height: 360px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #eef3f5;
}
.dashboard-map-placeholder {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 10px;
    padding: 28px;
    text-align: center;
    color: var(--muted);
    background:
        linear-gradient(135deg, rgba(14,82,188,.08), rgba(14,82,188,.02)),
        #eef3f5;
}
.dashboard-map-placeholder strong {
    color: var(--ink);
    font-size: 18px;
}
.dashboard-map-placeholder span {
    max-width: 360px;
    line-height: 1.45;
}
.dashboard-google-map {
    overflow: hidden;
}
.dashboard-map-error {
    display: grid;
    place-items: center;
    min-height: 360px;
    color: var(--muted);
    font-weight: 800;
}
.dashboard-map-list {
    display: grid;
    gap: 10px;
    max-height: 360px;
    overflow-y: auto;
    padding-right: 4px;
}
.dashboard-map-job {
    position: relative;
    display: grid;
    gap: 6px;
    padding: 11px;
    padding-right: 78px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.dashboard-map-job:hover,
.dashboard-map-job.is-active {
    border-color: #0e52bc;
    box-shadow: 0 12px 28px rgba(15, 118, 110, .14);
    transform: translateY(-1px);
}
.dashboard-map-job strong {
    color: var(--brand-dark);
}
.dashboard-map-job span,
.dashboard-map-job small {
    color: var(--muted);
    line-height: 1.35;
}
.dashboard-map-job .actions {
    margin-top: 4px;
}
.dashboard-route-order {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    gap: 3px;
    width: 54px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    text-align: center;
}
.dashboard-route-order input {
    width: 54px;
    min-height: 30px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 8px;
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    color: var(--brand-dark);
    background: #fff;
}
.dashboard-route-order input:focus {
    outline: 2px solid rgba(15, 118, 110, .18);
    border-color: #0e52bc;
}
.map-info-window {
    display: grid;
    gap: 5px;
    max-width: 260px;
    color: #0f172a;
    font: 13px/1.35 Arial, sans-serif;
}
.map-info-window strong {
    color: #0e52bc;
    font-size: 15px;
}
.map-info-window span,
.map-info-window small {
    color: #475569;
}
.map-info-window div {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.map-info-window a {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 7px;
    background: #0e52bc;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
}
.calendar-panel {
    display: grid;
    gap: 14px;
}
.calendar-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}
.calendar-head h2 {
    margin-bottom: 4px;
}
.calendar-filter {
    display: flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
}
.calendar-filter label {
    min-width: 210px;
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.calendar-weekdays {
    gap: 8px;
}
.calendar-weekdays strong {
    padding: 10px;
    border-radius: 8px;
    background: #eef3f5;
    color: #354453;
    text-align: center;
    font-size: 13px;
}
.calendar-days {
    gap: 8px;
}
.calendar-day {
    min-height: 154px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
}
.calendar-day.is-muted {
    opacity: .52;
    background: #f8fafc;
}
.calendar-day.is-today {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(14,82,188,.11);
}
.calendar-day-number {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.calendar-day-number strong {
    font-size: 18px;
}
.calendar-day-number span {
    color: var(--brand-dark);
    font-size: 12px;
    font-weight: 800;
}
.calendar-day-jobs {
    display: grid;
    gap: 6px;
    align-content: start;
}
.calendar-job,
.calendar-more {
    display: grid;
    gap: 2px;
    padding: 7px 8px;
    border-radius: 8px;
    background: #edf7f5;
    color: var(--brand-dark);
    font-size: 12px;
    line-height: 1.25;
}
.calendar-job span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
}
.calendar-job small {
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.calendar-job.urgent {
    background: #fee2e2;
    color: #b42318;
}
.calendar-job.waiting {
    background: #fff7ed;
    color: #c2410c;
}
.calendar-job.done {
    background: #e7f6ef;
    color: var(--ok);
}
.calendar-job.cancel {
    background: #fff0ef;
    color: var(--danger);
}
.calendar-more {
    background: #e8eef2;
    color: var(--ink);
    font-weight: 800;
}
.filters {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.customer-search-form {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 10px;
}
.customer-search-form.is-loading input {
    background-image: linear-gradient(90deg, transparent, rgba(14,82,188,.08), transparent);
    background-size: 180% 100%;
    animation: customerSearchLoading 1s linear infinite;
}
.customer-empty-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid rgba(14,82,188,.24);
    border-radius: 8px;
    background: #ecfdf5;
    color: var(--brand-dark);
}
.customer-empty-actions[hidden] {
    display: none;
}
.customer-empty-actions strong {
    color: var(--brand-dark);
    white-space: nowrap;
}
.customer-empty-actions span {
    flex: 1 1 auto;
    color: #476171;
    font-size: 13px;
    font-weight: 700;
}
.customer-empty-actions .actions {
    flex: 0 0 auto;
}
.customer-name-text {
    display: block;
    margin-bottom: 6px;
    color: var(--ink);
    font-weight: 700;
}
.customer-product-count {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border: 1px solid #c7f0dc;
    border-radius: 999px;
    background: #ecfdf3;
    color: var(--brand-dark);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
}
.customer-search-products {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    max-width: 100%;
}
.customer-search-products span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}
.customer-search-products em {
    display: inline-flex;
    align-items: center;
    max-width: 150px;
    min-height: 24px;
    padding: 4px 8px;
    border: 1px solid #c7f0dc;
    border-radius: 999px;
    background: #ecfdf3;
    color: var(--brand-dark);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.customers-table tr.has-customer-products > td {
    border-bottom: 0;
}
.customer-products-row td {
    padding: 0 12px 16px;
    border-top: 0;
    border-bottom: 1px solid var(--line);
    background: #f8fafc;
}
.customer-product-result-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.customer-product-result-card {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.customer-product-result-card strong {
    color: var(--brand-dark);
    font-size: 14px;
    line-height: 1.25;
}
.customer-product-result-card dl {
    display: grid;
    gap: 5px;
    margin: 0;
}
.customer-product-result-card dl div {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    font-size: 12px;
    line-height: 1.3;
}
.customer-product-result-card dt {
    color: var(--muted);
    font-weight: 800;
}
.customer-product-result-card dd {
    min-width: 0;
    margin: 0;
    color: var(--ink);
    overflow-wrap: anywhere;
}
.customer-product-result-card .btn {
    min-height: 36px;
    padding: 8px 10px;
}
.customer-product-more {
    align-items: center;
    justify-items: center;
    color: var(--muted);
    font-weight: 800;
    text-align: center;
}
@keyframes customerSearchLoading {
    from { background-position: 120% 0; }
    to { background-position: -80% 0; }
}
.notes-filter-form {
    display: flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.notes-filter-form label {
    width: min(260px, 100%);
}
.notes-filter-form button,
.notes-filter-form .btn {
    flex: 0 0 auto;
    min-width: 96px;
}
.staff-bonus-panel {
    margin-top: 16px;
    margin-bottom: 28px;
    scroll-margin-top: 18px;
}
.filter-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.status-filter-actions {
    display: flex;
    align-items: end;
    gap: 8px;
    padding-top: 19px;
}
.status-filter-actions .btn,
.status-filter-actions button {
    flex: 1 1 0;
    white-space: nowrap;
}
.message-tools {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto;
    gap: 12px;
    align-items: end;
}
.message-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.message-recipient {
    min-height: 96px;
    cursor: pointer;
}
.message-recipient input {
    width: 16px;
    height: 16px;
    padding: 0;
    float: right;
}
.message-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.management-chat {
    display: grid;
    gap: 14px;
}
.management-chat .section-head p {
    margin-top: 4px;
}
.management-chat-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: min(62vh, 620px);
    min-height: 360px;
    overflow-y: auto;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f7fafb;
}
.management-chat-message {
    display: flex;
}
.management-chat-message.is-mine {
    justify-content: flex-end;
}
.management-chat-bubble {
    width: fit-content;
    max-width: min(680px, 82%);
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(16,35,49,.05);
}
.management-chat-message.is-mine .management-chat-bubble {
    border-color: #b8ded8;
    background: #e9f8f5;
}
.management-chat-message.is-deleted .management-chat-bubble {
    background: #f3f6f8;
    border-style: dashed;
}
.management-chat-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    font-size: 12px;
}
.management-chat-meta strong {
    color: var(--ink);
}
.management-chat-meta span {
    color: var(--muted);
    font-weight: 700;
}
.management-chat-bubble p {
    color: var(--ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.management-chat-deleted {
    color: var(--muted) !important;
    font-style: italic;
    font-weight: 700;
}
.management-chat-attachment {
    display: grid;
    gap: 2px;
    margin-top: 8px;
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255,255,255,.72);
    color: var(--ink);
    text-decoration: none;
}
.management-chat-attachment span,
.management-chat-attachment small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}
.management-chat-attachment strong {
    overflow-wrap: anywhere;
}
.management-chat-delete {
    min-height: 0;
    margin-top: 8px;
    padding: 0;
    background: transparent;
    color: var(--danger);
    font-size: 12px;
    font-weight: 800;
}
.management-chat-form {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}
.management-chat-form textarea {
    min-height: 52px;
    max-height: 140px;
    resize: vertical;
}
.chat-attach-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #e8eef2;
    color: var(--ink);
    cursor: pointer;
    overflow: hidden;
}
.chat-attach-button span {
    font-size: 24px;
    line-height: 1;
}
.chat-attach-button input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.empty-state {
    padding: 18px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    background: #fff;
    text-align: center;
    font-weight: 700;
}
.message-count {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--muted);
    font-weight: 700;
}
.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 16px 0;
}
.mini-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.mini-actions > * {
    flex: 1 1 auto;
}
.job-count {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 13px;
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--brand-dark);
    font-weight: 700;
}
label { display: grid; gap: 6px; font-weight: 700; font-size: 13px; color: #354453; }
input, select, textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 11px;
    font: inherit;
    background: #fff;
    color: var(--ink);
}
input:disabled, select:disabled, textarea:disabled {
    background: #eef3f5;
    color: #687684;
    cursor: not-allowed;
}
textarea { min-height: 96px; resize: vertical; }
.job-customer-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}
.job-customer-title h2 {
    margin-bottom: 0;
}
.customer-picker-label {
    position: relative;
}
.customer-picker-control {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.customer-picker-control input[list],
.customer-picker-control > input:disabled {
    min-width: 0;
    flex: 1 1 auto;
}
.customer-edit-link {
    flex: 0 0 auto;
    min-height: 38px;
    white-space: nowrap;
}
.customer-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    display: grid;
    gap: 4px;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(16,35,49,.14);
    z-index: 300;
}
.customer-suggestion,
.customer-suggestion-empty {
    width: 100%;
    min-height: 34px;
    padding: 8px 10px;
    border-radius: 7px;
    text-align: left;
    font-size: 13px;
}
.customer-suggestion {
    justify-content: flex-start;
    background: #fff;
    color: var(--ink);
    font-weight: 700;
}
.customer-suggestion:hover {
    background: #edf7f5;
    color: var(--brand-dark);
}
.customer-suggestion-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-weight: 700;
}
.customer-suggestion-add {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 7px 12px;
    white-space: nowrap;
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.full { grid-column: 1 / -1; }
.customer-form-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.customer-field-wide {
    grid-column: 1 / -1;
}
.customer-field-phone {
    grid-column: span 2;
}
.customer-field-half {
    grid-column: span 3;
}
.product-checklist {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
}
.product-checklist.is-invalid {
    border-color: #c5221f;
    box-shadow: 0 0 0 3px rgba(197, 34, 31, 0.08);
}
.product-checklist legend {
    padding: 0 6px;
    color: #354453;
    font-size: 13px;
    font-weight: 700;
}
.product-checklist label {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
}
.product-checklist input {
    width: 16px;
    min-width: 16px;
    height: 16px;
    padding: 0;
}
.product-checklist label > span:not(.product-quantity) {
    min-width: 0;
    overflow-wrap: anywhere;
}
.product-quantity {
    display: inline-grid;
    grid-template-columns: 26px 38px 26px;
    align-items: center;
    gap: 3px;
}
.product-quantity button {
    min-height: 28px;
    width: 26px;
    padding: 0;
    border-radius: 6px;
    background: #e7eef2;
    color: var(--ink);
    font-size: 14px;
    line-height: 1;
}
.product-quantity input {
    width: 38px;
    min-width: 38px;
    min-height: 28px;
    padding: 4px 3px;
    text-align: center;
    font-size: 12px;
}
.service-picker {
    position: relative;
    margin: 0;
    min-width: 0;
    padding-top: 18px;
}
.service-picker summary {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 20px;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 10px 8px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    list-style: none;
}
.service-picker summary::-webkit-details-marker {
    display: none;
}
.service-picker summary::after {
    content: "⌄";
    color: var(--muted);
    font-size: 16px;
    line-height: 1;
    transition: transform .16s ease;
}
.service-picker[open] summary::after {
    transform: rotate(180deg);
}
.service-picker summary small {
    display: block;
    margin-bottom: 3px;
    color: #354453;
    font-size: 12px;
    font-weight: 700;
}
.service-picker summary strong {
    display: block;
    min-width: 0;
    color: var(--ink);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.service-picker summary b {
    color: var(--brand-dark);
    font-size: 13px;
    white-space: nowrap;
}
.service-picker summary::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    color: var(--muted);
    justify-self: center;
    transform: translateY(-2px) rotate(45deg);
}
.service-picker[open] summary::after {
    transform: translateY(2px) rotate(225deg);
}
.service-picker summary small {
    position: absolute;
    top: -20px;
    left: 0;
    margin: 0;
}
.service-picker summary strong {
    font-size: 13px;
}
.service-picker summary b {
    font-size: 12px;
}
.service-picker-panel {
    position: absolute;
    z-index: 130;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(16,35,49,.16);
}
.service-picker-panel input[type="search"] {
    min-height: 38px;
}
.service-picker-list {
    display: grid;
    gap: 7px;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 3px;
}
.service-option {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 8px 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.service-option:has(input:checked) {
    border-color: rgba(14,82,188,.42);
    background: #ecfdf5;
    color: var(--brand-dark);
}
.service-option input {
    width: 16px;
    min-width: 16px;
    height: 16px;
    padding: 0;
}
.service-option span {
    min-width: 0;
    overflow-wrap: anywhere;
}
.service-option strong {
    white-space: nowrap;
}
.service-quantity {
    display: inline-grid;
    grid-template-columns: 26px 38px 26px;
    align-items: center;
    gap: 3px;
}
.service-quantity button {
    min-height: 28px;
    width: 26px;
    padding: 0;
    border-radius: 6px;
    background: #e7eef2;
    color: var(--ink);
    font-size: 14px;
    line-height: 1;
}
.service-quantity input {
    width: 38px;
    min-height: 28px;
    padding: 4px 3px;
    text-align: center;
    font-size: 12px;
}
.service-picker-empty {
    margin: 0;
    color: var(--muted);
    font-weight: 700;
}
.service-note-field textarea {
    min-height: 62px;
    resize: vertical;
}
.stock-sale-picker {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.stock-sale-picker legend {
    padding: 0 6px;
    color: #354453;
    font-size: 13px;
    font-weight: 700;
}
.stock-sale-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
}
.stock-sale-option {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
}
.stock-sale-option:has(input:checked) {
    border-color: rgba(14,82,188,.42);
    background: #ecfdf5;
    color: var(--brand-dark);
}
.stock-sale-option.is-empty {
    opacity: .62;
}
.stock-sale-option input {
    width: 16px;
    min-width: 16px;
    height: 16px;
    padding: 0;
}
.stock-sale-option span {
    min-width: 0;
    overflow-wrap: anywhere;
}
.stock-sale-option em {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-style: normal;
    font-size: 11px;
}
.stock-sale-option small {
    white-space: nowrap;
    color: var(--muted);
    font-weight: 800;
}
details.stock-sale-picker {
    position: relative;
    display: block;
    margin: 0;
    min-width: 0;
    padding: 18px 0 0;
    border: 0;
    background: transparent;
}
details.stock-sale-picker[hidden] {
    display: none;
}
.stock-sale-picker summary {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20px;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 10px 8px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    list-style: none;
}
.stock-sale-picker summary::-webkit-details-marker {
    display: none;
}
.stock-sale-picker summary::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    color: var(--muted);
    justify-self: center;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .16s ease;
}
.stock-sale-picker[open] summary::after {
    transform: translateY(2px) rotate(225deg);
}
.stock-sale-picker summary small {
    position: absolute;
    top: -20px;
    left: 0;
    margin: 0;
    color: #354453;
    font-size: 12px;
    font-weight: 700;
}
.stock-sale-picker summary strong {
    display: block;
    min-width: 0;
    color: var(--ink);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stock-sale-panel {
    position: absolute;
    z-index: 130;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(16,35,49,.16);
}
.stock-sale-panel input[type="search"] {
    min-height: 38px;
}
.product-detail-fields {
    display: grid;
    gap: 10px;
}
.product-detail-row {
    display: grid;
    grid-template-columns: minmax(130px, .7fr) minmax(0, 1fr) minmax(0, 1fr) minmax(170px, .8fr);
    gap: 10px;
    align-items: start;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.product-detail-row strong {
    align-self: start;
    padding-top: 30px;
    color: var(--brand-dark);
    font-size: 13px;
    overflow-wrap: anywhere;
}
.product-detail-field {
    display: grid;
    gap: 5px;
    align-self: start;
    min-width: 0;
    margin: 0;
}
.serial-camera-field {
    display: flex;
    align-items: stretch;
    min-width: 0;
}
.serial-camera-field input[type="text"],
.serial-camera-field input:not([type]) {
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.camera-upload-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    border: 1px solid var(--line);
    border-left: 0;
    border-radius: 0 8px 8px 0;
    background: #eef4f7;
    color: var(--brand-dark);
    cursor: pointer;
}
.camera-upload-button:hover {
    background: #dfeaed;
}
.camera-upload-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.camera-upload-button input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.serial-ocr-status {
    min-height: 16px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
    font-weight: 600;
}
.photo-upload-field {
    display: grid;
    gap: 7px;
}
.photo-upload-field input[type="file"] {
    padding: 12px;
    border: 1px dashed #b8c7d3;
    background: #f8fafc;
}
.photo-upload-field span,
.photo-upload-field small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}
.table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 18px;
    margin-bottom: 0;
}
table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: visible;
    table-layout: auto;
}
.print-only { display: none; }
.daily-map-print h2 {
    margin-bottom: 6px;
}
.daily-map-print p {
    margin-bottom: 12px;
}
th, td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: #eef3f5; font-size: 13px; position: relative; }
tr:last-child td { border-bottom: 0; }
.is-highlight-row td {
    background: #eafaf3;
    font-weight: 700;
}
.job-process-stack {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.job-process-stack strong {
    font-size: 14px;
    line-height: 1.25;
}
.job-process-stack small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.jobs-table {
    table-layout: fixed;
    font-size: 11px;
    min-width: 1220px;
}
.jobs-table th,
.jobs-table td {
    padding: 7px 5px;
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: normal;
}
.jobs-table tr.job-row-done td {
    background: #ecfdf3;
    border-bottom-color: #bbf7d0;
}
.jobs-table tr.job-row-waiting td {
    background: #fff7ed;
    border-bottom-color: #fed7aa;
}
.jobs-table tr.job-row-cancel td {
    background: #fff1f2;
    border-bottom-color: #fecdd3;
}
.jobs-table tr.job-row-done td:first-child {
    box-shadow: inset 4px 0 0 #099268;
}
.jobs-table tr.job-row-waiting td:first-child {
    box-shadow: inset 4px 0 0 #f97316;
}
.jobs-table tr.job-row-cancel td:first-child {
    box-shadow: inset 4px 0 0 #dc2626;
}
.jobs-table th:nth-child(1),
.jobs-table td:nth-child(1) { width: 34px; }
.jobs-table th:nth-child(2),
.jobs-table td:nth-child(2) { width: 76px; }
.jobs-table th:nth-child(3),
.jobs-table td:nth-child(3) { width: 128px; }
.jobs-table th:nth-child(4),
.jobs-table td:nth-child(4) { width: 54px; }
.jobs-table th:nth-child(5),
.jobs-table td:nth-child(5) { width: 62px; }
.jobs-table th:nth-child(6),
.jobs-table td:nth-child(6) { width: 82px; }
.jobs-table th:nth-child(7),
.jobs-table td:nth-child(7) { width: 90px; }
.jobs-table th:nth-child(8),
.jobs-table td:nth-child(8) { width: 68px; }
.jobs-table th:nth-child(9),
.jobs-table td:nth-child(9) { width: 94px; }
.jobs-table th:nth-child(10),
.jobs-table td:nth-child(10) { width: 104px; }
.jobs-table th:nth-child(11),
.jobs-table td:nth-child(11) { width: 140px; }
.jobs-table th:nth-child(12),
.jobs-table td:nth-child(12) { width: 120px; }
.jobs-table th:nth-child(13),
.jobs-table td:nth-child(13) { width: 48px; }
.jobs-table th:nth-child(14),
.jobs-table td:nth-child(14) { width: 80px; }
.jobs-table th:nth-child(15),
.jobs-table td:nth-child(15) { width: 78px; }
.job-customer-cell {
    display: table-cell;
}
.job-customer-stack,
.job-customer-stack strong,
.job-customer-stack small {
    display: block;
}
.job-customer-stack {
    min-width: 0;
}
.job-customer-stack strong {
    margin-bottom: 2px;
}
.job-customer-address {
    margin-top: 4px;
    color: var(--ink);
    line-height: 1.3;
}
.jobs-table td:nth-child(11),
.jobs-table td:nth-child(12) {
    white-space: normal;
    overflow-wrap: anywhere;
}
.jobs-table td.actions {
    display: table-cell;
    min-width: 82px;
}
.jobs-table .actions form {
    width: 100%;
    margin-top: 5px;
}
.jobs-table .actions form:first-of-type {
    margin-top: 5px;
}
.jobs-table .actions > .btn + .btn {
    margin-top: 5px;
}
.jobs-table .actions .btn,
.jobs-table .actions button {
    min-width: 0;
    min-height: 30px;
    padding: 6px 5px;
    font-size: 10px;
    border-radius: 6px;
    width: 100%;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
}
.jobs-table .th-filter {
    min-width: 0;
}
.jobs-table .th-filter summary {
    gap: 4px;
}
.route-form {
    display: grid;
    gap: 5px;
}
.job-cash-form {
    grid-template-columns: minmax(0, 1fr);
}
.job-status-form {
    width: 100%;
    min-width: 0;
}
.route-form input,
.route-form select {
    min-width: 0;
    padding: 7px 6px;
    font-size: 11px;
}
.job-status-form select {
    width: 100%;
}
.jobs-table td[data-label="Açıklama"] {
    white-space: normal;
    overflow-wrap: anywhere;
}
.job-cash-form input {
    width: 100%;
    height: 34px;
}
.route-form button {
    width: 100%;
    padding: 6px 5px;
    font-size: 10px;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
}
.job-cash-form button {
    min-height: 32px;
}
.payment-price-panel {
    display: grid;
    grid-template-columns: minmax(220px, 1fr);
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}
.payment-price-panel > label {
    display: grid;
    gap: 6px;
    margin: 0;
}
.payment-method-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    align-content: start;
    border: 0;
    padding: 0;
    margin: 0;
}
.payment-method-options legend {
    grid-column: 1 / -1;
    margin-bottom: 0;
    font-weight: 700;
    color: var(--text);
}
.payment-method-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    font-weight: 700;
    line-height: 1.15;
}
.payment-method-options input {
    width: auto;
    min-height: 0;
}
.payment-method-options label:has(input:checked) {
    border-color: var(--brand);
    background: #eefbf8;
    color: var(--brand-dark);
}
.product-grid,
.service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.brand-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.brand-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.brand-card.is-passive {
    background: #f8fafc;
    opacity: .78;
}
.brand-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.brand-card-head strong {
    color: var(--brand-dark);
    font-size: 13px;
    overflow-wrap: anywhere;
}
.brand-edit-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}
.brand-edit-form input {
    min-height: 38px;
}
.brand-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.brand-card-actions form,
.brand-card-actions button {
    width: 100%;
}
.business-logo-preview {
    width: 100%;
    max-height: 92px;
    object-fit: contain;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px;
    background: #fff;
}
.business-media-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.business-media-grid figure {
    display: grid;
    gap: 5px;
    margin: 0;
}
.business-media-grid figcaption {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}
.business-stamp-preview {
    max-height: 76px;
}
.compact-checklist,
.business-permission-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.compact-checklist label,
.business-permission-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    font-weight: 700;
    line-height: 1.25;
    cursor: pointer;
}
.business-permission-chip.is-selected,
.business-permission-chip:has(input:checked) {
    border-color: rgba(14,82,188,.45);
    background: #ecfdf5;
    color: var(--brand-dark);
}
.business-permission-chip input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}
.business-permission-chip span {
    overflow-wrap: anywhere;
}
.business-permission-action {
    text-align: right;
    vertical-align: middle;
}
.business-permission-action button {
    min-width: 74px;
}
.brand-empty {
    margin: 12px 0 0;
    color: var(--muted);
    font-weight: 700;
}
.product-search-bar {
    margin-bottom: 14px;
}
.product-search-bar label {
    max-width: 420px;
}
.product-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    background: #fff;
    display: grid;
    gap: 10px;
}
.product-card.is-passive {
    background: #f8fafc;
    opacity: .78;
}
.product-management-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}
.product-bulk-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.product-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.product-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.product-card-head strong {
    color: var(--brand-dark);
    font-size: 13px;
    overflow-wrap: anywhere;
}
.product-select {
    display: flex;
    grid-template-columns: none;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.product-select input {
    width: 16px;
    min-width: 16px;
    height: 16px;
    padding: 0;
}
.product-status {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}
.product-status.active {
    background: #e7f6ef;
    color: var(--ok);
}
.product-status.passive {
    background: #e8eef2;
    color: var(--muted);
}
.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fbfc;
    font-weight: 800;
}
.checkbox-inline input {
    width: 18px;
    min-width: 18px;
    height: 18px;
    padding: 0;
}
.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.summary-card {
    display: grid;
    gap: 6px;
    min-height: 96px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}
.summary-card strong {
    color: var(--brand);
    font-size: 26px;
    line-height: 1;
}
.summary-card span {
    color: var(--muted);
    font-weight: 700;
    line-height: 1.35;
}
.product-edit-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: center;
}
.product-edit-form label:first-of-type {
    grid-column: 1 / -1;
}
.product-edit-form input {
    min-height: 38px;
}
.product-edit-form button {
    grid-column: 1 / -1;
    width: 100%;
}
.product-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.product-card-actions form,
.product-card-actions button {
    width: 100%;
}
.stock-table {
    min-width: 980px;
}
.stock-table td {
    padding: 8px;
}
.stock-row-form {
    display: grid;
    grid-template-columns: minmax(120px, .9fr) minmax(110px, .8fr) minmax(180px, 1.4fr) minmax(120px, .9fr) 90px auto auto;
    align-items: end;
    gap: 8px;
}
.stock-row-form label {
    display: grid;
    gap: 4px;
    min-width: 0;
    margin: 0;
}
.stock-row-form label span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}
.stock-row-form input,
.stock-row-form select {
    min-height: 36px;
    padding: 7px 9px;
    font-size: 12px;
}
.stock-row-form button {
    min-height: 36px;
}
.stock-row-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 8px;
}
.stock-row-actions form,
.stock-row-actions button {
    width: auto;
}
.stock-actions {
    align-self: end;
}
.job-product-editor {
    position: relative;
    min-width: 0;
}
.job-product-editor summary {
    cursor: pointer;
    color: var(--brand-dark);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.job-product-editor form {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 110;
    width: 280px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(16,35,49,.16);
}
.job-product-options {
    display: grid;
    gap: 5px;
    max-height: 240px;
    overflow-y: auto;
    margin-bottom: 8px;
}
.job-product-options label {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 7px;
    align-items: start;
    padding: 5px;
    font-size: 12px;
    font-weight: 600;
}
.job-product-options input {
    width: 16px;
    height: 16px;
    padding: 0;
}
.job-product-editor button {
    width: 100%;
}
.th-filter {
    position: relative;
    min-width: 120px;
}
.th-filter summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.th-filter summary::-webkit-details-marker { display: none; }
.th-filter summary::after {
    content: "v";
    color: var(--muted);
    font-size: 11px;
}
.th-filter[open] summary::after { content: "^"; }
.th-filter[open] { z-index: 3; }
.th-filter form,
.th-filter .th-filter-note {
    display: none;
}
.th-filter[open] form,
.th-filter[open] .th-filter-note {
    display: grid;
    position: absolute;
    top: 22px;
    left: 0;
    width: 220px;
    gap: 10px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(16,35,49,.16);
    z-index: 100;
}
.th-filter[open] form.align-right { left: auto; right: 0; }
.th-filter[open] label,
.th-filter[open] button {
    display: grid;
    position: relative;
    width: 100%;
    margin-top: 0;
    z-index: 1;
}
.th-filter-note {
    color: var(--muted);
    font-weight: 400;
}
.badge { display: inline-flex; border-radius: 999px; padding: 5px 9px; background: #edf7f5; color: var(--brand-dark); font-weight: 700; font-size: 12px; white-space: nowrap; }
.badge.urgent, span.badge.urgent { background: #fee2e2 !important; color: #b42318 !important; border: 1px solid #fecaca; }
.badge.waiting, span.badge.waiting { background: #ffedd5 !important; color: #c2410c !important; border: 1px solid #fed7aa; }
.badge.done, span.badge.done { background: #e7f6ef !important; color: var(--ok) !important; border: 1px solid #bbf7d0; }
.badge.cancel, span.badge.cancel { background: #fff0ef !important; color: var(--danger) !important; border: 1px solid #fecaca; }
.notice { padding: 12px 14px; border-radius: 8px; background: #fff7e6; border: 1px solid #f0d49d; margin-bottom: 16px; color: #5f3b00; }
.notice-with-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.notice-with-action .btn {
    margin-left: auto;
}
.aras-assistant {
    position: fixed;
    right: 28px;
    bottom: 22px;
    z-index: 500;
    width: 158px;
    height: 168px;
    display: block;
}
.aras-assistant[hidden],
.aras-assistant.is-dismissed {
    display: none !important;
}
.aras-assistant-dismiss {
    position: absolute;
    top: 4px;
    right: 6px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 999px;
    background: rgba(16,35,49,.88);
    color: #fff;
    box-shadow: 0 8px 20px rgba(16,35,49,.24);
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}
.aras-assistant-dismiss:hover {
    background: #b42318;
    color: #fff;
}
.aras-assistant-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 158px;
    height: 168px;
    min-height: 168px;
    min-width: 158px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    color: #f8fafc;
    box-shadow: none;
    overflow: visible;
    position: relative;
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.aras-assistant.is-dragging {
    opacity: .94;
}
.aras-assistant.is-dragging .aras-assistant-button {
    cursor: grabbing;
}
.aras-assistant-button::after {
    display: none;
}
.aras-robot {
    position: static;
    width: 158px;
    height: 168px;
    display: grid;
    place-items: center;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
    position: relative;
    flex: 0 0 158px;
}
.aras-robot::after {
    display: none;
}
.aras-robot img {
    width: 158px;
    height: 168px;
    max-width: none;
    object-fit: contain;
    object-position: center bottom;
    transform-origin: 72% 28%;
    animation: aras-mascot-wave 1.65s ease-in-out infinite;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,.32));
}
.aras-speech {
    position: absolute;
    left: -86px;
    top: 34px;
    z-index: 1;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(8,20,29,.97), rgba(15,48,56,.97));
    border: 1px solid rgba(75,137,232,.38);
    box-shadow: 0 10px 24px rgba(16,35,49,.18), 0 0 18px rgba(14,82,188,.16);
    font-size: 13px;
    font-weight: 800;
}
.aras-speech::before {
    content: "";
    position: absolute;
    right: -8px;
    top: 50%;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 9px solid rgba(12,36,44,.98);
    transform: translateY(-50%);
}
@keyframes aras-mascot-wave {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1.02); }
    28% { transform: translateY(-1px) rotate(-4deg) scale(1.04); }
    55% { transform: translateY(0) rotate(5deg) scale(1.03); }
}
@keyframes aras-pulse {
    0%, 100% { opacity: .55; transform: scale(.98); }
    50% { opacity: 1; transform: scale(1.04); }
}
@keyframes aras-eye-blink {
    0%, 88%, 100% { opacity: 1; transform: scaleY(1); }
    92% { opacity: .35; transform: scaleY(.22); }
}
.aras-assistant-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    width: min(380px, calc(100vw - 32px));
    max-height: min(620px, calc(100vh - 110px));
    display: grid;
    grid-template-rows: auto minmax(160px, 1fr) auto auto;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(75,137,232,.28);
    border-radius: 20px;
    background:
        linear-gradient(150deg, rgba(10,25,35,.97), rgba(8,15,22,.97)),
        radial-gradient(circle at 15% 0%, rgba(75,137,232,.18), transparent 40%);
    color: #eef7f8;
    box-shadow: 0 24px 70px rgba(16,35,49,.32), 0 0 36px rgba(14,82,188,.14);
    backdrop-filter: blur(14px);
}
.aras-assistant-panel[hidden] {
    display: none !important;
}
.aras-assistant-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.aras-assistant-head strong {
    display: block;
    font-size: 18px;
    color: #f8fafc;
}
.aras-assistant-head span {
    display: block;
    margin-top: 3px;
    color: #2dd4bf;
    font-size: 12px;
}
.aras-assistant-messages {
    display: grid;
    gap: 8px;
    overflow-y: auto;
    padding: 4px;
}
.assistant-bubble {
    width: fit-content;
    max-width: 92%;
    padding: 10px 12px;
    border-radius: 14px;
    line-height: 1.45;
    color: #eaf7f7;
}
.assistant-bubble.bot {
    justify-self: start;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
}
.assistant-bubble.user {
    justify-self: end;
    background: linear-gradient(135deg, #093b8c, #0e52bc);
    color: #fff;
}
.assistant-bubble.loading {
    color: #b7c8cf;
}
.aras-assistant-quick {
    display: grid;
    gap: 7px;
}
.aras-assistant-quick button {
    min-height: 34px;
    justify-content: flex-start;
    padding: 8px 10px;
    background: rgba(255,255,255,.06);
    color: #eef7f8;
    border: 1px solid rgba(255,255,255,.08);
    font-size: 12px;
}
.aras-assistant-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}
.aras-assistant-form input {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.12);
    color: #f8fafc;
}
.aras-assistant-form input::placeholder {
    color: #8ca1ad;
}
.aras-assistant-form button {
    background: linear-gradient(135deg, #0e52bc, #093b8c);
    box-shadow: 0 0 20px rgba(75,137,232,.24);
}
.aras-assistant-head .secondary {
    background: rgba(255,255,255,.08);
    color: #d9f6f2;
    border: 1px solid rgba(255,255,255,.1);
}
.login-page {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 54px;
    background:
        radial-gradient(circle at 12% 12%, rgba(14,82,188,.08), transparent 28%),
        radial-gradient(circle at 88% 8%, rgba(55,151,212,.08), transparent 24%),
        linear-gradient(135deg, #f8fbfd 0%, #eef6f8 48%, #f8fbfd 100%);
    overflow-x: hidden;
    overflow-y: auto;
}
.login-page::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255,255,255,.74), rgba(255,255,255,.28)),
        radial-gradient(circle at 50% 50%, rgba(14,82,188,.07), transparent 32%);
    pointer-events: none;
}
.login-dots {
    position: fixed;
    width: 180px;
    height: 130px;
    background-image: radial-gradient(circle, rgba(14,82,188,.25) 2px, transparent 2px);
    background-size: 16px 16px;
    opacity: .55;
    pointer-events: none;
}
.login-dots-top {
    top: 0;
    right: 26px;
}
.login-dots-bottom {
    left: 0;
    bottom: 0;
}
.login-box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1480px;
    min-height: 760px;
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(430px, .92fr);
    gap: 0;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(255,255,255,.95);
    border-radius: 34px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 28px 90px rgba(31,58,80,.14);
    backdrop-filter: blur(18px);
}
.login-main {
    position: relative;
    padding: 48px 56px;
    overflow: hidden;
}
.login-side {
    padding: 30px;
    background: rgba(255,255,255,.5);
    border-left: 1px solid rgba(226,235,241,.66);
    display: grid;
    gap: 18px;
    align-content: start;
}
.login-brand-logo {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    width: min(330px, 78%);
    min-height: 58px;
}
.login-brand-logo img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 78px;
    object-fit: contain;
    object-position: left center;
}
.login-brand-logo strong {
    font-size: 34px;
    font-style: italic;
    font-weight: 900;
    letter-spacing: .02em;
    line-height: 1;
}
.login-logo-bolt {
    width: 28px;
    height: 42px;
    background: linear-gradient(160deg, #2870dc, #0e52bc);
    clip-path: polygon(44% 0, 100% 0, 64% 38%, 92% 38%, 24% 100%, 42% 52%, 8% 52%);
    display: block;
}
.login-box h1 {
    position: relative;
    z-index: 1;
    margin: 0 0 14px;
    max-width: 620px;
    font-size: clamp(34px, 3.25vw, 46px);
    line-height: 1.18;
    color: #1b2740;
}
.login-box h1 strong {
    color: var(--brand);
}
.login-main > p {
    position: relative;
    z-index: 1;
    max-width: 420px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
}
.login-kicker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 58px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(14,82,188,.09);
    color: var(--brand);
    font-size: 13px;
    font-weight: 700;
}
.login-kicker svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.login-form {
    position: relative;
    z-index: 1;
    max-width: 520px;
    margin-top: 30px;
    gap: 16px;
}
.login-role-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    min-height: 54px;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255,255,255,.7);
    overflow: hidden;
}
.login-role-tabs label {
    display: block;
}
.login-role-tabs input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.login-role-tabs span {
    min-height: 50px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #4d5870;
    font-weight: 700;
    cursor: pointer;
}
.login-role-tabs input:checked + span {
    background: linear-gradient(135deg, #2870dc, var(--brand));
    border-color: var(--brand);
    color: #fff;
    box-shadow: 0 12px 26px rgba(14,82,188,.22);
}
.login-input-wrap {
    position: relative;
    display: block;
}
.field-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    width: 19px;
    height: 19px;
    transform: translateY(-50%);
    z-index: 1;
    fill: none;
    stroke: #8b96ad;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.login-input-wrap input {
    height: 52px;
    padding-left: 44px;
    border-color: #d8e1ea;
    box-shadow: 0 8px 24px rgba(31,58,80,.04);
}
.password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    min-height: 32px;
    width: 34px;
    padding: 0;
    transform: translateY(-50%);
    background: transparent;
    color: #6f7b92;
    box-shadow: none;
}
.password-toggle svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    color: #64708a;
    font-size: 13px;
    font-weight: 400;
}
.remember-me {
    display: flex;
    grid-template-columns: none;
    align-items: center;
    gap: 8px;
    color: #64708a;
    font-weight: 400;
}
.remember-me input {
    width: 16px;
    height: 16px;
    padding: 0;
}
.login-form > button {
    min-height: 54px;
    margin-top: 8px;
    background: linear-gradient(135deg, #2870dc, var(--brand));
    box-shadow: 0 16px 34px rgba(14,82,188,.24);
}
.login-copy {
    position: absolute;
    left: 46px;
    bottom: 38px;
    color: #8490a4;
    font-size: 13px;
}
.demo-login-box {
    padding: 24px;
    border: 1px solid rgba(226,235,241,.9);
    border-radius: 24px;
    background: #fff;
    display: grid;
    gap: 14px;
    box-shadow: 0 18px 52px rgba(31,58,80,.08);
}
.login-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.login-side-head strong {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #1b2740;
    font-size: 18px;
}
.side-title-svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    fill: none;
    stroke: #1b2740;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.login-side-head span {
    padding: 7px 12px;
    border-radius: 999px;
    background: #edf7f5;
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
}
.demo-account {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 15px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(135deg, #fff 55%, #f5f9ff);
    color: inherit;
    font: inherit;
    text-align: left;
    box-shadow: none;
    cursor: pointer;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.demo-account:hover {
    transform: translateY(-2px);
    border-color: rgba(14,82,188,.38);
    box-shadow: 0 14px 32px rgba(14,82,188,.11);
}
.demo-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    color: var(--brand);
    background: #eaf2ff;
    display: grid;
    place-items: center;
}
.demo-icon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.demo-account-content {
    display: grid;
    gap: 7px;
    min-width: 0;
}
.demo-account-content > strong {
    color: #1b2740;
    font-size: 15px;
    font-weight: 800;
}
.demo-account-content > small {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    color: #6b7890;
    font-size: 11px;
    font-weight: 600;
}
.demo-account-content > small > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    border-radius: 7px;
    background: #f2f6fc;
}
.demo-account code {
    color: var(--brand-dark);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 800;
}
.demo-account-action {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--brand);
    font-size: 12px;
    font-weight: 800;
}
.demo-account-action svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.demo-copy-field {
    grid-column: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 5px 6px 5px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}
.copy-demo {
    min-height: 34px;
    width: 38px;
    padding: 0;
    border: 1px solid #99d8d1;
    background: #fff;
    color: var(--brand);
    box-shadow: none;
}
.copy-demo svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.copy-demo.copied {
    background: #edf7f5;
}
.demo-login-box p,
.customer-login-box p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
}
.customer-login-box {
    padding: 24px;
    border: 1px solid rgba(226,235,241,.9);
    border-radius: 24px;
    background: #fff;
    display: grid;
    gap: 14px;
    box-shadow: 0 18px 52px rgba(31,58,80,.08);
}
.customer-login-box form {
    gap: 12px;
}
.customer-login-box button.secondary {
    min-height: 50px;
    margin-top: 6px;
    background: linear-gradient(135deg, rgba(14,82,188,.08), rgba(14,82,188,.14));
    color: var(--brand);
    box-shadow: none;
}
.login-main::before {
    content: "";
    position: absolute;
    right: -110px;
    bottom: -160px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(14,82,188,.12), transparent 68%);
    pointer-events: none;
}
.login-main::after {
    content: none;
}
.login-side {
    align-content: start;
}
.customer-login-box {
    min-height: auto;
    align-content: start;
    padding: 30px;
    background:
        radial-gradient(circle at 92% 8%, rgba(14,82,188,.10), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,252,251,.94));
}
.customer-login-box::after {
    content: "";
    min-height: 1px;
}
.customer-track-benefits {
    display: grid;
    gap: 12px;
    margin: 2px 0 4px;
}
.customer-track-benefits div {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 2px 12px;
    align-items: center;
    padding: 13px;
    border: 1px solid rgba(214,228,236,.82);
    border-radius: 16px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 12px 28px rgba(31,58,80,.05);
}
.customer-track-benefits span {
    grid-row: 1 / 3;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--brand);
    background: linear-gradient(135deg, rgba(75,137,232,.13), rgba(14,82,188,.08));
}
.customer-track-benefits svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.customer-track-benefits strong {
    color: #1b2740;
    font-size: 13px;
}
.customer-track-benefits small {
    color: #718098;
    line-height: 1.45;
    font-size: 12px;
}
.login-side-head .side-title-svg {
    color: var(--brand);
    stroke: currentColor;
}
.login-input-wrap input:focus {
    border-color: rgba(14,82,188,.42);
    box-shadow: 0 0 0 4px rgba(14,82,188,.10), 0 10px 30px rgba(31,58,80,.06);
}
.login-role-tabs {
    border-radius: 14px;
}
.login-role-tabs span {
    border-radius: 12px;
}
.login-form > button,
.customer-login-box button.secondary {
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.login-form > button:hover,
.customer-login-box button.secondary:hover {
    transform: translateY(-1px);
    filter: saturate(1.05);
}
.customer-track-page {
    min-height: 100vh;
    padding: 28px;
    background:
        linear-gradient(135deg, rgba(16,35,49,.96), rgba(14,82,188,.88)),
        url("landing/panel-gorunumu.jpg") center / cover fixed;
}
.customer-track-shell {
    width: min(980px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 18px;
}
.tracking-hero {
    color: #fff;
    padding: 28px 0 8px;
}
.tracking-hero h1 {
    margin: 8px 0 10px;
    font-size: clamp(30px, 5vw, 54px);
    color: #fff;
}
.tracking-hero p {
    max-width: 680px;
    color: rgba(255,255,255,.78);
    line-height: 1.65;
}
.tracking-kicker {
    display: inline-flex;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(217,119,6,.18);
    color: #fed7aa;
    border: 1px solid rgba(253,186,116,.38);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}
.tracking-card {
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 8px;
    padding: 18px;
    box-shadow: 0 18px 48px rgba(0,0,0,.18);
}
.tracking-form {
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
}
.tracking-result-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.tracking-result-head span:first-child {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}
.tracking-result-head h2 {
    margin-bottom: 0;
}
.tracking-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.tracking-grid div {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    background: #fff;
}
.tracking-grid strong {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
}
.tracking-grid span {
    display: block;
    color: var(--ink);
    font-weight: 700;
    line-height: 1.45;
}
.tracking-back {
    width: max-content;
    color: rgba(255,255,255,.82);
    font-weight: 700;
}
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.section-head h2 {
    margin: 0;
}
.job-detail-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.job-detail-product-card {
    display: grid;
    gap: 10px;
    min-height: 112px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.job-detail-product-card strong {
    color: var(--brand-dark);
    font-size: 14px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.job-detail-product-meta {
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}
.job-detail-product-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-self: end;
}
.job-detail-product-actions form,
.job-detail-product-actions .btn,
.job-detail-product-actions button {
    width: 100%;
}
.photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.photo-card {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}
.photo-select {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: auto;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 4px 12px rgba(15,23,42,.12);
    color: var(--brand-dark);
    font-size: 12px;
    font-weight: 800;
}
.photo-select input {
    width: 15px;
    height: 15px;
}
.photo-preview-button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}
.photo-grid img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.video-card video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0f172a;
}
.video-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px;
    border-top: 1px solid var(--line);
}
.video-card-footer span {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.document-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.document-card {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 94px;
    padding: 18px 12px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.document-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 62px;
    border-radius: 8px;
    background: #fff1f0;
    color: #b42318;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .04em;
}
.document-info {
    display: grid;
    gap: 5px;
    min-width: 0;
}
.document-info strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 14px;
}
.document-info small {
    color: var(--muted);
    font-size: 12px;
}
.photo-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 48px 20px 20px;
    background: rgba(2, 8, 23, .82);
}
.photo-modal[hidden] {
    display: none;
}
.photo-modal img {
    max-width: min(1100px, 96vw);
    max-height: 86vh;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0,0,0,.38);
    object-fit: contain;
}
.photo-modal-close {
    position: fixed;
    top: 14px;
    right: 18px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.45);
    background: rgba(255,255,255,.94);
    color: var(--brand-dark);
    font-size: 24px;
    line-height: 1;
    box-shadow: 0 10px 25px rgba(0,0,0,.25);
}
body.photo-modal-open {
    overflow: hidden;
}
.ticket-a4 {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    max-width: 900px;
    min-height: 1120px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #d7e0e6;
    border-radius: 10px;
    background: #fff;
    color: #17212b;
    box-shadow: 0 18px 40px rgba(16,35,49,.12);
}
.ticket-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 0 28px;
    background: #f4f7f9;
    border-right: 1px solid #d7e0e6;
}
.ticket-side::before {
    content: "";
    width: 100%;
    height: 170px;
    flex: 0 0 170px;
    background: var(--accent);
}
.ticket-side span,
.ticket-side strong,
.ticket-side em {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    letter-spacing: 1px;
}
.ticket-side span {
    color: var(--brand);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}
.ticket-side strong {
    color: #111827;
    font-size: 17px;
    font-weight: 800;
    white-space: nowrap;
}
.ticket-side em {
    color: #111827;
    font-size: 17px;
    font-style: normal;
    font-weight: 800;
}
.ticket-document {
    padding: 34px 38px 30px;
}
.ticket-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 22px;
    align-items: stretch;
    margin: -34px -38px 26px;
    padding: 28px 34px;
    background: #2f3b45;
    color: #fff;
}
.ticket-brand-block {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.ticket-logo {
    width: 92px;
    height: 92px;
    min-width: 92px;
    object-fit: contain;
    border-radius: 12px;
    background: #fff;
    padding: 8px;
}
.ticket-brand-block span,
.ticket-meta-card small {
    color: #cbd5df;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ticket-brand-block h1 {
    margin: 5px 0 8px;
    color: #fff;
    font-size: 30px;
    line-height: 1.08;
}
.ticket-brand-block p {
    max-width: 520px;
    margin: 0;
    color: #e7edf2;
    font-weight: 700;
    line-height: 1.35;
}
.ticket-meta-card {
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    text-align: right;
}
.ticket-meta-card strong {
    color: #fff;
    font-size: 24px;
}
.ticket-meta-card span {
    color: #f8fafc;
    font-weight: 800;
}
.ticket-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 2px solid #e4ebef;
}
.ticket-title-row h2 {
    margin: 0 0 5px;
    color: #17212b;
    font-size: 23px;
    font-weight: 800;
}
.ticket-title-row p {
    margin: 0;
    color: var(--muted);
    font-weight: 600;
}
.ticket-status {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-radius: 999px;
    background: #fff7ed;
    color: #b45309;
    font-size: 12px;
    font-weight: 800;
}
.ticket-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.ticket-info-card,
.ticket-note-grid section {
    border: 1px solid #dce6eb;
    border-radius: 10px;
    background: #fff;
}
.ticket-info-card {
    padding: 16px 18px;
}
.ticket-info-card h3,
.ticket-note-grid h3 {
    margin: 0 0 12px;
    color: #2f3b45;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.ticket-info-card dl {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}
.ticket-info-card dl div {
    display: grid;
    grid-template-columns: minmax(108px, 36%) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}
.ticket-info-card dt {
    padding-top: 2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}
.ticket-info-card dd {
    min-width: 0;
    margin: 0;
    color: #17212b;
    font-weight: 700;
    line-height: 1.38;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}
.ticket-note-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}
.ticket-note-grid section {
    min-height: 132px;
    padding: 16px;
}
.ticket-note-grid section.full {
    grid-column: 1 / -1;
    min-height: 92px;
}
.ticket-note-grid p {
    margin: 0;
    color: #263542;
    font-weight: 600;
    line-height: 1.45;
}
.ticket-footer {
    display: grid;
    gap: 18px;
    margin-top: 20px;
}
.ticket-delivery-note {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-left: 5px solid var(--brand);
    border-radius: 8px;
    background: #f1f7f6;
}
.ticket-delivery-note strong {
    color: var(--brand-dark);
}
.ticket-delivery-note span {
    color: #3b4a57;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}
.ticket-signatures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.ticket-signatures div {
    height: 92px;
    border-bottom: 2px solid #17212b;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 8px;
}
.ticket-signatures span {
    color: #3b4a57;
    font-weight: 800;
}
@media (min-width: 901px) and (max-width: 1450px) {
    .content {
        padding: 20px;
    }
    .table-wrap {
        overflow-x: auto;
        overflow-y: visible;
        margin-bottom: 0;
        padding-bottom: 18px;
    }
    .jobs-table {
        min-width: 1180px;
        font-size: 11px;
    }
    .jobs-table th,
    .jobs-table td {
        padding: 7px 5px;
        overflow-wrap: normal;
    }
    .jobs-table .actions .btn,
    .jobs-table .actions button {
        font-size: 10px;
        padding: 5px 6px;
    }
}
@media (max-width: 900px) {
    .shell { grid-template-columns: 1fr; }
    .section-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .section-head .actions {
        width: 100%;
    }
    .section-head .actions button {
        flex: 1 1 160px;
    }
    .sidebar {
        position: sticky;
        top: 0;
        height: auto;
        overflow: visible;
        z-index: 10;
        padding: 12px 14px;
        gap: 12px;
        box-shadow: 0 8px 24px rgba(0,0,0,.18);
    }
    .brand-logo, .brand-mark {
        width: 42px;
        height: 42px;
        min-width: 42px;
        max-width: 42px;
        max-height: 42px;
    }
    .brand strong { max-width: calc(100vw - 170px); font-size: 16px; }
    .brand small { font-size: 12px; }
    .mobile-menu-toggle {
        display: inline-flex;
        position: absolute;
        right: 14px;
        top: 14px;
        min-height: 38px;
        padding: 8px 12px;
        background: rgba(255,255,255,.12);
        color: #fff;
        border: 1px solid rgba(255,255,255,.18);
    }
    .mobile-menu-panel {
        display: none;
        padding-top: 8px;
    }
    .sidebar.menu-open .mobile-menu-panel { display: block; }
    .content { padding: 16px; overflow-x: hidden; }
    .table-wrap {
        overflow: visible;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    nav a, .logout {
        min-width: 0;
        text-align: center;
        padding: 10px;
        background: rgba(255,255,255,.07);
    }
    .logout {
        display: flex;
        justify-content: center;
        margin-top: 8px;
    }
    .topbar { align-items: flex-start; flex-direction: column; }
    .topbar-title-row {
        width: 100%;
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
    .topbar-business {
        width: 100%;
        max-width: 420px;
    }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-summary-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-summary-stats .support-card { grid-column: 1 / -1; }
    .stats .stat {
        min-height: 86px;
        padding: 14px;
    }
    .stats .stat strong {
        font-size: 27px;
    }
    .stats .stat span {
        font-size: 14px;
        line-height: 1.25;
    }
    .filters, .form-grid, .ticket-grid { grid-template-columns: minmax(0, 1fr); }
    .customer-field-wide,
    .customer-field-phone,
    .customer-field-half {
        grid-column: 1 / -1;
    }
    .customer-picker-control {
        flex-wrap: wrap;
    }
    .customer-picker-control .customer-edit-link {
        width: 100%;
        justify-content: center;
    }
    .customer-empty-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
    .customer-empty-actions strong,
    .customer-empty-actions span {
        white-space: normal;
    }
    .customer-empty-actions .actions,
    .customer-empty-actions .btn {
        width: 100%;
    }
    .ticket-a4 {
        grid-template-columns: minmax(0, 1fr);
        min-height: auto;
    }
    .ticket-side {
        display: none;
    }
    .ticket-document {
        padding: 22px;
    }
    .ticket-hero {
        grid-template-columns: minmax(0, 1fr);
        margin: -22px -22px 18px;
        padding: 22px;
    }
    .ticket-meta-card {
        text-align: left;
    }
    .ticket-info-grid,
    .ticket-note-grid,
    .ticket-signatures {
        grid-template-columns: minmax(0, 1fr);
    }
    .ticket-info-card dl div {
        grid-template-columns: minmax(0, 1fr);
        gap: 3px;
    }
    .message-tools,
    .message-list {
        grid-template-columns: minmax(0, 1fr);
    }
    .dashboard-map-head,
    .dashboard-map-filter,
    .calendar-head,
    .calendar-filter,
    .product-management-head,
    .service-alert-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
    .product-bulk-actions {
        justify-content: stretch;
    }
    .product-bulk-actions button,
    .product-bulk-actions form {
        width: 100%;
    }
    .summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .dashboard-map-filter label,
    .calendar-filter label {
        min-width: 0;
    }
    .dashboard-map-head > div {
        flex-basis: auto;
    }
    .dashboard-map-filter {
        justify-content: stretch;
        margin-left: 0;
    }
    .route-limit-note {
        text-align: left;
    }
    .map-result-count {
        justify-content: center;
        width: 100%;
    }
    .dashboard-map-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .service-alert-panel {
        gap: 10px;
        padding: 13px;
    }
    .service-alert-title {
        white-space: normal;
    }
    .service-alert-icon {
        width: 34px;
        height: 34px;
    }
    .service-alert-list {
        min-height: 48px;
    }
    .service-alert-list span {
        white-space: normal;
        font-size: 13px;
        line-height: 1.3;
    }
    .dashboard-map-frame {
        min-height: 280px;
    }
    .dashboard-map-list {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
    .calendar-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .calendar-weekdays {
        display: none;
    }
    .calendar-day {
        min-height: 0;
    }
    .calendar-day.is-muted {
        display: none;
    }
    .filter-actions {
        justify-content: stretch;
    }
    .status-filter-actions {
        padding-top: 0;
    }
    .status-filter-actions .btn,
    .status-filter-actions button {
        flex: 1 1 0;
    }
    .filter-actions .btn,
    .filter-actions button {
        flex: 1 1 160px;
    }
    .form-grid .actions,
    .form-grid .actions button,
    .form-grid .actions .btn {
        width: 100%;
    }
    .management-chat-list {
        height: 58vh;
        min-height: 320px;
        padding: 10px;
    }
    .management-chat-bubble {
        max-width: 92%;
    }
    .management-chat-form {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .management-chat-form button {
        grid-column: 1 / -1;
        width: 100%;
    }
    .product-checklist,
    .payment-method-options { grid-template-columns: minmax(0, 1fr); }
    .product-checklist label {
        grid-template-columns: 16px minmax(0, 1fr) auto;
    }
    .stock-sale-list { grid-template-columns: minmax(0, 1fr); }
    .stock-row-form { grid-template-columns: minmax(0, 1fr); }
    .stock-row-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
    .stock-row-actions button {
        width: 100%;
    }
    .service-picker-panel {
        position: static;
        margin-top: 8px;
        box-shadow: none;
    }
    .stock-sale-panel {
        position: static;
        margin-top: 8px;
        box-shadow: none;
    }
    .service-picker summary {
        grid-template-columns: minmax(0, 1fr) auto 16px;
    }
    .stock-sale-picker summary {
        grid-template-columns: minmax(0, 1fr) 16px;
    }
    .product-detail-row { grid-template-columns: minmax(0, 1fr); }
    .product-detail-row strong { padding-top: 0; }
    .product-grid,
    .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .job-detail-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .business-permission-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aras-assistant {
        display: none !important;
    }
    .aras-assistant-button {
        min-height: 128px;
        min-width: 114px;
        padding: 0;
    }
    .aras-robot {
        width: 118px;
        height: 128px;
        flex-basis: 118px;
    }
    .aras-robot img {
        width: 118px;
        height: 128px;
    }
    .aras-speech {
        left: -68px;
        top: 24px;
        min-height: 30px;
        padding: 0 10px;
        font-size: 12px;
    }
    .aras-assistant-panel {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 92px);
    }
    .login-box {
        max-width: 620px;
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
        border-radius: 24px;
    }
    .login-main,
    .login-side {
        padding: 26px;
    }
    .login-side {
        border-left: 0;
        border-top: 1px solid var(--line);
        align-content: stretch;
    }
    .login-side-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .login-side-head strong {
        font-size: 18px;
    }
    .login-side-head span {
        width: max-content;
    }
    .login-brand-logo {
        width: auto;
        margin-bottom: 14px;
    }
    .login-brand-logo strong {
        font-size: 28px;
    }
    .login-logo-bolt {
        width: 22px;
        height: 34px;
    }
    .login-box h1 {
        font-size: 34px;
    }
    .login-kicker {
        margin-bottom: 34px;
    }
    .login-copy {
        position: static;
        margin-top: 24px;
    }
    .customer-login-box {
        min-height: 0;
    }
    .customer-track-benefits {
        grid-template-columns: 1fr;
    }
    .demo-account {
        grid-template-columns: 48px minmax(0, 1fr) auto;
        gap: 10px;
    }
    .demo-icon {
        width: 44px;
        height: 44px;
    }
    .demo-copy-field {
        grid-column: 2;
    }
    .tracking-form, .tracking-grid { grid-template-columns: minmax(0, 1fr); }
    .customer-track-page { padding: 18px; }
    .tracking-hero { padding-top: 10px; }
    .tracking-result-head { flex-direction: column; }
    .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .document-grid { grid-template-columns: minmax(0, 1fr); }
    .document-card {
        grid-template-columns: 46px minmax(0, 1fr);
    }
    .document-card .btn {
        grid-column: 1 / -1;
        width: 100%;
    }
    .document-icon {
        width: 46px;
        height: 54px;
    }
    .panel, .card, .stat { padding: 14px; max-width: 100%; overflow-x: hidden; }
    .content table {
        display: block;
        width: 100%;
        max-width: 100%;
        table-layout: auto;
        border: 0;
        background: transparent;
        overflow: visible;
    }
    .content table.jobs-table,
    .content table.jobs-table tbody,
    .content table.jobs-table tr,
    .content table.jobs-table th,
    .content table.jobs-table td {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .content table thead { display: none !important; }
    .content table tbody {
        display: grid;
        gap: 12px;
        width: 100%;
        min-width: 0;
    }
    .content table tr {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 10px 12px;
    }
    .content table.jobs-table tr.job-row-done {
        background: #ecfdf3;
        border-color: #bbf7d0;
        box-shadow: inset 4px 0 0 #099268;
    }
    .content table.jobs-table tr.job-row-waiting {
        background: #fff7ed;
        border-color: #fed7aa;
        box-shadow: inset 4px 0 0 #f97316;
    }
    .content table.jobs-table tr.job-row-cancel {
        background: #fff1f2;
        border-color: #fecdd3;
        box-shadow: inset 4px 0 0 #dc2626;
    }
    .content table.jobs-table tr.job-row-done td,
    .content table.jobs-table tr.job-row-waiting td,
    .content table.jobs-table tr.job-row-cancel td {
        background: transparent;
    }
    .content table.jobs-table th,
    .content table.jobs-table td,
    .content table.jobs-table th:nth-child(n),
    .content table.jobs-table td:nth-child(n) {
        width: auto !important;
    }
    .content table td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
        padding: 8px 0;
        border-bottom: 1px solid #edf2f5;
        word-break: break-word;
        overflow-wrap: anywhere;
        white-space: normal;
    }
    .content table td:last-child { border-bottom: 0; }
    .content table td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 42%;
        max-width: 42%;
        color: var(--muted);
        font-weight: 700;
        word-break: normal;
        overflow-wrap: normal;
    }
    .content table td[data-label] > * {
        max-width: 58%;
    }
    .content table.customers-table td[data-label="Ad Soyad"] {
        display: block;
    }
    .content table.customers-table td[data-label="Ad Soyad"]::before {
        display: block;
        max-width: none;
        margin-bottom: 6px;
    }
    .content table.customers-table td[data-label="Ad Soyad"] > * {
        max-width: 100%;
    }
    .content table.customers-table .customer-products-row {
        margin-top: -12px;
        padding-top: 0;
    }
    .content table.customers-table .customer-products-row td {
        display: block;
        padding: 0 0 12px;
        border-bottom: 0;
    }
    .content table.customers-table .customer-products-row td::before {
        display: none;
    }
    .customer-product-result-grid {
        grid-template-columns: minmax(0, 1fr);
        padding: 10px;
        border-top: 1px solid var(--line);
        border-radius: 8px;
    }
    .customer-product-result-card dl div {
        grid-template-columns: 104px minmax(0, 1fr);
    }
    .content table.jobs-table td[data-label="Sıra"] {
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
        min-height: 30px;
        padding: 2px 0 8px;
        color: var(--brand-dark);
        font-size: 15px;
        font-weight: 800;
        border-bottom-color: #f3dcc1;
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: keep-all;
    }
    .content table.jobs-table td[data-label="Sıra"]::before {
        flex: 0 0 auto;
        max-width: none;
        color: var(--muted);
        font-size: 13px;
        line-height: 1;
    }
    .content table.jobs-table td[data-label="Sıra"] > * {
        max-width: none;
    }
    .content table td[data-label] .route-form,
    .content table td[data-label] .job-cash-form {
        width: 58%;
        max-width: 58%;
    }
    .content table td[data-label] .route-form > *,
    .content table td[data-label] .job-cash-form > * {
        max-width: 100%;
    }
    .content table td.actions {
        justify-content: stretch;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .content table td.actions::before { display: none; }
    .content table.jobs-table td.actions {
        display: flex;
        width: 100% !important;
    }
    .content table.jobs-table .actions form {
        margin-top: 0;
    }
    .content table.jobs-table .actions > .btn + .btn {
        margin-top: 0;
    }
    .content table.jobs-table .actions .btn,
    .content table.jobs-table .actions button {
        width: 100%;
        min-height: 38px;
        font-size: 13px;
    }
    .job-product-editor {
        width: 100%;
    }
    .job-product-editor summary {
        white-space: normal;
    }
    .job-product-editor form {
        position: static;
        width: 100%;
        margin-top: 8px;
        box-shadow: none;
    }
    .route-form {
        width: min(100%, 220px);
    }
    .product-edit-form {
        width: 100%;
    }
    .actions { width: 100%; align-items: stretch; }
    .actions .btn, .actions button { flex: 1 1 auto; }
    input[type="file"] { font-size: 12px; }
}
@media (max-width: 520px) {
    .content table td {
        display: block;
    }
    .content table td[data-label]::before {
        display: block;
        max-width: 100%;
        margin-bottom: 6px;
    }
    .content table td[data-label] > *,
    .content table td[data-label] .route-form,
    .content table td[data-label] .job-cash-form {
        width: 100%;
        max-width: 100%;
    }
    .content table.jobs-table td[data-label="Sıra"] {
        display: flex;
    }
    .content table.jobs-table td[data-label="Sıra"]::before {
        display: inline;
        margin-bottom: 0;
    }
    .product-grid,
    .service-grid,
    .brand-grid { grid-template-columns: minmax(0, 1fr); }
    .job-detail-product-grid,
    .job-detail-product-actions { grid-template-columns: minmax(0, 1fr); }
    .business-permission-list { grid-template-columns: minmax(0, 1fr); }
    .product-edit-form { grid-template-columns: minmax(0, 1fr); }
    .product-card-actions { grid-template-columns: minmax(0, 1fr); }
    .brand-edit-form,
    .brand-card-actions { grid-template-columns: minmax(0, 1fr); }
    .login-page {
        padding: 16px;
    }
    .login-box {
        border-radius: 20px;
    }
    .login-main,
    .login-side {
        padding: 20px;
    }
    .login-brand-logo {
        width: auto;
        margin-bottom: 12px;
    }
    .login-kicker {
        margin-bottom: 28px;
    }
    .login-box h1 {
        font-size: 30px;
    }
    .login-main > p {
        font-size: 15px;
    }
    .login-role-tabs span {
        font-size: 13px;
    }
    .login-options {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
    .demo-login-box,
    .customer-login-box {
        padding: 18px;
        border-radius: 16px;
    }
    .customer-track-benefits div {
        grid-template-columns: 36px minmax(0, 1fr);
        padding: 11px;
    }
    .customer-track-benefits span {
        width: 36px;
        height: 36px;
        border-radius: 12px;
    }
    .customer-track-benefits small {
        font-size: 11px;
    }
    .login-side-head { gap: 8px; }
    .side-title-svg {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
    }
    .demo-account {
        grid-template-columns: 42px minmax(0, 1fr);
        padding: 13px;
    }
    .demo-icon {
        width: 42px;
        height: 42px;
    }
    .demo-icon svg {
        width: 23px;
        height: 23px;
    }
    .demo-copy-field {
        grid-column: 2;
    }
    .demo-account-action {
        display: none;
    }
    .copy-demo {
        width: 38px;
    }
    .field-icon {
        width: 18px;
        height: 18px;
    }
    h1 { font-size: 23px; }
    .top-actions { width: 100%; }
    .top-actions .btn { flex: 1 1 100%; }
    nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    thead, tbody, tr { min-width: 0; }
}
@media print {
    @page { size: A4 portrait; margin: 4mm; }
    .sidebar, .topbar, .filters, .no-print, .actions, .table-wrap, .aras-assistant { display: none !important; }
    .shell, .content {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #fff;
        overflow: visible !important;
    }
    body { background: #fff; color: #000; margin: 0; }
    .content .print-only.print-table {
        display: table !important;
        border-collapse: collapse;
        width: 100% !important;
        max-width: none !important;
        table-layout: fixed;
        background: #fff;
        border: 1px solid #666;
    }
    .content .print-table thead { display: table-header-group !important; }
    .content .print-table tbody { display: table-row-group !important; }
    .content .print-table tr {
        display: table-row !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        border: 0;
        padding: 0;
        background: #fff;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .content .print-table th,
    .content .print-table td {
        display: table-cell !important;
        border: 1px solid #666;
        padding: 5px 6px;
        font-size: 10px;
        line-height: 1.35;
        vertical-align: top;
        overflow-wrap: anywhere;
        word-break: normal;
        white-space: normal;
        float: none !important;
    }
    .content .print-table th {
        background: #f1f4f6;
        font-weight: 800;
        font-size: 10.5px;
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: keep-all;
    }
    .content .print-table td[data-label]::before { display: none !important; content: none !important; }
    .content .print-table .print-seq { width: 5%; }
    .content .print-table .print-customer { width: 11%; }
    .content .print-table .print-phone { width: 12%; }
    .content .print-table .print-address { width: 17%; }
    .content .print-table .print-district { width: 8%; }
    .content .print-table .print-brand { width: 8%; }
    .content .print-table .print-work { width: 10%; }
    .content .print-table .print-product { width: 11%; }
    .content .print-table .print-desc { width: 18%; }
    .content .print-table .print-phone,
    .content .print-table td.print-phone-cell {
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: keep-all;
    }
    body.print-section-active .content > * {
        display: none !important;
    }
    body.print-section-active .content > .print-section-container-active {
        display: block !important;
        border: 0;
        padding: 0;
        background: #fff;
    }
    body.print-section-active .content > .print-section-container-active > :not(.print-target-active) {
        display: none !important;
    }
    body.print-section-active .content .print-target-active {
        display: block !important;
        width: 100% !important;
    }
    body.print-section-active .content .print-target-active .print-table {
        display: table !important;
        border-collapse: collapse;
        width: 100% !important;
        table-layout: fixed;
        border: 1px solid #666;
    }
    body.print-section-active .content .print-target-active .print-table thead {
        display: table-header-group !important;
    }
    body.print-section-active .content .print-target-active .print-table tbody {
        display: table-row-group !important;
    }
    body.print-section-active .content .print-target-active .print-table tr {
        display: table-row !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    body.print-section-active .content .print-target-active .print-table th,
    body.print-section-active .content .print-target-active .print-table td {
        display: table-cell !important;
        border: 1px solid #666;
        padding: 5px 6px;
        font-size: 10px;
        line-height: 1.35;
        color: #000;
        vertical-align: top;
        overflow-wrap: anywhere;
    }
    body.print-section-active .content .print-target-active .print-table th {
        background: #f1f4f6;
        font-weight: 800;
        font-size: 10.5px;
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: keep-all;
    }
    .ticket-a4 {
        width: 202mm;
        max-width: none;
        min-height: 0;
        height: auto;
        margin: 0 auto;
        display: block;
        overflow: visible;
        zoom: .92;
        border-radius: 0;
        box-shadow: none;
        border-color: #ccd6dd;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        break-inside: avoid;
        page-break-inside: avoid;
        page-break-after: avoid;
    }
    .ticket-document {
        padding: 10px 16px 10px;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .ticket-side {
        display: none !important;
    }
    .ticket-hero {
        margin: -10px -16px 8px;
        padding: 10px 14px;
        gap: 10px;
        grid-template-columns: minmax(0, 1fr) 170px;
    }
    .ticket-brand-block h1 {
        font-size: 18px;
        margin: 2px 0 3px;
    }
    .ticket-brand-block p {
        font-size: 9.5px;
        line-height: 1.15;
    }
    .ticket-logo {
        width: 46px;
        height: 46px;
        min-width: 46px;
        padding: 4px;
    }
    .ticket-meta-card {
        padding: 8px;
        gap: 3px;
    }
    .ticket-meta-card strong {
        font-size: 14px;
    }
    .ticket-meta-card span,
    .ticket-meta-card small,
    .ticket-brand-block span {
        font-size: 10px;
    }
    .ticket-title-row {
        margin-bottom: 6px;
        padding-bottom: 5px;
    }
    .ticket-title-row h2 {
        font-size: 15px;
        margin-bottom: 2px;
    }
    .ticket-title-row p,
    .ticket-status {
        font-size: 10.5px;
    }
    .ticket-info-grid,
    .ticket-note-grid {
        gap: 5px;
    }
    .ticket-info-card,
    .ticket-note-grid section {
        padding: 6px 8px;
        border-radius: 6px;
    }
    .ticket-info-card h3,
    .ticket-note-grid h3 {
        margin-bottom: 4px;
        font-size: 9.5px;
    }
    .ticket-info-card dl {
        gap: 3px;
    }
    .ticket-info-card dl div {
        grid-template-columns: minmax(86px, 32%) minmax(0, 1fr);
        gap: 6px;
    }
    .ticket-info-card dt,
    .ticket-info-card dd,
    .ticket-note-grid p,
    .ticket-delivery-note span {
        font-size: 9.8px;
        line-height: 1.16;
    }
    .ticket-info-card dd,
    .ticket-note-grid p {
        font-weight: 600;
    }
    .ticket-note-grid section {
        min-height: 42px;
    }
    .ticket-note-grid section.full {
        min-height: 38px;
    }
    .ticket-footer {
        gap: 6px;
        margin-top: 6px;
        break-before: avoid;
        page-break-before: avoid;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .ticket-delivery-note {
        padding: 6px 8px;
        border-left-width: 3px;
        gap: 3px;
    }
    .ticket-delivery-note strong {
        font-size: 10px;
    }
    .ticket-signatures div {
        height: 34px;
        padding-bottom: 4px;
    }
    .ticket-signatures span {
        font-size: 9.5px;
    }
}

/* TekpaFix split login */
.login-page {
    min-height: 100vh;
    display: block;
    padding: 0;
    overflow: auto;
    background: #fff;
    font-family: "Inter", Arial, Helvetica, sans-serif;
    width: 100%;
    max-width: none;
}
.login-page::before { content: none; }
.login-page .login-shell {
    min-height: 100vh;
    width: 100vw;
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(520px, 1.08fr) minmax(520px, .92fr);
    background: #fff;
}
.login-showcase {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(145deg, #0e52bc 0%, #106bd0 54%, #129fc1 100%);
}
.login-showcase::before,
.login-showcase::after {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;
    pointer-events: none;
}
.login-showcase::before { top: -340px; right: -230px; }
.login-showcase::after { left: -430px; bottom: -430px; }
.showcase-inner {
    position: relative;
    z-index: 1;
    width: min(620px, calc(100% - 96px));
    min-height: 100vh;
    margin: 0 auto;
    padding: 48px 0;
    display: flex;
    flex-direction: column;
}
.showcase-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: max-content;
    color: #fff;
}
.showcase-brand > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 11px;
    background: #fff;
}
.showcase-brand img { width: 37px; height: 37px; object-fit: contain; }
.showcase-brand strong { font-size: 24px; letter-spacing: -.7px; }
.showcase-brand strong span { color: #7ddffc; }
.showcase-copy { margin: auto 0; padding: 72px 0; max-width: 570px; }
.showcase-copy small,
.login-heading > span {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
}
.showcase-copy small { color: rgba(255,255,255,.85); }
.showcase-copy h1 {
    margin: 18px 0 20px;
    color: #fff;
    font-size: clamp(38px, 3.2vw, 55px);
    line-height: 1.1;
    letter-spacing: -.045em;
}
.showcase-copy h1 em { color: #65d8e5; font-style: normal; }
.showcase-copy p { max-width: 525px; color: rgba(255,255,255,.88); font-size: 15px; line-height: 1.75; }
.showcase-stat {
    width: 340px;
    min-height: 100px;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 18px 22px;
    border: 1px solid rgba(255,255,255,.19);
    border-radius: 16px;
    background: rgba(255,255,255,.09);
    backdrop-filter: blur(10px);
}
.showcase-stat svg { width: 92px; height: 58px; fill: #65d8e5; }
.showcase-stat div { display: grid; gap: 3px; }
.showcase-stat small { color: rgba(255,255,255,.7); font-size: 10px; }
.showcase-stat strong { color: #fff; font-size: 20px; }
.showcase-stat span { color: rgba(255,255,255,.72); font-size: 10px; }
.login-panel {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 48px;
    background: #fff;
}
.login-card { width: min(440px, 100%); }
.login-mobile-logo { display: none; }
.login-heading { margin-bottom: 30px; }
.login-heading > span { margin-bottom: 12px; color: var(--brand); }
.login-heading h2 {
    margin: 0 0 8px;
    color: #101828;
    font-size: 29px;
    line-height: 1.2;
    letter-spacing: -.035em;
}
.login-heading p { color: #7a869b; font-size: 13px; line-height: 1.55; }
.login-card .notice { margin-bottom: 18px; }
.login-card .login-form { max-width: none; margin: 0; gap: 16px; }
.login-card .login-form > label {
    display: grid;
    gap: 8px;
    color: #25324a;
    font-size: 12px;
    font-weight: 600;
}
.login-card .login-form input[type="text"],
.login-card .login-form input[type="password"] {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #d7dfeb;
    border-radius: 10px;
    background: #fff;
    color: #101828;
    box-shadow: none;
    font: 500 13px "Inter", Arial, sans-serif;
}
.login-card .login-form input:focus {
    outline: none;
    border-color: #0e52bc;
    box-shadow: 0 0 0 3px rgba(14,82,188,.1);
}
.login-card .login-input-wrap { display: block; }
.login-card .login-input-wrap input { padding-right: 48px; }
.login-card .password-toggle { right: 7px; color: #101828; }
.login-card .login-options { margin-top: -2px; font-size: 12px; }
.login-card .login-options a { color: var(--brand); font-weight: 500; }
.login-card .remember-me { color: #344054; font-size: 12px; }
.login-card .login-form > button {
    min-height: 50px;
    margin: 0;
    border-radius: 10px;
    background: #0e52bc;
    box-shadow: none;
    font: 700 14px "Inter", Arial, sans-serif;
}
.login-card .login-form > button:hover { transform: none; background: #0b47a5; box-shadow: 0 10px 24px rgba(14,82,188,.18); }
.login-card .login-form > button span { margin-left: 5px; font-size: 17px; font-weight: 400; }
.demo-access { margin-top: 18px; }
.demo-access > span { display: block; margin-bottom: 8px; color: #8a95a8; font-size: 10px; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: .08em; }
.demo-access > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.demo-access button {
    min-height: 54px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid #e1e7f0;
    border-radius: 10px;
    background: #f5f8fc;
    color: #344054;
    box-shadow: none;
    text-align: left;
}
.demo-access button:hover { border-color: rgba(14,82,188,.3); background: #eef4ff; }
.demo-access-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--brand);
    background: #e6efff;
}
.demo-access-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.demo-access-info { min-width: 0; display: grid; gap: 3px; }
.demo-access strong { font-size: 11px; }
.demo-access small { color: #758197; font: 500 9px "Inter", Arial, sans-serif; white-space: nowrap; }
.customer-track-link {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
    color: #667085;
    font-size: 11px;
    font-weight: 600;
}
.customer-track-link:hover { color: var(--brand); }
.login-card .login-copy { position: static; margin-top: 34px; color: #98a2b3; font-size: 11px; text-align: center; }

@media (max-width: 1100px) {
    .login-page .login-shell { grid-template-columns: minmax(440px, .9fr) minmax(500px, 1.1fr); }
    .showcase-inner { width: calc(100% - 64px); }
    .showcase-copy h1 { font-size: 40px; }
}
@media (max-width: 960px) {
    .login-page .login-shell { display: block; min-height: 100vh; }
    .login-showcase { display: none; }
    .login-panel { min-height: 100vh; padding: 44px 28px; align-items: start; }
    .login-card { width: min(440px, 100%); margin: 0 auto; }
    .login-mobile-logo { display: block; width: 245px; margin: 4px 0 46px; }
    .login-mobile-logo img { display: block; width: 100%; height: auto; }
    .login-heading h2 { font-size: 28px; }
}
@media (max-width: 480px) {
    .login-panel { padding: 32px 22px; }
    .login-mobile-logo { width: 215px; margin-bottom: 38px; }
    .login-heading { margin-bottom: 26px; }
    .login-heading h2 { font-size: 26px; }
    .demo-access > div { grid-template-columns: 1fr; }
    .demo-access button { text-align: left; }
}