/*
 * GymDesh — অফিসের সাজ: "০১ সংকেত" (Signal)
 * ======================================================================
 *
 * মালিকের বাছাই, ২৬ সেপ্টেম্বর ২০২৬ (নমুনা: docs/themes/sanket.html,
 * পর্দা ৩ ও ৪)। স্টেশন বা বিমানবন্দরের নির্দেশনা-বোর্ডের মতো পরিষ্কার
 * আর শান্ত:
 *
 *   • রং প্রায় নেই — কেবল যা চাপা যায় তা-ই রঙিন (জিমের নিরাপদ রঙ,
 *     নইলে কালি; জিম রঙ না বাছলে GymDesh-এর বেগুনি)।
 *   • সমতল — কোনো ছায়া নেই, ঝাপসা নেই। তলগুলো আলাদা হয় মেঝে
 *     (কংক্রিট-সাদা) → কাগজ (সাদা) → তাক (ধূসর) আর ১px সরু রেখায়।
 *   • বাছাই মানে বেগুনি আভার উপর ২px রেখা — কখনো পাশে রঙিন দণ্ড নয়।
 *   • অবস্থা বোঝায় চারটি চিহ্ন: ● চালু, ▲ নজর দিন, থামুন (অষ্টভুজ),
 *     বিরতি (ভাঙা বৃত্ত) — সবসময় চিহ্ন + রঙ + শব্দ।
 *   • কোণ ১০px (কার্ড, ঘর, বোতাম, বোর্ড), পাতা ও মডালে ১৪px।
 *
 * ── কেন এই ফাইলটি `public/`-এ, `resources/`-এ নয় ──
 * এই প্রজেক্টে কোনো CSS বিল্ড (Vite/Tailwind) চলে না — Filament তার
 * নিজের সংকলিত CSS চালায়, আর deploy-এ `npm run build` নেই (ভাগের
 * সার্ভারে npm চালানো হয় না)। তাই সাজটি সরাসরি পরিবেশনযোগ্য একটি
 * ফাইল, `PanelTheme` থেকে `<link>` হিসেবে বসে। নিজের Blade-এ (তাক,
 * ট্যাব, চিহ্ন) তাই কোনো Tailwind class নেই — সব এখানকার `gd-` class।
 *
 * ── কেন কোনো `!important` নেই ──
 * Filament-এর নিজের নিয়মগুলো `@layer`-এর ভেতরে। layer-বিহীন নিয়ম
 * সবসময় layer-এর ভেতরের নিয়মকে হারায় — specificity যাই হোক। তাই
 * এই ফাইলের সাধারণ selector-গুলোই যথেষ্ট।
 *
 * ── বাংলার নিয়ম ──
 * বাংলা লেখায় `letter-spacing` বা `text-transform: uppercase` কোথাও
 * নয় — দুটোই যুক্তাক্ষর ভেঙে দেয়। Filament শিরোনাম, লোগো ও ব্যাজে
 * ঋণাত্মক `letter-spacing` বসায়, নিচে সেগুলো `normal`-এ ফেরানো।
 * একাধিক লাইনের শিরোনামে line-height ১.৪-এর কম নয় (Google Sans-এর
 * ু নিচের লাইনের ি/ঁ-তে ঠেকে যায় — ২৬ সেপ্টেম্বরের হরফ-পরীক্ষা)।
 *
 * ── Filament হালনাগাদের পর ──
 * তাকের বোর্ড Filament-এর `.fi-sidebar-item`-এর গঠনের উপর দাঁড়ানো
 * (badge-টি নিচের লাইনে নামানো)। Filament 5.7.x-এ যাচাই করা; বড়
 * হালনাগাদের পর অফিস খুলে তাকটি চোখে দেখে নিন।
 */

/* ═══ ১. হরফ ═════════════════════════════════════════════════════ */

/*
 * GD Ank — টাকা ও সংখ্যার জন্য সমান-চওড়া বাংলা অঙ্ক।
 *
 * Noto Sans Bengali-র কেবল ০–৯, ৳, কমা ও দশমিক (৭.৫ KB) — Google
 * Sans-এর অঙ্ক সমান চওড়া নয় (২ সরু, ৮ চওড়া), তাই টাকার কলাম সারিতে
 * মিলত না। unicode-range-এর কারণে কেবল ওই অক্ষরগুলোই এই হরফে আসে,
 * বাকি লেখা Google Sans-এই থাকে।
 *
 * লাইসেন্স: SIL Open Font License 1.1 — Copyright 2022 The Noto Project
 * Authors (public/fonts/gd-ank.LICENSE.txt)।
 */
@font-face {
    font-family: 'GD Ank';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url('../../fonts/gd-ank.woff2') format('woff2');
    unicode-range: U+2C, U+2E, U+9E6-9EF, U+9F3;
}

/* ═══ ২. রঙ ও মাপের ভিত্তি (আলো থিম) ════════════════════════════════ */

:root {
    /*
     * Filament-এর নিজের হরফের চলকটিতেই পুরো তালিকা — Google Sans-এ
     * কোনো অক্ষর না থাকলে Noto Sans Bengali (যন্ত্রে থাকলে), তারপর
     * যন্ত্রের নিজের হরফ। এই ফাইলটি Filament-এর `<style>`-এর পরে
     * আসে, তাই এই মানটিই টেকে।
     */
    --font-family: 'Google Sans', 'Noto Sans Bengali';

    --gd-font: 'Google Sans', 'Noto Sans Bengali', ui-sans-serif, system-ui, sans-serif;
    --gd-latin: 'Schibsted Grotesk', 'Google Sans', ui-sans-serif, system-ui, sans-serif;
    --gd-num: 'GD Ank', 'Google Sans', 'Noto Sans Bengali', ui-sans-serif, system-ui, sans-serif;

    /* তল */
    --gd-canvas:  #EFEEF4;   /* কংক্রিট-সাদা — পাতার মেঝে */
    --gd-surface: #FFFFFF;   /* সাদা পাতা — কার্ড, পট্টি, মডাল */
    --gd-shelf:   #E4E2EB;   /* তাক-ধূসর — বাঁয়ের বোর্ডের তাক */
    --gd-hair:    #CFCDD9;   /* সরু রেখা */
    --gd-ctl:     #8C86A0;   /* ঘরের কিনারা — ইনপুট ও দ্বিতীয় বোতাম (৩:১) */
    --gd-head:    #FBFAFD;   /* টেবিলের মাথার সারি */

    /* লেখা */
    --gd-ink:     #16131D;   /* কালি */
    --gd-muted:   #58536B;   /* ম্লান কালি */

    /*
     * চাপার রঙ — প্রধান রঙের palette থেকে, তাই জিমের রঙ/কালি/বেগুনি
     * যা-ই বসুক (ApplyGymActionColor), এখানে আপনাআপনি আসে।
     */
    --gd-act:     var(--primary-600);
    --gd-act-text: var(--primary-600);
    --gd-tint:    var(--primary-100);

    /* অবস্থার চিহ্ন — কোনো জিমের জন্য বদলায় না */
    --gd-ok:      #0A7A3B;
    --gd-ok-bg:   #E7F5EC;
    --gd-watch:   #9A4A00;
    --gd-watch-bg: #FDF0E3;
    --gd-stop:    #C4122F;
    --gd-stop-bg: #FDE8EC;
    --gd-pause:   #58536B;
    --gd-sign-on: #FFFFFF;   /* চিহ্নের ভেতরের দাগ */

    /* /platform-এর নিয়ন্ত্রণ-কক্ষ */
    --gd-band:    #1C1826;

    /* জিমের লোগোর টালির সরু কিনারা */
    --gd-tile-edge: rgba(22, 19, 29, .14);

    --gd-radius:    10px;
    --gd-radius-lg: 14px;
}

/* ═══ ৩. গাঢ় থিম — বেগুনি-রাত ═══════════════════════════════════════ */

.dark {
    --gd-canvas:  #17121F;
    --gd-surface: #221B2D;
    --gd-shelf:   #1D1727;
    --gd-hair:    #3B3249;
    --gd-ctl:     #7A7390;
    --gd-head:    #261F32;

    --gd-ink:     #F2EFF7;
    --gd-muted:   #ADA6BD;

    --gd-act:     var(--primary-400);
    --gd-act-text: var(--primary-300);
    --gd-tint:    color-mix(in srgb, var(--primary-400) 16%, var(--gd-surface));

    --gd-ok:      #4FCB84;
    --gd-ok-bg:   #17301F;
    --gd-watch:   #F39A3E;
    --gd-watch-bg: #33230F;
    --gd-stop:    #FF6F86;
    --gd-stop-bg: #3A1520;
    --gd-pause:   #ADA6BD;
    --gd-sign-on: #17121F;

    --gd-band:    #0F0C15;

    --gd-tile-edge: rgba(255, 255, 255, .28);
}

/* ═══ ৪. মেঝে, লেখা ও সমতল তল ═══════════════════════════════════════ */

.fi-body {
    background-color: var(--gd-canvas);
    color: var(--gd-ink);
    font-family: var(--gd-font);
    font-size: 16px;
    line-height: 1.6;
}

/*
 * কোনো ছায়া নেই — Filament প্রতিটি কার্ড, ঘর, বোতাম ও মডালে নরম
 * ছায়া দেয় (`--tw-shadow`)। চলকটি শূন্য করলে ছায়া যায়, কিন্তু কিনারার
 * রেখা (ring) আর ফোকাসের বলয় থেকে যায়।
 */
.fi-body,
.fi-body * {
    --tw-shadow: 0 0 #0000;
}

/* Filament-এর ঋণাত্মক ট্র্যাকিং ফেরত — বাংলা যুক্তাক্ষর ভাঙে */
.fi-logo,
.fi-header-heading,
.fi-simple-header-heading,
.fi-badge,
.fi-wi-stats-overview-stat-value,
.fi-dropdown-list-item .fi-badge {
    letter-spacing: normal;
}

.fi-body :focus-visible {
    outline-color: var(--gd-act-text);
}

/* ═══ ৫. উপরের "কাউন্টার" পট্টি — ৬৪px সাদা ══════════════════════════ */

.fi-topbar {
    min-height: 64px;
    background-color: var(--gd-surface);
    border-bottom: 1px solid var(--gd-hair);
    --tw-ring-color: transparent;
    padding-inline: 0 24px;
    gap: 16px;
}

/*
 * বাঁয়ের অংশটি তাকেরই মাথা — একই ধূসর, একই চওড়া (১৫rem), যাতে
 * তাকটি উপর থেকে নিচ পর্যন্ত একটানা দেখায় (নমুনার মতো), আর তার
 * মাথায় জিমের লোগো ও নাম।
 */
@media (min-width: 64rem) {
    .fi-topbar-start {
        align-self: stretch;
        width: var(--sidebar-width);
        flex: 0 0 var(--sidebar-width);
        margin-inline-end: 0;
        padding-inline: 16px 12px;
        background-color: var(--gd-shelf);
        border-inline-end: 1px solid var(--gd-hair);
    }

    .fi-topbar-start .fi-logo {
        margin-inline-start: 0;
    }
}

/* জিমের পরিচয় — লোগোর টালি জিমের নিজের রঙে, পাশে নাম */
.gd-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    min-width: 0;
}

.gd-brand-mark {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: var(--gd-radius);
    /*
     * সরু কিনারা — জিমের রঙ খুব গাঢ় হলে গাঢ় থিমের তাকে, খুব হালকা হলে
     * আলো থিমের তাকে টালিটি মিশে যেত (ধাপ ৪গ)।
     */
    box-shadow: 0 0 0 1px var(--gd-tile-edge);
    background-color: var(--gd-identity, var(--gd-act));
    color: var(--gd-on-identity, #FFFFFF);
    display: grid;
    place-items: center;
    overflow: hidden;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.gd-brand-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #FFFFFF;
}

.gd-brand-text {
    display: grid;
    min-width: 0;
    line-height: 1.3;
}

.gd-brand-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--gd-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* পণ্যের নাম — লাতিন, Schibsted Grotesk, ছোট করে; পাশে বেগুনি সংকেত-বিন্দু */
.gd-brand-product {
    font-family: var(--gd-latin);
    font-size: 12.5px;
    font-weight: 800;
    color: var(--gd-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.gd-brand-product::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--primary-600);
    margin-top: -6px;
}

/* লোগো না থাকলে (লগইন পাতা) Filament যে নাম লেখে */
.fi-logo {
    font-weight: 700;
    color: var(--gd-ink);
    line-height: 1.3;
}

/*
 * খোঁজার ঘর — "কাউন্টার"-এর সবচেয়ে চওড়া জিনিস (৫৬০px পর্যন্ত),
 * পট্টির বাঁ দিকে; ডানে ঘণ্টা ও ব্যবহারকারী।
 */
.fi-topbar-end {
    flex: 1 1 auto;
    min-width: 0;
    margin-inline-start: 0;
    justify-content: flex-end;
    gap: 12px;
}

.fi-topbar-end > .fi-global-search-ctn,
.fi-topbar-end > .gd-counter {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 560px;
    margin-inline-end: auto;
}

.fi-topbar .fi-global-search,
.fi-topbar .fi-global-search-field {
    width: 100%;
    max-width: none;
}

.fi-topbar .fi-global-search-field .fi-input-wrp {
    min-height: 44px;
    border-radius: var(--gd-radius);
    background-color: var(--gd-surface);
}

.fi-topbar .fi-global-search-field .fi-input {
    font-size: 15.5px;
}

/* ফলাফলের তালিকা ঘরের ঠিক নিচে, বাঁ দিক মিলিয়ে */
.fi-topbar .fi-global-search {
    position: relative;
}

.fi-topbar .fi-global-search-results-ctn {
    inset-inline-start: 0;
    inset-inline-end: auto;
    width: 100%;
    max-width: 560px;
    border-radius: var(--gd-radius);
    --tw-ring-color: var(--gd-hair);
}

/* Ctrl K — চাবির মতো ছোট টালি */
.fi-topbar .fi-global-search-field .fi-input-wrp-suffix {
    padding-inline-end: 10px;
}

.fi-topbar .fi-global-search-field .fi-input-wrp-label {
    padding: 1px 7px;
    border: 1px solid var(--gd-hair);
    border-bottom-width: 2px;
    border-radius: 6px;
    background-color: var(--gd-canvas);
    color: var(--gd-muted);
    font-size: 12.5px;
    line-height: 1.5;
    white-space: nowrap;
}

.fi-topbar .fi-icon-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--gd-radius);
}

.fi-topbar .fi-user-menu-trigger {
    padding-inline-start: 12px;
    border-inline-start: 1px solid var(--gd-hair);
}

/*
 * শব্দসহ "মেনু" বোতাম (TOPBAR_START) — কেবল ১০২৪px-এর নিচে।
 * Filament-এর কেবল-আইকনের "☰" বোতামটি তখন লুকানো: আইকন দেখে নতুন
 * স্টাফ বোঝেন না যে ওটাই মেনু।
 */
.gd-topbar-start {
    display: none;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding-inline-start: 12px;
}

.gd-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding-inline: 12px;
    border: 1px solid var(--gd-ctl);
    border-radius: var(--gd-radius);
    background-color: var(--gd-surface);
    color: var(--gd-ink);
    font: inherit;
    font-size: 15.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.gd-menu-btn:hover {
    background-color: var(--gd-tint);
}

.gd-menu-btn .gd-menu-btn-icon {
    color: var(--gd-ink);
}

.gd-menu-btn .gd-menu-btn-chevron {
    width: 16px;
    height: 16px;
    color: var(--gd-muted);
}

.gd-topbar-gym {
    display: none;
    font-weight: 700;
    font-size: 16px;
    color: var(--gd-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

@media (max-width: 63.999rem) {
    .gd-topbar-start {
        display: flex;
    }

    /* কেবল অফিসে — সেখানে শব্দসহ বোতামটি এর জায়গা নেয়; /platform-এ Filament-এর নিজেরটিই */
    .fi-panel-admin .fi-topbar .fi-topbar-open-sidebar-btn {
        display: none;
    }

    .fi-panel-admin .fi-topbar {
        padding-inline: 0 16px;
    }

    .fi-topbar-end > .fi-global-search-ctn,
    .fi-topbar-end > .gd-counter {
        max-width: 320px;
    }
}

/*
 * ফোন — পট্টি দুই সারিতে:
 *   উপরে "মেনু", জিমের নাম আর ব্যবহারকারীর ছবি;
 *   নিচে পুরো চওড়া খোঁজার ঘর।
 *
 * খোঁজার ঘরটি ফোনে লুকানো চলবে না — যেকোনো পাতা থেকে মেম্বার খোঁজার
 * এটাই একমাত্র পথ, আর ফোনে Ctrl+K চাপার কিবোর্ড নেই। নিচের বার থাকলে
 * (ধাপ ৪ক, অংশ ২২) ঘরটি সেখানে নামে আর উপরের পট্টি এক সারির হয় — এই
 * দুই সারির রূপ তখন কেবল বার না থাকলে। (PanelThemeTest পাহারা দেয়:
 * কোনো নিয়ম যেন ঘরটি না লুকায়, বারের ব্যতিক্রম ছাড়া।)
 *
 * `.fi-topbar-end`-এর বাক্সটি সরিয়ে (display: contents) তার ভেতরের
 * খোঁজার ঘর ও ছবি সরাসরি পট্টির সারিতে বসে — তাই ঘরটি নিচের সারিতে
 * নামতে পারে, আর ছবি উপরের সারির ডানেই থাকে।
 */
@media (max-width: 47.999rem) {
    .fi-topbar {
        min-height: 56px;
        flex-wrap: wrap;
        column-gap: 12px;
        row-gap: 6px;
        padding-block: 6px 10px;
    }

    .gd-menu-btn-where {
        display: none;
    }

    .gd-topbar-gym {
        display: block;
    }

    .fi-topbar-end {
        display: contents;
    }

    .fi-topbar .fi-user-menu {
        margin-inline-start: auto;
    }

    .fi-topbar-end > .fi-global-search-ctn,
    .fi-topbar-end > .gd-counter {
        order: 1;
        flex: 1 0 100%;
        max-width: none;
        margin: 0;
        padding-inline-start: 12px;
    }

    /* ফোনে কিবোর্ড নেই — "Ctrl K" টালির জায়গায় লেখার আরও জায়গা */
    .gd-counter-kbd {
        display: none;
    }

    .fi-panel-platform .fi-topbar-end > .fi-global-search-ctn {
        padding-inline-start: 0;
    }

    /* ফোনে কিবোর্ড নেই — "Ctrl K" টালির জায়গায় লেখার আরও জায়গা */
    .fi-topbar .fi-global-search-field .fi-input-wrp-suffix {
        display: none;
    }

    .fi-topbar .fi-global-search-results-ctn {
        max-width: none;
    }

    .fi-topbar .fi-user-menu-trigger {
        padding-inline-start: 0;
        border-inline-start: 0;
    }
}

/* ═══ ৬. বাঁয়ের তাক — ছয়টি বোর্ড ══════════════════════════════════ */

.fi-sidebar {
    background-color: var(--gd-shelf);
    border-inline-end: 1px solid var(--gd-hair);
}

.fi-sidebar-header {
    background-color: var(--gd-shelf);
    border-bottom: 1px solid var(--gd-hair);
    --tw-ring-color: transparent;
    padding-inline: 16px;
}

.fi-sidebar-nav {
    padding: 16px 12px;
    row-gap: 8px;
}

.fi-sidebar-nav-groups {
    margin-inline: 0;
    row-gap: 8px;
}

.fi-sidebar-group-items {
    row-gap: 8px;
}

/*
 * একেকটি বোর্ড: আইকন + নাম, নিচে এক লাইনের বর্ণনা (Filament-এর
 * badge-টিকে দ্বিতীয় সারিতে নামিয়ে সাধারণ ম্লান লেখা করা হয়েছে)।
 */
.gd-board > .fi-sidebar-item-btn {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 1px;
    align-items: center;
    justify-content: stretch;
    min-height: 56px;
    padding: 9px 12px;
    border-radius: var(--gd-radius);
    background-color: var(--gd-surface);
    text-decoration: none;
}

.gd-board > .fi-sidebar-item-btn > .fi-icon {
    grid-column: 1;
    grid-row: 1;
    width: 22px;
    height: 22px;
    color: var(--gd-ink);
}

.gd-board > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    grid-column: 2;
    grid-row: 1;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--gd-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gd-board > .fi-sidebar-item-btn > .fi-sidebar-item-badge-ctn {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    display: block;
}

.gd-board .fi-sidebar-item-badge-ctn .fi-badge {
    display: block;
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    --tw-ring-color: transparent;
    box-shadow: none;
    color: var(--gd-muted);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.35;
    text-align: start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gd-board .fi-sidebar-item-badge-ctn .fi-badge > * {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gd-board.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover {
    background-color: var(--gd-surface);
    box-shadow: inset 0 0 0 1px var(--gd-hair);
}

/* চলতি বোর্ড — বেগুনি আভার উপর ২px রেখা (পাশে দণ্ড নয়) */
.gd-board.fi-active > .fi-sidebar-item-btn,
.gd-board.fi-active.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover {
    background-color: var(--gd-tint);
    box-shadow: none;
    outline: 2px solid var(--gd-act-text);
    outline-offset: -2px;
}

.gd-board.fi-active > .fi-sidebar-item-btn > .fi-icon,
.gd-board.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: var(--gd-act-text);
}

/*
 * কিবোর্ডে (Tab) কোন বোর্ডে আছি — Filament কেবল হালকা পটভূমি বদলায়, যা
 * সাদা বোর্ডে প্রায় চোখেই পড়ে না। চাপার রঙের রেখা, বাইরে ২px ফাঁক রেখে;
 * চলতি বোর্ডের ভেতরের রেখার সাথে গুলিয়ে যায় না (ধাপ ৪গ)।
 */
.gd-board > .fi-sidebar-item-btn:focus-visible,
.gd-board.fi-active > .fi-sidebar-item-btn:focus-visible {
    outline: 2px solid var(--gd-act-text);
    outline-offset: 2px;
}

/* ═══ ৭. কাজের জায়গা ও পাতার মাথা ═════════════════════════════════ */

@media (min-width: 64rem) {
    .fi-main {
        padding-inline: 24px;
    }
}

/*
 * বোর্ডের পাতাগুলো — লেখা-ট্যাব (workspace-tabs.blade.php)।
 * সাদা পাতার মাথায় সারি; নিচে সরু রেখা; চলতি ট্যাবে বেগুনি আভা +
 * ২px রেখা। ফোনে সারির বদলে "এই ভাগে: … ▾" বোতাম (নিচে)।
 */
.gd-tabs {
    margin-top: 20px;
    padding: 12px 16px;
    background-color: var(--gd-surface);
    border: 1px solid var(--gd-hair);
    border-radius: var(--gd-radius-lg);
}

/*
 * সারিটি নিজে পাশে সরে (জায়গা না ধরলে), চলতি ট্যাবটি নিজে থেকেই
 * চোখের সামনে আসে। কিনারায় আবছা ধূসর দাগ মানে "ওদিকে আরও ট্যাব
 * আছে" — CSS-এর পুরোনো কৌশল: সাদা ঢাকনা দুটি লেখার সাথে সরে
 * (`local`), দাগ দুটি কিনারায় স্থির (`scroll`); যেদিকে আর কিছু নেই,
 * সেদিকের দাগ ঢাকনার নিচে ঢাকা পড়ে। কোনো JavaScript নেই।
 *
 * নিচের সরু রেখাটি (শিরোনামের সাথে জোড়া লাগলে) এই বাক্সের নিজের
 * কিনারা — ভেতরের সারি সরলেও রেখাটি সরে না।
 */
.gd-tabs-scroll {
    overflow-x: auto;
    scrollbar-width: thin;
    background:
        linear-gradient(to right, var(--gd-surface) 30%, transparent) left center / 40px 100% no-repeat local,
        linear-gradient(to left, var(--gd-surface) 30%, transparent) right center / 40px 100% no-repeat local,
        linear-gradient(to right, var(--gd-hair), transparent) left center / 16px 100% no-repeat scroll,
        linear-gradient(to left, var(--gd-hair), transparent) right center / 16px 100% no-repeat scroll var(--gd-surface);
}

.gd-tabs-list {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gd-tabs-item {
    flex: 0 0 auto;
}

.gd-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* ৪৪px — আঙুলে চাপার ন্যূনতম মাপ (ফোনে ৪৮, নিচে) */
    height: 44px;
    padding-inline: 14px;
    border-radius: var(--gd-radius);
    color: var(--gd-muted);
    font-size: 15.5px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}

.gd-tab:hover {
    color: var(--gd-ink);
    background-color: var(--gd-canvas);
}

/* কিবোর্ডে (Tab) কোন ট্যাবে আছি — চাপার রঙের রেখা, বাইরে ২px ফাঁক রেখে (ধাপ ৪গ) */
.gd-tab:focus-visible,
.gd-tab-active:focus-visible {
    outline: 2px solid var(--gd-act-text);
    outline-offset: 2px;
}

.gd-tab-active,
.gd-tab-active:hover {
    color: var(--gd-act-text);
    background-color: var(--gd-tint);
    outline: 2px solid var(--gd-act-text);
    outline-offset: -2px;
    font-weight: 600;
}

/* ট্যাবের পাশে পাতার নিজের সংখ্যা ("৫ নতুন") — ছোট ধূসর টালি */
.gd-tab-badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding-inline: 7px;
    border-radius: 6px;
    background-color: var(--gd-canvas);
    color: var(--gd-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.gd-tab-active .gd-tab-badge {
    background-color: var(--gd-surface);
    color: var(--gd-act-text);
}

.gd-tab-badge-danger {
    background-color: var(--gd-stop-bg);
    color: var(--gd-stop);
}

.gd-tab-badge-warning {
    background-color: var(--gd-watch-bg);
    color: var(--gd-watch);
}

.gd-tab-badge-success {
    background-color: var(--gd-ok-bg);
    color: var(--gd-ok);
}

/*
 * ট্যাব আর পাতার শিরোনাম এক সাদা পাতায় — নমুনার মতো: উপরে ট্যাবের
 * সারি, সরু রেখা, নিচে শিরোনাম ও প্রধান বোতাম। শিরোনাম না থাকলে
 * ট্যাবের পাতাটি নিজেই গোল কোণে বন্ধ হয় (উপরের সাধারণ নিয়ম)।
 */
.fi-main > .gd-tabs:has(+ .fi-page > .fi-page-header-main-ctn > .fi-header) {
    border-bottom: 0;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    padding-bottom: 0;
}

.fi-main > .gd-tabs:has(+ .fi-page > .fi-page-header-main-ctn > .fi-header) > .gd-tabs-scroll,
.fi-main > .gd-tabs:has(+ .fi-page > .fi-page-header-main-ctn > .fi-header) > .gd-tabs-menu {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gd-hair);
}

/*
 * ফোন: ট্যাবের সারির বদলে একটি বোতাম — "এই ভাগে: মেম্বারগণ ▾" —
 * চাপলে এই ভাগের সব পাতা (Filament-এর নিজের dropdown)। সরু পর্দায়
 * পাশে-সরা সারির শেষের ট্যাবগুলো চোখেই পড়ত না, আর ড্রয়ারে কেবল ছয়টি
 * বোর্ড — তাই "রেফারেল", "পাঠানো বার্তা"-র মতো পাতা খুঁজে পাওয়া যেত না।
 */
.gd-tabs-menu {
    display: none;
}

@media (max-width: 47.999rem) {
    .gd-tabs-scroll {
        display: none;
    }

    .gd-tabs-menu {
        display: block;
    }

    /* ফোনে আঙুলের জন্য ৪৮px — "এই ভাগে" তালিকা ও পাতার ভেতরের ট্যাব (ধাপ ৪গ) */
    .gd-tab,
    .gd-tabs-menu-btn,
    .gd-tabs-menu .fi-dropdown-list-item,
    .fi-tabs-item {
        min-height: 48px;
    }
}

.gd-tabs-menu > .fi-dropdown-trigger,
.gd-tabs-menu-btn {
    width: 100%;
}

.gd-tabs-menu-btn {
    justify-content: space-between;
    padding-inline: 14px 12px;
    text-align: start;
}

.gd-tabs-menu-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gd-tabs-menu-where {
    color: var(--gd-muted);
    font-weight: 500;
}

.gd-tabs-menu-page {
    color: var(--gd-ink);
    font-weight: 600;
}

.gd-tabs-menu .fi-dropdown-panel {
    max-width: calc(100vw - 32px);
}

.gd-tabs-menu .fi-dropdown-list-item {
    min-height: 44px;
    font-size: 15.5px;
}

/* তালিকায় চলতি পাতা — ট্যাবের মতোই আভার উপর ২px রেখা */
.gd-tabs-menu .gd-tabs-menu-item-active {
    background-color: var(--gd-tint);
    outline: 2px solid var(--gd-act-text);
    outline-offset: -2px;
}

.gd-tabs-menu .gd-tabs-menu-item-active .fi-dropdown-list-item-label {
    color: var(--gd-act-text);
    font-weight: 600;
}

.fi-main > .gd-tabs + .fi-page > .fi-page-header-main-ctn {
    padding-top: 0;
}

.fi-main > .gd-tabs + .fi-page > .fi-page-header-main-ctn > .fi-header {
    padding: 18px 24px 20px;
    background-color: var(--gd-surface);
    border: 1px solid var(--gd-hair);
    border-top: 0;
    border-end-start-radius: var(--gd-radius-lg);
    border-end-end-radius: var(--gd-radius-lg);
}

.fi-page-header-main-ctn {
    row-gap: 20px;
    padding-block: 24px 32px;
}

.fi-page-content {
    row-gap: 16px;
}

.fi-header {
    gap: 16px;
}

.fi-header-heading {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--gd-ink);
    text-wrap: balance;
}

.fi-header-subheading {
    margin-top: 2px;
    font-size: 15.5px;
    color: var(--gd-muted);
}

/* ═══ ৮. কার্ড, অংশ ও মডাল ═══════════════════════════════════════════ */

.fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-section:not(.fi-section-not-contained).fi-aside > .fi-section-content-ctn,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-fo-repeater-item,
.fi-in-repeatable-item {
    border-radius: var(--gd-radius-lg);
    background-color: var(--gd-surface);
    --tw-ring-color: var(--gd-hair);
}

.fi-section:not(.fi-section-not-contained):not(.fi-aside).fi-secondary {
    background-color: var(--gd-head);
}

.fi-section:not(.fi-section-not-contained):not(.fi-aside).fi-section-has-header:not(.fi-collapsed) > .fi-section-content-ctn,
.fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn > .fi-section-footer {
    border-color: var(--gd-hair);
}

.fi-section-header-heading {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--gd-ink);
}

.fi-section-header-description {
    color: var(--gd-muted);
}

.fi-modal-window {
    border-radius: var(--gd-radius-lg);
    background-color: var(--gd-surface);
    --tw-ring-color: var(--gd-hair);
}

.fi-modal-heading {
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: normal;
    color: var(--gd-ink);
}

.fi-modal-close-overlay {
    background-color: color-mix(in srgb, #16131D 55%, transparent);
}

.fi-dropdown-panel {
    border-radius: var(--gd-radius);
    background-color: var(--gd-surface);
    --tw-ring-color: var(--gd-hair);
}

/* ═══ ৯. টেবিল — ৫২px সারি, ডোরা নেই ═══════════════════════════════ */

.fi-ta-ctn .fi-ta-header-toolbar,
.fi-ta-empty-state:not(.fi-ta-ctn-with-content-layout .fi-ta-empty-state) {
    border-color: var(--gd-hair);
}

.fi-ta-table > thead > tr {
    background-color: var(--gd-head);
}

.fi-ta-header-cell,
.fi-ta-header-cell-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--gd-muted);
}

.fi-ta-table > tbody > tr,
.fi-ta-table > thead > tr {
    border-color: var(--gd-hair);
}

.fi-ta-row > td {
    height: 52px;
}

.fi-ta-row {
    font-size: 15px;
    line-height: 1.5;
}

.fi-ta-row:hover,
.fi-ta-row.fi-hover:hover {
    background-color: var(--gd-tint);
}

/*
 * টেবিলের ঘরে অঙ্ক সারিতে মেলে: বাংলা অঙ্ক GD Ank-এ (সমান চওড়া),
 * ইংরেজি অঙ্ক Google Sans-এর tabular রূপে। বাকি লেখা Google Sans-এই।
 */
.fi-ta-cell,
.fi-ta-text-item,
.fi-wi-stats-overview-stat-value,
.gd-num {
    font-family: var(--gd-num);
    font-variant-numeric: tabular-nums;
}

.fi-ta-text-item-label {
    color: var(--gd-ink);
}

/*
 * টেবিলের লেখা ১৫px — Filament-এর ডিফল্ট ১৪px (text-sm) বাংলায় ছোট, বিশেষ
 * করে কার-ফলা ও অঙ্কে (ধাপ ১-এর পর্যালোচনা)। নিচের ম্লান বর্ণনা ১৪px-ই থাকে।
 */
.fi-ta-text-item.fi-size-sm,
.fi-ta-text.fi-size-sm .fi-ta-text-item {
    font-size: 15px;
    line-height: 1.5;
}

.fi-ta-cell:first-of-type .fi-ta-text-item-label {
    font-weight: 600;
}

.fi-pagination .fi-pagination-items {
    border-radius: var(--gd-radius);
    --tw-ring-color: var(--gd-hair);
    background-color: var(--gd-surface);
}

.fi-pagination .fi-pagination-item {
    border-color: var(--gd-hair);
}

.fi-pagination .fi-pagination-item.fi-active .fi-pagination-item-btn {
    background-color: var(--gd-tint);
}

.fi-pagination .fi-pagination-item.fi-active .fi-pagination-item-label {
    color: var(--gd-act-text);
}

/* ═══ ১০. বোতাম ═════════════════════════════════════════════════════ */

.fi-btn {
    min-height: 44px;
    border-radius: var(--gd-radius);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
}

.fi-btn.fi-size-sm,
.fi-btn.fi-size-xs {
    min-height: 36px;
    font-size: 15px;
}

/* দ্বিতীয় সারির বোতাম — সাদা, কিনারা ঘরের রেখার রঙে */
.fi-btn:not(.fi-color):not(.fi-outlined),
.fi-btn.fi-outlined {
    --tw-ring-color: var(--gd-ctl);
}

.fi-btn.fi-outlined.fi-color {
    --tw-ring-color: var(--color-600);
}

.fi-btn:focus-visible {
    --tw-ring-color: var(--gd-act-text);
}

/*
 * গাঢ় থিমে ভরাট বোতাম হালকা রঙের (৪০০ ধাপ) উপর কালো লেখা — নমুনার
 * #BC8CFF / #17121F (৭.২৯:১)। জিমের রঙ ও কালির palette-এও ৪০০ ধাপে
 * কালো লেখা ৪.৫:১ পেরোয় (ActionColor যাচাই করে)।
 */
.fi-btn.fi-color-primary:not(.fi-outlined) {
    --dark-bg: var(--primary-400);
    --dark-hover-bg: var(--primary-300);
    --dark-text: #17121F;
    --dark-hover-text: #17121F;
}

.fi-btn.fi-color-primary:not(.fi-outlined) > .fi-icon:where(.dark, .dark *) {
    color: #17121F;
}

/*
 * মুছে ফেলার বোতাম পাতায় কেবল লাল রেখায় আঁকা — ভরাট লাল থাকে
 * শুধু নিশ্চিত করার মডালে। "রঙিন ভরাট মানেই চাপার আসল কাজ" —
 * পাতার মাথায় বড় লাল বোতাম চোখ টেনে নিত।
 */
.fi-header .fi-btn.fi-color-danger:not(.fi-outlined) {
    background-color: var(--gd-surface);
    color: var(--gd-stop);
    --tw-ring-color: var(--gd-stop);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 1px var(--tw-ring-color);
    box-shadow: var(--tw-ring-shadow);
}

.fi-header .fi-btn.fi-color-danger:not(.fi-outlined) > .fi-icon {
    color: var(--gd-stop);
}

.fi-header .fi-btn.fi-color-danger:not(.fi-outlined):hover {
    background-color: var(--gd-stop-bg);
    color: var(--gd-stop);
}

.fi-link {
    font-weight: 500;
}

/* ═══ ১১. ফরম ═══════════════════════════════════════════════════════ */

.fi-input-wrp {
    border-radius: var(--gd-radius);
    --tw-ring-color: var(--gd-ctl);
}

.fi-input-wrp:where(.dark, .dark *) {
    background-color: var(--gd-canvas);
}

/*
 * কিনারার রঙ উপরে বসানোয় Filament-এর ফোকাস ও ভুলের রঙও এখানে
 * আবার লিখতে হয় — নইলে ঘরে ক্লিক করলে বলয়টি ধূসরই থেকে যেত।
 */
.fi-input-wrp:not(.fi-disabled):focus-within {
    --tw-ring-color: var(--gd-act-text);
}

.fi-input-wrp.fi-invalid,
.fi-input-wrp.fi-invalid:focus-within {
    --tw-ring-color: var(--gd-stop);
}

.fi-input,
.fi-select-input {
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

.fi-input-wrp .fi-input,
.fi-input-wrp .fi-select-input {
    min-height: 42px;
}

.fi-fo-field .fi-fo-field-label-content {
    font-size: 15px;
    font-weight: 600;
    color: var(--gd-ink);
}

.fi-fo-field-wrp-helper-text,
.fi-sc-text {
    color: var(--gd-muted);
}

.fi-checkbox-input,
.fi-radio-input {
    border-radius: 5px;
}

/* ═══ ১২. ব্যাজ → অবস্থার চিপ ══════════════════════════════════════ */

/*
 * ব্যাজগুলো ৬px কোণের ছোট চিপ, কিনারা ছাড়া। সফল/সতর্ক/বিপদের রঙের
 * ব্যাজে আগে চিহ্নটিও বসে (● ▲ অষ্টভুজ) — ফলে "সক্রিয়", "মেয়াদ
 * শেষ" জাতীয় লেখা কেবল রঙে নয়, আকারেও চেনা যায়। চিহ্নটি CSS-এর
 * mask দিয়ে আঁকা, তাই কোনো মডিউলের কোডে হাত দিতে হয়নি।
 */
.fi-badge {
    border-radius: 6px;
    --tw-ring-color: transparent;
    font-weight: 600;
}

.fi-badge.fi-color-success::before,
.fi-badge.fi-color-warning::before,
.fi-badge.fi-color-danger::before {
    content: "";
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    background-color: currentColor;
    -webkit-mask: var(--gd-sign-mask) center / contain no-repeat;
    mask: var(--gd-sign-mask) center / contain no-repeat;
}

.fi-badge.fi-color-success {
    --gd-sign-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22Zm5.9 8.5-1.4-1.4-6.2 6.2-2.8-2.8-1.4 1.4 4.2 4.2Z'/%3E%3C/svg%3E");
}

.fi-badge.fi-color-warning {
    --gd-sign-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.8 23.4 21.6H.6Zm-1.15 6.6v7.2h2.3V8.4Zm1.15 8.45a1.35 1.35 0 1 0 0 2.7 1.35 1.35 0 0 0 0-2.7Z'/%3E%3C/svg%3E");
}

.fi-badge.fi-color-danger {
    --gd-sign-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M16.21 1.84 22.16 7.79v8.42l-5.95 5.95H7.79L1.84 16.21V7.79L7.79 1.84ZM6.3 10.7v2.6h11.4v-2.6Z'/%3E%3C/svg%3E");
}

/* ═══ ১৩. অবস্থার চিহ্ন (<x-core::status-sign>) ═════════════════════ */

.gd-sign {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.gd-sign-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.gd-sign-shape {
    fill: currentColor;
}

.gd-sign-shape-stroked,
.gd-sign-ring {
    stroke: currentColor;
}

.gd-sign-mark {
    fill: var(--gd-sign-on);
}

.gd-sign-mark-line {
    stroke: var(--gd-sign-on);
}

.gd-sign-ok    { color: var(--gd-ok); }
.gd-sign-watch { color: var(--gd-watch); }
.gd-sign-stop  { color: var(--gd-stop); }
.gd-sign-pause { color: var(--gd-pause); }

/* ═══ ১৪. সংখ্যার উইজেট ════════════════════════════════════════════ */

.fi-wi-stats-overview-stat-value {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--gd-ink);
}

.fi-wi-stats-overview-stat-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--gd-ink);
}

.fi-wi-stats-overview-stat-description {
    color: var(--gd-muted);
}

/* ═══ ১৫. ড্রপডাউন, নোটিফিকেশন, ট্যাব (Filament-এর নিজের) ════════════ */

.fi-dropdown-list-item-label {
    font-size: 15px;
}

.fi-no-notification {
    border-radius: var(--gd-radius-lg);
    --tw-ring-color: var(--gd-hair);
}

.fi-tabs {
    border-radius: var(--gd-radius);
    --tw-ring-color: var(--gd-hair);
    background-color: var(--gd-surface);
}

.fi-tabs-item {
    min-height: 44px;
    border-radius: var(--gd-radius);
}

.fi-tabs-item:focus-visible {
    outline: 2px solid var(--gd-act-text);
    outline-offset: 2px;
}

.fi-tabs-item.fi-active {
    background-color: var(--gd-tint);
    outline: 2px solid var(--gd-act-text);
    outline-offset: -2px;
}

.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-active > .fi-icon {
    color: var(--gd-act-text);
}

/* ═══ ১৬. পাতার নির্দেশনা কার্ড (.fs-guide) ══════════════════════════ */

/*
 * "এই পাতা কীভাবে ব্যবহার করবেন" — প্রতিটি পাতার নিচে সাদা কার্ড,
 * বাঁয়ে হালকা আভার "i" টালি (CSS-এ আঁকা, guide.blade.php বদলায়নি)।
 */
.fs-guide {
    position: relative;
    margin-top: 24px;
    padding: 18px 24px 18px 74px;
    background-color: var(--gd-surface);
    border: 1px solid var(--gd-hair);
    border-radius: var(--gd-radius-lg);
    color: var(--gd-ink);
    font-size: 15.5px;
    line-height: 1.7;
}

.fs-guide::before,
.fs-guide::after {
    content: "";
    position: absolute;
    inset-inline-start: 24px;
    top: 18px;
    width: 36px;
    height: 36px;
    border-radius: var(--gd-radius);
}

.fs-guide::before {
    background-color: var(--gd-tint);
}

/* "i" চিহ্নটি চাপার রঙে — জিমের রঙ/কালি/বেগুনি যা-ই বসুক */
.fs-guide::after {
    background-color: var(--gd-act-text);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5.5M12 7.8h.1' stroke-width='2.3'/%3E%3C/svg%3E") center / 22px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5.5M12 7.8h.1' stroke-width='2.3'/%3E%3C/svg%3E") center / 22px no-repeat;
}

.fs-guide h3 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

.fs-guide h3 span {
    margin-inline-start: 6px;
    font-weight: 500;
    color: var(--gd-muted);
}

.fs-guide p {
    margin: 0 0 8px;
    max-width: 820px;
    color: var(--gd-muted);
}

/* উপশিরোনামে uppercase/letter-spacing নয় — বাংলা ভেঙে যায় */
.fs-guide h4 {
    margin: 12px 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--gd-ink);
}

.fs-guide ol,
.fs-guide ul {
    margin: 0;
    padding-inline-start: 1.4rem;
}

.fs-guide li {
    margin: 3px 0;
}

/* ধাপের ক্রম — বাংলায় বাংলা অঙ্কে (১. ২. ৩.), ইংরেজিতে 1. 2. 3. */
.fs-guide ol {
    list-style-type: decimal;
}

:lang(bn) .fs-guide ol {
    list-style-type: bengali;
}

.fs-guide ol li::marker {
    font-family: var(--gd-num);
    font-weight: 700;
    color: var(--gd-muted);
}

.fs-guide ul li::marker {
    content: '▲ ';
    color: var(--gd-watch);
    font-size: .8em;
}

/* ═══ ১৭. লগইনের পাতা ══════════════════════════════════════════════ */

/*
 * কংক্রিট-সাদা মেঝে, মাঝখানে সাদা কার্ড; কার্ডের মাথায় চাপার রঙের
 * সরু দাগ (জিমের সাইটের হিরোর "strip"-এর মতো)। ছায়া নেই।
 */
.fi-simple-layout {
    background-color: var(--gd-canvas);
}

.fi-simple-main {
    position: relative;
    overflow: hidden;
    border-radius: var(--gd-radius-lg);
    background-color: var(--gd-surface);
    --tw-ring-color: var(--gd-hair);
}

.fi-simple-main::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 6px;
    /* চাপার রঙ — গাঢ় থিমে তার হালকা ধাপ (৪০০), নইলে গাঢ় কার্ডে গাঢ় দাগ হারিয়ে যেত */
    background-color: var(--gd-act);
}

.fi-simple-header .fi-logo {
    font-size: 22px;
    font-family: var(--gd-latin);
    font-weight: 800;
}

.fi-simple-header-heading {
    font-size: 26px;
    line-height: 1.4;
    color: var(--gd-ink);
}

.fi-simple-header-subheading {
    color: var(--gd-muted);
}

.fi-simple-main .fi-btn {
    min-height: 48px;
}

/* ═══ ১৮. /platform — সারোতিয়ার নিয়ন্ত্রণ-কক্ষ ═══════════════════════ */

/*
 * জিমের অফিস থেকে কাঠামোতেই আলাদা: পাশে তাক নেই, মেনু উপরে, আর
 * পট্টিটি দুই থিমেই গাঢ় (#1C1826)। বোতাম কালির। নামের আগে চারটি
 * চিহ্ন সারি ধরে — "সব জিমের অবস্থা এখানে"।
 */
.fi-panel-platform .fi-topbar {
    background-color: var(--gd-band);
    border-bottom-color: var(--gd-band);
    color: #F2EFF7;
    padding-inline: 24px;
}

.fi-panel-platform .fi-topbar-start {
    align-self: center;
    width: auto;
    flex: 0 0 auto;
    padding-inline: 0;
    margin-inline-end: 16px;
    background: none;
    border: 0;
}

.fi-panel-platform .fi-topbar .fi-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #FFFFFF;
    font-size: 17px;
}

.fi-panel-platform .fi-topbar .fi-logo::before {
    content: "";
    flex: 0 0 auto;
    width: 84px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%234FCB84'/%3E%3Cpath d='M7 12.4l3.3 3.3L17.2 8.8' fill='none' stroke='%231C1826' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M38 2.6 48.6 21H27.4Z' fill='%23F39A3E'/%3E%3Crect x='36.85' y='8.4' width='2.3' height='7.2' rx='1.15' fill='%231C1826'/%3E%3Ccircle cx='38' cy='18.2' r='1.35' fill='%231C1826'/%3E%3Cpath d='M68.21 1.84 74.16 7.79V16.21L68.21 22.16H59.79L53.84 16.21V7.79L59.79 1.84Z' fill='%23FF6F86'/%3E%3Crect x='58.3' y='10.7' width='11.4' height='2.6' rx='1.1' fill='%231C1826'/%3E%3Ccircle cx='90' cy='12' r='9.6' fill='none' stroke='%23ADA6BD' stroke-width='2.6' stroke-dasharray='4.1 3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.fi-panel-platform .fi-topbar-item-btn {
    border-radius: var(--gd-radius);
}

.fi-panel-platform .fi-topbar-item-label {
    color: #E6E2EE;
    font-size: 15.5px;
}

.fi-panel-platform .fi-topbar-item-btn > .fi-icon {
    color: #ADA6BD;
}

.fi-panel-platform .fi-topbar-item-btn:hover,
.fi-panel-platform .fi-topbar-item-btn:focus-visible {
    background-color: rgba(255, 255, 255, .08);
}

.fi-panel-platform .fi-topbar-item.fi-active .fi-topbar-item-btn {
    background-color: rgba(255, 255, 255, .1);
    outline: 2px solid #E6E2EE;
    outline-offset: -2px;
}

.fi-panel-platform .fi-topbar-item.fi-active .fi-topbar-item-label,
.fi-panel-platform .fi-topbar-item.fi-active .fi-topbar-item-btn > .fi-icon {
    color: #FFFFFF;
}

.fi-panel-platform .fi-topbar-end {
    flex: 0 0 auto;
    margin-inline-start: auto;
}

.fi-panel-platform .fi-topbar .fi-icon-btn,
.fi-panel-platform .fi-topbar .fi-icon-btn .fi-icon {
    color: #E6E2EE;
}

.fi-panel-platform .fi-topbar .fi-icon-btn:hover {
    background-color: rgba(255, 255, 255, .08);
}

.fi-panel-platform .fi-topbar .fi-user-menu-trigger {
    border-inline-start-color: rgba(255, 255, 255, .16);
}

.fi-panel-platform .fi-topbar .fi-global-search-field .fi-input-wrp {
    background-color: rgba(255, 255, 255, .06);
    --tw-ring-color: rgba(255, 255, 255, .28);
}

.fi-panel-platform .fi-topbar .fi-global-search-field .fi-input-wrp:focus-within {
    --tw-ring-color: #E6E2EE;
}

.fi-panel-platform .fi-topbar .fi-global-search-field .fi-input {
    color: #FFFFFF;
}

/* প্ল্যাটফর্মের পাশের তাক (ছোট পর্দার drawer) — বোর্ড নয়, সাধারণ তালিকা */
.fi-panel-platform .fi-sidebar {
    background-color: var(--gd-surface);
}

.fi-panel-platform .fi-sidebar-header {
    background-color: var(--gd-band);
}

.fi-panel-platform .fi-sidebar-header .fi-logo {
    color: #FFFFFF;
}

.fi-panel-platform .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--gd-tint);
    outline: 2px solid var(--gd-act-text);
    outline-offset: -2px;
}

/* ═══ ১৯. ছোট পর্দা ও অন্যান্য ═══════════════════════════════════════ */

@media (max-width: 63.999rem) {
    .fi-main {
        padding-inline: 16px;
    }

    .gd-tabs {
        margin-top: 16px;
        padding: 8px;
    }
}

/* সরু স্ক্রলবার */
.fi-body * {
    scrollbar-width: thin;
    scrollbar-color: var(--gd-hair) transparent;
}

@media (prefers-reduced-motion: reduce) {
    .fi-body *,
    .fi-body *::before,
    .fi-body *::after {
        transition-duration: 0s;
        animation-duration: 0s;
    }
}

/* ═══ ২০. মেম্বারের মুখ ও "টাকা নিন"-এর মাথা ═════════════════════════ */

/*
 * মেম্বারের ছবি — গোল, না থাকলে নামের প্রথম অক্ষর। কাউন্টারের খোঁজা,
 * গেটের ফল ও "টাকা নিন" ফরম একই মুখ দেখায়, যাতে ভুল মানুষের টাকা বা
 * হাজিরা না হয় (ধাপ ৪ক)।
 */
.gd-face {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 999px;
    background-color: var(--gd-shelf);
    color: var(--gd-muted);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}

.gd-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gd-face-lg {
    width: 56px;
    height: 56px;
    font-size: 22px;
}

.gd-muted {
    color: var(--gd-muted);
}

.gd-text-stop {
    color: var(--gd-stop);
}

.gd-pay-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--gd-hair);
    border-radius: var(--gd-radius);
    background-color: var(--gd-head);
}

.gd-pay-summary-text {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.gd-pay-summary-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    font-size: 16.5px;
    line-height: 1.4;
}

.gd-pay-summary-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--gd-muted);
    font-size: 14.5px;
    line-height: 1.4;
}

.gd-pay-summary-due {
    color: var(--gd-muted);
    font-size: 14.5px;
}

.gd-pay-summary-due b {
    color: var(--gd-ink);
    font-size: 17px;
}

.gd-pay-summary-due b.gd-text-stop {
    color: var(--gd-stop);
}

/* ═══ ২১. কাউন্টারের ঘর — খোঁজা, স্ক্যান, চেক-ইনের ফল ══════════════════ */

/*
 * উপরের পট্টির সবচেয়ে চওড়া জিনিস (৫৬০px পর্যন্ত): "নাম, মোবাইল বা
 * কোড — অথবা কার্ড স্ক্যান করুন" (Core\Livewire\CounterField, ধাপ ৪ক)।
 * নিচে ফলাফলের তালিকা: মেম্বার (ছবি, চিহ্ন ও শব্দ, প্ল্যান, দিন, বাকি,
 * বোতাম) আর পাতা। রঙিন বোতাম একটিই — যাঁর টাকা বাকি তাঁর "টাকা নিন"।
 */
.gd-counter {
    position: relative;
}

.gd-counter-field {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 8px 0 12px;
    border: 1px solid var(--gd-ctl);
    border-radius: var(--gd-radius);
    background-color: var(--gd-surface);
    color: var(--gd-muted);
}

.gd-counter.is-open .gd-counter-field,
.gd-counter-field:focus-within {
    border-color: var(--gd-act-text);
    outline: 1px solid var(--gd-act-text);
}

.gd-counter-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--gd-ink);
}

.gd-counter-field input {
    flex: 1 1 auto;
    min-width: 0;
    height: 42px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--gd-ink);
    font: inherit;
    font-size: 15.5px;
    outline: none;
    box-shadow: none;
}

.gd-counter-field input::placeholder {
    color: var(--gd-muted);
    opacity: 1;
}

/* ব্রাউজারের নিজের "✕" নয় — Esc বা "বন্ধ করুন" */
.gd-counter-field input::-webkit-search-cancel-button {
    appearance: none;
}

.gd-counter-kbd {
    flex: 0 0 auto;
    padding: 1px 7px;
    border: 1px solid var(--gd-hair);
    border-bottom-width: 2px;
    border-radius: 6px;
    background-color: var(--gd-canvas);
    color: var(--gd-muted);
    font-family: var(--gd-font);
    font-size: 12.5px;
    line-height: 1.5;
    white-space: nowrap;
}

.gd-counter-close {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--gd-ctl);
    border-radius: var(--gd-radius);
    background-color: var(--gd-surface);
    color: var(--gd-ink);
    font: inherit;
    font-size: 14.5px;
    cursor: pointer;
}

.gd-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ফলাফলের তালিকা — ঘরের ঠিক নিচে, সমান চওড়া (ফোনে পুরো পর্দা) */
.gd-counter-results {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 6px);
    z-index: 40;
    max-height: min(70vh, 640px);
    overflow-y: auto;
    border: 1px solid var(--gd-hair);
    border-radius: var(--gd-radius-lg);
    background-color: var(--gd-surface);
}

.gd-counter-results.is-loading {
    opacity: .7;
}

.gd-counter-head {
    padding: 10px 16px 6px;
    border-top: 1px solid var(--gd-hair);
    color: var(--gd-muted);
    font-size: 13.5px;
    font-weight: 600;
}

.gd-counter-head:first-child {
    border-top: 0;
}

.gd-counter-row {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--gd-hair);
    color: var(--gd-ink);
    text-decoration: none;
}

.gd-counter-head + .gd-counter-row {
    border-top: 0;
}

.gd-counter-row .gd-face {
    width: 44px;
    height: 44px;
}

.gd-counter-row-main {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.gd-counter-row-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    font-size: 16px;
    line-height: 1.4;
}

.gd-counter-row-title a,
.gd-counter-row-title b {
    color: var(--gd-ink);
    font-weight: 600;
}

.gd-counter-row-title a:hover {
    color: var(--gd-act-text);
    text-decoration: underline;
}

.gd-counter-row-title .gd-muted {
    font-size: 14px;
}

.gd-counter-row-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    color: var(--gd-muted);
    font-size: 14px;
    line-height: 1.5;
}

.gd-counter-row-line .gd-sign {
    font-size: 14px;
}

.gd-counter-row-line .gd-sign-icon {
    width: 16px;
    height: 16px;
}

.gd-counter-row-line b.gd-num {
    font-size: 15px;
}

.gd-counter-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

/* পাতার সারি */
.gd-counter-page {
    align-items: center;
}

.gd-counter-page:hover,
.gd-counter-page:focus-visible {
    background-color: var(--gd-tint);
}

.gd-counter-page b {
    font-size: 16px;
    font-weight: 600;
}

.gd-counter-page .gd-muted {
    font-size: 14px;
}

.gd-counter-page-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--gd-radius);
    background-color: var(--gd-canvas);
    color: var(--gd-muted);
}

.gd-counter-page-svg {
    width: 22px;
    height: 22px;
}

.gd-counter-empty {
    margin: 0;
    padding: 16px;
    color: var(--gd-muted);
    font-size: 15px;
}

/* ছোট বোতাম — সাদা, আর একটিই রঙিন ("টাকা নিন", যাঁর বাকি আছে) */
.gd-cbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--gd-ctl);
    border-radius: var(--gd-radius);
    background-color: var(--gd-surface);
    color: var(--gd-ink);
    font: inherit;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.gd-cbtn:hover {
    background-color: var(--gd-tint);
}

.gd-cbtn:focus-visible {
    outline: 2px solid var(--gd-act-text);
    outline-offset: 2px;
}

.gd-cbtn-fill {
    border-color: var(--gd-act);
    background-color: var(--gd-act);
    color: #FFFFFF;
}

.gd-cbtn-fill:hover {
    background-color: var(--primary-500);
}

.dark .gd-cbtn-fill,
.dark .gd-cbtn-fill:hover {
    color: #17121F;
}

.dark .gd-cbtn-fill:hover {
    background-color: var(--primary-300);
}

/*
 * চেক-ইনের ফল — উপরের ডান কোণে ছবিসহ ছোট বার্তা, কয়েক সেকেন্ড পরে
 * নিজেই সরে। বাঁয়ের ৪px রেখা নয় (ছক: পাশে রঙিন দণ্ড কখনো নয়) —
 * রায় বোঝায় চিহ্ন ও শব্দ, কিনারা তার রঙে।
 */
.gd-toast {
    position: fixed;
    top: 76px;
    inset-inline-end: 24px;
    z-index: 45;
    display: flex;
    gap: 14px;
    width: min(400px, calc(100vw - 32px));
    padding: 16px;
    border: 2px solid var(--gd-hair);
    border-radius: var(--gd-radius-lg);
    background-color: var(--gd-surface);
    color: var(--gd-ink);
}

.gd-toast-ok    { border-color: var(--gd-ok); }
.gd-toast-watch { border-color: var(--gd-watch); }
.gd-toast-stop  { border-color: var(--gd-stop); }
.gd-toast-pause { border-color: var(--gd-pause); }

.gd-toast .gd-face-lg {
    width: 64px;
    height: 64px;
}

.gd-toast-text {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.gd-toast-verdict {
    font-size: 18px;
    font-weight: 700;
}

.gd-toast-verdict .gd-sign-icon {
    width: 22px;
    height: 22px;
}

.gd-toast-name {
    font-size: 16px;
    line-height: 1.4;
}

.gd-toast-message,
.gd-toast-due {
    color: var(--gd-muted);
    font-size: 14.5px;
    line-height: 1.5;
}

.gd-toast-due b {
    color: var(--gd-stop);
    font-size: 16px;
}

.gd-toast-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

@media (max-width: 47.999rem) {
    .gd-toast {
        top: auto;
        bottom: calc(16px + env(safe-area-inset-bottom));
        inset-inline: 16px;
        width: auto;
    }
}


/* ═══ ২২. ফোনের নিচের বার ═══════════════════════════════════════════ */

/*
 * ৭৬৮px-এর নিচে পর্দার নিচে পাঁচটি ঘর — আইকন আর শব্দ, প্রতিটি অন্তত
 * ৪৮px, বুড়ো আঙুলের নাগালে (Core\Support\BottomBar, ধাপ ৪ক)। কোনো ভাসমান
 * গোল বোতাম নয়। বড় পর্দায় বারটি নেই — উপরের পট্টিই যথেষ্ট।
 *
 * বার থাকলে ফোনের উপরের পট্টি এক সারির (জিমের নাম, ছবি): খোঁজার ঘর
 * নিচে নামে — "খুঁজুন" বা "স্ক্যান" চাপলে বারের ঠিক উপরে খোলে, ফলাফল
 * উপরের দিকে। প্রতিটি ধরনের বারে এ দুটির অন্তত একটি থাকে, তাই খোঁজা
 * কখনো হারায় না (PanelThemeTest ও BottomBarTest পাহারা দেয়)। "মেনু"-ও
 * বারে, তাই পট্টির "মেনু" বোতাম তখন নেই।
 */
.gd-bar {
    display: none;
}

@media (max-width: 47.999rem) {
    .gd-bar {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 35;
        display: grid;
        grid-template-columns: repeat(var(--gd-bar-slots, 5), minmax(0, 1fr));
        gap: 2px;
        height: calc(64px + env(safe-area-inset-bottom));
        padding: 0 4px env(safe-area-inset-bottom);
        border-top: 1px solid var(--gd-hair);
        background-color: var(--gd-surface);
    }

    .gd-bar-slot {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 0;
        min-height: 48px;
        margin: 6px 0;
        padding: 4px 2px;
        border: 0;
        border-radius: var(--gd-radius);
        background: transparent;
        color: var(--gd-muted);
        font: inherit;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.3;
        text-decoration: none;
        cursor: pointer;
    }

    .gd-bar-slot:active,
    .gd-bar-slot:hover {
        background-color: var(--gd-canvas);
        color: var(--gd-ink);
    }

    .gd-bar-slot:focus-visible {
        outline: 2px solid var(--gd-act-text);
        outline-offset: -2px;
    }

    /* চলতি পাতা — আভার উপর ২px রেখা, বোর্ডের মতোই */
    .gd-bar-slot.is-active {
        background-color: var(--gd-tint);
        color: var(--gd-act-text);
        outline: 2px solid var(--gd-act-text);
        outline-offset: -2px;
    }

    .gd-bar-icon {
        flex: 0 0 auto;
        width: 24px;
        height: 24px;
    }

    .gd-bar-slot .gd-bar-label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*
     * ক্যামেরার ভুলের বার্তা ("ক্যামেরার অনুমতি দিন") — পট্টির ঠিক নিচে।
     * বারের উপরে রাখলে নিচে খোলা খোঁজার ঘরটি ঢেকে যেত, অথচ ক্যামেরা না
     * চললে ওই ঘরেই কোড লিখতে হয় (চোখে দেখা, ধাপ ৪ক)।
     */
    .gd-bar-scanner {
        position: fixed;
        top: 60px;
        inset-inline: 12px;
    }

    .gd-bar-scanner p {
        padding: 8px 12px;
        border: 1px solid var(--gd-stop);
        border-radius: var(--gd-radius);
        background-color: var(--gd-surface);
    }

    /* পাতার শেষটুকু (নির্দেশনার কার্ড) যেন বারের নিচে চাপা না পড়ে */
    .fi-body:has(.gd-bar) .fi-main-ctn {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }

    /* উপরের পট্টি এক সারির: জিমের নাম আর ছবি; "মেনু" বারে */
    .fi-body:has(.gd-bar) .fi-topbar {
        flex-wrap: nowrap;
        min-height: 52px;
        padding-block: 4px;
    }

    .fi-body:has(.gd-bar) .gd-menu-btn {
        display: none;
    }

    /*
     * খোঁজার ঘর নিচে — বারের ঠিক উপরে বাঁধা; বন্ধ থাকলে কেবল ঘর ও
     * ফলাফল লুকায়, বাক্সটি নয় — চেক-ইনের ফলের বার্তা এরই ভেতরে থাকে।
     */
    .fi-body:has(.gd-bar) .fi-topbar-end > .gd-counter {
        position: fixed;
        inset-inline: 0;
        bottom: calc(64px + env(safe-area-inset-bottom));
        z-index: 36;
        order: 0;
        margin: 0;
        padding: 0;
    }

    .fi-body:has(.gd-bar) .fi-topbar-end > .gd-counter:not(.is-docked) > .gd-counter-field,
    .fi-body:has(.gd-bar) .fi-topbar-end > .gd-counter:not(.is-docked) > .gd-counter-results {
        display: none;
    }

    .fi-body:has(.gd-bar) .fi-topbar-end > .gd-counter.is-docked {
        padding: 8px 12px;
        border-top: 1px solid var(--gd-hair);
        background-color: var(--gd-surface);
    }

    .gd-counter.is-docked .gd-counter-results {
        top: auto;
        bottom: 100%;
        max-height: 62vh;
        border-bottom: 0;
        border-radius: var(--gd-radius-lg) var(--gd-radius-lg) 0 0;
    }

    /* কিবোর্ড খুললে বার সরে যায়; খোলা খোঁজার ঘর কিবোর্ডের ঠিক উপরে */
    .fi-body.gd-kb-open .gd-bar {
        display: none;
    }

    .fi-body.gd-kb-open:has(.gd-bar) .fi-topbar-end > .gd-counter.is-docked {
        bottom: var(--gd-kb, 0px);
    }

    /* চেক-ইনের ফল বারের উপরে */
    .fi-body:has(.gd-bar) .gd-toast {
        bottom: calc(76px + env(safe-area-inset-bottom));
    }
}

/* ═══ ২৩. মেম্বারের তালিকা — চিহ্নের সারি ও গোনা-ট্যাব ═══════════════ */

/*
 * ছক "সংকেত", পর্দা ৪ (ধাপ ৪খ): সারির শুরুতে চিহ্ন + শব্দ, মেম্বারের
 * ঘরে ৩২px ছবি, নাম ও কোড; দুই লাইনের ঘরে উপরে মোটা, নিচে ম্লান;
 * বাকির টাকা ডান দিকে GD Ank-এ। উপরে গোনা-ট্যাব — শব্দ কালিতে, কেবল
 * চিহ্ন রঙিন, গোনা ম্লান (চালু ট্যাবে চাপার রঙে)।
 */
.gd-face-sm {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

.gd-cell {
    padding: 6px 12px;
}

.gd-cell-who {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 12rem;
}

.gd-cell-two {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.4;
}

.gd-cell-two b {
    color: var(--gd-ink);
    font-weight: 600;
    white-space: nowrap;
}

.gd-cell-two b.gd-text-stop {
    color: var(--gd-stop);
}

.gd-cell-two span {
    color: var(--gd-muted);
    font-size: 13.5px;
    white-space: nowrap;
}

.gd-cell-money {
    display: block;
    width: 100%;
    font-family: var(--gd-num);
    font-variant-numeric: tabular-nums;
    text-align: end;
    white-space: nowrap;
}

.gd-cell-money b {
    color: var(--gd-ink);
    font-weight: 700;
}

.gd-cell-money b.gd-text-stop {
    color: var(--gd-stop);
}

/* ছকের মতো বাঁ দিকে — Filament ট্যাবের সারি মাঝখানে বসায় */
.gd-views .fi-tabs {
    margin-inline: 0;
}

.gd-views .fi-tabs-item .gd-sign {
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
}

.gd-views .fi-tabs-item .gd-sign-icon {
    width: 16px;
    height: 16px;
}

.gd-views .fi-tabs-item .gd-sign-ok .gd-sign-icon    { color: var(--gd-ok); }
.gd-views .fi-tabs-item .gd-sign-watch .gd-sign-icon { color: var(--gd-watch); }
.gd-views .fi-tabs-item .gd-sign-stop .gd-sign-icon  { color: var(--gd-stop); }
.gd-views .fi-tabs-item .gd-sign-pause .gd-sign-icon { color: var(--gd-pause); }

.gd-views .fi-tabs-item .fi-badge {
    font-family: var(--gd-num);
    font-variant-numeric: tabular-nums;
}

/* ═══ ২৪. "নতুন ভর্তি" — মোট দিতে হবে ═══════════════════════════════ */

/* ভর্তির "প্ল্যান ও টাকা" ধাপে মোট অঙ্কটি বড় করে (Plan-এর AdmissionFields, ধাপ ৪খ) */
.gd-admit-total {
    padding: 10px 14px;
    border: 1px solid var(--gd-hair);
    border-radius: var(--gd-radius);
    background-color: var(--gd-head);
    color: var(--gd-ink);
    font-family: var(--gd-num);
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ═══ ২৫. মেম্বারের কার্ড (মেম্বারের পাতা) ══════════════════════════ */

/*
 * ছক "সংকেত", মেম্বারের পাতা (ViewMember, ধাপ ৪খ): মাথার সাদা পাতায়
 * ৯৬px ছবি, ২৮px নাম, বড় চিহ্ন ও এক বাক্য, তার নিচে ছোট তথ্যের সারি;
 * নিচে দুই ভাগ — টাকার ইতিহাস আর শেষ কয়েকবার আসা (ফোনে একটির নিচে আরেকটি)।
 */
.gd-profile {
    display: grid;
    gap: 16px;
}

.gd-profile-head,
.gd-profile-sheet {
    padding: 20px 24px;
    border: 1px solid var(--gd-hair);
    border-radius: var(--gd-radius-lg);
    background-color: var(--gd-surface);
}

.gd-profile-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
}

.gd-face-xl {
    width: 96px;
    height: 96px;
    font-size: 36px;
}

.gd-profile-id {
    display: grid;
    gap: 8px;
    min-width: 0;
    flex: 1 1 18rem;
}

.gd-profile-name {
    margin: 0;
    color: var(--gd-ink);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
}

.gd-profile-sub {
    margin: 0;
    color: var(--gd-muted);
    font-size: 15.5px;
}

.gd-profile-tel {
    color: var(--gd-act-text);
    font-family: var(--gd-num);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.gd-profile-verdict {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.gd-sign-lg {
    font-size: 18px;
}

.gd-sign-lg .gd-sign-icon {
    width: 28px;
    height: 28px;
}

.gd-profile-sentence {
    color: var(--gd-ink);
    font-size: 17px;
    font-weight: 500;
}

.gd-profile-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 4px 0 0;
}

.gd-profile-facts div {
    display: grid;
    gap: 0;
}

.gd-profile-facts dt {
    color: var(--gd-muted);
    font-size: 13.5px;
}

.gd-profile-facts dd {
    margin: 0;
    color: var(--gd-ink);
    font-size: 16px;
    font-weight: 600;
}

.gd-profile-health {
    margin: 0;
}

.gd-profile-health .gd-sign {
    white-space: normal;
    color: var(--gd-ink);
    font-weight: 500;
}

.gd-profile-health .gd-sign-icon {
    color: var(--gd-watch);
}

.gd-profile-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 16px;
    align-items: start;
}

.gd-profile-sheet h3 {
    margin: 0 0 8px;
    color: var(--gd-ink);
    font-size: 17px;
    font-weight: 700;
}

.gd-profile-sheet h3 .gd-muted {
    font-size: 14.5px;
    font-weight: 500;
}

.gd-profile-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 6px 0;
    border-top: 1px solid var(--gd-hair);
}

.gd-profile-row .gd-cell-two {
    flex: 1 1 auto;
    min-width: 0;
}

.gd-profile-row .gd-cell-two span {
    white-space: normal;
}

.gd-profile-amount {
    color: var(--gd-ink);
    white-space: nowrap;
}

/* ═══ ২৬. কাউন্টার মোড — রিসেপশনের পুরো পর্দা ══════════════════════ */

/*
 * ছক "সংকেত", front_desk_mode (Attend\Filament\Pages\CounterMode, ধাপ ৪খ):
 * মেনু ছাড়া পুরো পর্দা। উপরে ৫৬px পট্টি (জিম, সময়, আজ কতজন, বন্ধ করুন);
 * বাঁয়ে ~৬০% — ৭২px বড় ঘর, খোঁজার ফল, রায়ের কার্ড (১৬০px ছবি, চিহ্ন +
 * বড় শব্দ); ডানে ~৪০% — এখন ভেতরে, প্রতিটি সারিতে ৪৮px "বের হলেন";
 * নিচে F-কীর বোতাম। রায় কখনো কেবল রঙে নয়: চিহ্ন + শব্দ + কিনারার রঙ।
 * ৬৪rem-এর নিচে এক কলাম। বোতাম সব অন্তত ৪৮px।
 */
.gd-cm {
    min-height: 100vh;
    background-color: var(--gd-canvas);
    color: var(--gd-ink);
}

/* পুরো পর্দা — ফোনের নিচের বার (মেনু) এখানে নেই */
.fi-body:has(.gd-cm) .gd-bar {
    display: none;
}

.gd-cm-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.gd-cm-offline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--gd-watch);
    background-color: var(--gd-watch-bg);
    color: var(--gd-ink);
    font-size: 16px;
}

.gd-cm-offline .gd-sign {
    font-size: 18px;
}

.gd-cm-offline a {
    color: var(--gd-act-text);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.gd-cm-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    min-height: 56px;
    padding: 8px 20px;
    border-bottom: 1px solid var(--gd-hair);
    background-color: var(--gd-surface);
}

.gd-cm-gym {
    font-size: 18px;
    font-weight: 700;
}

.gd-cm-clock,
.gd-cm-today {
    color: var(--gd-muted);
    font-family: var(--gd-num);
    font-size: 16px;
    font-weight: 600;
}

.gd-cm-exit {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-inline-start: auto;
    padding: 0 16px;
    border: 1px solid var(--gd-ctl);
    border-radius: var(--gd-radius);
    color: var(--gd-ink);
    font-weight: 600;
    text-decoration: none;
}

.gd-cm-exit:hover {
    background-color: var(--gd-tint);
}

.gd-cm-main {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 20px;
    padding: 20px;
    align-items: start;
}

.gd-cm-left,
.gd-cm-right {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.gd-cm-field {
    display: flex;
    gap: 12px;
}

.gd-cm-field input {
    flex: 1 1 auto;
    min-width: 0;
    height: 72px;
    padding: 0 20px;
    border: 2px solid var(--gd-act);
    border-radius: var(--gd-radius);
    background-color: var(--gd-surface);
    color: var(--gd-ink);
    font: inherit;
    font-size: 22px;
}

.gd-cm-field input::placeholder {
    color: var(--gd-muted);
}

.gd-cm-field input:focus {
    outline: 3px solid var(--gd-tint);
    outline-offset: 0;
}

.gd-cm-camera {
    flex: 0 0 auto;
    min-width: 72px;
    min-height: 72px;
    padding: 0 16px;
    border: 1px solid var(--gd-ctl);
    border-radius: var(--gd-radius);
    background-color: var(--gd-surface);
    color: var(--gd-ink);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.gd-cm-results {
    display: grid;
    border: 1px solid var(--gd-hair);
    border-radius: var(--gd-radius);
    background-color: var(--gd-surface);
}

.gd-cm-hit {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 8px 16px;
    border-top: 1px solid var(--gd-hair);
}

.gd-cm-hit:first-child {
    border-top: 0;
}

.gd-cm-hit .gd-cell-two {
    flex: 1 1 auto;
    min-width: 0;
}

.gd-cm-hit .gd-cbtn,
.gd-cm-btn,
.gd-cm-out,
.gd-cm-key {
    min-height: 48px;
    padding: 0 18px;
    font-size: 16px;
}

.gd-cm-none {
    color: var(--gd-muted);
}

.gd-cm-card {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 24px;
    border: 2px solid var(--gd-hair);
    border-radius: var(--gd-radius);
    background-color: var(--gd-surface);
}

.gd-cm-card-ok    { border-color: var(--gd-ok); }
.gd-cm-card-watch { border-color: var(--gd-watch); }
.gd-cm-card-stop  { border-color: var(--gd-stop); }
.gd-cm-card-pause { border-color: var(--gd-pause); }

.gd-face-hero {
    width: 160px;
    height: 160px;
    border-radius: var(--gd-radius-lg);
    font-size: 64px;
}

.gd-cm-card-text {
    display: grid;
    flex: 1 1 18rem;
    gap: 8px;
    align-content: start;
    min-width: 0;
}

.gd-cm-name {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
}

.gd-cm-sub {
    margin: 0;
    color: var(--gd-muted);
    font-size: 17px;
}

.gd-cm-verdict {
    margin: 4px 0 0;
}

.gd-sign-hero {
    gap: 14px;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.3;
}

.gd-sign-hero .gd-sign-icon {
    width: 64px;
    height: 64px;
}

.gd-cm-sentence {
    margin: 0;
    font-size: 22px;
    line-height: 1.5;
}

.gd-cm-sentence b {
    font-weight: 700;
}

.gd-cm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.gd-cm-actions:empty {
    display: none;
}

/* কিছু না থাকলে — ফলের কার্ডের জায়গায় ভাঙা কিনারার ঘর */
.gd-cm-idle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 20px;
    min-height: 200px;
    padding: 24px;
    border: 2px dashed var(--gd-hair);
    border-radius: var(--gd-radius);
    color: var(--gd-muted);
    text-align: center;
}

.gd-cm-idle .gd-sign {
    font-size: 20px;
}

.gd-cm-idle .gd-sign-icon {
    width: 28px;
    height: 28px;
}

.gd-cm-idle p {
    flex: 1 1 100%;
    margin: 0;
    font-size: 17px;
}

.gd-cm-previous {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 16px;
    border: 1px solid var(--gd-hair);
    border-radius: var(--gd-radius);
    background-color: var(--gd-surface);
    color: var(--gd-muted);
    opacity: 0.75;
}

.gd-cm-inside-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
}

.gd-cm-inside {
    display: grid;
    border: 1px solid var(--gd-hair);
    border-radius: var(--gd-radius);
    background-color: var(--gd-surface);
}

.gd-cm-in {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 8px 16px;
    border-top: 1px solid var(--gd-hair);
}

.gd-cm-in:first-child {
    border-top: 0;
}

.gd-cm-in .gd-cell-two {
    flex: 1 1 auto;
    min-width: 0;
}

.gd-cm-inside > .gd-muted {
    margin: 0;
    padding: 16px;
}

.gd-cm-keys {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid var(--gd-hair);
    background-color: var(--gd-surface);
}

.gd-cm-keys:empty {
    display: none;
}

.gd-cm-key kbd {
    margin-inline-end: 8px;
    padding: 2px 6px;
    border: 1px solid var(--gd-hair);
    border-radius: 6px;
    background-color: var(--gd-canvas);
    font-family: var(--gd-latin);
    font-size: 13px;
    font-weight: 700;
}

.gd-cm-guide {
    padding: 0 20px 24px;
}

@media (max-width: 63.999rem) {
    .gd-cm-main {
        grid-template-columns: minmax(0, 1fr);
        padding: 12px;
    }

    .gd-cm-top {
        padding: 8px 12px;
    }

    .gd-cm-field input {
        height: 60px;
        font-size: 18px;
    }

    .gd-cm-camera {
        min-width: 60px;
        min-height: 60px;
    }

    .gd-face-hero {
        width: 112px;
        height: 112px;
        font-size: 44px;
    }

    .gd-cm-name {
        font-size: 26px;
    }

    .gd-sign-hero {
        font-size: 30px;
    }

    .gd-sign-hero .gd-sign-icon {
        width: 44px;
        height: 44px;
    }

    .gd-cm-sentence {
        font-size: 18px;
    }
}

/* ═══ ২৭. আজকের পাতা — প্রত্যেকের প্রথম পাতা ═════════════════════════ */

/*
 * ছক "সংকেত", পর্দা ৩ (Core\Filament\Widgets\Home*, ধাপ ৪গ): সাদা পাতার
 * অংশ, মাথায় শিরোনাম ও ছোট ম্লান লেখা, সারিগুলোর মাঝে সরু রেখা। সংখ্যা-
 * বোর্ডে স্টেশনের সময়ের বোর্ডের মতো সারি — আইকন · নাম · বড় সংখ্যা (GD Ank,
 * ডানে মেলানো) · এক বাক্য। রঙিন ভরাট প্রতিটি অংশে একটিই (চাপার জিনিস)।
 */
.gd-home-sheet {
    overflow: hidden;
    border: 1px solid var(--gd-hair);
    border-radius: var(--gd-radius-lg);
    background-color: var(--gd-surface);
    color: var(--gd-ink);
}

.gd-home-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gd-hair);
}

.gd-home-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

.gd-home-note {
    color: var(--gd-muted);
    font-size: 14px;
}

.gd-home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gd-home-empty,
.gd-home-foot {
    margin: 0;
    padding: 16px 20px;
    color: var(--gd-muted);
    font-size: 15px;
}

.gd-home-foot {
    padding-block: 10px;
    border-top: 1px solid var(--gd-hair);
    font-size: 13.5px;
}

.gd-home-icon {
    width: 20px;
    height: 20px;
}

.gd-home-icon-lg {
    width: 30px;
    height: 30px;
}

/* সংখ্যা-বোর্ড */
.gd-nb-row {
    display: grid;
    grid-template-columns: 36px minmax(9rem, 13rem) minmax(11rem, 15rem) minmax(0, 1fr);
    align-items: center;
    column-gap: 16px;
    padding: 14px 20px;
}

.gd-nb-row + .gd-nb-row {
    border-top: 1px solid var(--gd-hair);
}

.gd-nb-ico {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--gd-radius);
    background-color: var(--gd-canvas);
    color: var(--gd-muted);
}

.gd-nb-label {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

.gd-nb-big {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    text-align: end;
    white-space: nowrap;
}

.gd-nb-big small {
    margin-inline-start: 6px;
    color: var(--gd-muted);
    font-family: var(--gd-font);
    font-size: 18px;
    font-weight: 600;
}

.gd-nb-phrase {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding-inline-start: 12px;
    color: var(--gd-muted);
    font-size: 15px;
    line-height: 1.55;
}

.gd-nb-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

.gd-nb-trend-up   { color: var(--gd-ok); }
.gd-nb-trend-down { color: var(--gd-watch); }

.gd-nb-trend-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

/* "আজ যা করলে টাকা আসবে" ও তালিকার সারি */
.gd-todo {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
}

.gd-todo + .gd-todo,
.gd-home-head + .gd-todo {
    border-top: 0;
}

.gd-todo + .gd-todo {
    border-top: 1px solid var(--gd-hair);
}

.gd-todo-sign .gd-sign-icon {
    width: 24px;
    height: 24px;
}

.gd-todo-sign .gd-sign-label:empty {
    display: none;
}

.gd-todo-text {
    display: grid;
    min-width: 0;
}

.gd-todo-text b {
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.45;
}

.gd-todo-text span {
    color: var(--gd-muted);
    font-size: 14px;
    line-height: 1.5;
}

.gd-todo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.gd-todo-amount {
    color: var(--gd-ink);
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
}

.gd-todo-done .gd-todo-text b {
    color: var(--gd-muted);
    font-weight: 500;
    text-decoration: line-through;
}

/* "নজর দিন" */
.gd-watch-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px 20px;
    font-size: 15.5px;
    line-height: 1.45;
}

.gd-watch-row + .gd-watch-row,
.gd-mini + .gd-watch-row {
    border-top: 1px solid var(--gd-hair);
}

.gd-watch-gap {
    width: 24px;
}

.gd-watch-link {
    color: var(--gd-act-text);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.gd-watch-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.gd-watch-link:focus-visible {
    outline: 2px solid var(--gd-act-text);
    outline-offset: 2px;
    border-radius: 4px;
}

/* আজকের ভিড় — ছোট ছবি: ভরাট = আজ, ভাঙা রেখা = সাধারণ এই বার, এখনকার ঘণ্টা চাপার রঙে */
.gd-mini {
    margin: 0;
    padding: 14px 20px 16px;
    border-top: 1px solid var(--gd-hair);
}

.gd-home-head + .gd-mini {
    border-top: 0;
}

.gd-mini-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
}

.gd-mini-title {
    font-size: 16px;
    font-weight: 600;
}

.gd-mini-sub {
    color: var(--gd-muted);
    font-size: 13.5px;
}

.gd-mini-bars {
    display: grid;
    grid-template-columns: repeat(var(--gd-mini-bars, 14), minmax(0, 1fr));
    align-items: end;
    gap: 4px;
    height: 96px;
    margin-top: 12px;
}

.gd-mini-col {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
}

.gd-mini-usual {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    border: 1.5px dashed var(--gd-ctl);
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
}

.gd-mini-today {
    position: relative;
    width: 62%;
    border-radius: 3px 3px 0 0;
    background-color: var(--gd-ink);
}

.gd-mini-col.is-now .gd-mini-today {
    background-color: var(--gd-act);
}

.gd-mini-axis {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    color: var(--gd-muted);
    font-size: 13.5px;
}

.gd-mini-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
    color: var(--gd-muted);
    font-size: 14px;
}

.gd-mini-legend i {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-inline-end: 6px;
    border-radius: 3px;
    vertical-align: -1px;
}

.gd-mini-key-today {
    background-color: var(--gd-ink);
}

.gd-mini-key-usual {
    border: 1.5px dashed var(--gd-ctl);
}

.gd-watch-package {
    border-top: 1px solid var(--gd-hair);
    font-size: 15px;
}

/* রিসেপশন — কাউন্টারের বড় কার্ড আর বাকির তালিকা */
.gd-home-reception {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
    align-items: start;
    gap: 16px;
}

.gd-counter-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: 16px 20px;
    padding: 24px;
}

.gd-counter-card-ico {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: var(--gd-radius);
    background-color: var(--gd-tint);
    color: var(--gd-act-text);
}

.gd-counter-card-text p {
    margin: 4px 0 0;
    color: var(--gd-muted);
    font-size: 15.5px;
}

.gd-counter-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
}

.gd-counter-card-stats b {
    color: var(--gd-ink);
    font-size: 26px;
    font-weight: 700;
}

.gd-counter-card .gd-cbtn-xl {
    grid-column: 1 / -1;
}

.gd-cbtn-xl {
    min-height: 52px;
    padding: 0 24px;
    font-size: 17px;
    font-weight: 600;
}

/* ট্রেইনার — আজকের ক্লাস */
.gd-class-row {
    display: grid;
    grid-template-columns: minmax(6.5rem, 8rem) minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px 16px;
    padding: 14px 20px;
}

.gd-class-row + .gd-class-row {
    border-top: 1px solid var(--gd-hair);
}

.gd-class-time {
    font-size: 16px;
    font-weight: 600;
}

.gd-class-seats {
    color: var(--gd-muted);
    font-size: 15px;
    white-space: nowrap;
}

/* ট্যাবলেট ও ফোন — সারিগুলো দুই লাইনে */
@media (max-width: 63.999rem) {
    .gd-nb-row {
        grid-template-columns: 36px minmax(0, 1fr) auto;
        row-gap: 4px;
    }

    .gd-nb-phrase {
        grid-column: 2 / -1;
        padding-inline-start: 0;
    }

    .gd-nb-big {
        font-size: 32px;
    }
}

@media (max-width: 47.999rem) {
    .gd-home-head,
    .gd-nb-row,
    .gd-todo,
    .gd-watch-row,
    .gd-mini,
    .gd-class-row {
        padding-inline: 16px;
    }

    .gd-nb-big {
        font-size: 28px;
    }

    .gd-todo {
        grid-template-columns: 26px minmax(0, 1fr);
    }

    .gd-todo-actions {
        grid-column: 2 / -1;
        justify-content: flex-start;
    }

    .gd-todo-actions .gd-cbtn {
        min-height: 44px;
    }

    .gd-class-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    /* "নজর দিন" ও প্ল্যাটফর্মের সারি — লিংক বা বোতাম লেখার নিচে, লেখা চেপে সরু হয় না */
    .gd-watch-row {
        grid-template-columns: 24px minmax(0, 1fr);
        padding-inline: 16px;
    }

    .gd-watch-row > .gd-watch-link,
    .gd-watch-row > .gd-cbtn {
        grid-column: 2;
        justify-self: start;
    }

    .gd-class-row .gd-todo-text {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .gd-counter-card {
        padding: 20px 16px;
    }
}

/* ═══ ২৮. /platform-এর "আজ" ═══════════════════════════════════════ */

/*
 * প্ল্যাটফর্মের "আজ" (Saas\Filament\Pages\PlatformToday, ধাপ ৪গ) — অফিসের
 * আজকের পাতার একই অংশ (§২৭): উপরে সংখ্যা-বোর্ড, নিচে দুই কলামে কাজের
 * তালিকা, শেষে খাতা।
 */
.gd-plat {
    display: grid;
    gap: 16px;
}

.gd-plat-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
    align-items: start;
    gap: 16px;
}

.gd-plat-col {
    display: grid;
    gap: 16px;
}

.gd-plat-statuses {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
}

.gd-plat-statuses .gd-sign {
    color: var(--gd-ink);
    font-weight: 500;
}

.gd-plat-statuses .gd-sign-ok .gd-sign-icon    { color: var(--gd-ok); }
.gd-plat-statuses .gd-sign-watch .gd-sign-icon { color: var(--gd-watch); }
.gd-plat-statuses .gd-sign-stop .gd-sign-icon  { color: var(--gd-stop); }
.gd-plat-statuses .gd-sign-pause .gd-sign-icon { color: var(--gd-pause); }

.gd-plat-none,
.gd-plat-sub {
    color: var(--gd-muted);
    font-size: 14px;
}

.gd-plat-sub {
    display: block;
}

.gd-plat-domain {
    font-family: var(--gd-latin);
    font-weight: 700;
}

/* SMS — নাম ও "ব্যবহার/সীমা", নিচে সরু দাগ; সীমার সতর্কতা পেরোলে কমলা */
.gd-plat-meter {
    display: grid;
    gap: 6px;
    padding: 12px 20px;
}

.gd-plat-meter + .gd-plat-meter {
    border-top: 1px solid var(--gd-hair);
}

.gd-plat-meter-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 15px;
}

.gd-plat-bar {
    height: 8px;
    overflow: hidden;
    border-radius: 99px;
    background-color: var(--gd-canvas);
    box-shadow: inset 0 0 0 1px var(--gd-hair);
}

.gd-plat-bar i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background-color: var(--gd-ink);
}

.gd-plat-bar.is-warn i {
    background-color: var(--gd-watch);
}

/* খাতার সারি — কখন · কে কী করলেন · কোন জিম */
.gd-plat-audit-row {
    display: grid;
    grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 4px 16px;
    padding: 11px 20px;
    font-size: 15px;
}

.gd-plat-audit-row + .gd-plat-audit-row {
    border-top: 1px solid var(--gd-hair);
}

.gd-plat-when,
.gd-plat-gym {
    color: var(--gd-muted);
    font-size: 14px;
}

@media (max-width: 47.999rem) {
    .gd-plat-audit-row {
        grid-template-columns: minmax(0, 1fr);
        padding-inline: 16px;
    }

    .gd-plat-meter {
        padding-inline: 16px;
    }
}

/* ═══ ২৯. "সারোতিয়া দেখছে" — উপরের পট্টির ভেতরে ════════════════════ */

/*
 * "সারোতিয়া দেখছে: <জিম> · বের হন" — উপরের আটকে থাকা পট্টির ভেতরে, নিচের
 * সারি হিসেবে (TOPBAR_END)। পট্টিটি ভাঁজ হয় (flex-wrap), সারিটি পুরো চওড়া
 * নিয়ে নিচে নামে; রঙ প্ল্যাটফর্মের নিয়ন্ত্রণ-কক্ষের — দুই থিমেই গাঢ়, যাতে
 * জিমের অফিসের সাদা পট্টিতে ভুল হওয়ার উপায় না থাকে।
 */
.fi-topbar:has(> .gd-viewas) {
    flex-wrap: wrap;
    row-gap: 0;
}

/* প্রথম সারিটি আগের মতোই ৬৪px — খোঁজার ঘর মাঝখানে */
.fi-topbar:has(> .gd-viewas) > .fi-topbar-end {
    min-height: 64px;
}

.gd-viewas {
    display: flex;
    flex: 0 0 calc(100% + 24px);
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    order: 99;
    margin-inline-end: -24px;
    padding: 8px 24px;
    background-color: #1C1826;
    color: #F2EFF7;
    font-size: 15px;
    line-height: 1.45;
}

.gd-viewas-mark {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #F39A3E;
}

.gd-viewas-text {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    min-width: 0;
}

.gd-viewas-note {
    color: #ADA6BD;
    font-size: 14px;
}

.gd-viewas-leave {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid #E6E2EE;
    border-radius: var(--gd-radius);
    color: #FFFFFF;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.gd-viewas-leave:hover {
    background-color: rgba(255, 255, 255, .1);
}

.gd-viewas-leave:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}

/*
 * বড় পর্দায় সারিটি ঠিক ৫২px, এক লাইনে — বাঁয়ের তাক (Filament-এর fixed
 * sidebar, উপরে পট্টির ৪rem নিচে) সেই পরিমাণ নেমে বসে, নইলে সারিটি তাকের
 * প্রথম বোর্ড ঢেকে দিত।
 */
@media (min-width: 64rem) {
    .gd-viewas {
        flex-wrap: nowrap;
        height: 52px;
        padding-block: 0;
        overflow: hidden;
    }

    .gd-viewas-text {
        flex-wrap: nowrap;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .fi-body-has-topbar:has(.gd-viewas) .fi-sidebar {
        top: calc(4rem + 52px);
        height: calc(100dvh - 4rem - 52px);
    }
}

/*
 * ছোট পর্দায় পট্টির ডান ফাঁক ১৬px (বাঁয়ে ০) — সারিটি তবু কিনারা থেকে কিনারা।
 * ফোনে নিচের বার থাকলে পট্টি এক সারির (`flex-wrap: nowrap`, অংশ ২২) —
 * সারিটি থাকলে তবু ভাঁজ, নইলে সে প্রথম সারিতেই চেপে বসত।
 */
@media (max-width: 63.999rem) {
    .gd-viewas {
        flex-basis: calc(100% + 16px);
        margin-inline-end: -16px;
        padding-inline: 16px;
    }

    .fi-body .fi-topbar:has(> .gd-viewas) {
        flex-wrap: wrap;
        padding-bottom: 0;
    }
}

/* ফোনে এক সারি — জিমের নাম আর "বের হন"; "খাতায় থাকবে" লেখাটি কেবল বড় পর্দায় */
@media (max-width: 47.999rem) {
    .gd-viewas {
        flex-wrap: nowrap;
        padding-block: 6px;
    }

    .gd-viewas-text {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .gd-viewas-note {
        display: none;
    }
}

/* ═══ ৩০. "নতুন ভর্তি" — একই মোবাইলের সতর্কতা ════════════════════════ */

/* মোবাইলের ঘরের নিচে (MemberResource::duplicateMobileWarning, ধাপ ৪গ) — ▲ চিহ্ন + শব্দ, আটকায় না */
.gd-dup {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 8px 12px;
    border: 1px solid var(--gd-watch);
    border-radius: var(--gd-radius);
    background-color: var(--gd-watch-bg);
    color: var(--gd-ink);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
}

.gd-dup::before {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background-color: var(--gd-watch);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.8 23.4 21.6H.6Zm-1.15 6.6v7.2h2.3V8.4Zm1.15 8.45a1.35 1.35 0 1 0 0 2.7 1.35 1.35 0 0 0 0-2.7Z'/%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'%3E%3Cpath fill-rule='evenodd' d='M12 1.8 23.4 21.6H.6Zm-1.15 6.6v7.2h2.3V8.4Zm1.15 8.45a1.35 1.35 0 1 0 0 2.7 1.35 1.35 0 0 0 0-2.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gd-dup-link {
    color: var(--gd-act-text);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}