/* CloudPDKS mobile — the revised mock-up (temps/cloud-pdks-ui-ux-prot-2 and the twelve-screen
   reference image the PO supplied, 2026-10-14).

   ── Two kinds of rule, kept apart ─────────────────────────────────────────────────────────────

   1. `m-*` classes belong to the phone screens (TodayPanel, Hareketler, İşlem and its results,
      the notification centre, Personel, Personel detayı, İzin talepleri, Profil, the app's sign-in)
      and to nothing else, so they apply at every width: the same screens opened on a desktop read
      as the mock-up's single column, centred.

   2. Everything that restyles what already existed — the shell, the tab bar, the design system's
      tokens, every listing and card — is inside the phone-width query app.css draws the phone
      layout with. A desktop never matches it, so the web product's look is untouched.

   Borina.UI is frozen: none of its files is touched and none of its classes is redefined outside
   that query; the phone's palette goes through the library's own custom properties.

   ── Contrast ──────────────────────────────────────────────────────────────────────────────────

   The mock-up's teal button (#009879) carries white text at 3.6:1 and its muted grey (#71858a)
   is 4.0:1 — both under WCAG AA for the sizes they carry. The nearest shades that pass are used
   instead (#007f6c, #5f7377); the red badge is #d63a1c for the same reason (docs/91 PDKS-151). */

:root {
    --m-ink: #0d2930;
    --m-petrol: #003f43;
    --m-petrol-2: #005a54;
    --m-teal: #007f6c;
    --m-teal-dark: #00695d;
    --m-bright: #2fd29b;
    --m-mint: #dff7ed;
    --m-mint-ink: #0f7a5f;
    --m-surface: #f6f9f8;
    --m-wash: #eef4f3;
    --m-line: #e3ecea;
    --m-muted: #5f7377;
    --m-orange: #ff7a1a;
    --m-orange-deep: #f35c00;
    --m-orange-text: #b85200;
    --m-orange-wash: #fff1e5;
    --m-red: #d63a1c;
    --m-red-wash: #fdecea;
    --m-blue: #3b6fe0;
    --m-blue-wash: #e8efff;
    --m-purple: #7449dc;
    --m-purple-wash: #efe8ff;
    --m-radius: 18px;
    --m-shadow: 0 6px 18px rgba(10, 77, 67, 0.06);
}

.pdks-phone-only { display: none; }

/* ═══ 1. The phone screens' own components ══════════════════════════════════════════════════ */

.m-page,
.m-today {
    display: grid;
    gap: 16px;
    max-width: 520px;
    margin: 0 auto;
    color: var(--m-ink);
}

.m-today { margin-bottom: 24px; }

.m-muted { color: var(--m-muted); font-size: 12px; margin: 0; }

.m-eyebrow {
    margin: 0 0 4px;
    color: var(--m-teal);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.m-page-title,
.m-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.m-page-title h1 {
    margin: 0;
    font-family: inherit;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.15;
}

/* A sub-screen's header: back arrow, the title centred. */
.m-head {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    min-height: 44px;
}

.m-head h1 { margin: 0; text-align: center; font-family: inherit; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }

.m-back,
.m-icon-button {
    position: relative;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--m-ink);
    cursor: pointer;
    flex: none;
    font: inherit;
}

.m-icon-button { background: #fff; border: 1px solid var(--m-line); }
.m-back svg, .m-icon-button svg { width: 20px; height: 20px; }
.m-back svg { transform: scaleX(-1); }

.m-section-head { margin-top: 2px; }
.m-section-head h2 { margin: 0; font-family: inherit; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }

.m-text-button {
    border: 0;
    background: none;
    padding: 6px 0;
    color: var(--m-teal);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.m-text-button:disabled { opacity: 0.5; }

/* The calendar control is the date input itself, laid over its icon or pill. */
.m-date-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* People are a round mark with their initials, tinted by name so a list is easy to scan. */
.m-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: none;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    background: var(--m-teal-dark);
}

.m-avatar.lg { width: 60px; height: 60px; font-size: 19px; }
.m-avatar.sm { width: 34px; height: 34px; font-size: 11px; }
.m-avatar.t0 { background: #00695d; }
.m-avatar.t1 { background: #b9774e; }
.m-avatar.t2 { background: #3b6fe0; }
.m-avatar.t3 { background: #7449dc; }
.m-avatar.t4 { background: #c2553a; }
.m-avatar.t5 { background: #3f7f8c; }

/* State pills. */
.m-pill,
.m-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.m-pill::before,
.m-live::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.m-pill.plain::before { display: none; }
.m-pill.green, .m-live.green { color: var(--m-mint-ink); background: var(--m-mint); }
.m-pill.orange, .m-live.orange { color: var(--m-orange-text); background: var(--m-orange-wash); }
.m-pill.red, .m-live.red { color: var(--m-red); background: var(--m-red-wash); }
.m-pill.slate, .m-live.slate { color: #56676d; background: var(--m-wash); }

.m-count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    display: inline-grid;
    place-items: center;
    background: var(--m-red);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

/* A white card that holds a list; its rows are separated by hairlines. */
.m-card {
    background: #fff;
    border: 1px solid var(--m-line);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow);
    overflow: hidden;
}

.m-card > * + * { border-top: 1px solid var(--m-line); }

/* ── Home ─────────────────────────────────────────────────────────────────────────────────── */

.m-welcome { display: grid; gap: 2px; }
.m-welcome-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.m-welcome h1 { margin: 2px 0 4px; font-family: inherit; font-size: 24px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.15; }
.m-place { margin: 0; color: var(--m-teal); font-size: 12px; font-weight: 600; }

.m-hero {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(140deg, var(--m-petrol-2), var(--m-petrol));
    box-shadow: 0 14px 28px rgba(0, 63, 67, 0.22);
}

.m-ring { position: relative; width: 132px; height: 132px; }
.m-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.m-ring circle { fill: none; stroke-width: 10; }
.m-ring .track { stroke: rgba(255, 255, 255, 0.14); }
.m-ring .value { stroke: var(--m-bright); stroke-linecap: round; transition: stroke-dashoffset 0.6s ease; }

.m-ring-text {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    text-align: center;
    gap: 1px;
}

.m-ring-text small { font-size: 9px; line-height: 1.2; color: #b8e8da; max-width: 80px; }
.m-ring-text strong { font-size: 30px; font-weight: 800; letter-spacing: -0.05em; line-height: 1.05; }
.m-ring-text span { font-size: 11px; color: #b8e8da; }
.m-ring-text b { margin-top: 3px; padding: 2px 8px; border-radius: 99px; background: rgba(47, 210, 155, 0.22); color: var(--m-bright); font-size: 11px; }

.m-hero-side {
    display: grid;
    gap: 12px;
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.m-hero-side small { display: block; color: #9fd8c8; font-size: 11px; }
.m-hero-side strong { display: block; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }

.m-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }

.m-quick button {
    min-height: 104px;
    padding: 15px;
    border: 1px solid var(--m-line);
    border-radius: var(--m-radius);
    background: #fff;
    color: var(--m-ink);
    text-align: left;
    font: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: var(--m-shadow);
}

.m-quick button.qr { border: 0; color: #fff; background: linear-gradient(145deg, #ff8a22, var(--m-orange-deep)); }
.m-quick strong { font-size: 14px; line-height: 1.25; }

.m-quick-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: var(--m-teal);
    background: var(--m-mint);
}

.m-quick .qr .m-quick-icon { color: #fff; background: rgba(255, 255, 255, 0.24); }
.m-quick-icon svg { width: 21px; height: 21px; }

.m-shift {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}

.m-shift > svg { width: 22px; height: 22px; color: var(--m-ink); flex: none; }
.m-shift > div { flex: 1; min-width: 0; }
.m-shift small { display: block; color: var(--m-muted); font-size: 12px; }
.m-shift strong { display: block; font-size: 15px; font-weight: 800; }

.m-kpis { display: grid; grid-template-columns: repeat(3, 1fr); }
.m-card > .m-kpis { border-top: 1px solid var(--m-line); }

.m-kpi {
    display: grid;
    grid-template-columns: 26px 1fr;
    align-items: center;
    column-gap: 6px;
    padding: 12px 10px;
    text-decoration: none;
    color: var(--m-ink);
}

.m-kpi + .m-kpi { border-left: 1px solid var(--m-line); }
.m-kpi svg { grid-row: span 2; width: 20px; height: 20px; }
.m-kpi small { font-size: 11px; color: var(--m-muted); }
.m-kpi strong { font-size: 18px; font-weight: 800; }
.m-kpi.green svg { color: var(--m-teal); }
.m-kpi.red svg { color: var(--m-red); }

/* ── Movements ────────────────────────────────────────────────────────────────────────────── */

.m-move {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    color: var(--m-ink);
    text-decoration: none;
}

.m-move > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.m-move strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-move small { font-size: 11px; color: var(--m-muted); }
.m-move time { font-size: 13px; font-weight: 800; }

.m-mark {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: none;
}

.m-mark svg { width: 15px; height: 15px; stroke-width: 2.4; }
.m-mark.green { color: var(--m-teal); background: var(--m-mint); }
.m-mark.orange { color: var(--m-orange-deep); background: var(--m-orange-wash); }
.m-mark.slate { color: #68777c; background: var(--m-wash); }
.m-mark.ring { background: transparent; border: 2px solid currentColor; width: 24px; height: 24px; }
.m-mark.ring svg { width: 12px; height: 12px; }

.m-empty {
    text-align: center;
    color: var(--m-muted);
    padding: 34px 16px;
    display: grid;
    justify-items: center;
    gap: 7px;
}

.m-empty-icon svg { width: 28px; height: 28px; }
.m-empty strong { color: var(--m-ink); font-size: 14px; }
.m-empty p { font-size: 12px; margin: 0; }

/* ── Search, filters, tabs ────────────────────────────────────────────────────────────────── */

.m-searchbar { display: flex; gap: 10px; }

.m-search {
    flex: 1;
    min-width: 0;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 13px;
    border: 1px solid var(--m-line);
    border-radius: 13px;
    background: #fff;
    color: var(--m-muted);
}

.m-search svg { width: 17px; height: 17px; flex: none; }

.m-search input {
    border: 0;
    outline: 0;
    width: 100%;
    min-width: 0;
    height: 100%;
    background: transparent;
    font: inherit;
    font-size: 16px; /* under 16px a phone zooms into the field and stays zoomed */
    color: var(--m-ink);
}

.m-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; align-items: center; }
.m-chips::-webkit-scrollbar { display: none; }

.m-chip {
    position: relative;
    border: 1px solid var(--m-line);
    background: #fff;
    color: var(--m-muted);
    padding: 0 14px;
    min-height: 36px;
    border-radius: 11px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.m-chip.active { background: var(--m-teal); border-color: var(--m-teal); color: #fff; font-weight: 800; }
.m-chip svg { width: 16px; height: 16px; }

.m-segment {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    background: var(--m-wash);
    border-radius: 13px;
    padding: 4px;
    gap: 4px;
}

.m-segment button {
    min-height: 40px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--m-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.m-segment .selected { background: #fff; color: var(--m-teal); font-weight: 800; box-shadow: 0 2px 6px rgba(12, 76, 66, 0.1); }
.m-segment.solid .selected { background: var(--m-teal); color: #fff; box-shadow: 0 6px 14px rgba(0, 127, 108, 0.25); }

.m-date-label { font-size: 12px; color: var(--m-muted); font-weight: 700; margin: 2px 0 -6px; }

/* ── Buttons ──────────────────────────────────────────────────────────────────────────────── */

.m-primary,
.m-secondary,
.m-logout {
    width: 100%;
    min-height: 50px;
    border-radius: 14px;
    border: 0;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.m-primary { color: #fff; background: var(--m-teal); box-shadow: 0 10px 20px rgba(0, 127, 108, 0.22); }
.m-primary:disabled, .m-secondary:disabled { opacity: 0.55; cursor: default; }
.m-secondary { color: var(--m-ink); background: var(--m-wash); }
.m-secondary svg, .m-primary svg, .m-logout svg { width: 18px; height: 18px; }
.m-logout { background: var(--m-red-wash); color: var(--m-red); }

.m-info-note {
    display: flex;
    justify-content: center;
    gap: 6px;
    align-items: center;
    color: var(--m-muted);
    font-size: 12px;
    text-align: center;
}

.m-info-note svg { width: 15px; height: 15px; flex: none; }

.m-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px;
    border-radius: 15px;
}

.m-notice > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; flex: none; }
.m-notice > span svg { width: 17px; height: 17px; }
.m-notice strong { font-size: 13px; }
.m-notice p { margin: 3px 0 0; font-size: 12px; }
.m-notice.orange { background: var(--m-orange-wash); color: #7c4314; }
.m-notice.orange > span { color: var(--m-orange-deep); background: #ffe2c9; }
.m-notice.red { background: var(--m-red-wash); color: #8b2a17; }
.m-notice.red > span { color: var(--m-red); background: #fbd7d0; }

/* ── Punching: the camera, the map, the result ────────────────────────────────────────────── */

.m-camera {
    position: relative;
    border-radius: 24px;
    padding: 26px 20px 22px;
    color: #fff;
    text-align: center;
    background:
        radial-gradient(circle at 50% 35%, rgba(47, 210, 155, 0.10), transparent 60%),
        linear-gradient(170deg, #1d2d2e, #0b1a1b);
    overflow: hidden;
}

.m-camera-frame {
    position: relative;
    width: min(220px, 64vw);
    aspect-ratio: 1;
    margin: 6px auto 18px;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
}

.m-camera-frame > i {
    position: absolute;
    width: 34px;
    height: 34px;
    border: 0 solid var(--m-bright);
}

.m-camera-frame > i:nth-of-type(1) { top: 0; left: 0; border-top-width: 4px; border-left-width: 4px; border-radius: 12px 0 0 0; }
.m-camera-frame > i:nth-of-type(2) { top: 0; right: 0; border-top-width: 4px; border-right-width: 4px; border-radius: 0 12px 0 0; }
.m-camera-frame > i:nth-of-type(3) { bottom: 0; left: 0; border-bottom-width: 4px; border-left-width: 4px; border-radius: 0 0 0 12px; }
.m-camera-frame > i:nth-of-type(4) { bottom: 0; right: 0; border-bottom-width: 4px; border-right-width: 4px; border-radius: 0 0 12px 0; }
.m-camera-frame svg { width: 84px; height: 84px; stroke-width: 1.2; }
.m-camera p { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.45; }

.m-scan-line {
    position: absolute;
    left: 10%;
    width: 80%;
    height: 2px;
    background: var(--m-bright);
    box-shadow: 0 0 10px var(--m-bright);
    animation: m-scan 1.2s infinite alternate;
}

@keyframes m-scan { from { top: 12%; } to { top: 86%; } }

.m-panel {
    background: #fff;
    border: 1px solid var(--m-line);
    border-radius: 22px;
    padding: 14px 16px 16px;
    display: grid;
    gap: 12px;
    box-shadow: var(--m-shadow);
}

.m-panel::before {
    content: '';
    width: 40px;
    height: 4px;
    margin: 0 auto -2px;
    border-radius: 2px;
    background: var(--m-line);
}

.m-panel h2 { margin: 0; font-family: inherit; font-size: 15px; font-weight: 800; }
.m-panel .m-muted { text-align: center; }

/* The map is drawn, not fetched: no tile server sees where anybody stands (KVKK, PDKS-155). */
.m-map {
    position: relative;
    height: 230px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--m-line);
    background:
        linear-gradient(90deg, rgba(0, 63, 67, 0.05) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(rgba(0, 63, 67, 0.05) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(160deg, #eef6f3, #f8fbfa);
}

.m-map svg { width: 100%; height: 100%; display: block; }
.m-map .road { stroke: #fff; stroke-width: 14; stroke-linecap: round; fill: none; }
.m-map .zone { fill: rgba(0, 127, 108, 0.12); stroke: var(--m-teal); stroke-width: 2; }
.m-map .zone.out { fill: rgba(214, 58, 28, 0.06); stroke: #e38b78; stroke-dasharray: 6 5; }
.m-map .me-halo { fill: rgba(59, 111, 224, 0.18); }
.m-map .me { fill: var(--m-blue); stroke: #fff; stroke-width: 3; }

.m-map-label {
    position: absolute;
    left: 50%;
    top: 14px;
    transform: translateX(-50%);
    padding: 5px 11px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    color: #fff;
    background: var(--m-teal);
}

.m-map-label.out { background: var(--m-red); }

.m-map-state {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 10px;
    color: var(--m-muted);
    font-size: 13px;
    text-align: center;
    padding: 20px;
}

.m-map-state svg { width: 34px; height: 34px; color: var(--m-teal); }
.m-map-state.busy svg { animation: m-pulse 1.1s ease-in-out infinite; }
.m-map-state .m-burst svg { color: #fff; width: 30px; height: 30px; }

@keyframes m-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.m-site {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}

.m-site > span:first-child {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--m-teal);
    background: var(--m-mint);
    flex: none;
}

.m-site > span:first-child svg { width: 20px; height: 20px; }
.m-site > div { flex: 1; min-width: 0; }
.m-site strong { display: block; font-size: 14px; }
.m-site small { display: block; font-size: 12px; font-weight: 700; color: var(--m-teal); }
.m-site small.out { color: var(--m-red); }

.m-result-hero { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 6px 0 4px; }
.m-result-hero h2 { margin: 6px 0 0; font-family: inherit; font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.m-result-hero p { margin: 0; color: var(--m-muted); font-size: 13px; }

.m-burst {
    position: relative;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--m-mint);
}

.m-burst > span {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--m-teal);
    box-shadow: 0 10px 22px rgba(0, 127, 108, 0.3);
}

.m-burst > span svg { width: 38px; height: 38px; stroke-width: 3; }
.m-burst.pending { background: var(--m-orange-wash); }
.m-burst.pending > span { background: var(--m-orange-deep); box-shadow: 0 10px 22px rgba(243, 92, 0, 0.3); }

/* The confetti around the mark: decoration, so it is CSS and hidden from assistive tech. */
.m-burst > i { position: absolute; width: 7px; height: 7px; border-radius: 50%; }
.m-burst > i:nth-of-type(1) { top: -4px; left: 30%; background: var(--m-orange); }
.m-burst > i:nth-of-type(2) { top: 18%; right: -10px; background: var(--m-bright); }
.m-burst > i:nth-of-type(3) { bottom: 6%; right: -2px; background: var(--m-blue); }
.m-burst > i:nth-of-type(4) { bottom: -6px; left: 22%; background: var(--m-teal); }
.m-burst > i:nth-of-type(5) { top: 40%; left: -12px; background: var(--m-orange); }
.m-burst > i:nth-of-type(6) { top: 2%; right: 18%; width: 5px; height: 5px; background: var(--m-purple); }

.m-details { display: grid; }

.m-detail {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 13px 16px;
}

.m-detail > svg { width: 20px; height: 20px; color: var(--m-muted); margin-top: 2px; flex: none; }
.m-detail small { display: block; color: var(--m-muted); font-size: 12px; }
.m-detail strong { display: block; font-size: 14px; font-weight: 700; }
.m-detail em { display: block; font-style: normal; color: var(--m-muted); font-size: 12px; }

.m-actions { display: grid; gap: 10px; }

.m-details-toggle {
    border: 1px solid var(--m-line);
    border-radius: 16px;
    background: #fff;
    padding: 0 15px;
}

.m-details-toggle summary { min-height: 48px; display: flex; align-items: center; font-weight: 700; font-size: 13px; cursor: pointer; }
.m-details-toggle[open] { padding-bottom: 15px; }
.m-personal-qr { display: grid; place-items: center; padding-top: 10px; }

/* ── Notifications ────────────────────────────────────────────────────────────────────────── */

.m-notifications { list-style: none; margin: 0; padding: 0; }

.m-notification {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 15px 2px;
    border: 0;
    border-bottom: 1px solid var(--m-line);
    background: none;
    font: inherit;
    color: var(--m-ink);
    text-align: left;
    cursor: pointer;
}

.m-notification > div { display: grid; gap: 3px; flex: 1; min-width: 0; }
.m-notification strong { font-size: 14px; font-weight: 700; }
.m-notification p { margin: 0; color: var(--m-muted); font-size: 12px; line-height: 1.45; }
.m-notification small { font-size: 11px; color: var(--m-muted); }
.m-notification.unread strong { font-weight: 800; }
.m-notification > i { width: 8px; height: 8px; border-radius: 50%; background: var(--m-orange); margin-top: 6px; flex: none; }

.m-notification-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    flex: none;
}

.m-notification-icon svg { width: 19px; height: 19px; }

.m-notification-icon.blue, .m-settings-icon.blue { color: var(--m-blue); background: var(--m-blue-wash); }
.m-notification-icon.purple { color: var(--m-purple); background: var(--m-purple-wash); }
.m-notification-icon.orange, .m-settings-icon.orange { color: var(--m-orange-deep); background: var(--m-orange-wash); }
.m-notification-icon.green, .m-settings-icon.green { color: var(--m-teal); background: var(--m-mint); }
.m-notification-icon.red { color: var(--m-red); background: var(--m-red-wash); }
.m-settings-icon.slate { color: #56676d; background: var(--m-wash); }

.m-sheet-body { display: grid; justify-items: start; gap: 10px; padding: 8px 20px 4px; }
.m-sheet-body h2 { margin: 0; font-family: inherit; font-size: 18px; font-weight: 800; }
.m-sheet-body p { margin: 0; color: var(--m-ink); font-size: 14px; line-height: 1.5; }
.m-sheet-body small { color: var(--m-muted); font-size: 12px; }
.m-sheet-body .m-primary { margin-top: 8px; }

/* ── People ───────────────────────────────────────────────────────────────────────────────── */

.m-person {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    width: 100%;
    border: 0;
    background: #fff;
    color: var(--m-ink);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.m-person > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.m-person strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-person small { font-size: 12px; color: var(--m-muted); }
.m-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.m-dot.green { background: #1fae7e; }
.m-dot.orange { background: var(--m-orange); }
.m-dot.red { background: var(--m-red); }
.m-dot.slate { background: #a8b6b9; }

.m-person-head { display: flex; align-items: center; gap: 14px; }
.m-person-head h1 { margin: 0; font-family: inherit; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.m-person-head p { margin: 2px 0 0; color: var(--m-muted); font-size: 12px; }

.m-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
}

.m-summary > svg { width: 19px; height: 19px; color: var(--m-muted); flex: none; }
.m-summary span { flex: 1; font-size: 13px; }
.m-summary strong { font-size: 14px; }

.m-date-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 700;
}

.m-date-row svg { width: 19px; height: 19px; color: var(--m-muted); }

/* ── Leave requests ───────────────────────────────────────────────────────────────────────── */

.m-request {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 4px 12px;
    padding: 14px;
}

.m-request > .m-avatar { grid-row: span 2; }
.m-request > div:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.m-request strong { font-size: 14px; }
.m-request small { font-size: 12px; color: var(--m-muted); }
.m-request .m-pill { align-self: start; justify-self: end; }
.m-request .m-decide { grid-column: 3; justify-self: end; align-self: end; display: flex; gap: 8px; }

.m-decide button {
    width: 44px;
    height: 38px;
    border: 0;
    border-radius: 11px;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.m-decide button svg { width: 18px; height: 18px; stroke-width: 2.6; }
.m-decide .approve { color: #fff; background: #1fae7e; }
.m-decide .reject { color: var(--m-red); background: var(--m-red-wash); }
.m-decide button:disabled { opacity: 0.5; }

/* ── Profile ──────────────────────────────────────────────────────────────────────────────── */

.m-profile-head { display: flex; align-items: center; gap: 14px; padding: 4px 0 6px; }
.m-profile-head h2 { margin: 0; font-family: inherit; font-size: 18px; font-weight: 800; }
.m-profile-head p { margin: 2px 0 0; color: var(--m-muted); font-size: 12px; overflow-wrap: anywhere; }

.m-settings-row {
    display: flex;
    width: 100%;
    gap: 13px;
    align-items: center;
    min-height: 56px;
    padding: 10px 16px;
    border: 0;
    background: #fff;
    font: inherit;
    color: var(--m-ink);
    text-align: left;
}

button.m-settings-row { cursor: pointer; }
.m-settings-row > svg { width: 20px; height: 20px; color: var(--m-ink); flex: none; }
.m-settings-row > span:not(.m-chevron):not(.m-settings-icon) { flex: 1; font-size: 14px; font-weight: 600; }
.m-settings-row > em { font-style: normal; color: var(--m-muted); font-size: 13px; }
.m-chevron { color: #9aa8ac; display: flex; }
.m-chevron svg { width: 17px; height: 17px; }

.m-settings-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    flex: none;
}

.m-settings-icon svg { width: 18px; height: 18px; }

.m-locales { display: flex; gap: 4px; background: var(--m-wash); border-radius: 10px; padding: 3px; }

.m-locales button {
    min-width: 44px;
    min-height: 36px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--m-muted);
    cursor: pointer;
}

.m-locales button.active { background: #fff; color: var(--m-teal); box-shadow: 0 2px 6px rgba(21, 59, 59, 0.08); }

.m-page form { margin: 0; }

/* ── The app's sign-in ────────────────────────────────────────────────────────────────────── */

.m-login {
    min-height: 100dvh;
    padding: calc(28px + env(safe-area-inset-top, 0px)) 22px calc(28px + env(safe-area-inset-bottom, 0px));
    color: #fff;
    background:
        radial-gradient(circle at 85% 8%, rgba(47, 210, 155, 0.18), transparent 40%),
        radial-gradient(circle at 10% 30%, rgba(255, 255, 255, 0.06), transparent 35%),
        linear-gradient(170deg, #0b4b4c 0%, #063235 45%, #031d1f 100%);
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.m-login-brand { display: grid; justify-items: start; gap: 4px; margin-top: 18px; }
.m-login-brand img { width: 60px; height: 45px; }
.m-login-brand strong { font-size: 28px; font-weight: 800; letter-spacing: -0.05em; }
.m-login-brand strong span { color: var(--m-orange); }
.m-login-brand small { color: #b8dcd4; font-size: 12px; }

.m-login h1 { margin: 8px 0 6px; font-family: inherit; font-size: 26px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; max-width: 280px; }

.m-login-form { display: grid; gap: 12px; }

.m-field {
    position: relative;
    display: grid;
    gap: 2px;
    padding: 9px 14px 8px;
    border-radius: 14px;
    background: #fff;
    color: var(--m-ink);
}

.m-field > span { font-size: 11px; color: var(--m-muted); }

.m-field input {
    border: 0;
    outline: 0;
    background: transparent;
    padding: 0;
    width: 100%;
    font: inherit;
    font-size: 16px;
    color: var(--m-ink);
}

.m-field:focus-within { box-shadow: 0 0 0 3px rgba(47, 210, 155, 0.45); }

.m-field .m-eye {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 0;
    background: none;
    color: var(--m-muted);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.m-field .m-eye svg { width: 20px; height: 20px; }

.m-login-options { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; }
.m-login-options label { display: inline-flex; align-items: center; gap: 8px; color: #e4f2ef; cursor: pointer; min-height: 40px; }
.m-login-options input { width: 18px; height: 18px; accent-color: var(--m-bright); }
.m-login-options a, .m-login-link { color: #7fe6c3; font-weight: 700; text-decoration: none; background: none; border: 0; font: inherit; font-size: 13px; cursor: pointer; }

.m-login .m-primary { background: #12a37d; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25); }
.m-login .error { color: #ffd2c7; background: rgba(214, 58, 28, 0.2); padding: 10px 12px; border-radius: 12px; font-size: 13px; margin: 0; }
.m-login .m-ok { color: #c9f5e6; background: rgba(47, 210, 155, 0.15); padding: 10px 12px; border-radius: 12px; font-size: 13px; margin: 0; }
.m-login-foot { margin-top: auto; text-align: center; color: #8fb8b0; font-size: 11px; }

/* A focus ring that shows on the flat controls, for a keyboard (a tablet has one). */
.m-page :is(button, a, input, summary):focus-visible,
.m-today :is(button, a):focus-visible,
.m-login :is(button, a, input):focus-visible {
    outline: 2px solid var(--m-bright);
    outline-offset: 2px;
}

@media (max-width: 350px) {
    .m-ring { width: 112px; height: 112px; }
    .m-ring-text strong { font-size: 25px; }
    .m-hero { gap: 12px; padding: 14px; }
    .m-hero-side { padding-left: 12px; }
    .m-welcome h1, .m-page-title h1 { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .m-scan-line, .m-map-state.busy svg { animation: none; }
    .m-ring .value { transition: none; }
}

/* ═══ 2. The phone layout: the shell and the design system, restyled ═══════════════════════ */

@media (max-width: 768px), (pointer: coarse) and (max-height: 520px) {
    /* The palette, through the library's own tokens. */
    :root {
        --bs-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        --bs-color-primary: #007f6c;
        --bs-color-primary-hover: #00695d;
        --bs-color-primary-active: #003f43;
        --bs-color-primary-light: #dff7ed;
        --bs-color-primary-mid: #9fd6cb;
        --bs-color-primary-text: #ffffff;
        --bs-color-text-link: #007f6c;
        --bs-color-bg: #f6f9f8;
        --bs-color-text: #0d2930;
        --bs-color-text-secondary: #5f7377;
        --bs-color-text-muted: #5f7377;
        --bs-color-border: #e3ecea;
        --bs-card-radius: 18px;
        --bs-btn-radius: 14px;
        --bs-input-radius: 13px;
        --bs-card-shadow: 0 6px 18px rgba(10, 77, 67, 0.06);
        --bs-input-border-focus: #007f6c;
        --bs-color-border-focus: #007f6c;
        --bs-input-focus-ring: 0 0 0 3px rgba(0, 127, 108, 0.16);
        --bs-topbar-bg: #ffffff;
        --bs-topbar-border: #e3ecea;
        --bs-grid-row-hover: rgba(0, 127, 108, 0.05);
        --bs-nav-bg: linear-gradient(180deg, #005a54, #003f43);
        --bs-nav-bg-active: #007f6c;
        --bs-nav-border-active: #ff7a1a;
    }

    body { background: var(--m-surface); color: var(--m-ink); }

    h1, h2, h3, h4, h5, h6, .bs-page-title, .bs-card-title, .bs-grid th { font-family: var(--bs-font-family); }

    .bs-page-title { font-size: 26px; font-weight: 800; letter-spacing: -0.04em; }
    .bs-page-subtitle { font-size: 12px; }

    /* ── Top bar: the logo, the bell and the avatar ───────────────────────────────────────── */
    .pdks-phone-only { display: flex; }

    .bs-topbar {
        height: 64px;
        min-height: 64px;
        padding: 0 18px;
        gap: 8px;
        background: #fff;
        border-bottom: 1px solid var(--m-line);
    }

    .pdks-brand { align-items: center; gap: 8px; min-width: 0; text-decoration: none; color: inherit; }
    .pdks-brand-mark { width: 36px; height: 27px; flex: none; }
    .pdks-brand-name { font-size: 20px; font-weight: 800; letter-spacing: -0.05em; color: var(--m-teal-dark); }
    .pdks-brand-name span { color: var(--m-orange); }

    .topbar-search { display: none; }

    .topbar-bell {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: transparent;
        color: var(--m-ink);
    }

    .topbar-bell-icon svg { width: 22px; height: 22px; }
    .topbar-bell-count { top: 2px; right: 2px; background: var(--m-red); border: 2px solid #fff; min-width: 18px; height: 18px; line-height: 14px; }

    button.session-avatar {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: #b9774e;
        box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--m-line);
        font-size: 12px;
        font-weight: 800;
    }

    /* ── Content ───────────────────────────────────────────────────────────────────────────── */
    .pdks-main > .bs-content {
        padding: 18px 18px calc(104px + env(safe-area-inset-bottom, 0px));
        background: var(--m-surface);
    }

    /* The home page's own heading gives way to the greeting when the day panel is there. */
    .bs-content:has([data-mobile-today]) > .bs-page-header { display: none; }

    /* ── Tab bar: five places, the middle one raised ──────────────────────────────────────── */
    .pdks-tabbar {
        height: calc(70px + env(safe-area-inset-bottom, 0px));
        padding: 6px 6px env(safe-area-inset-bottom, 0px);
        background: #fff;
        border-top: 1px solid var(--m-line);
        box-shadow: 0 -6px 20px rgba(10, 77, 67, 0.05);
        overflow: visible;
    }

    .pdks-tab { position: relative; gap: 4px; font-size: 10px; color: #7d8d91; }
    .pdks-tab-icon svg { width: 22px; height: 22px; stroke-width: 1.8; }

    .pdks-tab.active,
    .pdks-tab[aria-expanded="true"] { color: var(--m-teal); font-weight: 800; }

    .pdks-tab.active .pdks-tab-icon svg { stroke-width: 2.4; }

    /* The punch tab is the bar's centre: a raised round button, labelled for assistive tech only. */
    .pdks-tab.pdks-tab-centre { justify-content: flex-start; }

    .pdks-tab.pdks-tab-centre .pdks-tab-icon {
        width: 56px;
        height: 56px;
        margin-top: -24px;
        border-radius: 50%;
        justify-content: center;
        color: #fff;
        background: var(--m-teal);
        box-shadow: 0 0 0 5px #fff, 0 8px 18px rgba(0, 127, 108, 0.35);
    }

    .pdks-tab.pdks-tab-centre.active .pdks-tab-icon { background: var(--m-teal-dark); }
    .pdks-tab.pdks-tab-centre .pdks-tab-icon svg { width: 25px; height: 25px; stroke-width: 2.2; }

    .pdks-tab.pdks-tab-centre .pdks-tab-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .pdks-tab-badge {
        position: absolute;
        top: 1px;
        left: calc(50% + 3px);
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        border-radius: 9px;
        display: grid;
        place-items: center;
        background: var(--m-red);
        color: #fff;
        font-size: 10px;
        font-weight: 800;
        border: 2px solid #fff;
    }

    /* ── Cards and listings, in the mock-up's shape ───────────────────────────────────────── */
    .bs-grid > tbody > tr { border-color: var(--m-line); border-radius: 18px; box-shadow: var(--m-shadow); }
    .bs-grid > tbody > tr > td::before { color: var(--m-muted); font-size: 12px; }
    .bs-grid > tbody > tr > td:first-child { font-weight: 800; }

    /* The plain tables a few screens draw for themselves (Savunma ve Tutanak, Mobil okutmalar,
       KVKK and seven more) are not the library's grid, so grid-cards.js leaves them alone — and
       at 412 px they pushed the whole page sideways by up to 286 px (2026-10-14 Android sweep).
       Scrolling inside the table keeps every column and keeps the page still. */
    .pdks-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    .pdks-module-card { border-radius: 18px; border-color: var(--m-line); box-shadow: var(--m-shadow); }
    .pdks-module-icon { border-radius: 12px; color: var(--m-teal); background: var(--m-mint); }
    .pdks-module-card::after { color: #9aa8ac; }

    .pdks-kpi { border-radius: 16px; }
    .pdks-kpi-value { color: var(--m-petrol); font-weight: 800; letter-spacing: -0.04em; }

    .pdks-headline { background: linear-gradient(140deg, var(--m-petrol-2), var(--m-petrol)); color: #fff; border: 0; }
    .pdks-headline h2, .pdks-headline .bs-help-text { color: #fff; }

    /* ── The sheets ───────────────────────────────────────────────────────────────────────── */
    .pdks-sheet { border-radius: 22px 22px 0 0; }
    .pdks-sheet-item { font-size: 15px; }
    .pdks-sheet-profile { font-weight: 800; color: var(--m-teal); }

    .bs-sidebar .bs-nav-logo { background: transparent; }

    /* The app's notch inset comes on top of the phone's bar. */
    .pdks-app .bs-topbar {
        padding-top: env(safe-area-inset-top, 0px);
        height: calc(64px + env(safe-area-inset-top, 0px));
    }
}

/* Listing status tiles set their column count inline (one per tile); on a phone four of them
   leave ~90 px each and the labels wrap mid-word, so two per row. */
@media (max-width: 768px), (pointer: coarse) and (max-height: 520px) {
    .pdks-status-tiles[data-status-tiles] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Home panels on a phone (pilot 2026-10-15): cloudpdks.css styles them for the desktop only, so
   the feed lost its avatars, the device ring fell back to a bare bar and the "see all" links to
   the browser's blue. The same pieces, sized for one column. */
@media (max-width: 768px), (pointer: coarse) and (max-height: 520px) {
    .pdks-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
    .pdks-panel-head h3 { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 15px; font-weight: 700; }
    .pdks-panel-head a { font-size: 12px; font-weight: 600; color: var(--bs-color-primary); text-decoration: none; white-space: nowrap; }
    .pdks-panel-head a::after { content: " \203A"; }

    .pdks-waiting-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
    .pdks-waiting-list li { display: flex; align-items: center; gap: 10px; }
    .pdks-waiting-text { flex: 1; min-width: 0; font-size: 13px; }
    .pdks-waiting-count {
        display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px; border-radius: 10px;
        font-weight: 700; font-size: 16px; background: #eef2f7; color: #334155;
    }
    .pdks-waiting-count.is-red { background: #ffe9eb; color: #d3313b; }
    .pdks-waiting-count.is-orange { background: #fff2df; color: #c66f10; }
    .pdks-waiting-count.is-blue { background: #e9f1ff; color: #1f6fd6; }
    .pdks-waiting-none { display: flex; align-items: center; gap: 8px; margin: 0; color: #07745f; font-weight: 600; }

    .pdks-feed-rich { list-style: none; margin: 0; padding: 0; }
    .pdks-feed-rich li {
        display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "av name dir" "av time time";
        align-items: center; column-gap: 10px; row-gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--bs-color-border);
    }
    .pdks-feed-rich li:last-child { border-bottom: 0; }
    .pdks-feed-avatar {
        grid-area: av; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
        background: var(--bs-color-primary-light); color: var(--bs-color-primary); font-size: 12px; font-weight: 700;
    }
    .pdks-feed-rich .pdks-feed-name { grid-area: name; display: grid; min-width: 0; font-size: 13px; }
    .pdks-feed-rich .pdks-feed-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pdks-feed-rich .pdks-feed-name small { font-size: 11px; font-weight: 400; color: var(--bs-color-text-muted); }
    .pdks-feed-rich .pdks-feed-dir { grid-area: dir; }
    .pdks-feed-rich .pdks-feed-time { grid-area: time; font-size: 11px; color: var(--bs-color-text-muted); }

    .pdks-device-body { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 6px 0 4px; }
    .pdks-donut {
        position: relative; display: grid; place-items: center; align-content: center;
        width: 120px; height: 120px; flex: none; border-radius: 50%;
    }
    .pdks-donut::before { content: ""; position: absolute; inset: 15px; border-radius: 50%; background: var(--bs-color-surface, #fff); }
    .pdks-donut > * { position: relative; }
    .pdks-donut .pdks-total { margin: 0; font-size: 22px; }
    .pdks-donut small { font-size: 10px; color: var(--bs-color-text-muted); }
    .pdks-states { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; min-width: 110px; }
    .pdks-states li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
    .pdks-states li strong { margin-left: auto; }
    .pdks-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
}

/* The KPI label is a link to the filtered list; on a phone it read as underlined grey text, and
   the dashboard's action row sat flush on the card below it. */
@media (max-width: 768px), (pointer: coarse) and (max-height: 520px) {
    a.pdks-kpi-label { color: var(--bs-color-text-secondary); text-decoration: none; font-size: 12px; font-weight: 500; }
    .pdks-dash-actions { margin-bottom: 14px; }
}

/* A closed filter drawer waits just off the right edge; its shadow still bled a grey strip
   down the side of every listing. */
@media (max-width: 768px), (pointer: coarse) and (max-height: 520px) {
    .bs-search-panel-drawer:not(.bs-search-panel-drawer--open) { box-shadow: none; border-left-color: transparent; }
}

/* Detail page header card (person, device, …) on a phone: the 72 px avatar and the side column
   left the name ~120 px, so it broke over three lines and the state badges ran into the side
   column. Avatar and name share the first row, the badges drop under the name, and the side
   column (dates, Düzenle / Devre dışı bırak) takes the full width below. */
@media (max-width: 768px), (pointer: coarse) and (max-height: 520px) {
    .pdks-profile-card {
        display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: start;
        gap: 12px 14px; padding: 16px;
    }
    .pdks-profile-card > .pdks-avatar-xl { width: 52px; height: 52px; font-size: 17px; box-shadow: 0 0 0 4px var(--pdks-mint, #e1f9f0); }
    .pdks-profile-card > .pdks-avatar-xl svg { width: 22px; height: 22px; }
    .pdks-profile-main h1 { display: block; margin: 0 0 6px; font-size: 19px; line-height: 1.25; letter-spacing: -0.02em; overflow-wrap: anywhere; }
    .pdks-profile-main h1 .pdks-status { display: inline-flex; margin: 6px 6px 0 0; font-size: 11px; vertical-align: middle; }
    .pdks-profile-main h1 .pdks-status:first-of-type { margin-left: 0; }
    .pdks-profile-placement { gap: 6px; }
    .pdks-profile-axis { max-width: 100%; }
    .pdks-profile-side, .pdks-profile-card > .bs-btn {
        grid-column: 1 / -1; align-items: stretch; width: 100%;
    }
    .pdks-profile-side { flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--bs-color-border); }
    .pdks-profile-side > p { justify-content: space-between; }
    .pdks-profile-side > .bs-btn, .pdks-profile-card > .bs-btn { width: 100%; min-height: 44px; justify-content: center; }
}

/* Detail figures on a phone: with the icon beside them a value like "1 gün önce" had ~100 px and
   broke over two lines, "Ulaşılamıyor" ran out of its card. Icon and label share a row; the
   value takes the card's full width under them. */
@media (max-width: 768px), (pointer: coarse) and (max-height: 520px) {
    .pdks-detail-kpi {
        display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-areas: "icon label" "value value";
        align-items: center; gap: 8px 10px; padding: 12px 14px;
    }
    .pdks-detail-kpi > .pdks-detail-kpi-icon { position: static; grid-area: icon; width: 30px; height: 30px; }
    .pdks-detail-kpi > .pdks-detail-kpi-icon svg { width: 15px; height: 15px; }
    .pdks-detail-kpi > small { grid-area: label; line-height: 1.3; }
    .pdks-detail-kpi > strong { grid-area: value; margin: 0; font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }

    /* Tabs stay on one line and scroll sideways instead of breaking "Bakım İşlemleri" in two and
       cutting the last tab off the screen. */
    .bs-tab-header, .pdks-detail-tabs {
        flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .bs-tab-header::-webkit-scrollbar, .pdks-detail-tabs::-webkit-scrollbar { display: none; }
    .bs-tab-header > .bs-tab-btn, .pdks-detail-tabs > button { flex: none; white-space: nowrap; }
    .pdks-detail-tabs { gap: 18px; }
}

/* Week/month stepper on a phone: the range sat left with "Bu hafta" pushed alone onto the next
   row's far edge. The range fills the row between its arrows; the reset button takes the row
   under it. */
@media (max-width: 768px), (pointer: coarse) and (max-height: 520px) {
    .pdks-range-bar { gap: 8px; }
    .pdks-range-bar > .pdks-range-month { flex: 1; min-width: 0; text-align: center; font-size: 15px; }
    .pdks-range-bar > .pdks-range-step { min-width: 44px; min-height: 44px; }
    .pdks-range-bar > :last-child:not(.pdks-range-toggle):not(.pdks-range-step) { margin-left: 0; width: 100%; min-height: 40px; justify-content: center; }
}

/* A figure's second line ("3 MB" under the file count) went into the label's cell and printed
   over it; it belongs beside the value. A long file name in a card pushed the card past the
   screen edge: the name's box may shrink, and the name ends in an ellipsis. */
@media (max-width: 768px), (pointer: coarse) and (max-height: 520px) {
    .pdks-detail-kpi { grid-template-areas: "icon label" "value value" "sub sub"; }
    .pdks-detail-kpi > .pdks-kpi-sub { grid-area: sub; margin-top: -4px; }
    .pdks-device-name { display: flex; max-width: 100%; min-width: 0; }
    .pdks-device-name > span:not(.pdks-file-icon) { min-width: 0; }
    .pdks-device-name .pdks-cell-clip { display: block; max-width: 100%; }
}

/* A card cell holding a checkbox and a note ("(varsayılan)") spread them to the two ends of the
   row, so the box jumped sideways between rows with and without the note. The box keeps the
   right edge on every row; the note sits just left of it. */
@media (max-width: 768px), (pointer: coarse) and (max-height: 520px) {
    .bs-grid td[data-label] > input[type="checkbox"] { margin-left: auto; width: 22px; height: 22px; flex: none; }
    .bs-grid td[data-label] > input[type="checkbox"]:not(:last-child) { margin-left: 0; }
    .bs-grid td[data-label] > input[type="checkbox"] + * { order: -1; margin-left: auto; margin-right: 10px; }
}

/* Import kinds: two per row left each description four lines in ~110 px; one per row on a phone. */
@media (max-width: 768px), (pointer: coarse) and (max-height: 520px) {
    .pdks-import-kinds { grid-template-columns: 1fr; gap: 10px; }
}