/* Adminläget Drönare (public/js/admin/drone.js). Ljust tema som adminpanelen:
   vita kort, blå rubriker, orange handling. Byggt för handskar: minst 56 px
   höga tryckytor, stora typsnitt. Allt under .drn så att inget läcker ut. */

.drn { --drn-blue: #015e9f; --drn-orange: #f0833d; --drn-border: #d8dbe0; color: #000; }
.drn * { box-sizing: border-box; }

.drn-hint { margin: 8px 2px 18px; color: #666; font-size: 15px; line-height: 1.45; }
.drn-empty { margin: 6px 2px; color: #666; font-size: 15px; }
.drn-warn { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #fff4ec; color: #8a3d0b; font-size: 14px; line-height: 1.4; }

.drn-ico { display: inline-flex; width: 34px; height: 34px; flex: 0 0 auto; }
.drn-ico svg { width: 100%; height: 100%; }

/* Det stora trycket: Ny drönarinsats / Öppna drönarvyn */
.drn-new, .drn-open {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    width: 100%; min-height: 96px; padding: 18px 20px; border: none; border-radius: 16px;
    background: var(--drn-orange); color: #fff; font: inherit; font-size: 22px; font-weight: 800;
    text-decoration: none; cursor: pointer; box-shadow: 0 4px 14px rgba(240, 131, 61, 0.35);
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.drn-new:active, .drn-open:active { transform: scale(0.99); filter: brightness(0.95); }

.drn-card {
    background: #fff; border: 1px solid var(--drn-border); border-radius: 14px;
    padding: 18px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); margin-bottom: 14px;
}
.drn-card-title { margin: 0 0 12px; font-size: 15px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--drn-blue); }
.drn-create .drn-card-title { font-size: 18px; text-transform: none; letter-spacing: 0; }
.drn-label { display: block; margin: 14px 0 8px; font-size: 14px; font-weight: 700; color: #333; }

.drn-incidents { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.drn-incident {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 88px; padding: 10px 6px; border: 2px solid var(--drn-border); border-radius: 12px;
    background: #fff; color: #000; font: inherit; font-size: 14px; font-weight: 600; text-align: center;
    cursor: pointer; touch-action: manipulation; hyphens: auto; overflow-wrap: anywhere;
}
.drn-incident.active { border-color: var(--drn-orange); background: #fff4ec; box-shadow: inset 0 0 0 1px var(--drn-orange); }
.drn-incident-ico { font-size: 28px; line-height: 1; }

.drn-input {
    width: 100%; min-height: 56px; padding: 12px 14px; border: 1px solid var(--drn-border); border-radius: 12px;
    font: inherit; font-size: 18px; color: #000; background: #fff;
}
.drn-input:focus { outline: 2px solid var(--drn-blue); outline-offset: 1px; }

.drn-row { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.drn-btn {
    flex: 1 1 140px; min-height: 60px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--drn-border);
    font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; touch-action: manipulation;
}
.drn-btn-primary { background: var(--drn-orange); border-color: var(--drn-orange); color: #fff; }
.drn-btn-primary:disabled { opacity: 0.6; cursor: default; }
.drn-btn-secondary { background: #f7f8fa; color: #000; }
/* Bjud in ledningen: blå, hel bredd under Dela/Kopiera. */
.drn-btn-invite {
    display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 10px;
    background: var(--drn-blue); border-color: var(--drn-blue); color: #fff; text-decoration: none; box-sizing: border-box;
}
.drn-btn-small { flex: 0 0 auto; min-height: 48px; font-size: 15px; background: #f7f8fa; color: #000; }

.drn-section { margin-top: 26px; }
.drn-section-title { margin: 0 0 10px; font-size: 14px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--drn-blue); }
.drn-ex {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 76px; margin-bottom: 10px;
    padding: 14px 16px; border: 1px solid var(--drn-border); border-radius: 14px; background: #fff;
    font: inherit; color: #000; text-align: left; cursor: pointer; touch-action: manipulation;
}
.drn-ex:active { background: #f4f6f9; }
.drn-ex-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.drn-ex-name { font-size: 18px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drn-ex-sub { font-size: 14px; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drn-ex-chev { font-size: 28px; color: #999; flex: 0 0 auto; }

.drn-pill { flex: 0 0 auto; padding: 6px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.drn-pill-live { background: var(--drn-orange); color: #fff; }
.drn-pill-data { background: #e6eff7; color: var(--drn-blue); }
.drn-pill-empty { background: #f0f2f5; color: #666; }

/* Insatsens skärm */
.drn-back {
    min-height: 52px; padding: 10px 4px; margin: -6px 0 4px; border: none; background: none;
    color: var(--drn-blue); font: inherit; font-size: 17px; font-weight: 700; cursor: pointer;
}
.drn-title { margin: 0 0 14px; font-size: 24px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.drn-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 900px) {
    .drn-grid { grid-template-columns: 1fr 1fr; gap: 0 14px; align-items: start; }
    .drn-connect { grid-column: 1 / -1; }
}
.drn-share { text-align: center; }
.drn-qr { display: block; width: min(320px, 78vw); height: auto; aspect-ratio: 1; margin: 4px auto 10px; image-rendering: pixelated; }
.drn-url { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; color: #333; overflow-wrap: anywhere; }
.drn-share .drn-hint { margin-bottom: 0; }

.drn-steps { margin: 0; padding-left: 26px; }
.drn-step { margin: 0 0 12px; padding-left: 4px; font-size: 16px; line-height: 1.45; }
.drn-step::marker { color: var(--drn-orange); font-weight: 800; }
.drn-bridge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.drn-bridge-url {
    flex: 1 1 200px; padding: 12px; border-radius: 10px; background: #f0f2f5; font-size: 17px; font-weight: 700;
    color: var(--drn-blue); overflow-wrap: anywhere;
}

.drn-st { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid #eef0f3; }
.drn-st:first-of-type { border-top: none; }
.drn-st-dot { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 4px; border-radius: 50%; background: #c4c8cf; }
.drn-st-ok .drn-st-dot { background: var(--drn-blue); }
.drn-st-fly .drn-st-dot { background: var(--drn-orange); box-shadow: 0 0 0 4px rgba(240, 131, 61, 0.25); }
.drn-st-wait .drn-st-dot { background: #fff; border: 2px solid #999; }
.drn-st-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.drn-st-title { font-size: 16px; font-weight: 700; }
.drn-st-detail { font-size: 14px; color: #666; overflow-wrap: anywhere; }
.drn-updated { margin-top: 8px; font-size: 12px; color: #999; }

.drn-link { display: block; margin: 6px 0 20px; padding: 14px 4px; color: var(--drn-blue); font-size: 16px; font-weight: 700; text-decoration: none; }

@media (max-width: 420px) {
    .drn-new, .drn-open { font-size: 20px; min-height: 88px; }
    .drn-incidents { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .drn-incident { min-height: 82px; font-size: 13px; }
    .drn-card { padding: 16px 14px; }
}