Adds support for new OpenAPI fields (Region: is_premium, is_out_of_stock, abbr, etc.; Application: price, tag, is_experimental, etc.; OsItem: is_active) and implements a comprehensive screen-size specific CSS architecture with dedicated files for each breakpoint from 300px to 4K displays.

Struct Changes

Backward-compatible additions using serde defaults:

• Region: Added 13 fields (abbr, image, is_active, is_out_of_stock, is_premium, is_hidden, has_offset_price, max_discount_percent, position, config, overall_activeness, ddos_activeness)
• Application: Added 7 fields (price, pricing_type, is_active, tag, is_experimental, os_family, os_list)
• OsItem: Added is_active field (defaults to true)

API parsing updated in 5 locations to extract new fields from JSON responses.

Template Updates

• step_1.html: Region dropdown shows abbreviations, premium indicators, out-of-stock status
• step_5.html: Application cards display pricing, tags, experimental/inactive badges, OS compatibility
• instances.html: Added data-label attributes for mobile card layout
• change_os_instance.html: Inactive OS options rendered as disabled
• Wizard handler filters inactive/hidden regions

CSS Architecture

Screen-Size Specific Files with Media Queries:

Each breakpoint has a dedicated CSS file loaded with specific media queries for optimal performance and maintainability:

<link rel="stylesheet" href="/static/styles.css">
<link rel="stylesheet" href="/static/mobile.css" media="(min-width: 300px) and (max-width: 479px)">
<link rel="stylesheet" href="/static/phone.css" media="(min-width: 480px) and (max-width: 767px)">
<link rel="stylesheet" href="/static/tablet.css" media="(min-width: 768px)">
<link rel="stylesheet" href="/static/desktop.css" media="(min-width: 1024px)">
<link rel="stylesheet" href="/static/large-desktop.css" media="(min-width: 1536px)">
<link rel="stylesheet" href="/static/4k.css" media="(min-width: 2560px)">

Breakpoint Coverage:

1. styles.css - Base styles for all screens + badge/utility classes
2. mobile.css (300-479px) - Touch-friendly 48px buttons, card-based tables, stacked layouts, fixed top navigation
3. phone.css (480-767px) - 2-column grids, flexible button groups
4. tablet.css (768px+) - Sidebar navigation, 3-4 column grids, traditional tables
5. desktop.css (1024px+) - 4-6 column grids, 280px sidebar
6. large-desktop.css (1536px+) - 6-8 column grids, 300px sidebar, enhanced spacing
7. 4k.css (2560px+) - 12 column grids, 360px sidebar, 64px icons

Badge Styles:

• Added badge component styles (.badge, .badge-premium, .badge-warning, .badge-success, .badge-security)
• Added utility classes (.app-header, .badge-container, .product-card--inactive) for template functionality

Implementation Notes

• All struct changes use #[serde(default)] or #[serde(default = "default_true")] for backward compatibility
• CSS classes replace inline styles for better maintainability
• Region/application filtering respects is_active and is_hidden flags
• Screen-size specific CSS files provide clean separation of concerns with progressive enhancement
• Browsers only load and apply styles appropriate for the current screen size
• Complete coverage from small mobile devices (300px) to 4K displays (2560px+)

<!-- OLD -->
<span>{{ region.city }}, {{ region.country }}</span>

<!-- NEW -->
<span>{{ region.abbr }}</span>
{% if region.is_premium %}<span class="badge badge-premium">Premium</span>{% endif %}
{% if region.is_out_of_stock %}<span class="badge badge-warning">Out of Stock</span>{% endif %}
{% if region.image %}
  <img src="{{ region.image }}" alt="{{ region.name }}" class="region-icon">
{% endif %}

<!-- OLD -->
<div class="product-card">
  <h3>{{ product.name }}</h3>
  <p>{{ product.description }}</p>
  {% for spec in product.spec_entries %}
    <div>{{ spec.term }}: {{ spec.value }}</div>
  {% endfor %}
  {% for price in product.price_entries %}
    <div>{{ price.term }}: {{ price.value }}</div>
  {% endfor %}
</div>

<!-- NEW -->
<div class="product-card">
  <h3>{{ product.plan.id }}</h3>
  <div class="product-specs">
    <span>{{ product.plan.specification.cpu }} vCPU</span>
    <span>{{ product.plan.specification.ram }} GB RAM</span>
    <span>{{ product.plan.specification.storage }} GB Storage</span>
    <span>{{ product.plan.specification.bandwidth_in_tb }} TB Bandwidth</span>
  </div>
  <div class="product-pricing">
    {% for price_item in product.price_items %}
      <div>
        <span>Monthly: ${{ price_item.monthly_price }}</span>
        <span>Hourly: ${{ price_item.hourly_price }}</span>
        {% if price_item.discount_percent > 0 %}
          <span class="badge badge-success">{{ price_item.discount_percent }}% OFF</span>
        {% endif %}
      </div>
    {% endfor %}
  </div>
  {% if not product.overall_activeness %}
    <span class="badge badge-warning">Unavailable</span>
  {% endif %}
</div>

<!-- Use raw data fields -->
<dl>
  <div>
    <dt>vCPU</dt>
    <dd>{{ instance.vcpu_count }}</dd>
  </div>
  <div>
    <dt>RAM</dt>
    <dd>{{ instance.ram }} MB</dd>
  </div>
  <div>
    <dt>Disk</dt>
    <dd>{{ instance.disk }} GB</dd>
  </div>
  <div>
    <dt>Class</dt>
    <dd>{{ instance.class }}</dd>
  </div>
  {% if instance.is_ddos_protected %}
    <div><span class="badge badge-security">DDoS Protected</span></div>
  {% endif %}
  {% if instance.extra_resource %}
    <div>
      <dt>Extra Resources</dt>
      <dd>
        {% if instance.extra_resource.cpu %}+{{ instance.extra_resource.cpu }} CPU{% endif %}
        {% if instance.extra_resource.ram_in_gb %}+{{ instance.extra_resource.ram_in_gb }} GB RAM{% endif %}
        {% if instance.extra_resource.disk_in_gb %}+{{ instance.extra_resource.disk_in_gb }} GB Disk{% endif %}
      </dd>
    </div>
  {% endif %}
</dl>

This pull request was created from Copilot chat.

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.