/* og-materialize.css — Materialize-style shell theme for og-pos.
   Loaded AFTER Bootstrap so overrides win without !important. */
:root {
  --og-primary: #ff3aa6;            /* OG brand pink (replaces Materialize indigo) */
  --og-primary-rgb: 255, 58, 166;
  --og-primary-soft: rgba(255, 58, 166, .10);
  --og-bg: #f7f7f9;                 /* page background */
  --og-surface: #ffffff;            /* cards / navbar / sidebar */
  --og-border: #e9e9ec;
  --og-text: #676a7b;
  --og-heading: #262b43;
  --og-muted: #6f7280;             /* WCAG AA 4.5:1 on white (muted text + icons) */
  --og-radius: .375rem;
  --og-radius-lg: .5rem;
  --og-card-shadow: 0 .25rem .875rem rgba(38, 43, 67, .12);
  --og-font: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Spinner animation for RemixIcon (RemixIcon has no built-in spin). */
@keyframes og-ri-spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
.ri-spin { display: inline-block; animation: og-ri-spin 1s linear infinite; }

/* Fixed-width helper (replaces fa-fw where used). */
.ri-fw { display: inline-block; width: 1.25em; text-align: center; }

/* ---------- Base / typography ---------- */
body { background: var(--og-bg); color: var(--og-text); font-family: var(--og-font); font-size: .9375rem; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { color: var(--og-heading); font-weight: 600; }
a { color: var(--og-primary); }
a:hover { color: #e02e92; }

/* ---------- Content shell ---------- */
#content { background: var(--og-bg); }

/* ---------- Cards ---------- */
.card { border: 0; border-radius: var(--og-radius-lg); box-shadow: var(--og-card-shadow); background: var(--og-surface); }
.card .card-header { background: transparent; border-bottom: 1px solid var(--og-border); font-weight: 600; color: var(--og-heading); }

/* ---------- Buttons ---------- */
.btn { border-radius: var(--og-radius-lg); font-weight: 500; }
.btn-primary { background: var(--og-primary); border-color: var(--og-primary); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: #e02e92; border-color: #e02e92; color: #fff; }
.btn-outline-primary { color: var(--og-primary); border-color: var(--og-primary); }
.btn-outline-primary:hover { background: var(--og-primary); border-color: var(--og-primary); color: #fff; }
.btn:focus, .btn:focus-visible { box-shadow: 0 0 0 .2rem var(--og-primary-soft); }

/* ---------- Forms ---------- */
.form-control, .form-select { border-radius: var(--og-radius); border-color: var(--og-border); }
.form-control:focus, .form-select:focus { border-color: var(--og-primary); box-shadow: 0 0 0 .2rem var(--og-primary-soft); }

/* ---------- Tables (shell-level) ---------- */
.table > thead { background: #f2f3f4; }
.table > thead th { color: var(--og-muted); text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; border-bottom: 1px solid var(--og-border); }

/* ---------- Badges ---------- */
.badge { font-weight: 500; }

/* ---------- Modals ---------- */
.modal-content { border: 0; border-radius: var(--og-radius-lg); box-shadow: 0 20px 60px rgba(38,43,67,.22); }

/* ---------- Alerts ---------- */
.alert { border: 0; border-radius: var(--og-radius-lg); }

/* ---------- Navbar (light Materialize) ---------- */
.navbar.og-brand-navbar { background: var(--og-surface) !important; border-bottom: 1px solid var(--og-border); box-shadow: 0 .125rem .5rem rgba(38,43,67,.06); }
.navbar.og-brand-navbar .nav-link { color: var(--og-text); }
.navbar.og-brand-navbar .nav-link:hover { background: var(--og-primary-soft); color: var(--og-primary); transform: none; box-shadow: none; }
.og-brand-cell { background: #0d1117; border-radius: var(--og-radius-lg); padding: .25rem .6rem; display: inline-flex; align-items: center; }

/* ---------- Sidebar (light Materialize) ---------- */
#sidebar { background: var(--og-surface); color: var(--og-text); border-right: 1px solid var(--og-border); }
#sidebar ul p { color: var(--og-muted); }
#sidebar ul li a { color: var(--og-text); border-left: 3px solid transparent; }
#sidebar ul li a i:first-child { color: var(--og-muted); }
#sidebar ul li a:hover { background: #f2f3f4; color: var(--og-heading); }
#sidebar ul li a:hover i:first-child { color: var(--og-heading); }
#sidebar ul li.active > a, #sidebar ul li > a.active { background: var(--og-primary-soft); color: var(--og-primary); border-left-color: var(--og-primary); border-radius: var(--og-radius); }
#sidebar ul li.active > a i:first-child, #sidebar ul li > a.active i:first-child { color: var(--og-primary); }
#sidebar .sidebar-chevron { color: var(--og-muted); }
#sidebar ul .collapse li a, #sidebar ul .collapsing li a { color: var(--og-muted); }
#sidebar ul .collapse li a:hover { color: var(--og-heading); background: #f2f3f4; }
#sidebar ul .collapse li.active > a, #sidebar ul .collapse li > a.active { color: var(--og-primary); background: var(--og-primary-soft); border-left-color: var(--og-primary); }
#sidebarCollapse { background: #f2f3f4; border: 1px solid var(--og-border); color: var(--og-text); border-radius: var(--og-radius); }
#sidebarCollapse:hover { background: #e9e9ec; border-color: var(--og-border); color: var(--og-heading); }

/* ---------- Shell layout (structure / responsive) — relocated from base.blade.php inline <style> ---------- */
.navbar-nav .nav-link { transition: all .3s ease; padding: .5rem 1rem; margin: 0 .1rem; border-radius: 4px; }
.wrapper { display: flex; align-items: stretch; }
#content { width: 100%; min-height: calc(100vh - 56px); transition: all .3s; }
#sidebar { min-width: 260px; max-width: 260px; min-height: calc(100vh - 56px); transition: all .3s; z-index: 100; overflow-y: auto; }
#sidebar.active { margin-left: -260px; }
#sidebar ul.components { padding: 8px 0 20px; }
#sidebar ul p { padding: 16px 16px 4px; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; margin-bottom: 0; }
#sidebar ul li a { padding: 9px 16px; display: flex; align-items: center; text-decoration: none; border-radius: 6px; margin: 1px 8px; transition: background .15s ease, color .15s ease; }
#sidebar ul li a i:first-child { width: 17px; text-align: center; flex-shrink: 0; transition: color .15s ease; }
#sidebar .dropdown-toggle::after { display: none; }
#sidebar .sidebar-chevron { margin-left: auto; font-size: .7rem; transition: transform .2s ease, color .2s ease; flex-shrink: 0; }
#sidebar ul li a[aria-expanded="true"] .sidebar-chevron { transform: rotate(180deg); }
#sidebar ul .collapse li a, #sidebar ul .collapsing li a { padding: 7px 16px 7px 20px; font-size: .875rem; border-left: 2px solid transparent; margin: 1px 8px; }
#sidebarCollapse { cursor: pointer; transition: background .2s ease, color .2s ease; }
@media (max-width: 768px) {
  #sidebar { margin-left: -260px !important; }
  #sidebar.active { margin-left: 0 !important; }
  #sidebar:not(.mobile-visible) { margin-left: -260px !important; }
  #sidebar.mobile-visible { margin-left: 0 !important; }
}