/* ==========================================================================
   aii-opcost.css (CLEAN FINAL)
   - Title: 24px bold, #82BCF4
   - Buttons: radius 3px, font-size 15px, font-weight 400
   - Remove outer wrap box (border/background/shadow/padding)
   - Notes/提示 message: NO box (no border/background/padding)
   - Radius mapping:
     * 12px -> 8px
     * 16px -> 10px
   ========================================================================== */

/* =========================
   Calculator base
   ========================= */

   .aii-opcost{
    --aii-primary: var(--ds_primary_color, var(--bs-primary, #0d6efd));
    --aii-primary-hover: var(--ds_primary_hover_color, #0b5ed7);
  
    --aii-text: var(--bs-body-color, #333);
    --aii-bg: var(--bs-body-bg, #fff);
    --aii-border: var(--bs-border-color, #e5e7eb);
    --aii-muted: var(--bs-secondary-color, #6c757d);
    --aii-surface: var(--bs-tertiary-bg, #f8f9fa);
  
    font-family: inherit;
    color: var(--aii-text);
  }
  
  .aii-opcost *,
  .aii-opcost *::before,
  .aii-opcost *::after{
    box-sizing: border-box;
  }
  
  /* Remove the outermost big box */
  .aii-opcost .aii-wrap{
    border: 0;
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
  }
  
  /* Title (match Heatboard H1) */
  .aii-opcost .aii-title{
        margin: 0;
    /* Keep H1 typography aligned with Heatboard */
    color: var(--aii-primary);
    font-weight: 900;
    letter-spacing: .2px;
    font-size: clamp(20px, 0.8vw + 16px, 24px);

  }
  
  
  /* Divider */
  .aii-opcost .aii-hr{
    height: 1px;
    background: var(--aii-border);
    margin: 10px 0;
  }
  
  /* Layout */
  .aii-opcost .aii-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .aii-opcost .aii-stack{
    display: grid;
    gap: 10px;
  }
  
  .aii-opcost .aii-field{
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 10px;
    align-items: center;
  }
  
  /* Labels: softer than pure black (fits your “light mode not harsh” request) */
  .aii-opcost label{
    font-weight: 600;
    line-height: 1.2;
    color: rgba(var(--bs-body-color-rgb, 33,37,41), .80);
  }
  
  /* Inputs (12 -> 8) */
  .aii-opcost input,
  .aii-opcost select{
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--aii-border);
    background: var(--aii-surface);
    color: var(--aii-text);
    outline: none;
  }
  
  .aii-opcost input:focus,
  .aii-opcost select:focus{
    border-color: var(--aii-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb, 13,110,253), 0.18);
  }
  
  .aii-opcost .aii-inline{
    display: flex;
    gap: 10px;
    align-items: center;
  }
  
  .aii-opcost .aii-inline-full{ width: 100%; }
  .aii-opcost .aii-flex{ flex: 1 1 140px; }
  .aii-opcost .aii-fixed{ flex: 0 0 140px; }
  
  .aii-opcost .aii-actions{ margin-top: 8px; }
  
  /* Buttons: radius 3px, 15px, weight 400 */
  .aii-opcost .btn{
    border-radius: 3px !important;
    font-size: 15px;
    font-weight: 400;
    padding: 10px 14px;
    line-height: 1.2;
  }
  
  .aii-opcost .btn.btn-primary{
    background: var(--aii-primary);
    border-color: var(--aii-primary);
  }
  .aii-opcost .btn.btn-primary:hover{
    background: var(--aii-primary-hover);
    border-color: var(--aii-primary-hover);
  }
  
  .aii-opcost .btn.btn-outline-primary{
    color: var(--aii-primary);
    border-color: var(--aii-primary);
  }
  .aii-opcost .btn.btn-outline-primary:hover{
    color: var(--aii-primary-hover);
    border-color: var(--aii-primary-hover);
    background: rgba(var(--bs-primary-rgb, 13,110,253), 0.08);
  }
  
  /* Tag pill */
  .aii-opcost .aii-tag{
    display: inline-block;
    border: 1px solid var(--aii-border);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: .85rem;
    color: var(--aii-muted);
    background: var(--aii-bg);
  }
  
  /* Muted note */
  .aii-opcost .aii-muted{
    margin-top: 6px;
    color: var(--aii-muted);
    font-size: .9rem;
  }
  
  /* Cards (16 -> 10) */
  .aii-opcost .aii-card{
    border: 1px solid var(--aii-border);
    border-radius: 10px;
    background: var(--aii-surface);
    padding: 14px;
  }
  
  .aii-opcost .aii-card h3{
    margin: 0 0 8px;
    font-size: 1.05rem;
    color: var(--aii-text);
  }
  
  .aii-opcost .aii-kpi{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
  }
  
  /* dashed divider only for subsequent KPI rows */
  .aii-opcost .aii-kpi + .aii-kpi{
    border-top: 1px dashed var(--aii-border);
  }
  
  .aii-opcost .aii-kpi .v{
    font-weight: 700;
    color: rgba(var(--bs-body-color-rgb, 33,37,41), .88);
  }
  
  /* Bottom cards grid */
  .aii-opcost .aii-cards{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 12px;
  }
  
  /* Notes/提示 message: NO box */
  .aii-opcost .aii-callout{
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    color: var(--aii-text);
    line-height: 1.6;
  }
  
  /* Responsive */
  @media (max-width: 768px){
    .aii-opcost .aii-field{ grid-template-columns: 1fr; }
    .aii-opcost .aii-fixed{ flex: 0 0 140px; }
  }
  
  @media (min-width: 768px){
    .aii-opcost .aii-cards{ grid-template-columns: repeat(2, 1fr); }
  }
  
  @media (min-width: 992px){
    .aii-opcost .aii-grid{ grid-template-columns: 1.15fr .85fr; }
    .aii-opcost .aii-cards{ grid-template-columns: repeat(3, 1fr); }
  }
  
  /* Theme compatibility: html.dark + data-bs-theme=dark use Bootstrap vars */
  html.dark .aii-opcost{
    --aii-bg: var(--bs-body-bg, #212529);
    --aii-text: var(--bs-body-color, #dee2e6);
    --aii-border: var(--bs-border-color, rgba(255,255,255,.15));
    --aii-muted: var(--bs-secondary-color, rgba(222,226,230,.75));
    --aii-surface: var(--bs-secondary-bg, #343a40);
  }

  .aii-opcost .aii-titlebar{
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--aii-border);
    width: 100%;
  }

  
  /* Title: 'How to use' link next to H1 (match Beta calculator) */
  .aii-opcost .aii-howto,
  .aii-opcost .adamy-howto{
    font-size: 14px;
    font-weight: 500;
    color: rgba(var(--bs-body-color-rgb, 33,37,41), .65);
    text-decoration: none;
    white-space: nowrap;
  }
  .aii-opcost .aii-howto:hover,
  .aii-opcost .adamy-howto:hover{
    color: var(--ds_primary_color, var(--bs-primary, #0d6efd));
    text-decoration: underline;
  }
  html.dark .aii-opcost .aii-howto,
  html.dark .aii-opcost .adamy-howto,
  html[data-bs-theme="dark"] .aii-opcost .aii-howto,
  html[data-bs-theme="dark"] .aii-opcost .adamy-howto{
    color: rgba(222,226,230,.72);
  }

.aii-opcost .aii-howto:hover{
    color: var(--aii-primary);
    text-decoration: underline;
  }
  html.dark .aii-opcost .aii-howto{
    color: rgba(222,226,230,.72);
  }