/* assets/css/admin.css */

/* =========================
   Theme Variables
========================= */
:root{
  --rb-bg: #f6f7fb;
  --rb-card: #ffffff;
  --rb-text: #111827;
  --rb-muted: #6b7280;
  --rb-border: #e5e7eb;

  /* ✅ Accent = Bootstrap Success */
  --rb-accent: #198754;
  --rb-accent-600: #157347;
  --rb-accent-100: rgba(25,135,84,.10);
  --rb-ring: rgba(25,135,84,.28);

  /* ✅ Sidebar becomes WHITE */
  --rb-sidebar: #ffffff;
  --rb-sidebar-text: #111827;
  --rb-sidebar-muted: rgba(17,24,39,.70);
  --rb-sidebar-hover: rgba(25,135,84,.08);
  --rb-sidebar-active: rgba(25,135,84,.14);
}

/* =========================
   Base
========================= */
.rb-body{
  background: var(--rb-bg);
  color: var(--rb-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
}

/* Links */
a{ color: var(--rb-accent); }
a:hover{ color: var(--rb-accent-600); }

/* Global focus ring */
.form-control:focus,
.form-select:focus,
.btn:focus,
.btn:focus-visible{
  border-color: var(--rb-accent);
  box-shadow: 0 0 0 .25rem var(--rb-ring);
}

/* =========================
   Buttons (make success the main tone)
   - Keeps your existing HTML (btn-dark/btn-primary) working in green
========================= */
.btn-dark,
.btn-primary{
  background: var(--rb-accent) !important;
  border-color: var(--rb-accent) !important;
  color: #fff !important;
}
.btn-dark:hover,
.btn-primary:hover{
  background: var(--rb-accent-600) !important;
  border-color: var(--rb-accent-600) !important;
}

.btn-outline-secondary{
  border: 1px solid var(--rb-border) !important;
  background: transparent !important;
  color: var(--rb-text) !important;
}
.btn-outline-secondary:hover{
  background: var(--rb-accent-100) !important;
  border-color: var(--rb-accent) !important;
  color: var(--rb-accent-600) !important;
}

.btn-outline-primary{
  border-color: var(--rb-accent) !important;
  color: var(--rb-accent) !important;
}
.btn-outline-primary:hover{
  background: var(--rb-accent) !important;
  border-color: var(--rb-accent) !important;
  color: #fff !important;
}

/* Badges: keep "primary" looking like success */
.bg-primary,
.text-bg-primary{
  background-color: var(--rb-accent) !important;
}

/* =========================
   Topbar
========================= */
.rb-topbar{
  background: var(--rb-card);
  border-bottom: 1px solid var(--rb-border);
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 1030;
}
@media (min-width: 992px){
  .rb-topbar{ height: 60px; }
}

.rb-brand{
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--rb-text);
  text-decoration: none;
}
.rb-brand-sub{
  font-weight: 600;
  color: var(--rb-muted);
  margin-left: 6px;
  font-size: 14px;
}

.rb-user{
  max-width: 220px;
  color: var(--rb-muted);
  font-size: 14px;
}

.rb-btn-outline{
  border: 1px solid var(--rb-border);
  background: transparent;
  color: var(--rb-text);
}
.rb-btn-outline:hover{
  background: var(--rb-accent-100);
  border-color: var(--rb-accent);
  color: var(--rb-accent-600);
}

/* =========================
   Mobile Burger
========================= */
.rb-icon-btn{
  border: 1px solid var(--rb-border);
  background: #fff;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rb-burger{
  width: 18px;
  height: 2px;
  background: #111827;
  position: relative;
  display:block;
}
.rb-burger::before,
.rb-burger::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background:#111827;
}
.rb-burger::before{ top:-6px; }
.rb-burger::after{ top:6px; }

/* =========================
   Layout Shell
========================= */
.rb-shell{
  display: block;
  min-height: calc(100vh - 56px - 44px);
}
@media (min-width: 992px){
  .rb-shell{
    display: flex;
    min-height: calc(100vh - 60px - 44px);
  }
}

/* =========================
   Sidebar (Desktop) - ✅ WHITE
========================= */
.rb-sidebar{
  width: 260px;
  background: var(--rb-sidebar);
  color: var(--rb-sidebar-text);
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  border-right: 1px solid var(--rb-border);
}
.rb-sidebar-inner{
  padding: 18px 12px;
}

/* Sidebar Titles */
.rb-nav-title{
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--rb-sidebar-muted);
  margin: 14px 12px 6px;
  text-transform: uppercase;
}

/* Sidebar Links */
.rb-nav-link{
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(17,24,39,.92);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 12px;
  margin: 4px 6px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  border: 1px solid transparent;
}
.rb-nav-link:hover{
  background: var(--rb-sidebar-hover);
}
.rb-nav-link.active{
  background: var(--rb-sidebar-active);
  border-color: rgba(25,135,84,.30);
  color: var(--rb-accent-600);
  font-weight: 700;
}

.rb-nav-ic{
  width: 22px;
  text-align: center;
  opacity: .85;
}
.rb-nav-link.active .rb-nav-ic{
  color: var(--rb-accent);
  opacity: 1;
}

/* =========================
   Accordion (Masters Group)
========================= */
.rb-acc{ margin: 6px 0; }

.rb-acc-btn{
  width:100%;
  border:0;
  background:transparent;
  color: inherit;
  text-align:left;
  padding:10px 12px;
  border-radius:12px;
  display:flex;
  align-items:center;
}
.rb-acc-btn:hover{
  background: rgba(25,135,84,.08);
}
.rb-acc-chevron{
  margin-left:auto;
  font-size:12px;
  opacity:.7;
  transition: transform .2s ease;
}
.rb-acc-btn.collapsed .rb-acc-chevron{
  transform: rotate(-90deg);
}
.rb-acc-body{
  padding-left: 14px;
  padding-bottom: 6px;
}
.rb-nav-sub{ padding-left: 18px; }

/* =========================
   Offcanvas (Mobile Sidebar) - ✅ WHITE
========================= */
.rb-offcanvas{
  background: var(--rb-sidebar);
  color: var(--rb-sidebar-text);
}
.rb-offcanvas .offcanvas-title{ color: var(--rb-text); }
.rb-offcanvas .btn-close{
  filter: none;
  opacity: .8;
}

/* =========================
   Main Content
========================= */
.rb-main{
  flex: 1;
  min-width: 0;
}
.rb-content{
  padding: 14px;
}
@media (min-width: 992px){
  .rb-content{
    padding: 18px;
  }
}

/* =========================
   Footer
========================= */
.rb-footer{
  background: var(--rb-card);
  border-top: 1px solid var(--rb-border);
  height: 44px;
}

/* =========================
   Loader Overlay
========================= */
.rb-loader{
  position: fixed;
  inset: 0;
  background: rgba(17,24,39,.35);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rb-loader-card{
  background: #fff;
  border-radius: 16px;
  padding: 18px 20px;
  min-width: 160px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
}

/* =========================
   DataTables Responsive (dtr-control)
========================= */
td.dtr-control{
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  width: 1%;
  white-space: nowrap;
}

/* nicer expand icon */
td.dtr-control::before{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  content: "+";
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid rgba(17,24,39,.18);
  background: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
tr.dtr-expanded td.dtr-control::before{
  content: "–";
}

/* =========================
   DataTables minor polish
========================= */
.table.dataTable>tbody>tr>td{
  vertical-align: middle;
}
.table.dataTable tbody tr:hover{
  background-color: rgba(25,135,84,.04);
}

/* Pagination active = success */
.dataTables_wrapper .pagination .page-item.active .page-link{
  background-color: var(--rb-accent) !important;
  border-color: var(--rb-accent) !important;
  color: #fff !important;
}
.dataTables_wrapper .pagination .page-link{
  color: var(--rb-text);
}
.dataTables_wrapper .pagination .page-link:focus{
  box-shadow: 0 0 0 .25rem var(--rb-ring);
}

/* DataTables search input focus */
.dataTables_wrapper .dataTables_filter input:focus{
  border-color: var(--rb-accent);
  box-shadow: 0 0 0 .25rem var(--rb-ring);
}

/* keep action buttons compact */
.rb-actions .btn{
  white-space: nowrap;
}

/* =========================
   Utilities
========================= */
.text-truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}