@media (max-width: 1399px) {
  .oc-work-detail-grid,
  .oc-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .oc-pro-menu {
    align-items: stretch;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--oc-radius-lg);
    gap: 4px;
    margin: var(--oc-space-4) 0;
    padding: var(--oc-space-2);
  }

  .oc-pro-nav-link,
  .oc-pro-logout {
    justify-content: flex-start;
    width: 100%;
  }

  .oc-pro-navbar .navbar-collapse {
    flex-basis: 100%;
  }
}

@media (max-width: 1199px) {
  .oc-profile-layout {
    grid-template-columns: 1fr;
  }

  .oc-profile-side {
    position: static;
  }
}

@media (max-width: 900px) {
  .oc-login {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .oc-login-visual {
    min-height: 220px;
    padding: var(--oc-space-6);
  }

  .oc-login-copy img { display: none; }
  .oc-login-copy h1 { font-size: 2rem; }
  .oc-login-panel { padding: var(--oc-space-6) var(--oc-space-4); }
  .oc-login-card > img { display: block; }

  .oc-footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .oc-professional-filter {
    grid-template-columns: 1fr 1fr;
    margin-top: calc(var(--oc-space-8) * -1);
  }

  .oc-filter-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .oc-pro-shell,
  .oc-admin-shell {
    padding: var(--oc-space-4) var(--oc-space-3) var(--oc-space-10) !important;
  }

  .oc-pro-hero,
  .office-hero,
  .oc-page-header {
    align-items: flex-start;
    border-radius: var(--oc-radius-lg);
    flex-direction: column;
    padding: var(--oc-space-5);
  }

  .oc-pro-hero-actions,
  .oc-pro-hero-actions .btn {
    justify-content: stretch;
    width: 100%;
  }

  .oc-panel-heading,
  .office-section-title,
  .proposal-header,
  .oc-footer-bottom {
    flex-direction: column;
  }

  .admin-card,
  .form-container,
  .oc-panel-card {
    border-radius: var(--oc-radius-lg);
    padding: var(--oc-space-4);
  }

  .oc-timeline-item {
    grid-template-columns: 1fr;
  }

  .oc-timeline-item::before {
    display: none;
  }

  .proposal-grid {
    grid-template-columns: 1fr;
    padding: var(--oc-space-4);
  }

  .proposal-header,
  .proposal-section {
    padding: var(--oc-space-5);
  }

  .table-responsive {
    overflow-x: auto;
  }

  .obra-task-row {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .obra-task-row .btn {
    width: 100%;
  }

  .campo-recorder-grid {
    grid-template-columns: 1fr;
  }

  .oc-site-brand,
  .oc-site-brand img {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .oc-professional-filter {
    grid-template-columns: 1fr;
    margin-top: calc(var(--oc-space-6) * -1);
    padding: var(--oc-space-4);
  }

  .oc-find-filter {
    grid-template-columns: 1fr;
    padding: var(--oc-space-4);
  }

  .oc-category-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .oc-showcase-card {
    grid-template-columns: 1fr;
  }

  .oc-showcase-photo {
    max-width: 112px;
  }

  .oc-filter-actions,
  .oc-filter-actions .btn {
    width: 100%;
  }

  .oc-footer-grid {
    grid-template-columns: 1fr;
  }
}

@media print {
  .navbar,
  .oc-site-header,
  .oc-pro-navbar,
  .no-print,
  .office-tabs,
  .btn,
  .oc-site-footer {
    display: none !important;
  }

  body,
  .oc-pro-shell,
  .oc-admin-shell {
    background: #fff !important;
  }

  .proposal-sheet {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    max-width: none;
  }
}

@media (max-width: 900px) {
  .oc-login {
    gap: var(--oc-space-4);
    grid-template-columns: 1fr;
    min-height: auto;
    padding: var(--oc-space-4);
  }

  .oc-login-visual {
    min-height: auto;
    padding: var(--oc-space-6);
  }

  .oc-login-symbol {
    height: 58px;
    margin-bottom: var(--oc-space-5);
    width: 58px;
  }

  .oc-login-symbol img {
    height: 42px;
    width: 42px;
  }

  .oc-login-copy h1 {
    font-size: 2.05rem;
  }

  .oc-login-preview {
    display: none;
  }

  .oc-login-panel {
    padding: 0;
  }

  .oc-login-card {
    max-width: none;
  }

  .oc-login-card > img {
    display: block;
  }
}

@media (max-width: 520px) {
  .oc-login {
    padding: var(--oc-space-3);
  }

  .oc-login-visual {
    border-radius: var(--oc-radius-lg);
  }

  .oc-login-card {
    border-radius: var(--oc-radius-lg);
    padding: var(--oc-space-5);
  }

  .oc-login-assurance {
    align-items: stretch;
    flex-direction: column;
  }
}