.native-support-view {
    background: #f8fafc;
}

html.support-workspace-active footer { display:none !important; }

.native-support-view .field {
    width: 100%;
    border: 1px solid #d8dee9;
    border-radius: 12px;
    padding: .65rem .75rem;
    background: #fff;
}

.native-support-view .label {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.native-support-view .card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
}

.tickets-native { padding: 18px; }
.tickets-native .ticket-summary { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin-bottom:14px; }
.tickets-native .ticket-stat { background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:12px 15px; }
.tickets-native .ticket-stat span { display:block;color:#64748b;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap; }
.tickets-native .ticket-stat strong { display:block;font-size:23px;line-height:1.15;margin-top:5px; }
.tickets-native > header { position:relative;border:1px solid #e5e7eb;border-radius:20px;margin-bottom:14px;padding:14px 16px; }
.tickets-native > header > div { display:none; }
.tickets-native .ticket-toolbar { display:grid;grid-template-columns:minmax(250px,1fr) 170px 150px auto;gap:10px;align-items:center; }
.tickets-native .ticket-toolbar .field { height:44px; }
.tickets-native .ticket-actions { display:flex;gap:10px;white-space:nowrap; }
.tickets-native .ticket-grid { display:grid;grid-template-columns:minmax(340px,42%) 1fr;height:calc(100vh - 240px);border:1px solid #e5e7eb;border-radius:24px;overflow:hidden; }
.tickets-native .queue { overflow:auto;border-right:1px solid #e5e7eb; }
.tickets-native .detail { overflow:auto; }
.tickets-native .chip { border-radius:999px;padding:.18rem .6rem;font-size:.72rem;font-weight:700; }
.tickets-native .selected { border-left:4px solid #4f46e5;background:#eef2ff; }

/* New ticket modal lives in the browser top layer, so size and theme it
   explicitly instead of relying on utility classes from the host build. */
.tickets-native #newTicket {
    width: min(680px, calc(100vw - 32px));
    max-width: 680px;
    max-height: calc(100vh - 48px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    color: #1e293b;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .32);
}
.tickets-native #newTicket::backdrop { background: rgba(2, 6, 23, .68);backdrop-filter:blur(3px); }
.tickets-native #newTicket form { display:grid;gap:14px;padding:24px;max-height:calc(100vh - 48px);overflow:auto; }
.tickets-native #newTicket form > div:first-of-type { align-items:center; }
.tickets-native #newTicket form > div:first-of-type button { width:36px;height:36px;border-radius:10px;font-size:18px;line-height:1; }
.tickets-native #newTicket form > div:first-of-type button:hover { background:#f1f5f9; }
.tickets-native #newTicket .field { min-height:46px; }
.tickets-native #newTicket .ticket-new-assignment-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }
.tickets-native #newTicket textarea.field { min-height:140px;resize:vertical; }
.tickets-native #newTicket input[type="file"] { width:100%;padding:10px;border:1px dashed #cbd5e1;border-radius:12px;background:#f8fafc; }
.tickets-native #newTicket form > div:last-of-type { align-items:center;margin-top:2px;padding-top:14px;border-top:1px solid #e2e8f0; }
.tickets-native #newTicket form > div:last-of-type button { min-height:42px;border-radius:11px; }

.ticket-settings-native .row { display:grid;grid-template-columns:2fr 110px 90px 120px 130px auto;gap:10px;align-items:end; }

.ticket-piping-native {
    padding: 20px;
}

.ticket-piping-native .card {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    border-radius: 24px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.ticket-piping-native .grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px; }
.ticket-piping-native h1 { font-size:25px;font-weight:800; }
.ticket-piping-native h2 { font-size:17px;font-weight:750;margin:22px 0 12px;padding-top:20px;border-top:1px solid #e5e7eb; }
.ticket-piping-native .actions { display:flex;justify-content:flex-end;align-items:center;gap:14px;margin-top:24px; }
.ticket-piping-native button,
.ticket-piping-native .button { padding:11px 17px;border-radius:14px;background:#4f46e5;color:#fff;font-weight:700; }

.dark .native-support-view {
    background: #0a0a0a;
}

.dark .native-support-view .card,
.dark .tickets-native .ticket-stat,
.dark .tickets-native > header {
    background: #171717;
    border-color: #404040;
}

.dark .native-support-view .field {
    background: #262626;
    border-color: #525252;
    color: #fff;
}

.dark .tickets-native .ticket-grid,
.dark .tickets-native .queue {
    border-color: #404040;
}

.dark .tickets-native .ticket-grid,
.dark .tickets-native .queue,
.dark .tickets-native .detail {
    background: #0f0f0f !important;
    color: #f5f5f5;
}
.dark .tickets-native .queue > a {
    background: #171717;
    border-color: #2f2f2f !important;
    color: #f5f5f5;
}
.dark .tickets-native .queue > a:hover { background:#202020 !important; }
.dark .tickets-native .queue > a.selected { background:#25205f !important;border-left-color:#818cf8; }
.dark .tickets-native .detail { border-left-color:#404040; }
.dark .tickets-native .detail .card { background:#171717;border-color:#404040;color:#f5f5f5; }
.dark .tickets-native .bg-white,
.dark .tickets-native .bg-slate-50 { background:#171717 !important; }
.dark .tickets-native .text-slate-800 { color:#f5f5f5 !important; }
.dark .tickets-native .text-slate-500,
.dark .tickets-native .text-slate-600 { color:#a3a3a3 !important; }
.dark .tickets-native .border-slate-100,
.dark .tickets-native .border-slate-200,
.dark .tickets-native .border-slate-300 { border-color:#404040 !important; }
.dark .tickets-native details summary,
.dark .tickets-native h2,
.dark .tickets-native h3 { color:#f5f5f5; }

.dark .tickets-native #newTicket { background:#171717;border-color:#404040;color:#f5f5f5; }
.dark .tickets-native #newTicket form > div:first-of-type button:hover { background:#262626; }
.dark .tickets-native #newTicket input[type="file"] { background:#262626;border-color:#525252;color:#d4d4d4; }
.dark .tickets-native #newTicket form > div:last-of-type { border-color:#404040; }

.dark .ticket-piping-native .card {
    background: #171717;
    border-color: #404040;
}

.dark .ticket-piping-native .field {
    background: #262626;
    border-color: #525252;
    color: #fff;
}

/* Workflow settings are injected into the parent document, so their original
   body-level dark selectors need native-container equivalents. */
.ticket-settings-native {
    padding: 20px;
}

.ticket-settings-native > header {
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    margin-bottom: 20px;
}

.dark .ticket-settings-native {
    background: #0a0a0a;
    color: #f5f5f5;
}

.dark .ticket-settings-native > header,
.dark .ticket-settings-native .card {
    background: #171717 !important;
    border-color: #404040 !important;
}

.dark .ticket-settings-native main .card form {
    background: #262626 !important;
    border: 1px solid #404040 !important;
    border-radius: 16px;
    color: #e5e5e5 !important;
}

.dark .ticket-settings-native main .card form.border-t {
    margin-top: 20px;
    padding: 16px;
}

.dark .ticket-settings-native .field {
    background: #171717 !important;
    border-color: #525252 !important;
    color: #fff !important;
}

.dark .ticket-settings-native .label,
.dark .ticket-settings-native p,
.dark .ticket-settings-native label {
    color: #d4d4d4 !important;
}

.dark .ticket-settings-native button {
    background: #4f46e5 !important;
    color: #fff !important;
    border-color: #6366f1 !important;
}

.dark .ticket-settings-native input[type="checkbox"] {
    accent-color: #6366f1;
}

@media (max-width: 800px) {
    .ticket-piping-native,
    .ticket-settings-native { padding: 12px; }
}

@media (max-width: 1100px) {
    .tickets-native .ticket-summary { grid-template-columns:repeat(4,1fr); }
    .tickets-native .ticket-toolbar { grid-template-columns:1fr 1fr; }
}

@media (max-width: 900px) {
    .ticket-settings-native .row { grid-template-columns:1fr 1fr; }
    .tickets-native .ticket-grid { display:block;height:auto; }
}

@media (max-width: 650px) {
    .tickets-native .ticket-summary { grid-template-columns:repeat(2,1fr); }
    .tickets-native .ticket-toolbar { grid-template-columns:1fr; }
    .ticket-piping-native .grid { grid-template-columns:1fr; }
    .tickets-native #newTicket { width:calc(100vw - 20px);max-height:calc(100vh - 20px);border-radius:16px; }
    .tickets-native #newTicket form { padding:18px;max-height:calc(100vh - 20px); }
    .tickets-native #newTicket form > .grid { grid-template-columns:1fr; }
    .tickets-native #newTicket .ticket-new-assignment-grid { grid-template-columns:1fr; }
    .tickets-native #newTicket form > div:last-of-type { flex-direction:column-reverse;align-items:stretch; }
}