@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --app-sidebar-width: 240px;
    --app-header-height: 56px;
}

html,
body,
#app {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
        Arial, 'Noto Sans', sans-serif;
    background-color: #f5f7fa;
    color: #1f2937;
}

/* Element Plus menu tweaks */
.el-menu--vertical {
    border-right: none !important;
}

.app-layout {
    height: 100vh;
}

.app-sidebar {
    /* Element Plus's .el-aside uses width: var(--el-aside-width) and its
       stylesheet loads after admin.css (it's injected by the JS import in
       main.js). Override the variable directly so width changes win
       regardless of cascade order. */
    --el-aside-width: var(--app-sidebar-width);
    width: var(--app-sidebar-width);
    background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.2s ease;
}

.app-sidebar.app-sidebar--collapsed {
    --el-aside-width: 64px;
    width: 64px;
}

.app-sidebar--collapsed .app-brand {
    justify-content: center;
    padding: 18px 0;
}

.app-sidebar--collapsed .el-menu {
    border-right: none;
}

/* Element Plus's collapsed menu items render at ~64px wide; ensure the
   icon is centered and there's no leftover label space. */
.app-sidebar--collapsed .el-menu-item {
    padding: 0 !important;
    justify-content: center;
}

.app-sidebar--drawer {
    width: 100%;
    height: 100%;
}

.app-sidebar-footer {
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.app-sidebar--collapsed .app-sidebar-footer {
    padding: 12px 8px;
}

.app-sidebar-drawer .el-drawer__body {
    padding: 0;
    background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 100%);
}

.app-sidebar .el-menu {
    background: transparent;
}

.app-sidebar .el-menu-item,
.app-sidebar .el-sub-menu__title {
    color: rgba(255, 255, 255, 0.85);
}

.app-sidebar .el-menu-item:hover,
.app-sidebar .el-sub-menu__title:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}

.app-sidebar .el-menu-item.is-active {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    border-left: 3px solid #60a5fa;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.3px;
}

.app-brand-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.app-header {
    height: var(--app-header-height);
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    gap: 10px;
}

.app-header-title {
    font-weight: 600;
    font-size: 15px;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.app-header-locale-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.app-header-locale-globe {
    font-size: 16px;
}

.app-header-locale-caret {
    font-size: 12px;
    opacity: 0.6;
}

.el-dropdown-menu__item.is-active-locale {
    color: var(--el-color-primary);
    font-weight: 600;
}

.app-header-burger {
    padding: 4px 8px;
}

.app-main {
    padding: 20px;
    overflow: auto;
    background: #f5f7fa;
}

.page-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.page-card + .page-card {
    margin-top: 16px;
}

.page-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-version-chip {
    font-size: 11px;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 999px;
}

/* ========================================================================
 * Mobile / tablet responsive rules
 * Hide the desktop sidebar, expose the hamburger, and let toolbar inputs
 * wrap to a column so fixed widths (260px / 200px / etc.) don't overflow.
 * Tables intentionally keep horizontal scroll — preserves data density.
 * ====================================================================== */
@media (max-width: 900px) {
    .app-header-switch-ui-label {
        display: none;
    }
}

@media (max-width: 768px) {
    .app-sidebar--desktop {
        display: none !important;
    }

    .app-header {
        padding: 0 12px;
    }

    .app-header-title {
        font-size: 14px;
    }

    .app-main {
        padding: 12px;
    }

    .page-card {
        padding: 14px;
        border-radius: 10px;
    }

    .page-card-title {
        font-size: 15px;
        margin-bottom: 12px;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Toolbar rows above tables: let inputs/selects/buttons fill the row
       instead of using their hard-coded fixed widths. Targets the inline
       flex wrappers used across the admin pages. */
    .page-card .el-input,
    .page-card .el-select,
    .page-card .el-input-number {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Header search inside .page-card-title — let it span the row when
       it wraps under the title. */
    .page-card-title > div {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Dialogs: full-bleed on mobile so forms aren't cramped. */
    .el-dialog {
        width: 94vw !important;
        max-width: 94vw !important;
        margin: 6vh auto !important;
    }

    .el-message-box {
        width: 90vw !important;
        max-width: 90vw !important;
    }

    /* Pagination: hide total/sizes/jumper on mobile, keep prev/pager/next.
       Avoids per-page changes to the layout="" prop. */
    .el-pagination .el-pagination__total,
    .el-pagination .el-pagination__sizes,
    .el-pagination .el-pagination__jump {
        display: none !important;
    }

    .el-pagination {
        flex-wrap: wrap;
        justify-content: center !important;
    }

    /* Drawer-based dialogs (Share / Logs) — give them more room. */
    .el-drawer {
        width: 92vw !important;
    }

    /* Menu drawer is just navigation links — keep it narrow so the page
       behind stays partly visible. */
    .el-drawer.app-sidebar-drawer {
        width: 224px !important;
    }

    /* Menu items inside the drawer keep the desktop look; just nudge the
       gap since vertical space is precious on phones. */
    .app-sidebar--drawer .el-menu-item {
        height: 48px;
        line-height: 48px;
    }
}

@media (max-width: 480px) {
    .app-header-actions {
        gap: 6px;
    }

    /* Tight header on small phones — drop the language label, keep the
       globe + caret. The dropdown still reveals the full names. */
    .app-header-locale-label {
        display: none;
    }

    .app-main {
        padding: 8px;
    }

    .page-card {
        padding: 12px;
    }

    /* Tab labels can get cramped — let them wrap rather than truncating. */
    .el-tabs__item {
        padding: 0 12px !important;
    }
}