/* CloudPDKS design system (temps/cloud-pdks-ui-tasarimi, 2026-10-14).

   ── What this file is ─────────────────────────────────────────────────────────────────────────

   The PO's CloudPDKS desktop design, applied the way theme-industry.css applied the one before it:
   by redefining the frozen library's OWN custom properties (variables.css) and painting the
   classes the library renders. It declares no parallel shell, no second grid and no second
   dialog — BsListPage is still the list, BsDialog still the dialog — so docs/69 §23 holds and
   Borina.UI keeps every byte it had.

   Linked after app.css and before mobile.css by the Web and Mobile hosts. The Control host does
   not link it and keeps the Industry theme: the control plane is outside this pilot.

   ── Three themes ──────────────────────────────────────────────────────────────────────────────

   Teal is the default and lives on `:root`. Navy and Plum are `[data-pdks-theme]` blocks that
   theme.js puts on <html>; each redefines the same tokens, so the sidebar's texture, the active
   pill, buttons, badges and focus rings all move together. The selectors are deliberately no
   more specific than mobile.css's `:root`, so the phone keeps the phone design whatever is chosen.

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

   The design's accent #078d73 carries white text at 4.14:1, under WCAG AA. The design spec's own
   `--green` (#087c67, 5.14:1) is used instead, and the muted grey moves from #6d8194 (4.02:1) to
   #5f7386 (4.90:1). ThemeContrastTests checks every theme block here (docs/91 PDKS-151).

   ── Width ─────────────────────────────────────────────────────────────────────────────────────

   Layout rules sit inside the DESKTOP query below, which is exactly the complement of the phone
   query app.css and mobile.css use, so nothing here can reach a phone screen. Tokens, the font
   and plain colours apply at every width; the phone's own :root block overrides them there. */

/* Poppins, served from this application (docs/91 PDKS-155, KVKK) — the same OFL files the
   CloudPDKS site ships, Latin and Latin Extended so ğ, ş, ı and İ come from the face itself. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/poppins-400-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/poppins-400-lat.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/poppins-500-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/poppins-500-lat.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/poppins-600-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/poppins-600-lat.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/poppins-700-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/poppins-700-lat.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('fonts/poppins-800-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('fonts/poppins-800-lat.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ══ Tokens: Teal (default) ══════════════════════════════════════════════════════════════════ */
:root {
    /* Type — Poppins at the design's density: 13px body, 12px controls, 11px small print. */
    --bs-font-family: 'Poppins', 'Segoe UI', Arial, 'Helvetica Neue', sans-serif;
    --bs-font-size-base: 0.8125rem;
    --bs-font-size-sm: 0.75rem;
    --bs-font-size-xs: 0.6875rem;
    --bs-font-size-h1: 1.5625rem;
    --bs-font-size-h2: 1rem;
    --bs-font-size-h3: 0.875rem;
    --bs-btn-font-size: 0.75rem;
    --bs-btn-font-weight: 600;
    --bs-input-font-size: 0.8125rem;

    /* Accent */
    --bs-color-primary:         #087c67;
    --bs-color-primary-hover:   #076a58;
    --bs-color-primary-active:  #055646;
    --bs-color-primary-light:   #e5f8f1;
    --bs-color-primary-mid:     #bfe4da;
    --bs-color-primary-text:    #ffffff;
    --bs-color-text-link:       #1570d8;

    /* Status — the design's orange, red, blue and purple, darkened only where text sits on them. */
    --bs-color-success:         #087c67;
    --bs-color-success-light:   #e1f9f0;
    --bs-color-warning:         #e8891f;
    --bs-color-warning-light:   #fff2df;
    --bs-color-danger:          #e03e47;
    --bs-color-danger-light:    #ffeaeb;
    --bs-color-info:            #247ee8;
    --bs-color-info-light:      #e9f1ff;

    /* Surfaces and text */
    --bs-color-bg:              #f1f9f8;
    --bs-color-bg-subtle:       #eef5f5;
    --bs-color-surface:         #ffffff;
    --bs-color-surface-raised:  #ffffff;
    --bs-color-text:            #10233b;
    --bs-color-text-secondary:  #4d657a;
    --bs-color-text-muted:      #5f7386;
    --bs-color-text-placeholder:#8ba0ab;
    --bs-color-border:          #e3edef;
    --bs-color-border-subtle:   #edf2f3;
    --bs-color-border-strong:   #d3e2e4;

    /* Shape and elevation — cards 14px, controls 7–8px, the design's soft teal shadow. */
    --bs-card-bg:               #ffffff;
    --bs-card-border:           #e3edef;
    --bs-card-radius:           14px;
    --bs-card-shadow:           0 5px 17px rgba(54, 120, 135, 0.07);
    --bs-card-shadow-hover:     0 10px 26px rgba(32, 111, 115, 0.12);
    --bs-btn-radius:            8px;
    --bs-btn-height:            36px;
    --bs-btn-height-sm:         30px;
    --bs-btn-padding:           7px 16px;
    --bs-btn-padding-sm:        4px 11px;
    --bs-input-radius:          7px;
    --bs-input-height:          36px;
    --bs-input-height-sm:       30px;
    --bs-input-border:          #dce8ea;
    --bs-input-border-hover:    #b9d3d6;
    --bs-input-border-focus:    #2a9c84;
    --bs-color-border-focus:    #2a9c84;
    --bs-input-focus-ring:      0 0 0 3px rgba(8, 124, 103, 0.14);
    --bs-shadow-dialog:         0 20px 60px rgba(0, 59, 59, 0.33);
    --bs-dialog-overlay:        rgba(9, 46, 52, 0.30);

    /* Grid */
    --bs-grid-header-bg:        #f6fafb;
    --bs-grid-header-text:      #5e7487;
    --bs-grid-row-hover:        #f1fbf8;
    --bs-grid-row-selected:     #e4f6f0;
    --bs-grid-border:           #edf2f3;
    --bs-grid-header-border:    #e3edef;

    /* Sidebar — not a flat colour: the design's petrol gradient under low-opacity diagonal bands
       and radial light. One token, because the library paints `background: var(--bs-nav-bg)`;
       a layered value is still a legal value, and it stays put while the menu scrolls. */
    --bs-nav-width:             238px;
    --bs-nav-bg:
        radial-gradient(ellipse 72% 42% at 116% 43%, rgba(24, 126, 111, 0.28), transparent 68%),
        radial-gradient(ellipse 60% 48% at 104% 75%, rgba(13, 106, 98, 0.22), transparent 70%),
        radial-gradient(ellipse 50% 30% at 70% 92%, rgba(54, 154, 134, 0.10), transparent 70%),
        linear-gradient(132deg, transparent 0 35%, rgba(21, 111, 104, 0.14) 35.4% 39%, transparent 39.5% 64%, rgba(18, 108, 101, 0.11) 64.5% 71%, transparent 71.5%),
        linear-gradient(130deg, transparent 0 52%, rgba(95, 190, 163, 0.06) 52.4% 53.5%, transparent 54% 72%, rgba(19, 103, 102, 0.12) 72.5% 78%, transparent 78.5%),
        linear-gradient(165deg, #003f3e 0%, #003738 48%, #002b34 100%);
    --bs-nav-bg-hover:          rgba(255, 255, 255, 0.07);
    --bs-nav-bg-active:         #087c67;
    --bs-nav-text:              #d1e8e4;
    --bs-nav-text-hover:        #ffffff;
    --bs-nav-text-active:       #ffffff;
    --bs-nav-border-active:     transparent;
    --bs-nav-section-text:      #8bb9b3;
    --bs-nav-logo-border:       rgba(255, 255, 255, 0.08);

    /* Topbar */
    --bs-topbar-bg:             #ffffff;
    --bs-topbar-border:         #e8f0f1;
    --bs-topbar-height:         58px;

    /* The design's own values the library has no token for. */
    --pdks-pill:        linear-gradient(90deg, #09846c, #066b58);
    --pdks-pill-glow:   inset 0 0 18px rgba(123, 255, 213, 0.08), 0 4px 14px rgba(0, 31, 35, 0.22);
    --pdks-brand-tile:  #079782;
    --pdks-brand-ink:   #b4ffe9;
    --pdks-mint:        #e4faf3;
    --pdks-mint-ink:    #087c67;
    --pdks-hero:        linear-gradient(110deg, #e6faf7 0%, #d8f0ed 55%, #cbe6e2 100%);
    --pdks-hero-art:    linear-gradient(145deg, #527f86, #cce6e5 55%, #2e6570);
    --pdks-kpi-primary: linear-gradient(135deg, #087c67, #05604d);
    --pdks-orange:      #e8891f;
    --pdks-red:         #e03e47;
    --pdks-blue:        #247ee8;
    --pdks-purple:      #8151db;
}

/* ══ Navy ══════════════════════════════════════════════════════════════════════════════════════ */
[data-pdks-theme="navy"] {
    --bs-color-primary:         #315b9d;
    --bs-color-primary-hover:   #284f8a;
    --bs-color-primary-active:  #1f3f70;
    --bs-color-primary-light:   #e8f0ff;
    --bs-color-primary-mid:     #c3d4f2;
    --bs-color-primary-text:    #ffffff;
    --bs-color-text-link:       #1570d8;
    --bs-color-surface:         #ffffff;
    --bs-color-text:            #10233b;
    --bs-color-text-secondary:  #4d5f7a;
    --bs-color-text-muted:      #5d6f86;
    --bs-color-bg:              #f2f6fc;
    --bs-color-bg-subtle:       #edf2fa;
    --bs-color-border:          #dce5f3;
    --bs-color-border-subtle:   #edf1f8;
    --bs-card-border:           #dce5f3;
    --bs-input-border-focus:    #4a76bd;
    --bs-color-border-focus:    #4a76bd;
    --bs-input-focus-ring:      0 0 0 3px rgba(49, 91, 157, 0.16);
    --bs-grid-row-hover:        #f2f6fe;
    --bs-grid-row-selected:     #e3ecfb;
    --bs-nav-bg:
        radial-gradient(ellipse 72% 42% at 116% 43%, rgba(71, 123, 213, 0.30), transparent 68%),
        radial-gradient(ellipse 60% 48% at 104% 75%, rgba(42, 89, 170, 0.24), transparent 70%),
        radial-gradient(ellipse 50% 30% at 70% 92%, rgba(90, 140, 220, 0.10), transparent 70%),
        linear-gradient(132deg, transparent 0 35%, rgba(63, 111, 194, 0.15) 35.4% 39%, transparent 39.5% 64%, rgba(52, 100, 185, 0.12) 64.5% 71%, transparent 71.5%),
        linear-gradient(130deg, transparent 0 52%, rgba(140, 180, 240, 0.06) 52.4% 53.5%, transparent 54% 72%, rgba(40, 80, 150, 0.14) 72.5% 78%, transparent 78.5%),
        linear-gradient(165deg, #172e58 0%, #1d3868 48%, #102546 100%);
    --bs-nav-bg-active:         #315b9d;
    --bs-nav-text:              #d6e1f5;
    --bs-nav-text-active:       #ffffff;
    --bs-nav-section-text:      #9db3d9;
    --pdks-pill:        linear-gradient(90deg, #3a66ab, #284f8a);
    --pdks-pill-glow:   inset 0 0 18px rgba(160, 200, 255, 0.10), 0 4px 14px rgba(5, 15, 40, 0.28);
    --pdks-brand-tile:  #3a66ab;
    --pdks-brand-ink:   #d6e6ff;
    --pdks-mint:        #e8f0ff;
    --pdks-mint-ink:    #315b9d;
    --pdks-hero:        linear-gradient(110deg, #eaf1ff 0%, #dde8fa 55%, #cfdcf3 100%);
    --pdks-hero-art:    linear-gradient(145deg, #4f6d99, #d3e0f3 55%, #2c4a78);
    --pdks-kpi-primary: linear-gradient(135deg, #3a66ab, #24477e);
}

/* ══ Plum ══════════════════════════════════════════════════════════════════════════════════════ */
[data-pdks-theme="plum"] {
    --bs-color-primary:         #8754a8;
    --bs-color-primary-hover:   #7a4a9a;
    --bs-color-primary-active:  #6b3f89;
    --bs-color-primary-light:   #f5eaff;
    --bs-color-primary-mid:     #e0cdee;
    --bs-color-primary-text:    #ffffff;
    --bs-color-text-link:       #1570d8;
    --bs-color-surface:         #ffffff;
    --bs-color-text:            #21183b;
    --bs-color-text-secondary:  #5c4f72;
    --bs-color-text-muted:      #6d6283;
    --bs-color-bg:              #faf6fc;
    --bs-color-bg-subtle:       #f5eff9;
    --bs-color-border:          #eadff0;
    --bs-color-border-subtle:   #f4eef7;
    --bs-card-border:           #eadff0;
    --bs-input-border-focus:    #9d6bbd;
    --bs-color-border-focus:    #9d6bbd;
    --bs-input-focus-ring:      0 0 0 3px rgba(135, 84, 168, 0.16);
    --bs-grid-row-hover:        #fbf6fe;
    --bs-grid-row-selected:     #f2e7fa;
    --bs-nav-bg:
        radial-gradient(ellipse 72% 42% at 116% 43%, rgba(157, 91, 187, 0.30), transparent 68%),
        radial-gradient(ellipse 60% 48% at 104% 75%, rgba(122, 63, 157, 0.24), transparent 70%),
        radial-gradient(ellipse 50% 30% at 70% 92%, rgba(190, 130, 220, 0.10), transparent 70%),
        linear-gradient(132deg, transparent 0 35%, rgba(145, 82, 172, 0.15) 35.4% 39%, transparent 39.5% 64%, rgba(133, 72, 165, 0.12) 64.5% 71%, transparent 71.5%),
        linear-gradient(130deg, transparent 0 52%, rgba(220, 170, 240, 0.06) 52.4% 53.5%, transparent 54% 72%, rgba(100, 50, 130, 0.14) 72.5% 78%, transparent 78.5%),
        linear-gradient(165deg, #402750 0%, #4d2e5e 48%, #30203f 100%);
    --bs-nav-bg-active:         #8754a8;
    --bs-nav-text:              #ecdff5;
    --bs-nav-text-active:       #ffffff;
    --bs-nav-section-text:      #c4a8d6;
    --pdks-pill:        linear-gradient(90deg, #8754a8, #6b3f89);
    --pdks-pill-glow:   inset 0 0 18px rgba(240, 200, 255, 0.10), 0 4px 14px rgba(30, 10, 40, 0.28);
    --pdks-brand-tile:  #8f5bb0;
    --pdks-brand-ink:   #f5e3ff;
    --pdks-mint:        #f5eaff;
    --pdks-mint-ink:    #8754a8;
    --pdks-hero:        linear-gradient(110deg, #f7eefd 0%, #efe2f7 55%, #e5d3f0 100%);
    --pdks-hero-art:    linear-gradient(145deg, #7d5a91, #ecdff5 55%, #5a3a70);
    --pdks-kpi-primary: linear-gradient(135deg, #8754a8, #6b3f89);
}

/* ══ Type at every width ═══════════════════════════════════════════════════════════════════════
   theme-industry.css puts Barlow Condensed on headings; the CloudPDKS design is Poppins
   throughout, so headings follow the body face. */
body { letter-spacing: -0.01em; }

h1, h2, h3, h4, h5, h6,
.bs-page-title,
.bs-card-title,
.bs-grid th,
.pdks-kpi-value,
.pdks-total {
    font-family: var(--bs-font-family);
    letter-spacing: -0.01em;
}

/* The palette is the desktop's; the phone keeps its own design (mobile.css). */
@media (max-width: 768px), (pointer: coarse) and (max-height: 520px) {
    .bs-topbar .pdks-theme-picker { display: none; }
    .pdks-hero-greeting, .pdks-hero-art, .pdks-hero-date, .pdks-hero-today, .pdks-kpi-icon, .pdks-panel-icon { display: none; }
    .pdks-hero-bare { display: none; }

    /* The headline was a BsCard until the hero replaced it; it keeps the card's shape here. */
    .pdks-hero {
        padding: var(--bs-card-padding);
        border-radius: var(--bs-card-radius);
        margin-bottom: 12px;
    }

    .pdks-hero h2 { margin: 0; }
}

/* ══ Desktop ═══════════════════════════════════════════════════════════════════════════════════
   The complement of the phone query: wider than 768px, and not a short touch screen. */
@media (min-width: 769px) and (min-height: 521px), (min-width: 769px) and (pointer: fine) {

    /* ── Sidebar ──────────────────────────────────────────────────────────────────────────── */
    .bs-sidebar { padding: 12px 10px 0; }

    .bs-nav-logo {
        height: 50px;
        padding: 0 8px;
        border-bottom: none;
    }

    .pdks-sidebar-brand {
        display: flex;
        align-items: center;
        gap: 9px;
        color: #ffffff;
        text-decoration: none;
        min-width: 0;
    }

    .pdks-sidebar-mark {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        flex: none;
        border-radius: 12px;
        background: var(--pdks-brand-tile);
        color: var(--pdks-brand-ink);
    }

    .pdks-sidebar-mark svg { width: 22px; height: 22px; }

    .sidebar-logo-text {
        font-family: var(--bs-font-family);
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: #ffffff;
        white-space: nowrap;
    }

    .sidebar-logo-text span { color: #ff8d24; }

    .bs-sidebar .sidebar-nav { padding: 4px 0 16px; gap: 2px; }

    /* Group headings: small, spaced capitals in the soft teal, with the fold arrow at the end. */
    .bs-sidebar .pdks-nav-toggle {
        padding: 16px 10px 7px;
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.12em;
        color: var(--bs-nav-section-text);
    }

    .bs-sidebar .pdks-nav-toggle:first-child { padding-top: 8px; }

    .bs-nav-item {
        height: 35px;
        padding: 0 10px;
        gap: 10px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 400;
        color: var(--bs-nav-text);
    }

    .bs-nav-icon { width: 16px; opacity: 0.85; }
    .bs-nav-icon svg { width: 16px; height: 16px; display: block; }

    .bs-nav-item.active {
        background: var(--pdks-pill);
        box-shadow: var(--pdks-pill-glow);
        color: var(--bs-nav-text-active);
        font-weight: 500;
    }

    .sidebar-footer {
        margin: 12px 6px 0;
        padding: 12px 4px 14px;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        color: var(--bs-nav-section-text);
    }

    .sidebar-footer-name { color: var(--bs-nav-text); font-size: 12px; }

    /* ── Topbar ───────────────────────────────────────────────────────────────────────────── */
    .bs-topbar {
        padding: 0 30px;
        gap: 18px;
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(6px);
        box-shadow: none;
    }

    .topbar-search {
        width: clamp(220px, 30vw, 450px);
        height: 39px;
        margin-left: 0;
        padding: 0 13px;
        gap: 10px;
        border: 1px solid #e7eff2;
        border-radius: 11px;
        background: #f6fafb;
        color: var(--bs-color-text-muted);
    }

    .topbar-search:hover { background: var(--bs-color-primary-light); border-color: var(--bs-color-primary-mid); }
    .topbar-search svg { width: 18px; height: 18px; }
    .topbar-search-text { flex: 1; text-align: left; font-size: 12px; opacity: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .topbar-search-key {
        padding: 4px 9px;
        border: none;
        border-radius: 7px;
        background: #edf3f5;
        font-family: inherit;
        font-size: 10px;
        opacity: 1;
    }

    .topbar-actions { gap: 16px; }

    /* The date: the calendar mark in the accent, the day bold, the weekday under it. */
    .topbar-today {
        height: auto;
        padding: 0;
        gap: 9px;
        background: none;
        border-radius: 0;
        color: var(--bs-color-text);
    }

    .topbar-today-icon { display: flex; color: var(--bs-color-primary); }
    .topbar-today-icon svg { width: 21px; height: 21px; }
    .topbar-today-text { display: flex; flex-direction: column; line-height: 1.25; font-size: 12px; font-weight: 600; }
    .topbar-today-text small { font-size: 10px; font-weight: 400; color: var(--bs-color-text-muted); }

    /* The office/axis picker, as the design's outlined chip. */
    .topbar-filter .bs-select {
        height: 38px;
        border-radius: 10px;
        border-color: var(--bs-color-border);
    }

    /* Icon buttons: the palette and the bell. */
    .pdks-topbar-icon,
    .topbar-bell {
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        padding: 0;
        border: none;
        border-radius: 10px;
        background: transparent;
        color: #2b6171;
        cursor: pointer;
    }

    .pdks-topbar-icon:hover,
    .topbar-bell:hover { background: var(--pdks-mint); color: var(--pdks-mint-ink); }

    .pdks-topbar-icon svg, .topbar-bell-icon svg { width: 20px; height: 20px; }

    .topbar-bell-count { background: #f03643; top: 1px; right: 1px; }

    .session { gap: 8px; }

    .session-avatar {
        width: 35px;
        height: 35px;
        background: var(--pdks-kpi-primary);
        box-shadow: 0 0 0 3px var(--pdks-mint);
    }

    .session-user { font-size: 12px; font-weight: 600; }

    /* The account links stay where they were (sign-out is a test hook and a habit); they read as
       quiet outlined chips rather than four full buttons. */
    .session > .bs-btn,
    .session-signout .bs-btn {
        height: 30px;
        padding: 0 10px;
        border-radius: 8px;
        font-size: 11px;
        font-weight: 500;
        background: #ffffff;
        border: 1px solid var(--bs-color-border);
        color: var(--bs-color-text-secondary);
    }

    .session > .bs-btn:hover,
    .session-signout .bs-btn:hover { border-color: var(--bs-color-primary-mid); color: var(--bs-color-primary); background: var(--bs-color-primary-light); }

    .locale { height: 28px; padding: 0 9px; border-radius: 7px; font-size: 11px; white-space: nowrap; }
    .session > .bs-btn, .session-signout .bs-btn { white-space: nowrap; }

    /* ── Content column ───────────────────────────────────────────────────────────────────── */
    .pdks-main > .bs-content { padding: 22px 30px 28px; }

    /* BsPage is itself a `.bs-content`; one gutter is the design's, two was the library's. */
    .pdks-main > .bs-content > .bs-content { padding: 0; max-width: 1540px; margin: 0 auto; }

    .bs-page-header { margin-bottom: 18px; }
    .bs-page-title { font-size: 25px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 4px; }
    .bs-page-subtitle { font-size: 12px; color: var(--bs-color-text-muted); }

    /* ── Cards ────────────────────────────────────────────────────────────────────────────── */
    .bs-card { border-color: var(--bs-card-border); }
    .bs-card-title { font-size: 14px; font-weight: 700; }
}

/* ── Topbar palette menu (every width it is shown at) ─────────────────────────────────────── */
.pdks-theme-picker { position: relative; display: flex; }

.pdks-theme-overlay { position: fixed; inset: 0; z-index: 60; }

.pdks-theme-options {
    position: absolute;
    right: 0;
    top: 44px;
    z-index: 61;
    display: grid;
    min-width: 140px;
    padding: 6px;
    background: #ffffff;
    border: 1px solid var(--bs-color-border);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 59, 59, 0.13);
}

.pdks-theme-options button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 9px;
    border: none;
    border-radius: 7px;
    background: none;
    color: #395766;
    font: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}

.pdks-theme-options button:hover { background: var(--bs-color-primary-light); }
.pdks-theme-options button.selected { font-weight: 600; color: var(--bs-color-primary); }
.pdks-theme-options button.selected::after { content: "\2713"; margin-left: auto; }

.pdks-theme-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; }
.pdks-theme-dot-teal { background: #087c67; }
.pdks-theme-dot-navy { background: #315b9d; }
.pdks-theme-dot-plum { background: #8754a8; }

/* ══ Dashboard (Pages/Home.razor) ══════════════════════════════════════════════════════════════
   The design's composition over the figures the page already had: a mint hero with the greeting
   and today's headline, five KPI tiles lifted over it, then the analytic cards and the modules.
   Nothing here is a number the page did not already show. */

.pdks-kpi-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* The trend's segments carry their share as a property, so the desktop can stand them up as
   columns and the phone can keep them as bars. */
.pdks-trend-worked, .pdks-trend-overtime { width: var(--share, 0%); }

@media (min-width: 769px) and (min-height: 521px), (min-width: 769px) and (pointer: fine) {

    /* The page title is the hero's greeting; BsPage's own header would say "Ana Sayfa" over it. */
    .bs-content:has(> .pdks-dash) > .bs-page-header,
    .bs-content:has(.pdks-dash) > .bs-page-header { display: none; }

    .pdks-dash { display: flex; flex-direction: column; }

    /* ── Hero ── */
    .pdks-hero {
        position: relative;
        overflow: hidden;
        min-height: 232px;
        margin: -22px -30px 0;
        padding: 30px 31px 70px;
        background: var(--pdks-hero);
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .pdks-hero-copy { position: relative; z-index: 3; max-width: 60%; }

    .pdks-hero .pdks-hero-greeting {
        margin: 0 0 9px;
        font-size: 29px;
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -0.03em;
        color: var(--bs-color-text);
    }

    .pdks-hero h2 {
        margin: 0;
        font-size: 15px;
        font-weight: 400;
        color: var(--bs-color-text-secondary);
    }

    .pdks-hero .bs-help-text { margin: 8px 0 0; max-width: 560px; font-size: 11px; }

    /* The design's building: a faceted CloudPDKS block on the right, decoration only. */
    .pdks-hero-art {
        position: absolute;
        right: 7%;
        bottom: -32px;
        width: 390px;
        height: 200px;
        z-index: 1;
        padding: 66px 0 0 122px;
        background: var(--pdks-hero-art);
        clip-path: polygon(9% 100%, 9% 30%, 31% 5%, 75% 18%, 100% 100%);
        color: #ffffff;
        font-size: 20px;
        font-weight: 700;
        text-shadow: 0 2px 4px rgba(36, 83, 90, 0.6);
        opacity: 0.9;
    }

    .pdks-hero-art span { color: #ff8a23; }

    /* ── KPI tiles, lifted over the hero ── */
    .pdks-dash .pdks-kpis {
        position: relative;
        z-index: 4;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 14px;
        margin: -50px 0 14px;
    }

    .pdks-kpi {
        position: relative;
        min-height: 112px;
        padding: 18px 14px;
        flex-direction: row;
        align-items: flex-start;
        gap: 13px;
        overflow: hidden;
        border-radius: 14px;
        box-shadow: 0 8px 22px rgba(27, 83, 91, 0.14);
    }

    .pdks-kpi-icon {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        flex: none;
        border-radius: 13px;
        background: var(--pdks-mint);
        color: var(--pdks-mint-ink);
    }

    .pdks-kpi-icon svg { width: 21px; height: 21px; }

    .pdks-kpi-value { font-size: 24px; font-weight: 700; line-height: 1.1; }
    .pdks-kpi-label { font-size: 12px; color: var(--bs-color-text-secondary); }
    a.pdks-kpi-label { color: var(--bs-color-text-secondary); text-decoration: none; }
    a.pdks-kpi-label:hover { color: var(--bs-color-primary); text-decoration: underline; }

    .pdks-kpi-orange .pdks-kpi-icon { background: #fff2df; color: #c66f10; }
    .pdks-kpi-red .pdks-kpi-icon    { background: #ffe9eb; color: #d3313b; }
    .pdks-kpi-blue .pdks-kpi-icon   { background: #e9f1ff; color: #1f6fd6; }
    .pdks-kpi-purple .pdks-kpi-icon { background: #f1eaff; color: #6f43c9; }

    /* The first tile is the design's filled accent card. */
    .pdks-kpi-primary { background: var(--pdks-kpi-primary); border-color: transparent; color: #ffffff; }
    .pdks-kpi-primary .pdks-kpi-icon { background: rgba(255, 255, 255, 0.16); color: #ffffff; }
    .pdks-kpi-primary .pdks-kpi-label,
    .pdks-kpi-primary a.pdks-kpi-label { color: #ffffff; }

    .pdks-exceptions-link { margin: 0 0 14px; font-size: 12px; }
    .pdks-exceptions-link a { color: var(--bs-color-text-link); font-weight: 500; text-decoration: none; }

    /* ── Analytic cards: 1.12 / 1.38 / .9 like the design, the feed under them ── */
    .pdks-panels {
        grid-template-columns: 1.12fr 1.38fr 0.9fr;
        gap: 14px;
        align-items: stretch;
        margin-bottom: 18px;
    }

    .pdks-panels > .bs-card { min-height: 210px; padding: 16px; }
    .pdks-p-participation { order: 1; }
    .pdks-trend           { order: 2; }
    .pdks-p-devices       { order: 3; }
    .pdks-p-recent        { order: 4; grid-column: span 2; }
    .pdks-absence         { order: 5; }

    .pdks-panel-head { align-items: center; margin-bottom: 12px; }
    .pdks-panel-head h3 { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; }
    .pdks-panel-head a { font-size: 11px; color: var(--bs-color-text-link); text-decoration: none; white-space: nowrap; }
    .pdks-panel-head a::after { content: " \203A"; }
    .pdks-panel-icon { display: flex; color: var(--bs-color-primary); }
    .pdks-panel-icon svg { width: 15px; height: 15px; }

    .pdks-panel-head .bs-field { margin: 0; }
    .pdks-panel-head .bs-label { font-size: 10px; margin-bottom: 2px; }

    /* Participation bars: the accent on a mint track. */
    .pdks-bar-track { height: 9px; background: var(--pdks-mint); }

    /* Device estate: a ring of the states around the total. */
    .pdks-device-body { display: flex; align-items: center; justify-content: center; gap: 28px; padding: 6px 0 4px; }

    .pdks-donut {
        display: grid;
        place-items: center;
        align-content: center;
        width: 136px;
        height: 136px;
        flex: none;
        border-radius: 50%;
        box-shadow: inset 0 0 0 0 #fff;
        position: relative;
    }

    .pdks-donut::before {
        content: "";
        position: absolute;
        inset: 17px;
        border-radius: 50%;
        background: #ffffff;
    }

    .pdks-donut > * { position: relative; }
    .pdks-donut .pdks-total { margin: 0; font-size: 24px; }
    .pdks-donut small { font-size: 10px; color: var(--bs-color-text-muted); }

    .pdks-states { display: grid; gap: 9px; min-width: 120px; }
    .pdks-states li { padding: 0; font-size: 12px; }
    .pdks-dot { width: 10px; height: 10px; border-radius: 50%; }

    /* Monthly trend: the design's columns — worked under overtime, on a ruled ground. */
    .pdks-trend .pdks-trend-rows {
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        gap: 8px;
        height: 150px;
        padding: 6px 4px 0;
        background: repeating-linear-gradient(to top, transparent 0, transparent 25px, var(--bs-color-border-subtle) 26px);
    }

    .pdks-trend .pdks-trend-rows li {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: 5px;
        min-width: 0;
        font-size: 10px;
    }

    .pdks-trend .pdks-trend-bar {
        order: 1;
        flex: 1;
        width: 26px;
        height: auto;
        flex-direction: column-reverse;
        justify-content: flex-start;
        border-radius: 4px 4px 0 0;
        background: transparent;
    }

    .pdks-trend .pdks-trend-worked,
    .pdks-trend .pdks-trend-overtime { width: 100%; height: var(--share, 0%); flex: none; }

    .pdks-trend .pdks-trend-overtime { border-radius: 4px 4px 0 0; }

    .pdks-trend .pdks-trend-rows li > strong { order: 2; font-size: 10px; font-weight: 600; }
    .pdks-trend .pdks-trend-month { order: 3; opacity: 1; color: var(--bs-color-text-muted); white-space: nowrap; }

    .pdks-absence .pdks-trend-bar { height: 8px; background: var(--bs-color-border-subtle); }

    /* Recent movements: the design's compact rows. */
    .pdks-feed li { padding: 8px 0; font-size: 12px; border-bottom-color: var(--bs-color-border-subtle); }
    .pdks-feed-dir { font-size: 11px; color: var(--bs-color-text-secondary); }

    /* ── Modules: compact icon cards, eight across at full width ── */
    .pdks-modules-title { margin: 4px 0 10px; font-size: 15px; font-weight: 700; }

    .pdks-dash ~ .cards,
    .cards:has(> .pdks-module-card) {
        grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
        gap: 12px;
    }

    .pdks-module-card {
        position: relative;
        display: grid;
        grid-template-columns: 38px 1fr;
        grid-template-rows: auto auto;
        column-gap: 10px;
        row-gap: 3px;
        align-items: center;
        min-height: 70px;
        padding: 12px;
        border-radius: 12px;
        box-shadow: none;
        transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
    }

    .pdks-module-card:hover { transform: translateY(-2px); border-color: var(--bs-color-primary-mid); box-shadow: var(--bs-card-shadow); }

    .pdks-module-icon {
        display: grid;
        place-items: center;
        grid-row: 1 / 3;
        width: 38px;
        height: 38px;
        border-radius: 12px;
        background: var(--pdks-mint);
        color: var(--pdks-mint-ink);
    }

    .pdks-module-icon svg { width: 20px; height: 20px; }

    .pdks-module-card:nth-child(8n+2) .pdks-module-icon,
    .pdks-module-card:nth-child(8n+7) .pdks-module-icon { background: #fff0dd; color: #c66f10; }
    .pdks-module-card:nth-child(8n+3) .pdks-module-icon { background: #ffeceb; color: #d3313b; }
    .pdks-module-card:nth-child(8n+4) .pdks-module-icon { background: #e8f0ff; color: #1f6fd6; }
    .pdks-module-card:nth-child(8n+5) .pdks-module-icon { background: #f1eaff; color: #6f43c9; }

    .pdks-module-card h2 { grid-column: 2; margin: 0; font-size: 12px; font-weight: 700; line-height: 1.25; }
    .pdks-module-card p { grid-column: 2; margin: 0; font-size: 10px; line-height: 1.3; color: var(--bs-color-text-muted); }

    /* The button stays the keyboard's way in; the mouse clicks the card, as in the design. It is
       only drawn while it has focus. */
    .pdks-module-card .bs-btn {
        position: absolute;
        right: 8px;
        bottom: 8px;
        opacity: 0;
        pointer-events: none;
    }

    .pdks-module-card .bs-btn:focus-visible { opacity: 1; pointer-events: auto; }
}

/* Between the phone and a full desktop the design stacks the analytics. */
@media (min-width: 769px) and (max-width: 1200px) {
    /* The account links and the language switch are rows of the avatar's sheet at this width
       (MainLayout's account sheet); the topbar keeps the avatar, the name and sign-out. */
    .session > .bs-btn, .topbar-actions > .locale-switch { display: none; }
    .topbar-search { width: auto; flex: 0 1 240px; }
    .pdks-dash .pdks-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pdks-panels { grid-template-columns: 1fr 1fr; }
    .pdks-p-recent { grid-column: span 2; }
    .pdks-hero-art { right: 2%; opacity: 0.55; }
    .pdks-hero-copy { max-width: 75%; }
}

@media (min-width: 769px) and (max-width: 900px) {
    .pdks-panels { grid-template-columns: 1fr; }
    .pdks-p-recent { grid-column: auto; }
    .topbar-today, .session-user { display: none; }
}

/* The library folds the sidebar to icons between 769 and 1024px; the lockup and the footer fold
   with it rather than spilling over the edge. */
@media (min-width: 769px) and (max-width: 1024px) {
    .bs-sidebar:not(.open) .sidebar-logo-text,
    .bs-sidebar:not(.open) .sidebar-footer,
    .bs-sidebar:not(.open) .pdks-nav-toggle,
    .bs-sidebar:not(.open) .bs-nav-item > span:not(.bs-nav-icon) { display: none; }
    .bs-sidebar:not(.open) { padding-left: 6px; padding-right: 6px; }
    .bs-sidebar:not(.open) .bs-nav-logo { padding: 0; justify-content: center; }
    .bs-sidebar:not(.open) .bs-nav-item { justify-content: center; padding: 0; }
    .topbar-search { width: auto; flex: 1; }
}

/* ══ Personnel pilot (Pages/Employees.razor, EmployeeForm, EmployeeCard) ═══════════════════════
   Two reusable skins, opted into by class so no other screen moves until it asks:

   - `.pdks-list` on a ListingScreen: the design's list — kicker and strong title, the toolbar
     as the top of a white card and the grid as its body, compact rows, badge and avatar cells.
   - `.pdks-person-dialog` / `.pdks-person-form` inside a dialog: the design's edit modal —
     blurred backdrop, 18px corners, the record summary, underlined tabs, sectioned form. The
     library's dialog takes no class of its own, so the rules find it by what it holds (:has).

   The badge, avatar and status classes are plain and can be used by any screen. */

.pdks-kicker {
    margin: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--bs-color-primary);
}

/* Status badge: the localized status on the design's tinted pill. */
.pdks-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    background: var(--bs-color-bg-subtle);
    color: var(--bs-color-text-secondary);
}

.pdks-status-active { background: #e1f9f0; color: #07745f; }
.pdks-status-preemployment { background: #e9f1ff; color: #1f62bf; }
.pdks-status-suspended { background: #fff2df; color: #a85c0b; }
.pdks-status-terminated { background: #ffeaeb; color: #c62d37; }
.pdks-status-muted { background: var(--bs-color-bg-subtle); color: var(--bs-color-text-muted); }

/* Initials avatar, in the design's four tints. */
.pdks-avatar {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    background: #d8eee8;
    color: #087e6b;
}

.pdks-avatar-1 { background: #e8e0fb; color: #6544ac; }
.pdks-avatar-2 { background: #ffe8d1; color: #a85c0b; }
.pdks-avatar-3 { background: #daeaff; color: #2c6bb0; }

.pdks-avatar-lg { width: 52px; height: 52px; font-size: 17px; box-shadow: 0 0 0 5px var(--pdks-mint); }

.pdks-person { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.pdks-person-name { font-weight: 600; color: var(--bs-color-text); }
.pdks-staff-code { font-weight: 700; color: #4f6b7c; }

@media (max-width: 768px), (pointer: coarse) and (max-height: 520px) {
    .pdks-kicker { display: none; }
    .pdks-person .pdks-avatar { display: none; }
}

@media (min-width: 769px) and (min-height: 521px), (min-width: 769px) and (pointer: fine) {

    /* ── Heading: kicker, strong title, the module's description ── */
    .pdks-main > .bs-content > .bs-content.pdks-has-kicker { position: relative; padding-top: 18px; }
    .pdks-has-kicker > .pdks-kicker { position: absolute; top: 0; left: 0; }

    .pdks-list .bs-page-header { margin-bottom: 20px; }
    .pdks-list .bs-page-title { font-size: 30px; letter-spacing: -0.04em; }

    /* ── Toolbar: the top of the list card ── */
    .pdks-list .bs-list-toolbar {
        margin: 0;
        padding: 13px 16px;
        background: var(--bs-card-bg);
        border: 1px solid var(--bs-card-border);
        border-bottom: 1px solid var(--bs-color-border-subtle);
        border-radius: 12px 12px 0 0;
    }

    .pdks-list { --bs-grid-row-alt-bg: #ffffff; }
    .pdks-list .bs-list-toolbar__row { gap: 10px; align-items: center; }
    .pdks-list .bs-list-toolbar__search-group { flex: 1; min-width: 250px; }

    .pdks-list .bs-search-box {
        width: min(520px, 100%);
        height: 38px;
        border-radius: 8px;
        background: #f6fafb;
        border-color: var(--bs-input-border);
    }

    .pdks-list .bs-search-box:focus-within { background: #ffffff; }
    .pdks-list .bs-search-box input { flex: 1; padding: 0 12px 0 4px; font-size: 12px; }

    /* The library's magnifier is an emoji; the design's is a stroked icon. */
    .pdks-list .bs-search-icon { font-size: 0; padding: 0 4px 0 12px; color: var(--bs-color-text-placeholder); }
    .pdks-list .bs-search-icon::before {
        content: "";
        width: 16px;
        height: 16px;
        background: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .pdks-list .bs-list-toolbar__actions-group { gap: 8px; }

    .pdks-list .bs-list-toolbar .bs-btn-sm,
    .pdks-list .bs-toolbar-btn {
        height: 36px;
        padding: 0 13px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 600;
    }

    .pdks-list .bs-list-toolbar .bs-btn-secondary,
    .pdks-list .bs-toolbar-btn {
        background: #ffffff;
        border: 1px solid #dce8ea;
        color: #526d7c;
    }

    .pdks-list .bs-list-toolbar .bs-btn-secondary:hover,
    .pdks-list .bs-toolbar-btn:hover { border-color: var(--bs-color-primary-mid); color: var(--bs-color-primary); background: var(--bs-color-primary-light); }

    /* ── The grid: the body of the same card ── */
    .pdks-list .bs-grid-wrapper {
        border-top: none;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 8px 25px rgba(32, 111, 115, 0.07);
    }

    .pdks-list .bs-grid th {
        padding-top: 11px;
        padding-bottom: 11px;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--bs-grid-header-text);
        background: var(--bs-grid-header-bg);
    }

    .pdks-list .bs-grid td {
        padding-top: 11px;
        padding-bottom: 11px;
        font-size: 12px;
        color: #526d7c;
        border-bottom-color: var(--bs-color-border-subtle);
    }

    .pdks-list .bs-grid tbody tr { transition: background 0.12s ease; }
    .pdks-list .bs-grid tbody tr:hover td { background: var(--bs-grid-row-hover); }

    .pdks-list .bs-grid input[type="checkbox"] { accent-color: var(--bs-color-primary); width: 15px; height: 15px; }

    /* Row actions: quiet outlined buttons; the destructive one red on white, as the spec has it. */
    .pdks-list .bs-grid td .bs-btn-sm {
        height: 28px;
        padding: 0 10px;
        border-radius: 7px;
        font-size: 11px;
        font-weight: 600;
    }

    .pdks-list .bs-grid td .bs-btn-secondary { background: #ffffff; border: 1px solid #dce8ea; color: #526d7c; }
    .pdks-list .bs-grid td .bs-btn-secondary:hover { border-color: var(--bs-color-primary-mid); color: var(--bs-color-primary); }
    .pdks-list .bs-grid td .bs-btn-danger { background: #ffffff; border: 1px solid #f6c9cc; color: #c62d37; }
    .pdks-list .bs-grid td .bs-btn-danger:hover { background: #ffeaeb; border-color: #e03e47; }

    /* ── Pagination: the card's footer ── */
    .pdks-list .bs-pagination {
        padding: 12px 16px;
        border-top: 1px solid var(--bs-color-border-subtle);
        font-size: 11px;
        color: var(--bs-color-text-muted);
    }

    .pdks-list .bs-pagination-size-select { height: 28px; border-radius: 6px; border: 1px solid var(--bs-color-border); font-family: inherit; font-size: 11px; }

    .pdks-list .bs-page-btn {
        min-width: 28px;
        height: 28px;
        border-radius: 6px;
        border: 1px solid var(--bs-color-border);
        background: #ffffff;
        color: #607684;
        font-family: inherit;
        font-size: 11px;
    }

    .pdks-list .bs-page-btn.active { background: var(--bs-color-primary); border-color: var(--bs-color-primary); color: #ffffff; }
    .pdks-list .bs-page-btn:disabled { opacity: 0.45; }

    /* ── The person dialogs ── */
    .bs-dialog-overlay:has(.pdks-person-dialog),
    .bs-dialog-overlay:has(.pdks-person-form) {
        background: rgba(9, 46, 52, 0.30);
        backdrop-filter: blur(3px);
    }

    .bs-dialog:has(.pdks-person-dialog),
    .bs-dialog:has(.pdks-person-form) {
        max-height: calc(100vh - 40px);
        border: none;
        border-radius: 18px;
        box-shadow: var(--bs-shadow-dialog);
    }

    .bs-dialog:has(.pdks-person-dialog) .bs-dialog-header,
    .bs-dialog:has(.pdks-person-form) .bs-dialog-header {
        padding: 22px 28px 6px;
        border-bottom: none;
        font-size: 21px;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--bs-color-text);
    }

    .bs-dialog:has(.pdks-person-dialog) .bs-dialog-close,
    .bs-dialog:has(.pdks-person-form) .bs-dialog-close {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: #f1f6f5;
        color: #607684;
    }

    .bs-dialog:has(.pdks-person-dialog) .bs-dialog-body,
    .bs-dialog:has(.pdks-person-form) .bs-dialog-body { padding: 10px 28px 0; }

    /* The record, as the design's summary strip. */
    .pdks-person-summary {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 16px;
        padding: 14px;
        background: linear-gradient(115deg, #ffffff 0%, var(--bs-color-primary-light) 100%);
        border: 1px solid var(--bs-color-border);
        border-radius: 12px;
    }

    .pdks-person-summary-text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .pdks-person-summary-text strong { font-size: 15px; color: var(--bs-color-text); }
    .pdks-person-summary-text small { font-size: 11px; color: var(--bs-color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Tabs: the design's underlined row. */
    .pdks-person-dialog .bs-tab-header { gap: 20px; border-bottom: 1px solid var(--bs-color-border); margin-bottom: 16px; }
    .pdks-person-dialog .bs-tab-btn { padding: 10px 2px; font-size: 12px; font-weight: 500; color: var(--bs-color-text-muted); }
    .pdks-person-dialog .bs-tab-btn.active { color: var(--bs-color-primary); font-weight: 600; border-bottom-color: var(--bs-color-primary); }

    /* The form: section titles, labels over 36px controls, footer on a rule. */
    .pdks-form-section {
        margin: 6px 0 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid #e7eeee;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #234555;
    }

    .pdks-person-form .bs-row + .pdks-form-section { margin-top: 18px; }



    .pdks-person-form .bs-label { font-size: 11px; font-weight: 500; color: var(--bs-color-text-secondary); }

    .bs-dialog:has(.pdks-person-dialog) .bs-dialog-footer,
    .bs-dialog:has(.pdks-person-form) .bs-dialog-footer {
        margin: 20px -28px 0;
        padding: 14px 28px 18px;
        border-top: 1px solid var(--bs-color-border-subtle);
        background: #fbfdfd;
    }
}

/* ══ Personnel detail, desktop shape (Pages/PersonDetail.razor) ════════════════════════════════
   The design's detail page: breadcrumb → profile card → four figures → tabs → information cards.
   Only drawn when the page is not on a phone (Viewport.IsPhone), so these rules need no query;
   the phone keeps the mobile mock-up's m-* screen. */

.pdks-person-page { display: flex; flex-direction: column; gap: 16px; }

.pdks-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--bs-color-text-muted); }
.pdks-breadcrumb a { color: var(--bs-color-text-secondary); text-decoration: none; font-weight: 500; }
.pdks-breadcrumb a:hover { color: var(--bs-color-primary); }
.pdks-breadcrumb svg { width: 13px; height: 13px; display: block; }

.pdks-avatar-xl { width: 72px; height: 72px; font-size: 22px; font-weight: 800; box-shadow: 0 0 0 6px var(--pdks-mint); }

.pdks-profile-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 26px;
    background: linear-gradient(115deg, #ffffff 0%, var(--bs-color-primary-light) 100%);
    border: 1px solid var(--bs-color-border);
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(32, 111, 115, 0.06);
}

.pdks-profile-main { flex: 1; min-width: 0; }
.pdks-profile-main h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 6px; font-size: 25px; font-weight: 700; letter-spacing: -0.03em; }
.pdks-profile-main p { margin: 3px 0; font-size: 12px; color: var(--bs-color-text-muted); }

.pdks-profile-card > .bs-btn, .pdks-profile-side > .bs-btn { background: #ffffff; color: var(--bs-color-primary); border: 1px solid var(--bs-color-primary-mid); font-weight: 600; }
.pdks-profile-card > .bs-btn:hover, .pdks-profile-side > .bs-btn:hover { background: var(--bs-color-primary-light); }

.pdks-detail-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

.pdks-detail-kpi {
    position: relative;
    padding: 15px 16px 14px 56px;
    background: var(--bs-card-bg);
    border: 1px solid var(--bs-color-border);
    border-radius: 12px;
    box-shadow: 0 5px 18px rgba(32, 111, 115, 0.06);
}

.pdks-detail-kpi small, .pdks-detail-kpi strong { display: block; }
.pdks-detail-kpi small { font-size: 11px; color: var(--bs-color-text-muted); }
.pdks-detail-kpi strong { margin-top: 4px; font-size: 19px; font-weight: 700; color: var(--bs-color-text); }

.pdks-detail-kpi-icon {
    position: absolute;
    left: 15px;
    top: 17px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #e4f4ff;
    color: #2c6bb0;
}

.pdks-detail-kpi-icon svg { width: 17px; height: 17px; }
.pdks-detail-kpi-icon.green { background: var(--pdks-mint); color: var(--pdks-mint-ink); }
.pdks-detail-kpi-icon.orange { background: #fff1dc; color: #c66f10; }
.pdks-detail-kpi-icon.purple { background: #eee8ff; color: #6544ac; }

.pdks-detail-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--bs-color-border); }

.pdks-detail-tabs button {
    padding: 11px 3px;
    margin-bottom: -1px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    font: inherit;
    font-size: 13px;
    color: var(--bs-color-text-muted);
    cursor: pointer;
}

.pdks-detail-tabs button:hover { color: var(--bs-color-text); }
.pdks-detail-tabs button.active { color: var(--bs-color-primary); border-bottom-color: var(--bs-color-primary); font-weight: 600; }

.pdks-detail-grid { display: grid; grid-template-columns: 1fr 1fr 0.8fr; gap: 14px; align-items: start; }
.pdks-detail-moves { display: grid; grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr); gap: 14px; align-items: start; }

.pdks-info-card {
    padding: 20px;
    background: var(--bs-card-bg);
    border: 1px solid var(--bs-color-border);
    border-radius: 13px;
    box-shadow: 0 4px 15px rgba(48, 120, 131, 0.07);
    min-width: 0;
}

.pdks-info-card h3 { margin: 0 0 12px; font-size: 14px; font-weight: 700; }

.pdks-info-card > p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 9px 0;
    border-bottom: 1px solid var(--bs-color-border-subtle);
    font-size: 12px;
    color: var(--bs-color-text-muted);
}

.pdks-info-card > p:last-child { border-bottom: none; }
.pdks-info-card > p b { color: var(--bs-color-text); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.pdks-info-summary { background: linear-gradient(145deg, var(--bs-color-primary-light), #ffffff); }
.pdks-info-summary > p b { color: var(--bs-color-primary); }
.pdks-info-card > p.pdks-info-note { display: block; font-size: 11px; padding-top: 10px; }

.pdks-info-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pdks-info-head-aside { display: inline-flex; align-items: center; gap: 12px; }
.pdks-info-head h3 { margin: 0; }
.pdks-day-input { width: auto; height: 34px; }

/* The movement list is the phone's component; inside the card it loses its own card frame. */
.pdks-info-card .m-card { margin: 0; padding: 0; border: none; box-shadow: none; background: none; }

.pdks-detail-empty { padding: 24px 8px; text-align: center; color: var(--bs-color-text-muted); }
.pdks-detail-empty strong { display: block; color: var(--bs-color-text); margin-bottom: 4px; }


@media (max-width: 1100px) {
    .pdks-detail-grid { grid-template-columns: 1fr 1fr; }
    .pdks-info-summary { grid-column: span 2; }
    .pdks-detail-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .pdks-detail-grid, .pdks-detail-moves { grid-template-columns: 1fr; }
    .pdks-info-summary { grid-column: auto; }
    .pdks-profile-card { flex-wrap: wrap; }
}

/* The record card, edited on the detail page rather than in a dialog (2026-10-14). The dialog
   rules for the card's tabs and form are desktop-scoped above and apply here as they did there. */
.m-card.pdks-edit-inline { padding: 16px; }
.pdks-edit-inline .bs-dialog-footer { margin: 18px -16px -16px; padding: 12px 16px; border-top: 1px solid var(--bs-color-border-subtle); }

.pdks-edit-panel .bs-dialog-footer {
    margin: 18px -20px -20px;
    padding: 14px 20px;
    border-top: 1px solid var(--bs-color-border-subtle);
    border-radius: 0 0 13px 13px;
    background: #fbfdfd;
}

.pdks-edit-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }

/* Geçiş Kontrol (EmployeeAccessControl, 2026-10-14): four sections, each with its own save — so
   each footer is a line under its own section, not the card's full-width foot. */
.pdks-access-actions { display: flex; justify-content: flex-end; margin: 4px 0 8px; }
.pdks-access-control .bs-dialog-footer,
.pdks-edit-panel .pdks-access-control .bs-dialog-footer,
.pdks-edit-inline .pdks-access-control .bs-dialog-footer {
    margin: 10px 0 14px;
    padding: 10px 0 0;
    border-radius: 0;
    background: none;
}

/* The tab's one Save, at its foot like every other tab's. */
.pdks-edit-panel .pdks-access-control .pdks-access-footer {
    margin: 18px -20px -20px;
    padding: 14px 20px;
    border-top: 1px solid var(--bs-color-border-subtle);
    border-radius: 0 0 13px 13px;
    background: #fbfdfd;
}

/* ══ Form section cards (Framework/FormSection, FormNote — 2026-10-14) ═══════════════════════════
   The edit screens' sections as the PO's reference draws them: each its own card, what it is on
   the left (icon tile, title, one line, an "i" for its help), its fields on the right.
   Side by side when the card is at least 720px wide, stacked otherwise. */
.pdks-form-section-card {
    container-type: inline-size;
    margin-bottom: 14px;
    padding: 20px 22px;
    background: var(--bs-card-bg);
    border: 1px solid var(--bs-color-border);
    border-radius: 12px;
}

.pdks-form-section-aside { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.pdks-form-section-aside h4 { margin: 4px 0 4px; font-size: 15px; font-weight: 700; color: var(--bs-color-text); }
.pdks-form-section-aside p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--bs-color-text-muted); }

.pdks-form-section-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    flex: none;
    border-radius: 12px;
    background: var(--pdks-mint);
    color: var(--pdks-mint-ink);
}

.pdks-form-section-icon svg { width: 22px; height: 22px; }

.pdks-form-section-body { min-width: 0; }
.pdks-form-section-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }

.pdks-form-section-grid > * { min-width: 0; }

/* Side by side only where the card has room for both — a medium dialog stacks them. */
@container (min-width: 720px) {
    .pdks-form-section-grid { display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: 28px; }
    .pdks-form-section-aside { margin-bottom: 0; }
}

/* The section's "i": the explanations open in a dialog (HelpHint pattern), beside the title. */
.pdks-form-section-aside h4 { display: flex; align-items: center; gap: 6px; }
.bs-btn.pdks-help-info { width: 22px; height: 22px; min-width: 22px; padding: 0; border: none; background: none; color: #1f6fd6; }
.bs-btn.pdks-help-info svg { width: 16px; height: 16px; }

.pdks-access-flags { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 28px; }

.pdks-btn-icon { display: inline-flex; margin-right: 6px; vertical-align: -3px; }
.pdks-btn-icon svg { width: 15px; height: 15px; }

/* Inside a section card the device list and the mapping sit flush, without a dialog's footer. */
.pdks-form-section-card .bs-grid-wrapper { margin-bottom: 12px; box-shadow: none; }
.pdks-form-section-card .bs-dialog-footer { margin: 12px 0 0; padding: 0; border: none; background: none; justify-content: flex-start; }
.pdks-form-section-card ul { margin: 0; padding: 0; list-style: none; }
.pdks-form-section-card li { display: flex; align-items: center; gap: 12px; font-weight: 600; }

/* Read-only figures inside a section card (leave standing, time in lieu, account): one tile each. */
.pdks-figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin: 0; }
.pdks-figures > div { padding: 12px 14px; border: 1px solid var(--bs-color-border); border-radius: 10px; background: var(--bs-color-bg-subtle); }
.pdks-figures dt { margin: 0 0 4px; font-size: 11px; font-weight: 500; color: var(--bs-color-text-muted); }
.pdks-figures dd { margin: 0; font-size: 15px; font-weight: 700; color: var(--bs-color-text); overflow-wrap: anywhere; }

/* The manager the record answers with now, as a sentence over the picker. */
.pdks-standing { margin: 0 0 12px; font-weight: 600; color: var(--bs-color-text); }

/* The record card's tab icons (EmployeeCard, 2026-10-14): the icon arrives as --pdks-tab-icon on
   each button's ::before, from the card's own list of tabs; here it is drawn in the text colour. */
.pdks-person-dialog > .bs-tabs > .bs-tab-header > .bs-tab-btn { display: inline-flex; align-items: center; gap: 7px; }
.pdks-person-dialog > .bs-tabs > .bs-tab-header > .bs-tab-btn::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: none;
    background: currentColor;
    -webkit-mask: var(--pdks-tab-icon) center / contain no-repeat;
    mask: var(--pdks-tab-icon) center / contain no-repeat;
}

/* The editor's head: the title and its close button at one height, in the card's own type. */
.pdks-edit-panel > .pdks-info-head { margin-bottom: 14px; }
.pdks-edit-panel > .pdks-info-head h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--bs-color-text);
}
.pdks-edit-head-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--pdks-mint);
    color: var(--pdks-mint-ink);
}
.pdks-edit-head-icon svg { width: 18px; height: 18px; }
.pdks-edit-panel > .pdks-info-head .bs-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: 9px;
    border: 1px solid var(--bs-color-border);
    background: #ffffff;
    color: var(--bs-color-text-secondary);
    font-size: 12px;
    font-weight: 600;
}
.pdks-edit-panel > .pdks-info-head .bs-btn:hover { border-color: var(--bs-color-primary-mid); color: var(--bs-color-primary); background: var(--bs-color-primary-light); }
.pdks-edit-panel > .pdks-info-head .bs-btn .pdks-btn-icon { margin-right: 0; }

/* The profile card's placement (under the name) and employment dates (over Düzenle), 2026-10-14. */
.pdks-profile-placement { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 0 4px; }
.pdks-profile-axis {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--bs-color-border);
    border-radius: 999px;
    background: #ffffff;
    font-size: 12px;
    font-weight: 600;
    color: var(--bs-color-text);
}
.pdks-profile-axis small { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bs-color-text-muted); }

.pdks-profile-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.pdks-profile-side > p { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; color: var(--bs-color-text); }
.pdks-profile-side > p small { font-size: 11px; font-weight: 500; color: var(--bs-color-text-muted); }
.pdks-profile-side > p.pdks-profile-left { color: #c62d37; }
.pdks-profile-side > .bs-btn { margin-top: 4px; }
a.pdks-profile-manager { text-decoration: none; }
a.pdks-profile-manager:hover { border-color: var(--bs-color-primary-mid); color: var(--bs-color-primary); background: var(--bs-color-primary-light); }

button.pdks-profile-axis { cursor: pointer; font-family: inherit; }

/* The Ekibi grid (BsGrid, 2026-10-14): a row opens the person. */
.pdks-team-grid tbody tr { cursor: pointer; }

/* Genel (2026-10-14): the record in cards — three across, a note across the whole width, each
   title with its icon tile and a pencil that opens the editor on that card's tab. */
.pdks-detail-grid.pdks-general-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .pdks-detail-grid.pdks-general-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pdks-detail-grid.pdks-general-grid { grid-template-columns: 1fr; } }
.pdks-info-wide { grid-column: 1 / -1; }
.pdks-info-text { margin: 0; white-space: pre-wrap; font-size: 13px; color: var(--bs-color-text); }
.pdks-card-head h3 { display: inline-flex; align-items: center; gap: 10px; }
.pdks-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--bs-color-primary-light);
    color: var(--bs-color-primary);
}
.pdks-card-icon svg { width: 16px; height: 16px; }
.pdks-card-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--bs-color-border);
    border-radius: 8px;
    background: var(--bs-color-surface);
    color: var(--bs-color-text-muted);
    cursor: pointer;
}
.pdks-card-edit svg { width: 15px; height: 15px; }
.pdks-card-edit:hover { border-color: var(--bs-color-primary-mid); color: var(--bs-color-primary); background: var(--bs-color-primary-light); }
.pdks-info-card p b .bs-badge { margin-left: 6px; }
.pdks-avatar-photo { object-fit: cover; padding: 0; }

/* Its column picker opens inside the wrapper; a team of three rows is shorter than the menu, and the
   framework's overflow-x: auto clipped it. Only drawn on the desktop page, where a team's few
   columns fit, so the wrapper may let the menu out. */
.pdks-team-grid.bs-grid-wrapper { overflow: visible; }

/* Hareketler (2026-10-14): the range bar over the grid — ‹ from – to ›, This week, the cancelled
   toggle, and Add on the far side. The grid lets its column picker out for the same reason as Ekibi's. */
.pdks-range-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0 14px;
}

.pdks-range-bar .bs-input { width: auto; min-width: 150px; }
.pdks-range-bar > :last-child:not(.pdks-range-toggle) { margin-left: auto; }

.pdks-range-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--bs-color-border);
    border-radius: 8px;
    background: var(--bs-color-surface);
    color: var(--bs-color-text);
    font: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.pdks-range-step:hover { border-color: var(--bs-color-primary-mid); color: var(--bs-color-primary); background: var(--bs-color-primary-light); }

.pdks-range-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
    font-size: 13px;
    color: var(--bs-color-text-muted);
    cursor: pointer;
}

.pdks-moves-grid.bs-grid-wrapper { overflow: visible; }

/* Puantaj (2026-10-14): the month between ‹ ›, a link to the period on the far side, the month's
   figures over the grid, and the weekday under each date. The grid keeps the framework's
   horizontal scroll: a month has rows enough for the picker, and up to sixteen columns. */
.pdks-range-month { min-width: 120px; text-align: center; font-size: 14px; }
.pdks-range-link { margin-left: auto; font-size: 13px; color: var(--bs-color-link, var(--bs-color-primary)); text-decoration: none; }
.pdks-range-link:hover { text-decoration: underline; }
.pdks-puantaj-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
.pdks-puantaj-grid tbody tr { cursor: pointer; }
.pdks-puantaj-grid td { white-space: nowrap; }
.pdks-puantaj-grid td[data-col="Classifications"] { white-space: normal; min-width: 340px; }
.pdks-weekday { margin-left: 6px; color: var(--bs-color-text-muted); font-size: 11px; }

/* Day kinds (PO, 2026-10-14): absent, on leave, late, overtime — a tinted row with a coloured
   edge, keyed by the mark the date cell carries (the grid takes no row class). The legend above
   the grid uses the same four. */
.pdks-puantaj-grid .bs-grid > tbody > tr:has(.pdks-day-mark) > td,
.pdks-leave-grid .bs-grid > tbody > tr:has(.pdks-day-mark) > td { background: var(--pdks-day-bg); }
.pdks-puantaj-grid tr:has(.pdks-day-mark) td:first-child,
.pdks-leave-grid tr:has(.pdks-day-mark) td:first-child { box-shadow: inset 3px 0 0 var(--pdks-day-edge); }
.pdks-puantaj-grid tr:has(.pdks-day-mark[data-kind="absence"]),
.pdks-leave-grid tr:has(.pdks-day-mark[data-kind="absence"]),
.pdks-day-legend-item[data-kind="absence"] { --pdks-day-bg: var(--bs-color-danger-light); --pdks-day-edge: var(--bs-color-danger); }
.pdks-puantaj-grid tr:has(.pdks-day-mark[data-kind="leave"]),
.pdks-leave-grid tr:has(.pdks-day-mark[data-kind="leave"]),
.pdks-day-legend-item[data-kind="leave"] { --pdks-day-bg: var(--bs-color-info-light); --pdks-day-edge: var(--bs-color-info); }
.pdks-puantaj-grid tr:has(.pdks-day-mark[data-kind="late"]),
.pdks-leave-grid tr:has(.pdks-day-mark[data-kind="late"]),
.pdks-day-legend-item[data-kind="late"] { --pdks-day-bg: var(--bs-color-warning-light); --pdks-day-edge: var(--bs-color-warning); }
.pdks-puantaj-grid tr:has(.pdks-day-mark[data-kind="overtime"]),
.pdks-leave-grid tr:has(.pdks-day-mark[data-kind="overtime"]),
.pdks-day-legend-item[data-kind="overtime"] { --pdks-day-bg: var(--bs-color-success-light); --pdks-day-edge: var(--bs-color-success); }
.pdks-leave-grid tr:has(.pdks-day-mark[data-kind="cancelled"]),
.pdks-day-legend-item[data-kind="cancelled"] { --pdks-day-bg: var(--bs-color-bg-subtle); --pdks-day-edge: var(--bs-color-text-muted); }
.pdks-leave-grid tr:has(.pdks-day-mark[data-kind="cancelled"]) td { color: var(--bs-color-text-muted); }
.pdks-leave-grid tbody td { white-space: nowrap; }
.pdks-range-spacer { flex: 1; }

/* Vardiya (2026-10-14): the pattern's assignments, a calendar/list switch, and a month calendar
   whose days take the same tints as the grids — rest grey, holiday blue, leave green. */
.pdks-pattern-card { margin-bottom: 14px; }
.pdks-pattern-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pdks-pattern-row .pdks-status { margin-left: 8px; }
.pdks-pattern-dates { display: inline-flex; align-items: center; gap: 10px; color: var(--bs-color-text-muted); font-size: 13px; }
.pdks-view-switch { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--bs-color-bg-subtle); border: 1px solid var(--bs-color-border); }
.pdks-view-switch button { border: 0; background: transparent; padding: 5px 14px; border-radius: 7px; font: inherit; font-size: 12px; font-weight: 600; color: var(--bs-color-text-muted); cursor: pointer; }
.pdks-view-switch button.active { background: var(--bs-color-surface); color: var(--bs-color-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.pdks-shift-figures { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 14px; }
@media (max-width: 1100px) { .pdks-shift-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pdks-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.pdks-calendar-head { padding: 4px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--bs-color-text-muted); }
.pdks-calendar-day {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 78px;
    padding: 8px 10px;
    border: 1px solid var(--bs-color-border);
    border-radius: 10px;
    background: var(--pdks-day-bg, var(--bs-color-surface));
    box-shadow: inset 3px 0 0 var(--pdks-day-edge, transparent);
}
.pdks-calendar-day.editable { cursor: pointer; }
.pdks-calendar-day.editable:hover { border-color: var(--bs-color-primary-mid); }
.pdks-calendar-day.today { outline: 2px solid var(--bs-color-primary); outline-offset: -1px; }
.pdks-calendar-day.cancelled { --pdks-day-bg: var(--bs-color-bg-subtle); --pdks-day-edge: var(--bs-color-text-muted); }
.pdks-calendar-day.leave { --pdks-day-bg: var(--bs-color-info-light); --pdks-day-edge: var(--bs-color-info); }
.pdks-calendar-day.overtime { --pdks-day-bg: var(--bs-color-success-light); --pdks-day-edge: var(--bs-color-success); }
.pdks-calendar-date { font-size: 12px; font-weight: 700; color: var(--bs-color-text-muted); }
.pdks-calendar-day strong { font-size: 12px; line-height: 1.3; }
.pdks-calendar-day small { font-size: 11px; color: var(--bs-color-text-muted); }
.pdks-calendar-changed { position: absolute; top: 6px; right: 8px; font-size: 10px; color: var(--bs-color-warning); }

/* Cihazlar (2026-10-14): four figures over the grants grid; the rows take the leave grid's tints. */
.pdks-device-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
.pdks-device-figures dd .pdks-weekday { display: block; margin: 2px 0 0; }
.pdks-device-grid .bs-grid-actions { white-space: nowrap; }
.pdks-device-grid .bs-grid-actions .bs-btn + .bs-btn { margin-left: 6px; }

/* PdksNotice (PO, 2026-10-14, pilot standard): the page-state card and the inline strip, four
   tones from the theme's role colours. Not scoped to the desktop: a phone shows the same notice. */
.pdks-notice-info { --pdks-notice-bg: var(--bs-color-info-light); --pdks-notice-fg: var(--bs-color-info); }
.pdks-notice-warning { --pdks-notice-bg: var(--bs-color-warning-light); --pdks-notice-fg: var(--bs-color-warning); }
.pdks-notice-danger { --pdks-notice-bg: var(--bs-color-danger-light); --pdks-notice-fg: var(--bs-color-danger); }
.pdks-notice-success { --pdks-notice-bg: var(--bs-color-success-light); --pdks-notice-fg: var(--bs-color-success); }

.pdks-notice-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 640px;
    margin: 24px auto;
    padding: 36px 28px;
    border: 1px solid var(--bs-color-border);
    border-radius: 14px;
    background: var(--bs-card-bg, var(--bs-color-surface));
    text-align: center;
}
.pdks-notice-page .pdks-notice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 6px;
    border-radius: 14px;
    background: var(--pdks-notice-bg);
    color: var(--pdks-notice-fg);
}
.pdks-notice-page .pdks-notice-icon svg { width: 26px; height: 26px; }
.pdks-notice-page .pdks-notice-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--bs-color-text); }
.pdks-notice-page .pdks-notice-text { margin: 0; max-width: 460px; font-size: 13px; line-height: 1.6; color: var(--bs-color-text-muted); }
.pdks-notice-page .pdks-notice-actions { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }

.pdks-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--pdks-notice-fg) 35%, transparent);
    border-radius: 10px;
    background: var(--pdks-notice-bg);
    color: var(--bs-color-text);
}
.pdks-notice .pdks-notice-icon { flex: none; display: inline-flex; color: var(--pdks-notice-fg); }
.pdks-notice .pdks-notice-icon svg { width: 20px; height: 20px; }
.pdks-notice-content { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.5; }
.pdks-notice .pdks-notice-title { font-weight: 700; }
.pdks-notice .pdks-notice-actions { flex: none; display: inline-flex; gap: 6px; }

/* Bilgilerim on a desktop (PO, 2026-10-14): the personnel detail's language for one's own page —
   only drawn on a desktop, so nothing here reaches the phone's narrow page. */
.pdks-me { display: flex; flex-direction: column; gap: 14px; }
.pdks-me .pdks-detail-kpis { margin: 0; }
.pdks-me .pdks-notice { margin: 0; }
/* Inside a card there is no grid gap to separate a notice from what it is about (Puantajım, 2026-10-14). */
.pdks-me .pdks-info-card .pdks-notice { margin: 0 0 14px; }
.pdks-me-shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.pdks-me-shortcut {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--bs-color-border);
    border-radius: 12px;
    background: var(--bs-card-bg, var(--bs-color-surface));
    color: var(--bs-color-text);
    text-decoration: none;
}
.pdks-me-shortcut:hover { border-color: var(--bs-color-primary-mid); background: var(--bs-color-primary-light); }
.pdks-me-shortcut-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pdks-me-shortcut-text strong { font-size: 13px; }
.pdks-me-shortcut-text small { font-size: 12px; color: var(--bs-color-text-muted); }
.pdks-me-arrow { display: inline-flex; color: var(--bs-color-text-muted); }
.pdks-me-arrow svg { width: 16px; height: 16px; }

/* The library's own cards, given the info card's surface. */
.pdks-me .pdks-card {
    margin: 0;
    padding: 20px;
    border: 1px solid var(--bs-color-border);
    border-radius: 13px;
    background: var(--bs-card-bg, var(--bs-color-surface));
}
.pdks-me .pdks-card .bs-section-title { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.pdks-me .pdks-card > div { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.pdks-me .pdks-card details { margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--bs-color-border); border-radius: 10px; background: var(--bs-color-bg-subtle); }
.pdks-me .pdks-card summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--bs-color-primary); }
.pdks-me .pdks-card details[open] summary { margin-bottom: 8px; }
.pdks-me .pdks-card .pdks-table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 12px; }
.pdks-me .pdks-card .pdks-table td { padding: 6px 4px; border-top: 1px solid var(--bs-color-border); }
.pdks-me-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .pdks-me-cards { grid-template-columns: 1fr; } }

/* Belgeler and Notlar (2026-10-14). */
.pdks-upload { display: inline-flex; align-items: center; gap: 10px; }
.pdks-file-kind {
    display: inline-block;
    min-width: 34px;
    margin-right: 8px;
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--bs-color-primary-light);
    color: var(--bs-color-primary);
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}
.pdks-documents-grid .bs-grid-actions .bs-btn + .bs-btn,
.pdks-documents-grid .bs-grid-actions .bs-btn + * { margin-left: 6px; }
.pdks-preview { display: flex; justify-content: center; min-height: 60vh; }
.pdks-preview img { max-width: 100%; max-height: 75vh; object-fit: contain; }
.pdks-preview iframe { width: 100%; height: 75vh; border: 0; }
.pdks-note-card { margin-bottom: 14px; }
.pdks-note-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 12px; }
.pdks-history-filter { width: auto; min-width: 220px; margin-left: auto; }
.pdks-action-code { font-size: 11px; padding: 1px 6px; border-radius: 5px; background: var(--bs-color-bg-subtle); }

.pdks-shift-grid tbody tr { cursor: pointer; }
.pdks-shift-grid .bs-grid > tbody > tr:has(.pdks-day-mark:not([data-kind="work"])) > td { background: var(--pdks-day-bg); }
.pdks-shift-grid tr:has(.pdks-day-mark:not([data-kind="work"])) td:first-child { box-shadow: inset 3px 0 0 var(--pdks-day-edge); }
.pdks-shift-grid tr:has(.pdks-day-mark[data-kind="cancelled"]) { --pdks-day-bg: var(--bs-color-bg-subtle); --pdks-day-edge: var(--bs-color-text-muted); }
.pdks-shift-grid tr:has(.pdks-day-mark[data-kind="leave"]) { --pdks-day-bg: var(--bs-color-info-light); --pdks-day-edge: var(--bs-color-info); }
.pdks-shift-grid tr:has(.pdks-day-mark[data-kind="overtime"]) { --pdks-day-bg: var(--bs-color-success-light); --pdks-day-edge: var(--bs-color-success); }
.pdks-day-mark { display: none; }

/* On the grid's own bar, left of Sütunlar (the bar is end-aligned; the legend takes the slack). */
.pdks-day-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-right: auto; font-size: 12px; color: var(--bs-color-text-muted); }
.pdks-day-legend-item { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.pdks-day-legend-item input { order: -1; margin: 0; accent-color: var(--pdks-day-edge); cursor: pointer; }
.pdks-day-legend-item small { color: var(--bs-color-text-muted); font-size: 11px; }
.pdks-day-legend-item::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--pdks-day-bg);
    box-shadow: inset 3px 0 0 var(--pdks-day-edge);
}
.pdks-moves-grid .bs-badge { margin-left: 6px; }
.pdks-month-total { margin-top: 12px; }

/* Vardiya takası: the leave grid's row colours, but the trade column may wrap. */
.pdks-swap-grid tbody td { white-space: normal; }

/* The name in the top bar opens the account menu; the chevron says it can (PO, 2026-10-14). */
button.session-menu {
    display: inline-flex; align-items: center; gap: 4px;
    border: none; background: transparent; padding: 4px 6px; border-radius: 8px;
    font: inherit; font-size: 12px; font-weight: 600; color: var(--bs-color-text); cursor: pointer;
}
button.session-menu:hover { background: var(--bs-color-primary-light); color: var(--bs-color-primary); }
.session-menu-caret { display: inline-flex; }
.session-menu-caret svg { width: 14px; height: 14px; }

/* Sign-out as the bar's third icon; red on hover, as the prototype's "Oturumu kapat". */
.session-signout { display: inline-flex; margin: 0; }
.session .pdks-topbar-signout:hover { background: #fff0ef; color: #e65343; }

/* ── Cihazlar (PO, 2026-10-14): the Personel pilot's list and card for readers ───────────────── */

/* The figures are the grid's filter: a button that looks like the tile, pressed when chosen. */
.pdks-device-kpis { margin-bottom: 14px; }
button.pdks-kpi-filter { width: 100%; text-align: left; font: inherit; cursor: pointer; }
button.pdks-kpi-filter:hover { border-color: var(--bs-color-primary-mid); }
button.pdks-kpi-filter.is-active { border-color: var(--bs-color-primary); box-shadow: 0 0 0 2px var(--bs-color-primary-light); }
.pdks-detail-kpi-icon.red { background: #ffeaeb; color: #c62d37; }
.pdks-detail-kpi-icon.slate { background: #eef2f4; color: #5b6b73; }

.pdks-list-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pdks-list-search { max-width: 360px; }

.pdks-device-grid.bs-grid-wrapper { overflow: visible; }
.pdks-device-grid tbody tr { cursor: pointer; }
.pdks-device-name { display: inline-flex; align-items: center; gap: 10px; }
.pdks-device-name b { display: block; font-weight: 600; }
.pdks-device-name small { display: block; font-size: 11px; color: var(--bs-color-text-muted); }
.pdks-device-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #e4f4ff; color: #2c6bb0; flex: none; }
.pdks-device-icon svg { width: 16px; height: 16px; }
.pdks-ago b { display: block; font-weight: 600; }
.pdks-ago small { display: block; font-size: 11px; color: var(--bs-color-text-muted); }

.pdks-device-avatar { display: grid; place-items: center; background: #e4f4ff; color: #2c6bb0; }
.pdks-device-avatar svg { width: 30px; height: 30px; }
.pdks-info-actions { display: inline-flex; gap: 8px; }

/* The device form: capabilities as a three-column grid, Bağlan level with its fields, one Save. */
.pdks-check-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 18px; margin-bottom: 12px; }
.pdks-field-action { display: flex; align-items: flex-end; height: 100%; padding-bottom: var(--pdks-field-gap, 22px); }
.pdks-form-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
@media (max-width: 768px) { .pdks-check-grid { grid-template-columns: 1fr; } }
.pdks-button-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Giriş Alanları ve Kiosklar (PO, 2026-10-14) ────────────────────────────────────────────── */
.pdks-site-grid.bs-grid-wrapper { overflow: visible; }
.pdks-map-link { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--bs-color-primary); white-space: nowrap; }
.pdks-info-head h3 .pdks-help-hint { margin-left: 4px; vertical-align: middle; }
.pdks-token-box { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; padding: 12px 14px; border: 1px dashed var(--bs-color-border); border-radius: 10px; background: #fbfdfd; }
.pdks-token-box code { flex: 1; font-size: 13px; word-break: break-all; }
.pdks-token-url small { display: block; font-size: 11px; color: var(--bs-color-text-muted); }
.pdks-token-url code { font-size: 13px; }
/* The kiosk pairing code beside its activation QR (docs/96 KIOSK-022): read aloud, typed by hand. */
.pdks-kiosk-pairing { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 8px 0 14px; padding: 12px 14px; border: 1px dashed var(--bs-color-border); border-radius: 10px; }
.pdks-kiosk-pairing strong { font: 700 32px/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .12em; color: var(--bs-color-text); }

/* The site picker's map (wwwroot/map.js): tiles under a point and its radius. */
.pdks-map { position: relative; height: 320px; margin: 4px 0 6px; overflow: hidden; border: 1px solid var(--bs-color-border); border-radius: 12px; background: #e9eef0; cursor: crosshair; touch-action: none; user-select: none; }
.pdks-map-layer { position: absolute; inset: 0; }
.pdks-map-tile { position: absolute; left: 0; top: 0; width: 256px; height: 256px; pointer-events: none; }
.pdks-map-radius { position: absolute; left: 0; top: 0; border: 2px solid var(--bs-color-primary); border-radius: 50%; background: color-mix(in srgb, var(--bs-color-primary) 16%, transparent); pointer-events: none; }
.pdks-map-marker { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border: 3px solid #fff; border-radius: 50%; background: var(--bs-color-primary); box-shadow: 0 1px 4px rgba(0,0,0,.35); pointer-events: none; }
.pdks-map-zoom { position: absolute; right: 10px; top: 10px; display: grid; gap: 4px; }
.pdks-map-zoom button { width: 30px; height: 30px; border: 1px solid var(--bs-color-border); border-radius: 8px; background: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }
.pdks-map-credit { position: absolute; right: 0; bottom: 0; padding: 2px 6px; font-size: 10px; background: rgba(255,255,255,.85); border-top-left-radius: 6px; }

/* ── Sınıflandırma (PO, 2026-10-14): axes on the left, the chosen axis's values on the right ── */
.pdks-class-layout { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 14px; }
@media (max-width: 1000px) { .pdks-class-layout { grid-template-columns: 1fr; } }
.pdks-class-axis-list { display: grid; gap: 6px; }
.pdks-class-axis { display: grid; grid-template-columns: 26px 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 2px 8px; width: 100%; padding: 9px 10px; text-align: left; font: inherit; border: 1px solid var(--bs-color-border); border-radius: 10px; background: var(--bs-card-bg); cursor: pointer; }
.pdks-class-axis:hover { border-color: var(--bs-color-primary-mid); }
.pdks-class-axis.is-active { border-color: var(--bs-color-primary); box-shadow: 0 0 0 2px var(--bs-color-primary-light); }
.pdks-class-axis-no { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #e4f4ff; color: #2c6bb0; font-size: 12px; font-weight: 700; grid-row: span 2; }
.pdks-class-axis-name { font-weight: 600; }
.pdks-class-axis small { grid-column: 2 / 4; font-size: 11px; color: var(--bs-color-text-muted); }
.pdks-class-unused { margin-top: 12px; font-size: 13px; }
.pdks-class-unused summary { cursor: pointer; color: var(--bs-color-text-muted); font-weight: 600; }
.pdks-class-unused-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--bs-color-border-subtle); }
.pdks-class-unused-row .bs-btn { margin-left: auto; }
.pdks-class-node { display: inline-flex; align-items: center; gap: 6px; }
.pdks-class-branch { color: var(--bs-color-text-muted); }
.pdks-info-head h3 .pdks-status { margin-left: 6px; vertical-align: middle; }
/* The headcount is the framework's picker button, drawn as a link (Sınıflandırma, 2026-10-14). */
.pdks-people-button .bs-btn { padding: 2px 8px; border-color: transparent; background: transparent; color: var(--bs-color-primary); font-weight: 600; text-decoration: underline; }
.pdks-people-button .bs-btn:hover { background: var(--bs-color-primary-light); }

/* ── Ekibim (PO, 2026-10-14): the team calendar as a BsGrid, today marked, weekends shaded ──── */
.pdks-team-calendar.bs-grid-wrapper { overflow-x: auto; }
.pdks-team-calendar td, .pdks-team-calendar th { padding: 4px 2px !important; text-align: center; }
.pdks-team-calendar td:first-child, .pdks-team-calendar th:first-child { text-align: left; padding-left: 10px !important; }
.pdks-team-calendar .team-cell { display: block; min-width: 30px; padding: 4px 0; border-radius: 6px; font-size: 11px; font-weight: 600; }
.pdks-team-calendar .pdks-team-weekend { opacity: .75; }
.pdks-team-calendar th.pdks-team-today, .pdks-team-calendar .team-cell.pdks-team-today { box-shadow: inset 0 0 0 2px var(--bs-color-primary); }
.pdks-team-calendar tbody tr { cursor: pointer; }
.pdks-team-legend { margin: 6px 0 10px; }
.pdks-team-swatch { display: inline-block; width: 14px; height: 14px; margin-right: 6px; border-radius: 4px; border: 1px solid var(--bs-color-border); vertical-align: middle; }
.pdks-set-description { margin: -4px 0 12px; font-size: 13px; color: var(--bs-color-text-muted); }

/* ── İçe Aktarım (PO, 2026-10-14): what is imported as cards, the work as numbered steps ─────── */
.pdks-import-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
@media (max-width: 1000px) { .pdks-import-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pdks-import-kind { display: flex; align-items: flex-start; gap: 10px; padding: 14px; text-align: left; font: inherit; border: 1px solid var(--bs-color-border); border-radius: 12px; background: var(--bs-card-bg); cursor: pointer; }
.pdks-import-kind:hover { border-color: var(--bs-color-primary-mid); }
.pdks-import-kind.is-active { border-color: var(--bs-color-primary); box-shadow: 0 0 0 2px var(--bs-color-primary-light); }
.pdks-import-kind b { display: block; font-weight: 600; }
.pdks-import-kind small { display: block; margin-top: 2px; font-size: 12px; color: var(--bs-color-text-muted); }
.pdks-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pdks-steps li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.pdks-step-no { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bs-color-primary-light); color: var(--bs-color-primary); font-weight: 700; }
.pdks-step-body b { display: block; margin: 4px 0 8px; }
.pdks-step-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.pdks-step-row > :not(.bs-btn):not(span) { min-width: 220px; }
.pdks-step-file { margin: 0; }
/* Savunma ve Tutanak: the person's own account, quoted in the decision dialog. */
.pdks-defence-quote { margin: 4px 0 14px; padding: 12px 14px; border-left: 3px solid var(--bs-color-primary); border-radius: 0 10px 10px 0; background: #fbfdfd; }
.pdks-defence-quote b { display: block; margin-bottom: 4px; font-size: 12px; color: var(--bs-color-text-muted); }
.pdks-defence-quote p { margin: 0; white-space: pre-wrap; }
.pdks-site-grid td .pdks-defence-cell { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 260px; white-space: normal; line-height: 1.35; }
.pdks-defence-cell small { display: block; margin-top: 2px; }

/* A work pattern's days, four to a row on the page (PO form rules, 2026-10-15). */
.pdks-cycle-days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 16px; margin-bottom: 8px; }
.pdks-cycle-day-cell { min-width: 0; }
@media (max-width: 900px) { .pdks-cycle-days { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pdks-cycle-days { grid-template-columns: 1fr; } }

/* The period screens' head card: state badge and progress beside the month (PO, 2026-10-14). */
.period-card .pdks-info-head h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.period-card .period-progress { font-size: 12px; font-weight: 500; color: var(--bs-color-text-muted, #64748b); }
.period-card .period-actions { margin-top: 12px; }
.period-inferred-filter { padding-top: 28px; }

/* Inputs inside a grid's cells (an editable mapping): the field's own bottom gap off, so a row is a row. */
.pdks-grid-inputs td .bs-form-group, .pdks-grid-inputs td .bs-field { margin-bottom: 0; }
.pdks-grid-inputs td .bs-label:empty { display: none; }
.pdks-grid-after { height: 16px; }

/* A tick box in a row of labelled fields: dropped to the fields' baseline (PO form rules, 2026-10-15). */
.pdks-field-check { padding-top: 28px; }
@media (max-width: 560px) { .pdks-field-check { padding-top: 0; } }
/* An editable grid's long cells (a legal minimum as a sentence) wrap instead of widening the row. */
.pdks-leave-grid.pdks-grid-inputs tbody td { white-space: normal; }
.pdks-grid-inputs td .bs-input, .pdks-grid-inputs td .bs-select { min-width: 90px; }

/* Retention as bands (PO, 2026-10-15): what the category is on the left, its two answers on the right. */
.pdks-retention-bands { display: flex; flex-direction: column; gap: 10px; }
.pdks-retention-band {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: 16px; align-items: center;
  padding: 12px 16px; border: 1px solid var(--bs-color-border, #e5e7eb); border-radius: 10px;
  background: var(--bs-color-surface, #fff);
}
.pdks-retention-band.is-platform { background: var(--bs-color-surface-muted, #f8fafc); }
.pdks-retention-what b { font-size: 14px; }
.pdks-retention-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pdks-retention-desc { margin: 4px 0 0; font-size: 12.5px; color: var(--bs-color-text-muted, #64748b); }
.pdks-retention-chip {
  font-size: 12px; padding: 2px 8px; border-radius: 999px;
  background: var(--bs-color-surface-muted, #f1f5f9); color: var(--bs-color-text-muted, #64748b);
}
.pdks-retention-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.pdks-retention-fields .bs-form-group { margin-bottom: 0; }
.pdks-retention-fixed { display: flex; flex-direction: column; gap: 4px; }
.pdks-retention-fixed small { color: var(--bs-color-text-muted, #64748b); font-size: 12px; }
@media (max-width: 800px) {
  .pdks-retention-band { grid-template-columns: 1fr; }
}

/* A read-only record as label/value pairs (user card for a reader, 2026-10-15). */
.pdks-info-list { display: grid; grid-template-columns: 180px 1fr; gap: 8px 16px; margin: 0; }
.pdks-info-list dt { color: var(--bs-color-text-muted, #64748b); font-size: 13px; }
.pdks-info-list dd { margin: 0; font-weight: 500; }
.pdks-role-chip { margin-right: 4px; }

/* Tiles above a listing never touch the list card (PO, 2026-10-15: "yapışık alanlar kabul edilmiyor"). */
.pdks-list > .pdks-detail-kpis { margin-bottom: 16px; }

/* Acts on a record as rows in one card: icon, what it does, the button (user card, 2026-10-15). */
.pdks-action-rows { display: flex; flex-direction: column; }
.pdks-action-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; }
.pdks-action-row + .pdks-action-row { border-top: 1px solid var(--bs-color-border, #e5e7eb); }
.pdks-action-text { display: flex; flex-direction: column; gap: 2px; }
.pdks-action-text small { color: var(--bs-color-text-muted, #64748b); font-size: 12.5px; }
.pdks-action-do { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
@media (max-width: 560px) { .pdks-action-row { grid-template-columns: 40px 1fr; } .pdks-action-do { grid-column: 1 / -1; justify-content: flex-start; } }

/* Chips: a scope value, a count, a chosen record with its remove (role card and grant, 2026-10-15). */
.pdks-chip {
  display: inline-flex; align-items: center; gap: 6px; margin: 2px 4px 2px 0; padding: 2px 10px;
  border-radius: 999px; font-size: 12px; background: var(--bs-color-surface-muted, #f1f5f9);
  color: var(--bs-color-text, #1f2937); white-space: nowrap;
}
.pdks-chip.is-whole { background: #fff1e6; color: #9a3412; }
.pdks-chip.is-self { background: #e8f5ee; color: #166534; }
.pdks-chip button { border: 0; background: transparent; cursor: pointer; padding: 0; color: inherit; font-size: 11px; }
.pdks-chip-list { display: flex; flex-wrap: wrap; margin-top: 6px; }
/* The role card's tick list (PO, 2026-10-15): module headers with a tick-all box, a row per
   permission, its scope as a small select once ticked. */
.pdks-grant-search { max-width: 420px; margin-bottom: 10px; }
.pdks-grant-grid tbody tr:not(.bs-group-header-row) { cursor: pointer; }
.pdks-grant-row { display: flex; align-items: center; gap: 10px; cursor: pointer; margin: 0; }
.pdks-grant-row input, .pdks-grant-module input { width: 16px; height: 16px; accent-color: var(--bs-color-primary, #0f766e); }
.pdks-grant-module { display: inline-flex; align-items: center; gap: 10px; }
.pdks-grant-scope { min-width: 170px; padding: 4px 8px; font-size: 13px; }
.pdks-grant-grid td.bs-group-header { display: table-cell; }
/* The tick list is long; its one Save stays in reach. */
.pdks-form-footer[data-role-save] {
  position: sticky; bottom: 0; z-index: 5; margin: 0 0 16px; padding: 10px 16px; align-items: center;
  background: var(--bs-color-surface, #fff); border: 1px solid var(--bs-color-border, #e5e7eb); border-radius: 12px;
  box-shadow: 0 -4px 14px rgba(15, 23, 42, .06);
}

/* "Seçili kayıtlar": one toggle chip per value, grouped by axis. */
.pdks-toggle-group { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; align-items: start; padding: 8px 0; border-top: 1px solid var(--bs-color-border, #e5e7eb); }
.pdks-toggle-label { font-weight: 600; font-size: 13px; padding-top: 4px; }
.pdks-toggle-chip {
  margin: 2px 6px 2px 0; padding: 3px 12px; border-radius: 999px; font-size: 12px; cursor: pointer;
  border: 1px solid var(--bs-color-border, #e5e7eb); background: transparent; color: inherit;
}
.pdks-toggle-chip.is-on { background: var(--bs-color-primary, #0f766e); border-color: var(--bs-color-primary, #0f766e); color: #fff; }
@media (max-width: 640px) { .pdks-toggle-group { grid-template-columns: 1fr; } }

/* Onay zincirleri (PO, 2026-10-15): the chain in one line on the list, as a numbered flow in the dialog. */
.pdks-chain-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pdks-chain-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 3px; border-radius: 999px;
  background: var(--bs-color-surface-muted, #f1f5f9); font-size: 12px; white-space: nowrap;
}
.pdks-chain-chip b {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--bs-color-primary, #0f766e); color: #fff; font-size: 11px;
}
.pdks-chain-arrow { color: var(--bs-color-text-muted, #64748b); }

.pdks-chain-steps { list-style: none; margin: 0 0 12px; padding: 0; }
.pdks-chain-steps > .pdks-chain-step {
  position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 12px; margin-bottom: 18px; border: 1px solid var(--bs-color-border, #e5e7eb); border-radius: 12px;
}
.pdks-chain-step:not(:last-child)::after {
  content: "↓"; position: absolute; left: 24px; bottom: -19px; color: var(--bs-color-text-muted, #64748b); font-size: 14px; line-height: 18px;
}
.pdks-chain-ordinal {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--bs-color-primary-light, #ecfdf5); color: var(--bs-color-primary, #0f766e); font-weight: 700;
}
.pdks-chain-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pdks-chain-fields .bs-form-group, .pdks-chain-fields .bs-field { margin-bottom: 0; }
.pdks-chain-moves { display: flex; gap: 4px; }
.pdks-chain-move {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--bs-color-border, #e5e7eb);
  background: transparent; cursor: pointer; color: inherit;
}
.pdks-chain-move:disabled { opacity: .35; cursor: default; }
.pdks-chain-move.is-danger:hover { background: #fff0ef; color: #e65343; border-color: #f5c2bd; }

.pdks-apply-to { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.pdks-apply-option {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 0; cursor: pointer;
  border: 1px solid var(--bs-color-border, #e5e7eb); border-radius: 10px;
}
.pdks-apply-option input { width: 16px; height: 16px; accent-color: var(--bs-color-primary, #0f766e); }
.pdks-apply-option small { margin-left: auto; font-size: 11px; }
.bs-dialog-footer .pdks-footer-left { margin-right: auto; }
@media (max-width: 640px) { .pdks-chain-fields { grid-template-columns: 1fr; } }
/* A notice under the figures keeps the 16px every block keeps (pilot rule 30). */
.pdks-detail-kpis + .pdks-notice, .pdks-detail-kpis + .pdks-info-card { margin-top: 16px; }
/* A link inside a notice reads as one, not as the browser's visited purple. */
.pdks-notice a { color: var(--bs-color-primary, #0f766e); font-weight: 600; text-decoration: none; }
.pdks-notice a:hover { text-decoration: underline; }
/* A key ending soon: its remaining time in the late tone (API anahtarları, 2026-10-15). */
.pdks-ago.is-warning b { color: #a85c0b; }
/* A webhook delivery's body (2026-10-15): readable JSON, scrolled rather than stretched. */
.pdks-payload-label { margin-top: 16px; }
.pdks-payload {
  max-height: 320px; overflow: auto; margin: 4px 0 0; padding: 12px 14px; font-size: 12px; line-height: 1.5;
  border: 1px solid var(--bs-color-border, #e5e7eb); border-radius: 10px; background: #fbfdfd; white-space: pre-wrap; word-break: break-word;
}
.pdks-cell-clip { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* KVKK (2026-10-15): the 30-day clock in words, a request's full text, the notice's body. */
.pdks-due-late { color: #c62d37; }
.pdks-due-soon { color: #a85c0b; }
.pdks-request-text {
  margin: 4px 0 12px; padding: 10px 12px; white-space: pre-wrap; word-break: break-word;
  border: 1px solid var(--bs-color-border, #e5e7eb); border-radius: 10px; background: #fbfdfd;
}
.pdks-notice-body { max-height: 220px; margin-bottom: 16px; font-size: 13px; }
.pdks-readers-grid { margin-top: 8px; }
/* Dosyalar (2026-10-15): the file's type as a small badge instead of its MIME string. */
.pdks-file-icon {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: .02em; background: #eef2f7; color: #475569;
}
.pdks-file-icon.is-pdf { background: #ffeaeb; color: #c62d37; }
.pdks-file-icon.is-excel, .pdks-file-icon.is-csv { background: #e1f9f0; color: #07745f; }
.pdks-file-icon.is-image { background: #f3e8ff; color: #7e22ce; }
.pdks-file-icon.is-word { background: #e9f1ff; color: #1f62bf; }
.pdks-kpi-sub { display: block; font-size: 11px; color: var(--bs-color-text-muted, #64748b); }
.pdks-toolbar-select { min-width: 190px; padding: 5px 10px; font-size: 13px; }
/* Bildirimlerim (2026-10-15): one row per event, the message in two lines, unread marked. */
.pdks-inbox-row { display: flex; align-items: center; gap: 12px; }
.pdks-inbox-text { display: grid; gap: 2px; min-width: 0; }
.pdks-inbox-text b { font-weight: 600; }
.pdks-inbox-text small { color: var(--bs-color-text-muted, #64748b); white-space: normal; }
.pdks-inbox-row.is-unread .pdks-inbox-text b { font-weight: 800; }
.pdks-inbox-row.is-unread::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff7a1a; flex: none; }
tr:has(.pdks-inbox-row.is-unread) { background: #fffaf5; }
/* Denetim kayıtları (2026-10-15): the period bar above the kind tiles, one request per row, the
   request's entries and their evidence in the dialog. */
.pdks-audit-period { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.pdks-audit-date { width: 150px; padding: 4px 8px; font-size: 13px; }
.pdks-audit-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 16px; }
@media (max-width: 900px) { .pdks-audit-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pdks-audit-user { display: inline-flex; align-items: center; }
.pdks-audit-entry { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bs-color-border, #e5e7eb); }
.pdks-audit-entry h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14px; }
.pdks-audit-details { margin: 0 0 8px; color: var(--bs-color-text-muted, #64748b); font-size: 13px; }
.pdks-audit-fields { width: 100%; font-size: 13px; }
.pdks-audit-evidence { margin-top: 16px; padding: 10px 12px; border: 1px dashed var(--bs-color-border, #e5e7eb); border-radius: 10px; }
.pdks-audit-evidence summary { cursor: pointer; font-weight: 600; }
.pdks-audit-evidence code { font-size: 12px; }
.pdks-cell-wrap { word-break: break-word; }

/* Ana Sayfa (PO, 2026-10-15): the date and the day's last movement in the hero, five tiles of one
   shape, "Sizi bekleyenler", a richer feed, the module cards folded into quick access. Desktop
   only; the phone keeps TodayPanel. */
@media (min-width: 769px) and (min-height: 521px), (min-width: 769px) and (pointer: fine) {
    .pdks-hero-date { position: relative; z-index: 3; margin: 2px 0 6px; font-size: 13px; color: var(--bs-color-text-secondary); }
    .pdks-hero-today {
        position: absolute; right: 28px; top: 24px; z-index: 3; display: grid; gap: 2px; min-width: 220px;
        padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(4px);
        box-shadow: 0 6px 18px rgba(27, 83, 91, 0.10);
    }
    .pdks-hero-today small { font-size: 11px; color: var(--bs-color-text-secondary); }
    .pdks-hero-today strong { font-size: 20px; line-height: 1.2; }
    .pdks-hero-today span { font-size: 12px; color: var(--bs-color-text-secondary); }

    .pdks-kpi-green .pdks-kpi-icon { background: #e1f9f0; color: #07745f; }
    .pdks-kpi.is-alert { box-shadow: inset 4px 0 0 currentColor, 0 8px 22px rgba(27, 83, 91, 0.14); }
    .pdks-kpi-orange.is-alert { color: #c66f10; }
    .pdks-kpi-red.is-alert { color: #d3313b; }
    .pdks-kpi.is-alert .pdks-kpi-value { color: inherit; }
    .pdks-kpi .pdks-kpi-value { color: var(--bs-color-text); }
    .pdks-kpi-of { margin-left: 4px; font-size: 13px; font-weight: 500; color: var(--bs-color-text-muted); }

    .pdks-dash-actions { display: flex; justify-content: flex-end; margin: -4px 0 14px; }

    .pdks-waiting { margin-bottom: 14px; }
    .pdks-waiting-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
    .pdks-waiting-list li {
        display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
        padding: 10px 12px; border: 1px solid var(--bs-color-border-subtle, #e5e7eb); border-radius: 12px;
    }
    .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-text { font-size: 13px; }
    .pdks-waiting-none { display: flex; align-items: center; gap: 8px; margin: 0; color: #07745f; font-weight: 600; }

    .pdks-feed-rich li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; }
    .pdks-feed-avatar {
        display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
        background: var(--bs-color-primary-light, #e1f9f0); color: var(--bs-color-primary, #07745f); font-size: 11px; font-weight: 700;
    }
    .pdks-feed-rich .pdks-feed-name { display: grid; min-width: 0; }
    .pdks-feed-rich .pdks-feed-name small { font-size: 11px; color: var(--bs-color-text-muted); }
    .pdks-feed-rich .pdks-feed-time { text-align: right; }

    .pdks-quick-toggle {
        display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 18px 0 12px;
        padding: 12px 16px; border: 1px solid var(--bs-color-border-subtle, #e5e7eb); border-radius: 12px;
        background: var(--bs-color-surface, #fff); font: inherit; font-weight: 600; cursor: pointer;
    }
}
.pdks-status-neutral { background: #eef2f7; color: #475569; }

/* ── Sign-in (2026-10-15): one card in the middle, the brand over it ───────────────────────── */
.pdks-login { min-height: calc(100vh - 120px); display: grid; place-items: center; padding: 24px 16px; }
.pdks-login-card { width: 100%; max-width: 420px; background: var(--bs-color-surface); border: 1px solid var(--bs-color-border);
  border-radius: 18px; padding: 32px 32px 24px; box-shadow: 0 18px 40px rgba(16, 35, 59, 0.08); }
.pdks-login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.pdks-login-brand img { width: 52px; height: 39px; }
.pdks-login-brand strong { font-size: 22px; font-weight: 800; letter-spacing: -0.04em; color: var(--bs-color-text); }
.pdks-login-brand strong span { color: var(--pdks-orange); }
.pdks-login-card h1 { margin: 0; font-size: 24px; font-weight: 700; color: var(--bs-color-text); letter-spacing: -0.02em; }
.pdks-login-sub { margin: 6px 0 20px; color: var(--bs-color-text-muted); font-size: 13px; }
.pdks-login-form { display: grid; gap: 14px; }
.pdks-login-field { display: grid; gap: 6px; font-size: 12px; font-weight: 600; color: var(--bs-color-text-secondary); }
.pdks-login-field .bs-input { width: 100%; height: 42px; font-size: 14px; }
.pdks-login-submit { width: 100%; height: 44px; margin-top: 6px; font-size: 14px; }
.pdks-login-error { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--bs-color-danger-light); color: var(--bs-color-danger); font-size: 13px; }
.pdks-login-callout { margin: 14px 0 0; font-size: 13px; }
.pdks-login-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--bs-color-border-subtle); font-size: 13px; }
.pdks-login-links a { color: var(--bs-color-primary); font-weight: 600; text-decoration: none; }
.pdks-login-links a:hover { text-decoration: underline; }
.pdks-ceiling-card { margin-top: 16px; }
.pdks-ceiling-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.pdks-ceiling-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pdks-plate { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: 0.04em; padding: 2px 8px; border: 1px solid var(--bs-color-border-strong); border-radius: 6px; background: var(--bs-color-bg-subtle); }
.pdks-person-text { display: inline-flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pdks-person-text .pdks-staff-code { font-size: 11px; color: var(--bs-color-text-muted); font-weight: 500; }
.pdks-export-reason { display: block; margin-top: 4px; font-size: 11px; color: var(--bs-color-danger); }
.pdks-form-help { display: flex; justify-content: flex-end; margin: -6px 0 4px; }