/* =========================================================
   FC本部OS - Desktop Responsive Overrides
   Scope: PC / tablet-like desktop widths. Smartphone-specific layout is out of scope.
========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    min-width: 1024px;
}

.fi-main,
.fi-main-ctn,
.fi-page,
.fi-page-content,
.fc-page-shell,
.fc-dashboard-page,
.fc-card,
.fc-side-card,
.fc-kpi-card,
.fc-dashboard-panel,
.fc-dashboard-alert-panel {
    min-width: 0 !important;
}

.fc-page-shell {
    max-width: min(1540px, 100%) !important;
}

.fc-card,
.fc-side-card,
.fc-kpi-card,
.fc-dashboard-panel,
.fc-dashboard-alert-panel {
    max-width: 100% !important;
}

.fc-app-header,
.fc-app-header-left,
.fc-app-header-right,
.fc-app-header-top,
.fc-app-header-bottom {
    min-width: 0 !important;
}

.fc-app-header-top,
.fc-app-header-bottom,
.fc-card-head-actions,
.fc-filter-actions,
.integration-actions,
.calendar-toolbar-actions {
    flex-wrap: wrap !important;
}

.fc-app-title,
.fc-card-title,
.fc-side-card-title,
.fc-dashboard-panel-head h2,
.calendar-current-title {
    overflow-wrap: anywhere;
}

.fi-global-search,
.fi-global-search-field,
.fc-app-search,
.fc-app-period {
    min-width: 0 !important;
}

.fc-grid-2,
.integration-grid,
.fc-lead-main-grid,
.fc-seminar-main-grid,
.fc-dashboard-chart-grid,
.fc-dashboard-bottom-grid,
.fc-dashboard-kpi-grid,
.fc-kpi-grid,
.fc-filter-card,
.fc-inline-filter,
.calendar-summary-grid {
    min-width: 0 !important;
}

.fc-table-wrap,
.fi-ta-content,
.fi-ta-table,
.fi-ta-ctn {
    max-width: 100% !important;
}

.fc-table-wrap {
    overflow-x: auto !important;
}

.fc-mock-table,
.fc-seminar-table {
    max-width: none !important;
}

/* Sales agency lead dashboard: target by actual card existence, not by fixed section order. */
.fc-dashboard-page > section:has(.sales-agency-lead-card),
.fc-dashboard-page > section:has(.sales-agency-lead-card) > div,
.fc-dashboard-page > section:has(.sales-agency-lead-card) > aside,
.sales-agency-lead-card,
.sales-agency-lead-card > div {
    min-width: 0 !important;
}

/* Large desktop: avoid over-stretching content while keeping wide dashboards usable. */
@media (min-width: 1600px) {
    .fc-page-shell:not(.fc-dashboard-page) {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }

    .fc-dashboard-page {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }
}

/* Standard laptop and lower desktop widths. */
@media (max-width: 1440px) {
    :root {
        --fc-sidebar-width: 204px !important;
    }

    .fi-topbar {
        left: var(--fc-sidebar-width) !important;
        width: calc(100% - var(--fc-sidebar-width)) !important;
    }

    .fi-main-ctn {
        margin-left: var(--fc-sidebar-width) !important;
        width: calc(100% - var(--fc-sidebar-width)) !important;
    }

    .fi-topbar nav,
    .fi-topbar > nav {
        padding-left: 20px !important;
        padding-right: 20px !important;
        gap: 12px !important;
    }

    .fc-topbar-left {
        min-width: 180px !important;
    }

    .fc-topbar-current-title {
        max-width: 280px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 22px !important;
    }

    .fi-global-search,
    .fi-global-search-field {
        width: clamp(220px, 24vw, 300px) !important;
        max-width: clamp(220px, 24vw, 300px) !important;
    }

    .fi-sidebar-header {
        padding-left: 22px !important;
        padding-right: 18px !important;
    }

    .fi-sidebar-header::before {
        font-size: 21px !important;
    }

    .fi-sidebar-item a,
    .fi-sidebar-item-button,
    .fi-sidebar-group-button {
        min-height: 40px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        font-size: 13px !important;
    }

    .fc-page-shell {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .fc-dashboard-page {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .fc-app-header {
        grid-template-columns: minmax(240px, .9fr) minmax(0, 1.1fr) !important;
        gap: 16px !important;
    }

    .fc-app-search {
        width: clamp(220px, 24vw, 300px) !important;
    }

    .fc-app-period {
        width: clamp(210px, 22vw, 260px) !important;
    }

    .fc-dashboard-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .fc-dashboard-chart-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr) !important;
    }

    .fc-dashboard-bottom-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    }

    .fc-dashboard-bottom-grid > *:last-child {
        grid-column: 1 / -1 !important;
    }

    .fc-seminar-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .fc-filter-card {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .fc-filter-card .fc-filter-actions {
        grid-column: 1 / -1 !important;
    }

    .fc-dashboard-page > section:has(.sales-agency-lead-card) {
        grid-template-columns: minmax(0, 1fr) clamp(260px, 21vw, 286px) !important;
        gap: 12px !important;
    }

    .sales-agency-lead-card {
        grid-template-columns: minmax(184px, .88fr) minmax(260px, 1.45fr) minmax(132px, .45fr) !important;
        gap: 10px !important;
        padding: 9px 10px !important;
    }

    .sales-agency-lead-card > div:nth-child(2) {
        grid-template-columns: 112px minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    .sales-agency-lead-card > div:nth-child(3) {
        font-size: 11px !important;
    }
}

/* Mid laptop: keep the page two-column, but reduce the right rail and card pressure. */
@media (max-width: 1360px) {
    :root {
        --fc-sidebar-width: 196px !important;
    }

    .fi-topbar {
        left: var(--fc-sidebar-width) !important;
        width: calc(100% - var(--fc-sidebar-width)) !important;
    }

    .fi-main-ctn {
        margin-left: var(--fc-sidebar-width) !important;
        width: calc(100% - var(--fc-sidebar-width)) !important;
    }

    .fc-dashboard-page > section:has(.sales-agency-lead-card) {
        grid-template-columns: minmax(0, 1fr) 248px !important;
        gap: 10px !important;
    }

    .fc-dashboard-page > section:has(.sales-agency-lead-card) > div:first-child,
    .fc-dashboard-page > section:has(.sales-agency-lead-card) > aside > div {
        padding: 14px !important;
    }

    .sales-agency-lead-card {
        grid-template-columns: minmax(170px, .82fr) minmax(250px, 1.5fr) minmax(118px, .4fr) !important;
        gap: 8px !important;
        padding: 9px !important;
    }

    .sales-agency-lead-card > div:first-child div:first-child > div:first-child {
        max-width: 190px !important;
    }

    .sales-agency-lead-card > div:nth-child(2) {
        grid-template-columns: 106px minmax(0, 1fr) !important;
        gap: 7px !important;
    }
}

/* Small laptop: right rail moves below only after the layout is genuinely constrained. */
@media (max-width: 1280px) {
    :root {
        --fc-sidebar-width: 188px !important;
    }

    .fi-topbar {
        left: var(--fc-sidebar-width) !important;
        width: calc(100% - var(--fc-sidebar-width)) !important;
    }

    .fi-main-ctn {
        margin-left: var(--fc-sidebar-width) !important;
        width: calc(100% - var(--fc-sidebar-width)) !important;
    }

    .fi-topbar nav,
    .fi-topbar > nav {
        padding-left: 16px !important;
        padding-right: 16px !important;
        gap: 10px !important;
    }

    .fc-topbar-left {
        min-width: 150px !important;
    }

    .fc-topbar-current-title {
        max-width: 220px !important;
        font-size: 20px !important;
    }

    .fi-global-search,
    .fi-global-search-field {
        width: clamp(180px, 22vw, 250px) !important;
        max-width: clamp(180px, 22vw, 250px) !important;
    }

    .fi-sidebar-header {
        height: 74px !important;
        min-height: 74px !important;
        padding: 24px 18px 10px !important;
    }

    .fi-sidebar-header::before {
        font-size: 19px !important;
    }

    .fi-sidebar-nav {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .fi-sidebar-item a,
    .fi-sidebar-item-button,
    .fi-sidebar-group-button {
        min-height: 38px !important;
        border-radius: 10px !important;
        font-size: 12.5px !important;
    }

    .fi-sidebar-group-label {
        padding-left: 10px !important;
        padding-right: 10px !important;
        font-size: 11px !important;
    }

    .fc-page-shell,
    .fc-dashboard-page {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .fc-app-header {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .fc-app-header-right {
        align-items: stretch !important;
    }

    .fc-app-header-top,
    .fc-app-header-bottom {
        justify-content: flex-start !important;
    }

    .fc-app-search,
    .fc-app-period {
        width: min(100%, 360px) !important;
    }

    .fc-grid-2,
    .integration-grid,
    .fc-seminar-main-grid,
    .fc-lead-main-grid {
        grid-template-columns: 1fr !important;
    }

    .fc-side-column {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .fc-dashboard-kpi-grid,
    .fc-seminar-kpis,
    .fc-lead-kpis,
    .calendar-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .fc-dashboard-chart-grid,
    .fc-dashboard-bottom-grid {
        grid-template-columns: 1fr !important;
    }

    .fc-filter-card,
    .fc-inline-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .fc-filter-actions,
    .fc-inline-filter .fc-filter-actions {
        grid-column: 1 / -1 !important;
    }

    .integration-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .fc-dashboard-store-status {
        grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) !important;
    }

    .fc-dashboard-page > section:has(.sales-agency-lead-card) {
        grid-template-columns: 1fr !important;
    }

    .fc-dashboard-page > section:has(.sales-agency-lead-card) > aside {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .sales-agency-lead-card {
        grid-template-columns: minmax(190px, .9fr) minmax(0, 1.55fr) 150px !important;
        gap: 10px !important;
        padding: 9px 10px !important;
    }

    .sales-agency-lead-card > div:nth-child(2) {
        grid-template-columns: 112px minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    .sales-agency-lead-card > div:nth-child(3) {
        font-size: 11px !important;
    }
}

/* Narrow desktop / small notebook. Smartphone UX is not targeted, but prevent broken PC views. */
@media (max-width: 1160px) {
    :root {
        --fc-sidebar-width: 178px !important;
        --fc-topbar-height: 66px !important;
    }

    .fi-topbar {
        left: var(--fc-sidebar-width) !important;
        width: calc(100% - var(--fc-sidebar-width)) !important;
        height: var(--fc-topbar-height) !important;
        min-height: var(--fc-topbar-height) !important;
    }

    .fi-main-ctn {
        margin-left: var(--fc-sidebar-width) !important;
        width: calc(100% - var(--fc-sidebar-width)) !important;
    }

    .fi-main {
        padding-top: var(--fc-topbar-height) !important;
    }

    .fi-topbar nav,
    .fi-topbar > nav {
        height: var(--fc-topbar-height) !important;
        min-height: var(--fc-topbar-height) !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .fc-topbar-current-title {
        max-width: 180px !important;
        font-size: 18px !important;
    }

    .fi-global-search,
    .fi-global-search-field {
        width: 180px !important;
        max-width: 180px !important;
    }

    .fi-topbar .fi-icon-btn,
    .fi-topbar .fi-avatar,
    .fi-topbar img {
        width: 34px !important;
        height: 34px !important;
    }

    .fi-sidebar-header {
        height: 68px !important;
        min-height: 68px !important;
        padding: 22px 14px 8px !important;
    }

    .fi-sidebar-header::before {
        font-size: 17px !important;
    }

    .fi-sidebar-item a,
    .fi-sidebar-item-button,
    .fi-sidebar-group-button {
        min-height: 36px !important;
        font-size: 12px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .fc-button,
    .fc-app-button {
        min-height: 36px !important;
        height: 36px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        font-size: 12px !important;
    }

    .fc-kpi-card,
    .fc-dashboard-kpi-card {
        min-height: 86px !important;
        padding: 12px 14px !important;
        gap: 12px !important;
    }

    .fc-kpi-icon,
    .fc-dashboard-kpi-icon {
        width: 44px !important;
        height: 44px !important;
        flex-basis: 44px !important;
        font-size: 20px !important;
    }

    .fc-kpi-value,
    .fc-dashboard-kpi-value {
        font-size: 22px !important;
    }

    .fc-side-column {
        grid-template-columns: 1fr !important;
    }

    .fc-dashboard-store-status,
    .fc-donut-summary {
        grid-template-columns: 1fr !important;
    }

    .fc-dashboard-donut-wrap,
    .fc-css-donut {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .fc-mock-table {
        min-width: 900px !important;
    }

    .fc-dashboard-page > section:has(.sales-agency-lead-card) > aside {
        grid-template-columns: 1fr !important;
    }

    .sales-agency-lead-card {
        grid-template-columns: 1fr !important;
        align-items: start !important;
        gap: 8px !important;
    }

    .sales-agency-lead-card > div:nth-child(2) {
        grid-template-columns: 128px minmax(0, 1fr) !important;
    }

    .sales-agency-lead-card > div:nth-child(3) {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
}

/* Very small desktop width guard. */
@media (max-width: 1040px) {
    .fc-dashboard-kpi-grid,
    .fc-seminar-kpis,
    .fc-lead-kpis,
    .calendar-summary-grid,
    .integration-info-grid,
    .fc-filter-card,
    .fc-inline-filter {
        grid-template-columns: 1fr !important;
    }

    .fc-app-header-top,
    .fc-app-header-bottom,
    .fc-filter-actions,
    .integration-actions,
    .calendar-toolbar-card,
    .calendar-toolbar-actions {
        align-items: stretch !important;
    }

    .fc-app-header-top > *,
    .fc-app-header-bottom > *,
    .fc-filter-actions > *,
    .integration-actions > * {
        max-width: 100% !important;
    }
}