/* ═══════════════════════════════════════════════════════════════
   FirstClass Web Management — Portal CSS  v1.7.9
   Mood: Warm cream / Chula pink-coral
   Font: Noto Sans Thai + system sans
   ═══════════════════════════════════════════════════════════════ */

@import url('../assets/fonts/noto-sans-thai.css');

/* ── CSS Variables ──────────────────────────────────────────── */
:root {
    --fcwm-cream:       #FFFDF8;
    --fcwm-cream-dark:  #FDEBD8;
    --fcwm-cream-border:#E8D5BE;
    --fcwm-pink:        #c0415a;
    --fcwm-pink-light:  #e8637a;
    --fcwm-pink-dark:   #9a2f45;
    --fcwm-coral:       #e07855;
    --fcwm-gold:        #c49a3c;
    --fcwm-text:        #3a2a1e;
    --fcwm-text-muted:  #7a6558;
    --fcwm-text-light:  #a8978c;
    --fcwm-white:       #ffffff;
    --fcwm-nav-bg:      #fdf6ec;
    --fcwm-nav-h:       64px;
    --fcwm-radius:      12px;
    --fcwm-radius-sm:   8px;
    --fcwm-shadow:      0 2px 16px rgba(120,60,40,.10);
    --fcwm-shadow-sm:   0 1px 6px rgba(120,60,40,.07);
}

*, *::before, *::after { box-sizing: border-box; }

/* ── Base ───────────────────────────────────────────────────── */
body.fcwm-portal-body {
    margin: 0; padding: 0;
    font-family: 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px; line-height: 1.6;
    background: #FFFDF8;
    color: var(--fcwm-text);
    -webkit-font-smoothing: antialiased;
}

/* ════════════════════════════════════════════════════════════
   TOP NAV — Warm cream bar, clean modern
   ════════════════════════════════════════════════════════════ */
.fcwm-topnav {
    background: #ffffff;
    border-bottom: 2px solid #E8C8C0;
    display: flex;
    align-items: center;
    height: var(--fcwm-nav-h);
    padding: 0 28px;
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: 0 2px 12px rgba(180,80,80,.10);
    gap: 16px;
    margin: 0 !important;   /* override shortcode negative margins */
}

/* ── Brand (left) ───────────────────────────────────────────── */
.fcwm-topnav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}
.fcwm-topnav-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
    display: block;
}
.fcwm-topnav-brand-icon {
    font-size: 22px;
    color: #c0415a;
    line-height: 1;
}
.fcwm-topnav-brand-name {
    font-size: 15px;
    font-weight: 700;
    color: #c0415a;
    letter-spacing: -0.2px;
    white-space: nowrap;
}

/* ── Center block ────────────────────────────────────────────── */
.fcwm-topnav-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-width: 0;
}

/* System title — small uppercase label above nav links */
.fcwm-topnav-system-title {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #C8A0A0;
    line-height: 1;
    margin-bottom: 3px;
    white-space: nowrap;
}

/* Nav links row */
.fcwm-topnav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: nowrap;
}
.fcwm-topnav-links a {
    color: #5a3a3a;
    text-decoration: none;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    background: transparent;
    transition: background .18s, color .18s, box-shadow .18s;
    letter-spacing: 0.1px;
}
.fcwm-topnav-links a:hover {
    background: #FDEAEA;
    color: #c0415a;
    box-shadow: none;
}
.fcwm-topnav-links a.active {
    background: var(--fcwm-pink);
    color: #fff;
    font-weight: 600;
}

/* ── User area (right) ───────────────────────────────────────── */
.fcwm-topnav-user {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #7a5050;
    flex-shrink: 0;
    margin-left: auto !important;
}
.fcwm-topnav-user span {
    font-weight: 600;
    color: #3a2020;
}
.fcwm-topnav-role {
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.8) !important;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 10px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
}
.fcwm-topnav-user a {
    color: #7a5050;
    text-decoration: none;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 500;
    transition: background .15s, color .15s;
    font-size: 13px;
}
.fcwm-topnav-user a:hover {
    background: #FDEAEA;
    color: #c0415a;
}
/* Logout button — outline white */
.fcwm-topnav-user a:last-child {
    border: 1.5px solid #D0B0B0 !important;
    color: #1a1a1a !important;
    background: transparent !important;
}
.fcwm-topnav-user a:last-child:hover {
    background: #c0415a !important;
    color: #ffffff !important;
    border-color: #c0415a !important;
}

/* Divider between user items */
.fcwm-topnav-user span + a,
.fcwm-topnav-user a + a {
    border-left: 1px solid #E8D0C8;
    border-radius: 0;
    padding-left: 10px;
    margin-left: 2px;
}
.fcwm-topnav-user a:last-child {
    border: 1.5px solid #D0B0B0 !important;
    border-radius: 20px;
    margin-left: 4px;
    color: #1a1a1a !important;
    background: transparent !important;
}

/* ════════════════════════════════════════════════════════════
   PAGE LAYOUT
   ════════════════════════════════════════════════════════════ */
.fcwm-portal-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 24px;
}

/* Page title */
.fcwm-portal-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--fcwm-text);
    margin: 0 0 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.fcwm-portal-title small {
    font-size: 14px;
    font-weight: 400;
    color: var(--fcwm-text-muted);
}

/* ── Panels ─────────────────────────────────────────────────── */
.fcwm-p-panel {
    background: #ffffff !important;
    border: 1.5px solid var(--fcwm-cream-border) !important;
    border-radius: var(--fcwm-radius);
    padding: 20px 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(100,60,40,.07);
}
.fcwm-p-panel-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--fcwm-text);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.fcwm-p-panel-title a {
    font-size: 12px;
    font-weight: 500;
    color: var(--fcwm-pink);
    text-decoration: none;
}
.fcwm-p-panel-title a:hover { text-decoration: underline; }

/* ── Stat cards ─────────────────────────────────────────────── */
.fcwm-p-cards  { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
.fcwm-p-card   {
    background: #ffffff !important;
    border: 1.5px solid var(--fcwm-cream-border) !important;
    border-radius: var(--fcwm-radius);
    padding: 18px 22px;
    min-width: 130px; flex: 1 1 130px; max-width: 200px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(100,60,40,.07);
}
.fcwm-p-card-num   { font-size: 34px; font-weight: 700; line-height: 1; color: var(--fcwm-text); }
.fcwm-p-card-label { font-size: 11px; color: var(--fcwm-text-muted); margin-top: 5px; font-weight: 500; }
.fcwm-p-card.online  .fcwm-p-card-num { color: #00875a; }
.fcwm-p-card.offline .fcwm-p-card-num { color: var(--fcwm-pink); }

/* ── Grid ───────────────────────────────────────────────────── */
.fcwm-p-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 20px; }
@media (max-width: 900px) { .fcwm-p-grid-2 { grid-template-columns: 1fr; } }

/* ── Table ──────────────────────────────────────────────────── */
.fcwm-p-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.fcwm-p-table th {
    text-align: left; padding: 8px 12px;
    font-size: 11px; font-weight: 600; color: var(--fcwm-text-muted);
    border-bottom: none;
    white-space: nowrap;
    background: var(--fcwm-cream);
}
.fcwm-p-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--fcwm-cream-dark);
    vertical-align: middle;
}
.fcwm-p-table tr:last-child td { border-bottom: none; }
.fcwm-p-table tr:hover td { background: var(--fcwm-cream); }
.fcwm-p-table a { color: var(--fcwm-pink); text-decoration: none; font-weight: 500; }
.fcwm-p-table a:hover { text-decoration: underline; }
.fcwm-p-table code {
    background: var(--fcwm-cream-dark);
    color: var(--fcwm-pink-dark);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-family: 'Courier New', monospace;
}
.fcwm-p-kv th {
    width: 140px; color: var(--fcwm-text-muted);
    background: transparent; border-bottom: 1px solid var(--fcwm-cream-dark);
}

/* ── Badges ─────────────────────────────────────────────────── */
.fcwm-p-badge {
    display: inline-block; font-size: 11px; font-weight: 600;
    padding: 2px 10px; border-radius: 10px; white-space: nowrap;
}
.fcwm-p-badge.online  { background: #e6f9f0; color: #00693a; border: 1px solid #b3e8d0; }
.fcwm-p-badge.offline { background: #fdf0f3; color: var(--fcwm-pink-dark); border: 1px solid #f5c0cb; }

/* ── Buttons ─────────────────────────────────────────────────── */
.fcwm-p-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 16px;
    background: #1a2744;
    color: var(--fcwm-text);
    border: 1.5px solid var(--fcwm-cream-border);
    border-radius: 20px;
    font-size: 13px; font-weight: 500; cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}
.fcwm-p-btn:hover {
    background: var(--fcwm-cream);
    border-color: var(--fcwm-pink);
    color: var(--fcwm-pink);
}
.fcwm-p-btn.secondary {
    background: var(--fcwm-cream);
    color: var(--fcwm-text-muted);
}

/* ── Alerts ─────────────────────────────────────────────────── */
.fcwm-p-alert {
    padding: 10px 16px; border-radius: 8px; font-size: 13px;
    margin-bottom: 16px; font-weight: 500;
}
.fcwm-p-alert.info    { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.fcwm-p-alert.warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.fcwm-p-alert.success { background: #f0fdf4; color: #14532d; border: 1px solid #bbf7d0; }
.fcwm-p-alert.error   { background: #fdf0f3; color: var(--fcwm-pink-dark); border: 1px solid #f5c0cb; }

/* ── Status bar ─────────────────────────────────────────────── */
.fcwm-p-status-wrap  { margin-bottom: 20px; }
.fcwm-p-status-label { font-size: 13px; font-weight: 500; color: var(--fcwm-text-muted); margin-bottom: 6px; }
.fcwm-p-status-bar   { height: 10px; background: var(--fcwm-cream-dark); border-radius: 5px; overflow: hidden; }
.fcwm-p-status-fill  { height: 100%; border-radius: 5px; transition: width .4s; }

/* ── Mini bar ───────────────────────────────────────────────── */
.fcwm-p-mini-bar      { height: 8px; background: var(--fcwm-cream-dark); border-radius: 4px; min-width: 80px; overflow: hidden; }
.fcwm-p-mini-bar-fill { height: 100%; border-radius: 4px; }

/* ── Progress bars ──────────────────────────────────────────── */
.fcwm-p-bar-wrap { margin-bottom: 14px; }
.fcwm-p-bar-label { font-size: 12px; color: var(--fcwm-text-muted); margin-bottom: 4px; }
.fcwm-p-bar { height: 10px; background: var(--fcwm-cream-dark); border-radius: 5px; overflow: hidden; }
.fcwm-p-bar-fill { height: 100%; border-radius: 5px; transition: width .3s; }

/* ── Misc ───────────────────────────────────────────────────── */
.fcwm-p-empty    { text-align: center; color: var(--fcwm-text-light); padding: 24px; font-size: 13px; }
.fcwm-p-breadcrumb { font-size: 13px; color: var(--fcwm-text-muted); margin-bottom: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fcwm-p-breadcrumb a { color: var(--fcwm-pink); text-decoration: none; font-weight: 500; }
.fcwm-p-breadcrumb a:hover { text-decoration: underline; }
.fcwm-p-filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }

/* ── Reports filter ─────────────────────────────────────────── */
.fcwm-filter-label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--fcwm-text); }
.fcwm-p-select, .fcwm-p-input {
    border: 1.5px solid var(--fcwm-cream-border);
    border-radius: 8px; padding: 5px 10px;
    font-size: 13px; height: 34px;
    background: #1a2744; color: var(--fcwm-text);
    font-family: inherit;
}
.fcwm-p-select:focus, .fcwm-p-input:focus {
    border-color: var(--fcwm-pink); outline: none;
    box-shadow: 0 0 0 3px rgba(192,65,90,.12);
}

/* ════════════════════════════════════════════════════════════
   LOGIN PAGE — เมื่อ shortcode render login prompt
   ════════════════════════════════════════════════════════════ */
.fcwm-login-prompt {
    min-height: 80vh;
    display: flex; align-items: center; justify-content: center;
    padding: 40px 20px;
}
.fcwm-login-box {
    background: #1a2744;
    border: 1.5px solid var(--fcwm-cream-border);
    border-radius: var(--fcwm-radius);
    padding: 40px 36px;
    max-width: 380px; width: 100%;
    text-align: center;
    box-shadow: var(--fcwm-shadow);
}
.fcwm-login-logo {
    font-size: 18px; font-weight: 700;
    color: var(--fcwm-pink); margin-bottom: 12px;
}
.fcwm-login-btn {
    display: inline-block;
    padding: 10px 32px;
    background: var(--fcwm-pink);
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 20px;
    font-size: 14px; font-weight: 600;
    font-family: inherit;
    transition: background .15s;
}
.fcwm-login-btn:hover { background: var(--fcwm-pink-dark); }


/* ════════════════════════════════════════════════════════════
   LOGIN PROMPT (portal shortcode, ไม่ใช่ wp-login.php)
   ════════════════════════════════════════════════════════════ */
.fcwm-login-prompt {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: var(--fcwm-cream);
}
.fcwm-login-box {
    background: #1a2744;
    border: 1.5px solid var(--fcwm-cream-border);
    border-radius: 20px;
    padding: 44px 40px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(120,50,40,.10);
}
.fcwm-login-logo-icon {
    font-size: 36px;
    color: var(--fcwm-pink);
    margin-bottom: 8px;
    line-height: 1;
}
.fcwm-login-system-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--fcwm-pink);
    letter-spacing: -.2px;
    margin-bottom: 20px;
}
.fcwm-login-heading {
    font-size: 20px;
    font-weight: 700;
    color: #3a2020;
    margin: 0 0 10px;
    line-height: 1.3;
}
.fcwm-login-desc {
    font-size: 13px;
    color: #7a5555;
    margin: 0 0 24px;
    line-height: 1.6;
}
.fcwm-login-btn {
    display: inline-block;
    padding: 11px 36px;
    background: var(--fcwm-pink);
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    transition: background .15s;
    box-shadow: 0 3px 10px rgba(192,65,90,.25);
}
.fcwm-login-btn:hover { background: var(--fcwm-pink-dark); }
.fcwm-login-btn-outline {
    background: transparent !important;
    color: var(--fcwm-pink) !important;
    border: 2px solid var(--fcwm-pink) !important;
    box-shadow: none !important;
}
.fcwm-login-btn-outline:hover {
    background: var(--fcwm-pink) !important;
    color: #fff !important;
}

/* ════════════════════════════════════════════════════════════
   THEME OVERRIDE — Force FCWM styles over any active theme
   เพิ่ม !important เพื่อกัน Xamin/theme CSS override
   ════════════════════════════════════════════════════════════ */

/* Page body */
body.fcwm-portal-body {
    background: #FFFDF8 !important;
    color: #3a2a1e !important;
    font-family: 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* Remove theme containers */
body.fcwm-portal-body .site,
body.fcwm-portal-body .site-content,
body.fcwm-portal-body .entry-content,
body.fcwm-portal-body main,
body.fcwm-portal-body article,
body.fcwm-portal-body .wp-site-blocks {
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

/* Panel text */
.fcwm-p-panel,
.fcwm-p-panel * {
    color: #3a2a1e !important;
}
.fcwm-p-panel-title {
    color: #3a2a1e !important;
    font-weight: 600 !important;
}
.fcwm-p-panel-title a {
    color: #c0415a !important;
}

/* Stat cards */
.fcwm-p-card {
    background: #ffffff !important;
    color: #3a2a1e !important;
}
.fcwm-p-card-num {
    color: #3a2a1e !important;
    font-size: 34px !important;
    font-weight: 700 !important;
}
.fcwm-p-card-label {
    color: #7a6558 !important;
    font-size: 11px !important;
}
.fcwm-p-card.online  .fcwm-p-card-num { color: #00875a !important; }
.fcwm-p-card.offline .fcwm-p-card-num { color: #c0415a !important; }

/* Tables */
.fcwm-p-table th {
    background: #FFFDF8 !important;
    color: #7a6558 !important;
    border-bottom: 1.5px solid #d4c2a8 !important;
}
.fcwm-p-table td {
    color: #3a2a1e !important;
    border-bottom: 1px solid #e5d4bc !important;
    background: transparent !important;
}
.fcwm-p-table tr:hover td { background: #FFFDF8 !important; }
.fcwm-p-table a { color: #c0415a !important; }
.fcwm-p-table code {
    background: #e5d4bc !important;
    color: #9a2f45 !important;
}

/* Page title */
.fcwm-portal-title {
    color: #3a2a1e !important;
}

/* Status bar */
.fcwm-p-status-label { color: #7a6558 !important; }
.fcwm-p-status-bar { background: #e5d4bc !important; }

/* Breadcrumb */
.fcwm-p-breadcrumb { color: #7a6558 !important; }
.fcwm-p-breadcrumb a { color: #c0415a !important; }

/* Empty states */
.fcwm-p-empty { color: #a8978c !important; }

/* Buttons */
.fcwm-p-btn {
    background: #ffffff !important;
    color: #3a2a1e !important;
    border: 1.5px solid #d4c2a8 !important;
    font-family: 'Noto Sans Thai', sans-serif !important;
}
.fcwm-p-btn:hover {
    background: #FFFDF8 !important;
    border-color: #c0415a !important;
    color: #c0415a !important;
}

/* ── LOGOUT BUTTON FINAL OVERRIDE ── */
.fcwm-portal-body .fcwm-topnav .fcwm-topnav-user a:last-child,
.fcwm-topnav-user a:last-child {
    color: #1a1a1a !important;
    background: transparent !important;
    border: 1.5px solid #C8A0A8 !important;
    border-radius: 20px !important;
}
.fcwm-portal-body .fcwm-topnav .fcwm-topnav-user a:last-child:hover,
.fcwm-topnav-user a:last-child:hover {
    color: #ffffff !important;
    background: #c0415a !important;
    border-color: #c0415a !important;
}

/* ── Icon helpers ─────────────────────────────────────────── */
.fcwm-icon {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    flex-shrink: 0;
}
.fcwm-stat-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 10px;
}
.fcwm-icon-pink   { color: #c0415a; }
.fcwm-icon-green  { color: #00875a; }
.fcwm-icon-amber  { color: #c49a3c; }
.fcwm-icon-blue   { color: #2563eb; }
.fcwm-icon-muted  { color: #7a6558; }

/* Stat card icon bg */
.fcwm-stat-icon.pink   { background: #FDEAEA; color: #c0415a; }
.fcwm-stat-icon.green  { background: #E6F9F0; color: #00693a; }
.fcwm-stat-icon.amber  { background: #FEF3C7; color: #9a6a00; }
.fcwm-stat-icon.blue   { background: #EFF6FF; color: #1d4ed8; }
.fcwm-stat-icon.gray   { background: #F5F0EB; color: #7a6558; }

/* Page title with icon */
.fcwm-portal-title svg {
    color: #c0415a;
    flex-shrink: 0;
}

/* Panel title with icon */
.fcwm-p-panel-title svg {
    color: #c0415a;
    flex-shrink: 0;
}

/* Badge status dots with icon */
.fcwm-p-badge svg { vertical-align: middle; margin-right: 2px; }

/* Table icon cells */
td svg, th svg { vertical-align: middle; }

/* Button with icon */
.fcwm-p-btn svg { flex-shrink: 0; }

/* Section icon accent bar */
.fcwm-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.fcwm-section-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* ── Stat card with icon ─── */
.fcwm-p-card .fcwm-stat-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 10px;
    transition: transform .2s;
}
.fcwm-p-card:hover .fcwm-stat-icon {
    transform: scale(1.08);
}

/* ════════════════════════════════════════════════════════════
   TOOLBAR — compact filter bar
   ════════════════════════════════════════════════════════════ */
.fcwm-toolbar {
    background: #fff;
    border: 1.5px solid #EED8C0;
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 16px;
    box-shadow: 0 1px 6px rgba(180,80,60,.05);
}
.fcwm-toolbar-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.fcwm-tb-select {
    height: 34px;
    border: 1.5px solid #EED8C0;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    font-family: inherit;
    color: #3a2a1e;
    background: #FFFDF8;
    cursor: pointer;
    min-width: 130px;
    transition: border-color .15s;
}
.fcwm-tb-select:focus {
    outline: none;
    border-color: #c0415a;
    box-shadow: 0 0 0 3px rgba(192,65,90,.08);
}
.fcwm-tb-tabs {
    display: flex;
    gap: 2px;
    background: #FDEAEA;
    border-radius: 8px;
    padding: 3px;
}
.fcwm-tb-tab {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 11px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #9a2f45;
    text-decoration: none;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.fcwm-tb-tab:hover { background: rgba(192,65,90,.12); color: #c0415a; }
.fcwm-tb-tab.active { background: #c0415a; color: #fff; }
.fcwm-tb-search {
    display: flex !important;
    align-items: center !important;
    flex: 1;
    min-width: 180px;
    max-width: 300px;
    border: 1.5px solid #EED8C0 !important;
    border-radius: 8px !important;
    background: #FFFDF8 !important;
    overflow: hidden !important;
    transition: border-color .15s, box-shadow .15s;
    padding: 0 !important;
}
.fcwm-tb-search:focus-within {
    border-color: #c0415a !important;
    box-shadow: 0 0 0 3px rgba(192,65,90,.08) !important;
}
.fcwm-tb-input {
    flex: 1 !important;
    height: 34px !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 8px !important;
    font-size: 13px !important;
    font-family: inherit !important;
    color: #3a2a1e !important;
    outline: none !important;
    min-width: 0 !important;
    width: auto !important;
    display: block !important;
}
.fcwm-tb-search-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 34px !important;
    min-width: 36px !important;
    background: #c0415a !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    transition: background .15s;
}
.fcwm-tb-search-btn:hover { background: #9a2f45 !important; }
.fcwm-tb-search-btn svg { pointer-events: none; }

/* ── Pagination ── */
.fcwm-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 4px 0 16px;
}
.fcwm-page-info {
    font-size: 12px;
    color: #7a6558;
}
.fcwm-page-links {
    display: flex;
    gap: 4px;
    align-items: center;
}
.fcwm-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #5a3a3a;
    text-decoration: none;
    border: 1.5px solid #EED8C0;
    background: #fff;
    transition: background .15s, border-color .15s, color .15s;
}
.fcwm-page-btn:hover { background: #FDEAEA; border-color: #c0415a; color: #c0415a; }
.fcwm-page-btn.active { background: #c0415a; border-color: #c0415a; color: #fff; }

/* ── System subtitle under logo ── */
.fcwm-topnav-system-subtitle {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #b87c8c;
    white-space: nowrap;
    line-height: 1;
}
/* ซ่อน system-title ตรงกลางที่ย้ายออกแล้ว */
.fcwm-topnav-system-title { display: none !important; }
/* Center ตอนนี้มีแค่ nav links */
.fcwm-topnav-center {
    flex: 0 0 auto;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0;
    min-width: 0;
}

/* ── Topnav user block (right) ── */
.fcwm-topnav-user-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}
/* System label — เล็ก อยู่เหนือ user row */
.fcwm-topnav-system-label {
    font-size: 9px !important;
    font-weight: 600;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: #b87c8c;
    white-space: nowrap;
    line-height: 1;
}
/* User row — role + name + links */
.fcwm-topnav-user-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fcwm-topnav-username {
    font-weight: 600;
    color: #3a2020;
    font-size: 13px;
}

/* ══════════════════════════════════════════════════════════════
   KANBAN + DRAG & DROP — Portal v3.0.0
   ══════════════════════════════════════════════════════════════ */

/* Unassigned Panel */
.fcwm-p-unassigned {
    background: #fffbeb;
    border: 1.5px solid #f0c040;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
}
.fcwm-p-unassigned-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    font-size: 13px;
}
.fcwm-p-btn-sm {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 6px;
    background: #1a2744;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}
/* กันธีมของเว็บ (เช่น .entry-content button{color:..}) มาทับสีตัวอักษรปุ่มจนอ่านไม่ออก
   specificity 0,2,0 ชนะ selector ธีมทั่วไป แต่ยังแพ้ inline style ของปุ่ม variant (จึงไม่กระทบปุ่มที่กำหนดสีเอง) */
.fcwm-portal-page .fcwm-p-btn-sm { color: #fff; }

/* Chip (Unassigned in dashboard) */
.fcwm-p-chip-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    border: 1.5px dashed #f0c040;
    border-radius: 8px;
    min-height: 44px;
    transition: background .15s, border-color .15s;
}
.fcwm-p-chip-wrap.drag-over {
    background: #eff6ff;
    border-color: #2271b1;
}
.fcwm-p-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: grab;
    user-select: none;
    transition: box-shadow .1s;
}
.fcwm-p-chip.online  { border-left: 3px solid #22c55e; }
.fcwm-p-chip.offline { border-left: 3px solid #ef4444; opacity: .8; }
.fcwm-p-chip:hover   { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.fcwm-p-chip.dragging { opacity: .4; cursor: grabbing; }
.fcwm-p-chip-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.fcwm-p-chip-dot.online  { background: #22c55e; }
.fcwm-p-chip-dot.offline { background: #ef4444; }
.fcwm-p-chip-host { font-weight: 600; color: #1a2744; }
.fcwm-p-chip-ip   { color: #6b7280; font-size: 11px; }

/* Drop Zone row (Dashboard) */
.fcwm-p-dropzones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.fcwm-p-dropzone {
    flex: 0 0 140px;
    border: 1.5px dashed #d1d5db;
    border-radius: 8px;
    padding: 8px 10px;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.fcwm-p-dropzone.drag-over {
    background: #eff6ff;
    border-color: #2271b1;
    border-style: solid;
}

/* Kanban (Portal Rooms page) */
.fcwm-p-kanban {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 16px;
    align-items: flex-start;
    min-height: 300px;
}
.fcwm-p-kcol {
    flex: 0 0 200px;
    background: #f9f9f9;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.fcwm-p-kcol.drag-over {
    background: #eff6ff;
    border-color: #2271b1;
    box-shadow: 0 0 0 3px rgba(34,113,177,.2);
}
.fcwm-p-khdr {
    padding: 9px 10px;
    border-radius: 8px 8px 0 0;
    border-bottom: 1.5px solid #e5e7eb;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
}
.fcwm-p-khdr.unassigned { background: #fff8e1; border-bottom-color: #f0c040; }
.fcwm-p-khdr.exam       { background: #fef3c7; border-bottom-color: #fde68a; }
.fcwm-p-khdr.normal     { background: #f0fdf4; border-bottom-color: #bbf7d0; }
.fcwm-p-kbadge {
    background: #1a2744;
    color: #fff;
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    margin-left: auto;
    flex-shrink: 0;
}
.fcwm-p-kbadge.exam { background: #d97706; }
.fcwm-p-kbody {
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-height: 50px;
}
.fcwm-p-kempty {
    font-size: 11px;
    color: #aaa;
    text-align: center;
    padding: 12px 6px;
    border: 1.5px dashed #e5e7eb;
    border-radius: 6px;
}

/* Machine Card (Portal) */
.fcwm-p-mcard {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 7px;
    padding: 6px 8px;
    cursor: grab;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11px;
    transition: box-shadow .1s, opacity .15s;
    user-select: none;
}
.fcwm-p-mcard:hover   { box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.fcwm-p-mcard.dragging { opacity: .4; cursor: grabbing; }
.fcwm-p-mcard.online  { border-left: 3px solid #22c55e; }
.fcwm-p-mcard.offline { border-left: 3px solid #ef4444; opacity: .75; }
.fcwm-p-mdot { width: 6px; height: 6px; border-radius: 50%; margin-top: 3px; flex-shrink: 0; }
.fcwm-p-mdot.online  { background: #22c55e; }
.fcwm-p-mdot.offline { background: #ef4444; }
.fcwm-p-minfo { flex: 1; min-width: 0; }
.fcwm-p-mhost { font-weight: 600; color: #1a2744; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcwm-p-msub  { color: #6b7280; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcwm-p-mtime { color: #9ca3af; font-size: 10px; flex-shrink: 0; }

/* Toast */
.fcwm-p-toast {
    background: #1a2744;
    color: #fff;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 13px;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    transition: opacity .3s, transform .3s;
    max-width: 300px;
}
.fcwm-p-toast.error { background: #dc2626; }

/* ══ Room Overview + Unassigned inline (v3.0.0) ══ */
.fcwm-p-room-unassigned {
    background: #fffbeb;
    border: 1.5px solid #fde68a;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
}
.fcwm-p-room-unassigned-hdr {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #92400e;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.fcwm-p-room-unassigned .fcwm-p-chip-wrap {
    border-color: #fde68a;
    min-height: 36px;
    padding: 6px;
}
.fcwm-p-room-unassigned .fcwm-p-dropzones {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.fcwm-p-room-unassigned .fcwm-p-dropzone {
    flex: 0 0 auto;
    min-width: 80px;
    max-width: 120px;
    padding: 5px 8px;
    font-size: 11px;
}

/* ══ Unassigned Assign Panel — Horizontal Layout (v3.1) ══════════ */

.fcwm-ua-wrap {
    margin-bottom: 12px;
    border: 1.5px solid #fde68a;
    border-radius: 10px;
    overflow: hidden;
    background: #fffdf0;
}

.fcwm-ua-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fef9e7;
    border-bottom: 1px solid #fde68a;
    font-size: 12px;
}

.fcwm-ua-badge {
    background: #f59e0b;
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.fcwm-ua-link {
    margin-left: auto;
    font-size: 11px;
    color: #92400e;
    text-decoration: underline;
    white-space: nowrap;
}

/* ── Horizontal body: เครื่อง (ซ้าย) | ห้อง (ขวา) ── */
.fcwm-ua-body {
    display: flex;
    gap: 0;
    min-height: 180px;
    max-height: 320px;
}

/* ── ซ้าย: รายการเครื่อง ── */
.fcwm-ua-machines {
    flex: 0 0 55%;
    border-right: 1px solid #fde68a;
    overflow-y: auto;
    max-height: 320px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    /* Scrollbar แบบบาง */
    scrollbar-width: thin;
    scrollbar-color: #fde68a #fffdf0;
}
.fcwm-ua-machines::-webkit-scrollbar { width: 4px; }
.fcwm-ua-machines::-webkit-scrollbar-thumb { background: #fde68a; border-radius: 2px; }

.fcwm-ua-machines.drag-over {
    background: #eff6ff;
    border-color: #93c5fd;
}

.fcwm-ua-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    border-radius: 6px;
    cursor: grab;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    font-size: 12px;
    user-select: none;
    transition: box-shadow .1s, opacity .15s;
}
.fcwm-ua-row:hover          { box-shadow: 0 2px 6px rgba(0,0,0,.1); border-color: #c0c8d0; }
.fcwm-ua-row.dragging       { opacity: .4; cursor: grabbing; }
.fcwm-ua-row.online         { border-left: 3px solid #22c55e; }
.fcwm-ua-row.offline        { border-left: 3px solid #ef4444; opacity: .8; }

.fcwm-ua-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.fcwm-ua-dot.online  { background: #22c55e; }
.fcwm-ua-dot.offline { background: #ef4444; }

.fcwm-ua-info    { flex: 1; min-width: 0; }
.fcwm-ua-host    { font-weight: 600; color: #1a2744; display: block;
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcwm-ua-sub     { font-size: 10px; color: #9ca3af; display: block;
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcwm-ua-time    { font-size: 10px; color: #9ca3af; flex-shrink: 0; white-space: nowrap; }
.fcwm-ua-drag-icon { font-size: 14px; color: #d1d5db; flex-shrink: 0;
                     cursor: grab; line-height: 1; }

/* Pagination ของเครื่อง */
.fcwm-ua-pagination {
    display: flex;
    gap: 4px;
    justify-content: center;
    padding: 6px 0 2px;
    flex-wrap: wrap;
}
.fcwm-ua-pg {
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 11px;
    text-decoration: none;
    background: #f3f4f6;
    color: #374151;
}
.fcwm-ua-pg.active {
    background: #1a2744;
    color: #fff;
    font-weight: 700;
}

/* ── ขวา: Drop Zones ห้อง ── */
.fcwm-ua-rooms {
    flex: 0 0 45%;
    padding: 8px;
    overflow-y: auto;
    max-height: 320px;
    scrollbar-width: thin;
}
.fcwm-ua-rooms-label {
    font-size: 10px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 6px;
    padding: 0 2px;
}
.fcwm-ua-dropgrid {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.fcwm-ua-dropzone {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1.5px dashed #d1d5db;
    border-radius: 8px;
    padding: 7px 10px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    background: #fff;
}
.fcwm-ua-dropzone:hover     { background: #f0fdf4; border-color: #86efac; }
.fcwm-ua-dropzone.drag-over { background: #eff6ff; border-color: #2271b1; border-style: solid; }
.fcwm-ua-dropzone.exam      { background: #fffbeb; border-color: #fde68a; }
.fcwm-ua-dropzone.exam:hover{ background: #fef3c7; }

.fcwm-ua-dz-code  { font-size: 11px; font-weight: 700; color: #1a2744;
                    white-space: nowrap; min-width: 60px; }
.fcwm-ua-dz-name  { font-size: 11px; color: #6b7280; flex: 1;
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcwm-ua-dz-count { font-size: 10px; color: #9ca3af; flex-shrink: 0;
                    background: #f3f4f6; padding: 1px 6px;
                    border-radius: 8px; white-space: nowrap; }

/* See More button */
.fcwm-p-see-more { padding: 4px 2px; }
.fcwm-p-seemore-btn {
    width: 100%;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 6px;
    font: inherit;
    font-size: 11px;
    color: #6b7280;
    cursor: pointer;
    transition: background .15s;
}
.fcwm-p-seemore-btn:hover:not(:disabled) { background: #e5e7eb; }
.fcwm-p-seemore-btn:disabled { cursor: progress; opacity: .8; }

/* ══ Kanban Column: Fixed height + scroll ════════════════════════ */
.fcwm-p-kbody {
    max-height: 480px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #e5e7eb #f9f9f9;
}
.fcwm-p-kbody::-webkit-scrollbar { width: 4px; }
.fcwm-p-kbody::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 2px; }

/* ══ v3.7.15 — โหมดขยายคอลัมน์ห้อง (Focus mode) ══════════════════
   ห้องที่เลือกจะกว้างเต็มพื้นที่และเรียงการ์ดเป็นตาราง
   ห้องที่เหลือย่อเป็นแถบแนวตั้ง กดเพื่อสลับมาดูได้ทันที
   ═══════════════════════════════════════════════════════════════ */

/* ปุ่มขยายบนหัวคอลัมน์ */
.fcwm-p-kexpand {
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    padding: 1px 5px;
    font-size: 11px;
    line-height: 1.4;
    color: #6b7280;
    flex-shrink: 0;
}
.fcwm-p-kexpand:hover { background: #fff; border-color: #c0415a; color: #c0415a; }

/* แถบย่อ — ซ่อนไว้จนกว่าจะเข้าโหมดขยาย */
.fcwm-p-kmini { display: none; }

/* แถบเครื่องมือของคอลัมน์ที่ขยาย — ซ่อนไว้ตามปกติ */
.fcwm-p-kfocusbar { display: none; }

.fcwm-p-kanban.is-focus { align-items: stretch; }

/* คอลัมน์ที่ไม่ได้ถูกเลือก → ย่อเป็นแถบแนวตั้ง */
.fcwm-p-kanban.is-focus > .fcwm-p-kcol {
    flex: 0 0 54px;
    min-height: 0;
    cursor: pointer;
    overflow: hidden;
}
.fcwm-p-kanban.is-focus > .fcwm-p-kcol > .fcwm-p-khdr,
.fcwm-p-kanban.is-focus > .fcwm-p-kcol > .fcwm-p-kbody,
.fcwm-p-kanban.is-focus > .fcwm-p-kcol > .fcwm-p-kclass,
.fcwm-p-kanban.is-focus > .fcwm-p-kcol > .fcwm-p-kfocusbar { display: none; }

.fcwm-p-kanban.is-focus > .fcwm-p-kcol > .fcwm-p-kmini {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px 4px;
    width: 100%;
}
.fcwm-p-kanban.is-focus > .fcwm-p-kcol:not(.is-focused):hover {
    background: #fffaf3;
    border-color: #E8D5BE;
}
.fcwm-p-kmini-name {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 11.5px;
    font-weight: 600;
    color: #3a2a1e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 280px;
}
.fcwm-p-kmini-badge {
    background: #1a2744;
    color: #fff;
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}
.fcwm-p-kmini-badge.exam { background: #d97706; }
.fcwm-p-kmini.exam { background: #fffbeb; }

/* คอลัมน์ที่ถูกเลือก → กว้างเต็มพื้นที่ที่เหลือ */
.fcwm-p-kanban.is-focus > .fcwm-p-kcol.is-focused {
    flex: 1 1 auto;
    min-width: 0;
    cursor: default;
    overflow: visible;
    box-shadow: 0 2px 10px rgba(26,39,68,.08);
    border-color: #E8D5BE;
}
.fcwm-p-kanban.is-focus > .fcwm-p-kcol.is-focused > .fcwm-p-khdr,
.fcwm-p-kanban.is-focus > .fcwm-p-kcol.is-focused > .fcwm-p-kfocusbar { display: flex; }
.fcwm-p-kanban.is-focus > .fcwm-p-kcol.is-focused > .fcwm-p-kclass { display: block; }
.fcwm-p-kanban.is-focus > .fcwm-p-kcol.is-focused > .fcwm-p-kbody { display: grid; }
.fcwm-p-kanban.is-focus > .fcwm-p-kcol.is-focused > .fcwm-p-kmini { display: none; }

/* การ์ดเครื่องเรียงเป็นตารางเมื่อขยาย — ยิ่งจอกว้างยิ่งเห็นหลายเครื่อง */
.fcwm-p-kcol.is-focused > .fcwm-p-kbody {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 6px;
    align-content: start;
    padding: 8px;
    max-height: calc(100vh - 250px);
    min-height: 240px;
}
.fcwm-p-kcol.is-focused > .fcwm-p-kbody > .fcwm-p-kempty,
.fcwm-p-kcol.is-focused > .fcwm-p-kbody > .fcwm-p-see-more { grid-column: 1 / -1; }

/* แถบเครื่องมือ: ค้นหา / กรองออนไลน์ / ย่อกลับ */
.fcwm-p-kcol.is-focused > .fcwm-p-kfocusbar {
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 10px;
    background: #FFFDF8;
    border-bottom: 1.5px solid #E8D5BE;
}
.fcwm-p-kfilter {
    flex: 1 1 220px;
    min-width: 0;
    padding: 6px 10px;
    border: 1.5px solid #E8D5BE;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
}
.fcwm-p-kfilter:focus { outline: none; border-color: #c0415a; }
.fcwm-p-konly-lbl {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #7a6558;
    white-space: nowrap;
    cursor: pointer;
}
.fcwm-p-konly-lbl input { width: 14px; height: 14px; cursor: pointer; }
.fcwm-p-kshown { font-size: 12px; color: #8a7060; white-space: nowrap; }
.fcwm-p-kback {
    margin-left: auto;
    background: #fff;
    color: #c0415a;
    border: 1.5px solid #E8D5BE;
    border-radius: 8px;
    padding: 5px 14px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.fcwm-p-kback:hover { background: #fdeaea; border-color: #c0415a; }

/* การ์ดที่ถูกกรองออก */
.fcwm-p-mcard.fcwm-p-mhide { display: none !important; }

/* จอแคบ: แถบย่อบางลงเพื่อให้คอลัมน์ที่ขยายมีที่เหลือมากพอ */
@media (max-width: 900px) {
    .fcwm-p-kanban.is-focus > .fcwm-p-kcol { flex: 0 0 42px; }
    .fcwm-p-kmini-name { font-size: 10.5px; max-height: 200px; }
    .fcwm-p-kcol.is-focused > .fcwm-p-kbody {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

/* ══ Room Overview Redesign — Split Layout ═══════════════════════ */

.fcwm-ro-badge-warn {
    background: #f59e0b; color: #fff;
    font-size: 11px; font-weight: 700;
    padding: 2px 8px; border-radius: 10px; margin-left: 6px;
}
.fcwm-ro-exam-banner {
    background: #fef3c7; border: 1px solid #fde68a;
    border-radius: 6px; padding: 7px 12px;
    margin-bottom: 10px; font-size: 12px;
    color: #92400e; font-weight: 600;
    display: flex; align-items: center; gap: 6px;
}

/* Horizontal split */
.fcwm-ro-split {
    display: flex;
    gap: 12px;
    min-height: 200px;
    max-height: 360px;
}
.fcwm-ro-divider {
    border-top: 1px solid #f0f0f0;
    margin: 14px -16px 0;
}
.fcwm-ro-section-label {
    font-size: 11px; font-weight: 700;
    color: #92400e; margin-bottom: 6px;
    text-transform: uppercase; letter-spacing: .04em;
}

/* ซ้าย: รายการเครื่อง */
.fcwm-ro-left {
    flex: 0 0 52%;
    display: flex; flex-direction: column;
    border-right: 1px solid #fde68a;
    padding-right: 10px;
}
.fcwm-ro-machine-list {
    flex: 1; overflow-y: auto;
    display: flex; flex-direction: column; gap: 3px;
    scrollbar-width: thin; scrollbar-color: #fde68a #fff;
    padding: 4px 2px;
    border: 1.5px dashed #fde68a; border-radius: 8px;
    min-height: 80px;
    transition: background .15s, border-color .15s;
}
.fcwm-ro-machine-list::-webkit-scrollbar { width: 4px; }
.fcwm-ro-machine-list::-webkit-scrollbar-thumb { background: #fde68a; border-radius: 2px; }
.fcwm-ro-machine-list.drag-over {
    background: #eff6ff; border-color: #93c5fd; border-style: solid;
}
.fcwm-ro-mrow {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 7px; border-radius: 6px;
    background: #fff; border: 1.5px solid #e5e7eb;
    cursor: grab; font-size: 12px; user-select: none;
    transition: box-shadow .1s, opacity .15s;
}
.fcwm-ro-mrow:hover    { box-shadow: 0 2px 5px rgba(0,0,0,.08); }
.fcwm-ro-mrow.dragging { opacity: .35; cursor: grabbing; }
.fcwm-ro-mrow.online   { border-left: 3px solid #22c55e; }
.fcwm-ro-mrow.offline  { border-left: 3px solid #ef4444; opacity: .8; }
.fcwm-ro-dot  { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.fcwm-ro-dot.online  { background: #22c55e; }
.fcwm-ro-dot.offline { background: #ef4444; }
.fcwm-ro-minfo { flex: 1; min-width: 0; }
.fcwm-ro-mhost { font-weight: 600; color: #1a2744; display: block;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcwm-ro-msub  { font-size: 10px; color: #9ca3af; display: block; }
.fcwm-ro-mtime { font-size: 10px; color: #9ca3af; flex-shrink: 0; }
.fcwm-ro-drag  { color: #d1d5db; font-size: 13px; flex-shrink: 0; cursor: grab; }
.fcwm-ro-empty { font-size: 11px; color: #d1d5db;
                 text-align: center; padding: 16px 8px; }

/* Pagination */
.fcwm-ro-pg { display: flex; gap: 4px; justify-content: center;
              padding: 6px 0 2px; flex-wrap: wrap; }
.fcwm-ro-pg-btn {
    padding: 3px 7px; border-radius: 5px; font-size: 11px;
    text-decoration: none; background: #f3f4f6; color: #374151;
}
.fcwm-ro-pg-btn.active { background: #c0415a; color: #fff; font-weight: 700; }

/* ขวา: Room cards */
.fcwm-ro-right {
    flex: 0 0 48%;
    overflow-y: auto;
    scrollbar-width: thin;
}
.fcwm-ro-roomgrid { display: flex; flex-direction: column; gap: 6px; }

.fcwm-ro-room {
    border: 1.5px dashed #d1d5db; border-radius: 10px;
    padding: 8px 10px; background: #fff;
    cursor: pointer; transition: all .15s;
}
.fcwm-ro-room:hover    { background: #f0fdf4; border-color: #86efac; border-style: solid; }
.fcwm-ro-room.drag-over{ background: #eff6ff; border-color: #2271b1; border-style: solid;
                          box-shadow: 0 0 0 2px rgba(34,113,177,.15); }
.fcwm-ro-room.exam     { background: #fffbeb; border-color: #fde68a; }
.fcwm-ro-room.exam:hover{ background: #fef3c7; }

.fcwm-ro-room-top  { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.fcwm-ro-room-name { font-size: 12px; font-weight: 700; color: #1a2744;
                     text-decoration: none; flex: 1; white-space: nowrap;
                     overflow: hidden; text-overflow: ellipsis; }
.fcwm-ro-room-name:hover { text-decoration: underline; }
.fcwm-ro-room-code { font-size: 10px; color: #9ca3af; font-family: monospace; flex-shrink: 0; }
.fcwm-ro-room-mid  { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.fcwm-ro-mini-bar  { flex: 1; height: 4px; background: #f3f4f6;
                     border-radius: 2px; overflow: hidden; }
.fcwm-ro-room-bot  { display: flex; align-items: center; gap: 6px; }
.fcwm-ro-mode-badge { font-size: 10px; font-weight: 700; padding: 1px 6px;
                      border-radius: 8px; white-space: nowrap; }
.fcwm-ro-mode-badge.exam   { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.fcwm-ro-mode-badge.normal { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.fcwm-ro-toggle {
    background: none; border: 1px solid #d1d5db; border-radius: 5px;
    cursor: pointer; padding: 1px 6px; font-size: 11px; color: #6b7280;
    transition: background .1s;
}
.fcwm-ro-toggle:hover { background: #f3f4f6; }
.fcwm-ro-drop-hint {
    margin-left: auto; font-size: 10px; color: #d1d5db; pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   TOP NAV — RESPONSIVE (v3.7.13)
   แก้ปัญหาเมนูด้านขวา (WP Admin / Log out) ล้นออกนอกจอบนหน้าจอที่แคบกว่า
   เช่น หน้าต่างเบราว์เซอร์บนจอ Mac ที่ไม่เต็มความกว้าง
   ══════════════════════════════════════════════════════════════ */

/* ให้แถบเมนูห่อบรรทัดได้เมื่อพื้นที่ไม่พอ แทนที่จะดันบล็อกผู้ใช้หลุดขอบ */
.fcwm-topnav {
    flex-wrap: wrap;
    row-gap: 6px;
}

/* จอกว้างปานกลาง (แล็ปท็อป/หน้าต่างไม่เต็มจอ): ลดระยะและขนาดตัวอักษรของเมนู */
@media (max-width: 1280px) {
    .fcwm-topnav { padding: 0 18px; gap: 10px; }
    .fcwm-topnav-links a { padding: 5px 10px; font-size: 12.5px; }
    .fcwm-topnav-brand-name { font-size: 14px; }
}

/* จอแคบ: จัดเป็นสองแถว — แบรนด์และผู้ใช้อยู่แถวบน เมนูอยู่แถวล่างเต็มความกว้าง
   บล็อกผู้ใช้จะไม่ถูกดันออกนอกจออีก */
@media (max-width: 1080px) {
    .fcwm-topnav {
        height: auto;
        padding: 10px 16px;
        align-items: center;
    }
    .fcwm-topnav-brand { order: 1; }
    .fcwm-topnav-user, .fcwm-topnav-user-block { order: 2; margin-left: auto !important; }
    .fcwm-topnav-center { order: 3; flex: 1 1 100% !important; width: 100%; }
    .fcwm-topnav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
        width: 100%;
    }
}

/* จอเล็กมาก (แท็บเล็ต/มือถือ): ลดขนาดเพิ่มเพื่อให้เมนูครบทุกปุ่ม */
@media (max-width: 640px) {
    .fcwm-topnav-brand-name { font-size: 12.5px; }
    .fcwm-topnav-logo { height: 32px; }
    .fcwm-topnav-links a { padding: 5px 9px; font-size: 12px; }
    .fcwm-topnav-user-row, .fcwm-topnav-user { font-size: 12px; gap: 6px; }
}