/* ==========================================================================
   Twilio Communications Platform - Custom Stylesheet
   ========================================================================== */

:root {
    --sidebar-width: 260px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.login-bg {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #1d4ed8 100%);
}

/* Sidebar Layout */
.app-sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    transition: margin-left 0.25s ease;
}

.app-sidebar .nav-link {
    border-radius: 0.5rem;
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8) !important;
}

.app-sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff !important;
}

.app-sidebar .nav-link.active {
    background-color: #0d6efd;
    color: #fff !important;
    font-weight: 600;
}

@media (max-width: 991.98px) {
    .app-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1045;
        margin-left: calc(-1 * var(--sidebar-width));
    }
    .app-sidebar.show {
        margin-left: 0;
    }
}

/* Responsive Data Table (modern-web-guidance: responsive-table) */
.table-wrapper {
    overflow: auto;
    max-inline-size: 100%;
    max-block-size: min(620px, 78vh);
    container-type: inline-size;
}

.table-wrapper table {
    border-collapse: separate;
    border-spacing: 0;
}

.table-wrapper thead {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
}

/* Form Validation After Interaction (modern-web-guidance: validate-input-after-interaction) */
.hint {
    display: block;
    color: #5f6368;
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

.error-msg {
    display: none;
    color: #d93025;
    font-size: 0.825rem;
    margin-top: 0.25rem;
}

input:user-invalid,
textarea:user-invalid,
select:user-invalid,
input.user-invalid-fallback,
textarea.user-invalid-fallback,
select.user-invalid-fallback {
    border-color: #d93025;
    background-color: #fce8e6;
}

input:user-invalid + .error-msg,
input.user-invalid-fallback + .error-msg,
.input-group:has(input:user-invalid) + .error-msg,
.input-group:has(input.user-invalid-fallback) + .error-msg {
    display: block;
}

input:user-valid,
textarea:user-valid {
    border-color: #188038;
}

.code-pill {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.78rem;
    background: #f1f5f9;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    color: #334155;
}