/* ============================================================
   ConfigGuard Service Desk - Responsive Styles
   Mobile, tablet, desktop, and print media queries
   ============================================================ */

/* ============================================================
   Tablet & Small Desktop (max-width: 1200px)
   ============================================================ */
@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sd-columns {
        grid-template-columns: 1fr 280px;
    }

    .info-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================================
   Mobile / Tablet (max-width: 1024px) - Sidebar Collapse
   ============================================================ */
@media (max-width: 1024px) {
    /* Show hamburger toggle */
    .sd-header__hamburger {
        display: flex;
    }

    /* Sidebar off-canvas */
    .sd-sidebar {
        transform: translateX(-100%);
    }

    .sd-sidebar.open {
        transform: translateX(0);
    }

    .sd-sidebar-overlay.open {
        display: block;
    }

    /* Main content full width */
    .sd-main {
        margin-left: 0;
    }

    .sd-footer {
        margin-left: 0;
    }

    /* Two-column to single column */
    .sd-columns {
        grid-template-columns: 1fr;
    }

    .sd-columns__sidebar {
        order: -1;
    }
}

/* ============================================================
   Small Tablet (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
    .sd-main {
        padding: var(--space-md);
    }

    .sd-page__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .sd-page__actions {
        width: 100%;
    }

    .sd-page__actions .btn {
        flex: 1;
    }

    .sd-page__toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    /* Stats grid to 2 cols */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    /* Form rows stack */
    .sd-form__row {
        flex-direction: column;
    }

    .sd-form__row--2col {
        grid-template-columns: 1fr;
    }

    /* Info grid single column */
    .info-grid {
        grid-template-columns: 1fr;
    }

    /* Filter tabs scroll */
    .filter-tabs {
        gap: 0;
    }

    /* Table responsive */
    .table-responsive {
        margin-left: calc(-1 * var(--space-md));
        margin-right: calc(-1 * var(--space-md));
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    /* Reply header stack */
    .reply__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }

    /* Header user info hide on small screens */
    .sd-header__user {
        display: none;
    }

    /* Breadcrumb smaller */
    .breadcrumb {
        font-size: 0.75rem;
    }

    /* Detail list single column */
    .detail-list {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
    }

    .detail-list dt {
        margin-top: var(--space-sm);
    }

    .detail-list dt:first-child {
        margin-top: 0;
    }
}

/* ============================================================
   Phone (max-width: 480px)
   ============================================================ */
@media (max-width: 480px) {
    .sd-main {
        padding: var(--space-sm);
    }

    .sd-page__title {
        font-size: 1.25rem;
    }

    /* Stats grid single column */
    .stats-grid {
        grid-template-columns: 1fr;
    }

    /* Stat card compact */
    .stat-card {
        padding: var(--space-md);
    }

    .stat-card__value {
        font-size: 1.5rem;
    }

    /* Auth card full width */
    .sd-auth {
        padding: var(--space-md);
    }

    .sd-auth__card {
        padding: var(--space-lg) var(--space-md);
    }

    /* Card body compact */
    .card__body {
        padding: var(--space-md);
    }

    .card__header {
        padding: var(--space-sm) var(--space-md);
    }

    /* Form actions stack */
    .sd-form__actions {
        flex-direction: column;
    }

    .sd-form__actions .btn {
        width: 100%;
    }

    /* Button block on mobile */
    .btn--block {
        width: 100%;
    }

    /* Category row compact */
    .category-row {
        padding: var(--space-sm) var(--space-md);
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    /* License key smaller */
    .license-key--large {
        font-size: 0.875rem;
        padding: var(--space-sm) var(--space-md);
    }

    /* Error page smaller */
    .error-page__code {
        font-size: 4rem;
    }

    .error-page__message {
        font-size: 1.25rem;
    }

    /* Pagination compact */
    .pagination-link {
        min-width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    /* Header title hide on very small */
    .sd-header__title {
        display: none;
    }
}

/* ============================================================
   Print Styles
   ============================================================ */
@media print {
    .sd-header,
    .sd-sidebar,
    .sd-sidebar-overlay,
    .sd-footer,
    .sd-header__hamburger,
    .sd-page__actions,
    .sd-form__actions,
    .filter-tabs,
    .pagination-nav,
    .flash__close,
    .btn {
        display: none !important;
    }

    .sd-main {
        margin-left: 0;
        padding: 0;
    }

    body, .sd-body {
        background: #fff;
        color: #000;
        padding: 0;
    }

    .card, .reply, .stat-card {
        border-color: #ccc;
        background: #fff;
        box-shadow: none;
    }

    .table th {
        background: #eee;
        color: #000;
    }

    .table td {
        color: #000;
        border-color: #ccc;
    }

    a {
        color: #000;
        text-decoration: underline;
    }
}