.fullscreen{
width:100% !important;
overflow-y: auto;

}


 

.bg-opacity-10 { --bs-bg-opacity: .1; }
.bg-opacity-5 { --bs-bg-opacity: .05; }

.lara{
      --laravel-red:#ef4444;
      --text:#111827;
      --muted:#6b7280;
      --muted-2:#9ca3af;
      --border:#e5e7eb;
      --border-soft:#f3f4f6;
      --bg:#ffffff;
      --page:#f9fafb;

      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      background: var(--page);
      color: var(--text);
      min-height: 100vh;
    }

    /* Navbar */
    .lara .navbar-custom{
      background: var(--bg);
      border-bottom: 1px solid var(--border);
      padding: 1.25rem 0;
    }
    .lara .brand-text{
      font-weight: 700;
      color: var(--laravel-red);
      font-size: 1.25rem;
      letter-spacing: -0.025em;
    }
    .lara .brand-badge{
      width:28px;height:28px;border-radius:8px;
      background: rgba(239,68,68,.12);
      border: 1px solid rgba(239,68,68,.22);
      display:grid;place-items:center;
      color: var(--laravel-red);
      font-weight: 800;
      line-height: 1;
      flex: 0 0 auto;
    }
    .lara .navbar-meta{
      font-size: .9rem;
      color: var(--muted);
      white-space: nowrap;
    }

    /* Tabs (use BS5 nav-tabs markup, but NOT BS tabs JS) */
    .lara .nav-tabs{
      border-bottom: 1px solid var(--border);
      gap: 1.25rem;
    }
    .lara .nav-tabs .nav-link{
      border: 0;
      border-bottom: 2px solid transparent;
      color: var(--muted);
      font-weight: 500;
      padding: 1rem 0;
      background: transparent;
      cursor: pointer;
    }
    .lara .nav-tabs .nav-link:hover{ color: var(--text); }
    .lara .nav-tabs .nav-link.active{
      color: var(--laravel-red);
      border-bottom-color: var(--laravel-red);
      background: transparent;
      font-weight: 600;
    }

    /* Tab panels - default hidden, only .active visible */
    .lara .lara-panel{
      display: none;
    }
    .lara .lara-panel.active{
      display: block;
    }

    /* Cards */
    .lara .laravel-card{
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: .5rem;
      box-shadow: 0 1px 2px rgba(0,0,0,.05);
    }
    .lara .card-label{
      color: var(--muted);
      font-size: .75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .05em;
      margin-bottom: .5rem;
    }
    .lara .card-value{
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--text);
      line-height: 1.2;
    }
    .lara .card-sub{
      font-size: .875rem;
      color: var(--muted-2);
      margin-top: .35rem;
      line-height: 1.45;
    }

    /* Section title */
    .lara .section-title{
      font-size: 1.05rem;
      font-weight: 600;
      color: #374151;
      margin: 0 0 1rem;
      display:flex;
      align-items:center;
      gap:.5rem;
    }
    .lara .section-title .dot{
      width:10px;height:10px;border-radius:999px;
      background: var(--laravel-red);
      box-shadow: 0 0 0 4px rgba(239,68,68,.12);
    }

    /* Callout */
    .lara .callout{
      border: 1px solid rgba(239,68,68,.25);
      background: rgba(239,68,68,.06);
      padding: 12px 14px;
      border-radius: 10px;
      color: #7f1d1d;
      line-height: 1.5;
      font-size: .95rem;
    }

    /* Pills */
    .lara .pill{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: .8rem;
      font-weight: 600;
      border: 1px solid var(--border);
      color: var(--muted);
      background: #fff;
      vertical-align: middle;
    }
    .lara .pill.draft{
      border-color: rgba(239,68,68,.25);
      color: var(--laravel-red);
      background: rgba(239,68,68,.06);
    }

    /* Table */
    .lara .table{ border-color: var(--border); }
    .lara .table thead th{
      font-size: .75rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--muted);
      background: #fafafa;
      border-bottom-color: var(--border);
    }

    /* Links + code */
    .lara a{ color: var(--laravel-red); text-decoration: none; }
    .lara a:hover{ text-decoration: underline; }
    .lara code{
      background:#f3f4f6;
      border:1px solid var(--border);
      padding:2px 6px;
      border-radius:8px;
      font-size: .9em;
    }

/* Add horizontal padding to the panels themselves */
.lara .lara-panel {
  padding-left: 0;
  padding-right: 0;
}

/* Ensure Bootstrap card-body has its default padding */
.lara .card-body {
  padding: 1rem 1.5rem !important; /* vertical | horizontal */
}