/* /static/common_mobile.css
   SunGuard / Güntekanik genel mobil uyumluluk paketi.
   Tablolar yatay kayar; grid, kart, filtre ve grafik alanları telefon ekranına otomatik oranlanır.
*/

:root { --gk-page-pad: clamp(10px, 2.4vw, 24px); }
* { box-sizing: border-box; }
html { width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { width: 100%; min-width: 0; overflow-x: hidden; }
img, svg, canvas, video { max-width: 100%; height: auto; }
input, select, textarea, button { max-width: 100%; }
main, section, .wrap, .app, .container, .dashboard, .content, .card, .hero, .hero-card, .status-card, .kpi, .panel, .box { min-width: 0; }

.table-responsive, .table-wrap, .grid-table-wrap, .gk-table-scroll, .chart-scroll, .line-chart-wrap, .chart-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-responsive table, .table-wrap table, .grid-table-wrap table, .gk-table-scroll table { min-width: 820px; }

@media (max-width: 1240px) {
  .layout, .grid, .hero, .shell, .detail-grid, .inverter-page-grid, .time-weather-grid {
    grid-template-columns: 1fr !important;
  }
  .kpis, .stats-grid, .summary-grid, .cards, .stats, .company-grid, .inv-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 900px) {
  body { font-size: 14px; }
  .wrap, .app, .container, .dashboard, .content {
    width: calc(100% - (var(--gk-page-pad) * 2)) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .shell-inner, .top, .appbar-inner, .topbar-inner, .card-head, .inverter-head, .panel-head, .health-line, .plant-top, .company-top, .card-header, .table-toolbar, .graph-control-head {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .top-actions, .top-nav, .nav, .shell-nav, .actions, .btnbar, .row, .toolbar, .chart-tools, .graph-control-tools, .inv-page-toolbar {
    width: 100%;
    align-items: stretch !important;
  }
  .top-actions > *, .top-nav > *, .nav a, .nav button, .shell-nav a, .shell-nav button, .actions button, .actions .btn, .btnbar button, .btnbar .btn, .toolbar > *, .chart-tools > *, .graph-control-tools > *, .inv-page-toolbar > * {
    width: 100%;
  }
  .hero, .filters, .kpis, .stats, .summary-grid, .form-grid, .form-grid.three, .row-3, .row-4, .grid2, .grid3, .grid4, .company-grid, .plant-kpis, .company-kpis, .weather-kpis, .inv-card-kpis, .inv-detail-grid, .live-kpi-row, .graph-filter-grid, .time-weather-grid, .detail-grid, .inverter-page-grid {
    grid-template-columns: 1fr !important;
  }
  .hero, .hero-card, .status-card, .card, .kpi, section, .panel, .company-card, .plant, .time-card, .weather-card {
    border-radius: 18px !important;
  }
  .hero, .hero-card, .status-card, .card, .kpi, .welcome, .health, .panel, .time-card, .weather-card {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .brand, .shell-brand { min-width: 0 !important; }
  .brand-logo, .shell-brand-logo { max-width: min(260px, 70vw) !important; height: auto !important; }
  .hero-actions { min-width: 0 !important; align-items: stretch !important; }
  h1 { font-size: clamp(26px, 9vw, 38px) !important; line-height: 1.08 !important; }
  h2 { font-size: clamp(22px, 7vw, 32px) !important; line-height: 1.15 !important; }
  h3 { font-size: clamp(17px, 5.4vw, 22px) !important; }
  .line-chart-svg { min-width: 760px !important; }
  .ac-bar-group, .chart-group, .bar-group { flex-basis: 86px !important; width: 86px !important; }
}

@media (max-width: 620px) {
  body { font-size: 13px; }
  .wrap, .app, .container, .dashboard, .content { width: calc(100% - 20px) !important; }
  input, select, textarea, button { min-height: 42px; font-size: 14px; }
  .stats, .kpis, .summary-grid, .cards, .stats-grid, .company-grid, .inv-summary-grid { grid-template-columns: 1fr !important; }
  .hero { min-height: auto !important; }
  .hero p, .sub, .hint, .muted, .small { font-size: 12px !important; }
  table { font-size: 12px; }
  .table-responsive table, .table-wrap table, .grid-table-wrap table, .gk-table-scroll table { min-width: 760px; }
  .clock-time { font-size: clamp(34px, 14vw, 52px) !important; }
  .weather-main { grid-template-columns: 1fr !important; text-align: center; }
  .weather-icon { margin: 0 auto; }
  .chart-wrap, .line-chart-wrap, .chart-scroll { padding: 10px !important; }
}

@media (max-width: 420px) {
  .wrap, .app, .container, .dashboard, .content { width: calc(100% - 14px) !important; }
  .card, .hero, .hero-card, .status-card, .kpi, .welcome, .health, .panel { padding: 12px !important; }
  .table-responsive table, .table-wrap table, .grid-table-wrap table, .gk-table-scroll table { min-width: 700px; }
}