/* ======================================
   COMPONENTES ESPECÍFICOS - MOBILE
   Melhorias para calculadoras, conversores e formulários
   ====================================== */

/* ========== CALCULADORA DE IMC ========== */
@media (max-width: 767px) {
  .imc-form .form-group {
    margin-bottom: 16px !important;
  }
  
  .imc-result {
    text-align: center !important;
    padding: 20px !important;
  }
  
  .imc-value {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }
  
  .imc-number {
    font-size: 32px !important;
    font-weight: bold !important;
  }
  
  .imc-category {
    font-size: 18px !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    background: var(--panel2) !important;
  }
  
  .imc-table table {
    font-size: 11px !important;
  }
  
  .imc-table th,
  .imc-table td {
    padding: 6px 4px !important;
  }
}

/* ========== CALCULADORA DE CALORIAS ========== */
@media (max-width: 767px) {
  .calories-form .form-group {
    margin-bottom: 16px !important;
  }
  
  .calories-result {
    padding: 16px !important;
  }
  
  .calories-value {
    text-align: center !important;
    margin-bottom: 20px !important;
  }
  
  .main-value {
    font-size: 28px !important;
    display: block !important;
  }
  
  .unit {
    font-size: 16px !important;
    display: block !important;
    margin-top: 4px !important;
  }
  
  .macros-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  .macro-item {
    padding: 12px !important;
    border-radius: 12px !important;
    background: var(--panel2) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  
  .macro-icon {
    font-size: 24px !important;
    min-width: 40px !important;
  }
  
  .macro-info {
    flex: 1 !important;
  }
  
  .macro-name {
    font-weight: bold !important;
    font-size: 14px !important;
  }
  
  .macro-amount {
    font-size: 16px !important;
    font-weight: bold !important;
    color: var(--brand) !important;
  }
  
  .macro-calories {
    font-size: 12px !important;
    color: var(--muted) !important;
  }
}

/* ========== CONVERSORES ========== */
@media (max-width: 767px) {
  .converters-container {
    padding: 12px !important;
  }
  
  .conv-pane {
    padding: 12px 0 !important;
  }
  
  /* Conversores em stack */
  .conv-pane .row {
    flex-direction: column !important;
    gap: 12px !important;
  }
  
  .conv-pane .col-4,
  .conv-pane .col-3,
  .conv-pane .col-2 {
    width: 100% !important;
  }
  
  /* Labels dos conversores */
  .conv-pane label {
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    display: block !important;
  }
  
  /* Inputs dos conversores */
  .conv-pane input,
  .conv-pane select {
    width: 100% !important;
    padding: 10px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
  }
}

/* ========== EDITOR DE PDF ========== */
@media (max-width: 767px) {
  .file-upload-area {
    padding: 30px 15px !important;
    text-align: center !important;
    font-size: 14px !important;
  }
  
  .file-list {
    margin: 12px 0 !important;
  }
  
  .file-list-item {
    padding: 8px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
  }
  
  .primary-btn {
    width: 100% !important;
    padding: 12px !important;
    font-size: 16px !important;
    margin-top: 12px !important;
  }
  
  .pdf-info {
    font-size: 12px !important;
    padding: 12px !important;
  }
  
  .info-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  .info-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 12px !important;
    background: var(--panel2) !important;
    border-radius: 8px !important;
  }
  
  .info-icon {
    font-size: 20px !important;
    min-width: 30px !important;
  }
}

/* ========== GERADOR DE QR CODE ========== */
@media (max-width: 767px) {
  #qrText {
    min-height: 80px !important;
    font-size: 16px !important;
    padding: 12px !important;
  }
  
  #qrCanvas {
    max-width: 200px !important;
    max-height: 200px !important;
    margin: 16px auto !important;
    display: block !important;
  }
  
  .qr-controls {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  
  .qr-controls button {
    width: 100% !important;
  }
}

/* ========== COMPRESSOR DE IMAGEM ========== */
@media (max-width: 767px) {
  .comp-controls {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  .comp-preview {
    text-align: center !important;
  }
  
  #compCanvas {
    max-width: 100% !important;
    height: auto !important;
    max-height: 250px !important;
  }
  
  #compInfo {
    font-size: 12px !important;
    text-align: center !important;
    margin-top: 8px !important;
  }
}

/* ========== VALIDADORES (CPF, JSON) ========== */
@media (max-width: 767px) {
  .validator-input {
    font-size: 16px !important;
    padding: 12px !important;
  }
  
  .validator-result {
    padding: 16px !important;
    border-radius: 12px !important;
    text-align: center !important;
  }
  
  .validation-success {
    background: rgba(25, 195, 125, 0.1) !important;
    border: 1px solid var(--ok) !important;
    color: var(--ok) !important;
  }
  
  .validation-error {
    background: rgba(255, 176, 32, 0.1) !important;
    border: 1px solid var(--warn) !important;
    color: var(--warn) !important;
  }
}

/* ========== POMODORO E TIMER ========== */
@media (max-width: 767px) {
  .timer-display {
    font-size: 48px !important;
    text-align: center !important;
    margin: 20px 0 !important;
    font-family: 'Courier New', monospace !important;
  }
  
  .timer-controls {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
  }
  
  .timer-btn {
    min-width: 80px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
  }
  
  .pomodoro-settings {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }
  
  .time-input {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  
  .time-input input {
    width: 60px !important;
    text-align: center !important;
  }
}

/* ========== KANBAN BOARD ========== */
@media (max-width: 767px) {
  .kanban-board {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    overflow-x: visible !important;
  }
  
  .kanban-column {
    min-width: auto !important;
    width: 100% !important;
  }
  
  .kanban-header {
    padding: 12px !important;
    font-size: 14px !important;
  }
  
  .kanban-card {
    padding: 12px !important;
    margin-bottom: 8px !important;
    font-size: 13px !important;
  }
  
  .card-priority {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }
}

/* ========== GANTT CHART ========== */
@media (max-width: 767px) {
  .gantt-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .gantt-chart {
    min-width: 600px !important;
    font-size: 12px !important;
  }
  
  .gantt-task {
    height: 30px !important;
    line-height: 30px !important;
    font-size: 11px !important;
  }
  
  .gantt-controls {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  
  .gantt-controls button {
    font-size: 12px !important;
    padding: 8px !important;
  }
}

/* ========== CALCULADORA CIENTÍFICA ========== */
@media (max-width: 767px) {
  .calc-display {
    font-size: 24px !important;
    padding: 16px !important;
    text-align: right !important;
    min-height: 60px !important;
  }
  
  .calc-buttons {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
  }
  
  .calc-btn {
    padding: 16px 8px !important;
    font-size: 16px !important;
    min-height: 50px !important;
    border-radius: 8px !important;
  }
  
  .calc-btn.operator {
    background: var(--brand) !important;
    color: white !important;
  }
  
  .calc-btn.function {
    background: var(--warn) !important;
    color: white !important;
    font-size: 12px !important;
  }
}

/* ========== CONTADOR DE TEXTO ========== */
@media (max-width: 767px) {
  #textCounterInput {
    min-height: 120px !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
  }
  
  #textCounterResult {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    text-align: center !important;
  }
  
  .counter-stat {
    padding: 12px !important;
    background: var(--panel2) !important;
    border-radius: 8px !important;
  }
  
  .counter-number {
    font-size: 24px !important;
    font-weight: bold !important;
    color: var(--brand) !important;
    display: block !important;
  }
  
  .counter-label {
    font-size: 12px !important;
    color: var(--muted) !important;
  }
}

/* ========== GERADOR DE SENHAS ========== */
@media (max-width: 767px) {
  .password-options {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin: 16px 0 !important;
  }
  
  .password-option {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
  }
  
  #generatedPassword {
    font-family: 'Courier New', monospace !important;
    font-size: 14px !important;
    padding: 12px !important;
    word-break: break-all !important;
    line-height: 1.4 !important;
  }
  
  .password-strength {
    text-align: center !important;
    margin-top: 12px !important;
    padding: 8px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
  }
  
  .strength-weak {
    background: rgba(255, 176, 32, 0.1) !important;
    color: var(--warn) !important;
  }
  
  .strength-strong {
    background: rgba(25, 195, 125, 0.1) !important;
    color: var(--ok) !important;
  }
}

/* ========== MELHORIAS GERAIS DE UX ========== */
@media (max-width: 767px) {
  /* Espaçamento consistente entre seções */
  .tool-section {
    margin-bottom: 24px !important;
  }
  
  /* Mensagens de erro/sucesso mais visíveis */
  .message {
    padding: 12px 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    text-align: center !important;
    margin: 12px 0 !important;
  }
  
  .success-message {
    background: rgba(25, 195, 125, 0.1) !important;
    border: 1px solid var(--ok) !important;
    color: var(--ok) !important;
  }
  
  .error-message {
    background: rgba(255, 176, 32, 0.1) !important;
    border: 1px solid var(--warn) !important;
    color: var(--warn) !important;
  }
  
  /* Melhor feedback visual para ações */
  .loading-spinner {
    width: 24px !important;
    height: 24px !important;
    margin: 0 auto !important;
  }
  
  /* Tooltips simplificados em mobile */
  .tooltip {
    font-size: 12px !important;
    max-width: 200px !important;
  }
}