/**
 * Portal de Assinaturas - Estilos Responsivos
 * Mobile-first approach with breakpoints
 */

/* ============================================
   BASE MOBILE STYLES (default)
   ============================================ */

/* Typography adjustments for mobile */
h1 {
    font-size: 1.75rem !important;
    line-height: 1.3;
}

h2 {
    font-size: 1.25rem !important;
}

h3 {
    font-size: 1.1rem !important;
}

/* Container padding for mobile */
.container {
    padding: 0 15px !important;
    margin: 20px auto !important;
}

/* Card adjustments */
.card {
    padding: 20px !important;
    border-radius: 12px !important;
    margin-bottom: 15px !important;
}

/* Navbar mobile */
.navbar {
    padding: 12px 15px !important;
}

.navbar-content {
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

.navbar-brand {
    font-size: 20px !important;
}

/* Hero section mobile */
.hero {
    padding: 40px 15px !important;
}

.hero h1 {
    font-size: 1.75rem !important;
}

.hero p {
    font-size: 1rem !important;
}

/* Cards grid mobile */
.cards {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
}

/* Form elements mobile */
input[type="text"],
input[type="email"],
input[type="file"],
select,
textarea {
    width: 100% !important;
    padding: 12px !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
    border-radius: 8px !important;
}

/* Buttons mobile */
.btn,
button {
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
    margin-bottom: 10px;
}

/* Table responsive */
.status-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.status-table th,
.status-table td {
    padding: 10px 8px !important;
    font-size: 13px !important;
}

/* PDF viewer box mobile */
.pdf-box {
    height: 300px !important;
    border-radius: 8px !important;
}

.pdf-box iframe {
    height: 100% !important;
    width: 100% !important;
}

/* Signatário input groups */
.signatario-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.signatario-group input {
    flex: none !important;
    width: 100% !important;
}

/* Icon circles mobile */
.icon-circle,
.card-icon {
    width: 60px !important;
    height: 60px !important;
    font-size: 28px !important;
}

/* Info grid mobile */
.info-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* Document meta display */
.doc-meta {
    display: block !important;
}

.doc-meta > div {
    margin-bottom: 15px;
}

/* Next action card */
.next-action-card {
    padding: 15px !important;
}

/* Success/Error alerts */
.alert {
    padding: 15px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
}

/* Token/Link display */
.token-box,
.link-box,
.code-box {
    word-break: break-all !important;
    font-size: 12px !important;
    padding: 10px !important;
}

/* Footer mobile */
footer {
    padding: 20px 15px !important;
    font-size: 12px !important;
}

/* ============================================
   TABLET STYLES (min-width: 768px)
   ============================================ */
@media screen and (min-width: 768px) {
    h1 {
        font-size: 2.25rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    .container {
        padding: 0 30px !important;
        margin: 30px auto !important;
    }

    .card {
        padding: 30px !important;
    }

    .navbar-content {
        flex-direction: row;
    }

    .hero {
        padding: 60px 30px !important;
    }

    .hero h1 {
        font-size: 2.5rem !important;
    }

    .cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .btn,
    button {
        width: auto !important;
    }

    .pdf-box {
        height: 400px !important;
    }

    .signatario-group {
        flex-direction: row !important;
    }

    .signatario-group input {
        flex: 1 !important;
    }

    .icon-circle,
    .card-icon {
        width: 70px !important;
        height: 70px !important;
        font-size: 32px !important;
    }

    .info-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
}

/* ============================================
   DESKTOP STYLES (min-width: 1024px)
   ============================================ */
@media screen and (min-width: 1024px) {
    h1 {
        font-size: 2.5rem !important;
    }

    .container {
        padding: 0 20px !important;
        margin: 40px auto !important;
    }

    .card {
        padding: 40px !important;
    }

    .navbar {
        padding: 20px 40px !important;
    }

    .hero {
        padding: 80px 20px !important;
    }

    .hero h1 {
        font-size: 3rem !important;
    }

    .cards {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 30px !important;
    }

    .pdf-box {
        height: 500px !important;
    }

    .icon-circle,
    .card-icon {
        width: 80px !important;
        height: 80px !important;
        font-size: 36px !important;
    }

    .info-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Hide on mobile */
@media screen and (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Hide on desktop */
@media screen and (min-width: 768px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Text truncation for long content */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Break long words/links */
.break-word {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Safe area for notch devices */
@supports (padding: max(0px)) {
    .container {
        padding-left: max(15px, env(safe-area-inset-left)) !important;
        padding-right: max(15px, env(safe-area-inset-right)) !important;
    }
}

/* Touch-friendly targets */
@media (hover: none) and (pointer: coarse) {
    .btn,
    button,
    a.btn {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Prevent horizontal scroll */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Better focus states for accessibility */
:focus-visible {
    outline: 3px solid var(--gold, #c9a961);
    outline-offset: 2px;
}