/* ==========================================================================
   Intrabase UI – Main Stylesheet
   Version: 1.0.0
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Google Fonts import (Inter)
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette */
  --ib-primary:           #3b6fda;
  --ib-primary-dark:      #2a55b8;
  --ib-primary-light:     #e8eefb;
  --ib-secondary:         #6c757d;
  --ib-secondary-dark:    #545b62;
  --ib-secondary-light:   #f0f1f2;
  --ib-danger:            #d93025;
  --ib-danger-dark:       #b0251d;
  --ib-danger-light:      #fdecea;
  --ib-success:           #1a8754;
  --ib-success-dark:      #14663f;
  --ib-success-light:     #d4edda;
  --ib-warning:           #d97706;
  --ib-warning-dark:      #b45309;
  --ib-warning-light:     #fef3c7;
  --ib-info:              #0891b2;
  --ib-info-light:        #e0f7fa;

  /* Neutrals */
  --ib-bg:                #f4f6f9;
  --ib-surface:           #ffffff;
  --ib-border:            #dde1e7;
  --ib-border-focus:      var(--ib-primary);
  --ib-text:              #1a202c;
  --ib-text-muted:        #64748b;
  --ib-text-inverted:     #ffffff;

  /* Sidebar */
  --ib-sidebar-width:     240px;
  --ib-sidebar-bg:        #1e293b;
  --ib-sidebar-text:      #cbd5e1;
  --ib-sidebar-hover-bg:  #334155;
  --ib-sidebar-active-bg: var(--ib-primary);
  --ib-sidebar-active-text: #ffffff;

  /* Header */
  --ib-header-height:     56px;
  --ib-header-bg:         #ffffff;
  --ib-header-border:     var(--ib-border);

  /* Spacing */
  --ib-space-xs:  4px;
  --ib-space-sm:  8px;
  --ib-space-md:  16px;
  --ib-space-lg:  24px;
  --ib-space-xl:  32px;
  --ib-space-2xl: 48px;

  /* Typography */
  --ib-font:       'Inter', system-ui, -apple-system, sans-serif;
  --ib-font-size:  14px;
  --ib-line-h:     1.5;

  /* Radii */
  --ib-radius-sm:  4px;
  --ib-radius-md:  8px;
  --ib-radius-lg:  12px;
  --ib-radius-xl:  16px;

  /* Shadows */
  --ib-shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --ib-shadow-md:  0 4px 12px rgba(0,0,0,.10);
  --ib-shadow-lg:  0 8px 24px rgba(0,0,0,.12);

  /* Transitions */
  --ib-transition: 200ms ease;

  /* Z-index layers */
  --ib-z-sidebar:  100;
  --ib-z-header:   90;
  --ib-z-toast:    200;
  --ib-z-overlay:  150;
}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--ib-font-size);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--ib-font);
  font-size: 1rem;
  line-height: var(--ib-line-h);
  color: var(--ib-text);
  background-color: var(--ib-bg);
  min-height: 100vh;
}

a {
  color: var(--ib-primary);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

ul, ol { list-style: none; }

img, svg { display: block; max-width: 100%; }

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   3. Layout Shell
   -------------------------------------------------------------------------- */
.ib-layout {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.ib-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--ib-sidebar-width);
  height: 100vh;
  background: var(--ib-sidebar-bg);
  color: var(--ib-sidebar-text);
  display: flex;
  flex-direction: column;
  z-index: var(--ib-z-sidebar);
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform var(--ib-transition);
}

.ib-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ib-space-md) var(--ib-space-md);
  border-bottom: 1px solid rgba(255,255,255,.08);
  min-height: var(--ib-header-height);
  flex-shrink: 0;
}

.ib-sidebar__logo {
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -.3px;
  text-decoration: none;
}
.ib-sidebar__logo:hover { text-decoration: none; color: #ffffff; }

.ib-sidebar__toggle {
  background: none;
  border: none;
  color: var(--ib-sidebar-text);
  padding: var(--ib-space-xs);
  border-radius: var(--ib-radius-sm);
  display: none; /* shown on mobile */
  line-height: 1;
  font-size: 1.1rem;
}
.ib-sidebar__toggle:hover { background: rgba(255,255,255,.1); }

.ib-sidebar__nav {
  padding: var(--ib-space-sm) 0;
  flex: 1;
}

.ib-sidebar__item { display: block; }

.ib-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--ib-space-sm);
  padding: 10px var(--ib-space-md);
  color: var(--ib-sidebar-text);
  border-radius: 0;
  transition: background var(--ib-transition), color var(--ib-transition);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .9rem;
}
.ib-sidebar__link:hover {
  background: var(--ib-sidebar-hover-bg);
  color: #ffffff;
  text-decoration: none;
}

.ib-sidebar__item--active .ib-sidebar__link {
  background: var(--ib-sidebar-active-bg);
  color: var(--ib-sidebar-active-text);
  font-weight: 600;
}

.ib-sidebar__icon { width: 18px; text-align: center; flex-shrink: 0; }
.ib-sidebar__label { overflow: hidden; text-overflow: ellipsis; }

/* Main area */
.ib-layout__main {
  margin-left: var(--ib-sidebar-width);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
}

/* Header */
.ib-header {
  position: sticky;
  top: 0;
  z-index: var(--ib-z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ib-space-md);
  height: var(--ib-header-height);
  padding: 0 var(--ib-space-lg);
  background: var(--ib-header-bg);
  border-bottom: 1px solid var(--ib-header-border);
  box-shadow: var(--ib-shadow-sm);
}

.ib-header__left,
.ib-header__right {
  display: flex;
  align-items: center;
  gap: var(--ib-space-sm);
}

#ib-menu-open { display: none; }

.ib-header__user {
  display: flex;
  align-items: center;
  gap: var(--ib-space-xs);
  font-size: .875rem;
  color: var(--ib-text-muted);
  font-weight: 500;
}

/* Flash message area */
.ib-layout__flash {
  padding: 0 var(--ib-space-lg);
}
.ib-layout__flash:empty { display: none; }

/* Content */
.ib-layout__content {
  flex: 1;
  padding: var(--ib-space-lg);
}

/* Footer */
.ib-layout__footer {
  padding: var(--ib-space-md) var(--ib-space-lg);
  font-size: .8rem;
  color: var(--ib-text-muted);
  border-top: 1px solid var(--ib-border);
  text-align: right;
}

/* --------------------------------------------------------------------------
   4. Login page
   -------------------------------------------------------------------------- */
.ib-login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--ib-bg);
}

.ib-login-box {
  width: 100%;
  max-width: 400px;
  padding: var(--ib-space-xl);
  background: var(--ib-surface);
  border: 1px solid var(--ib-border);
  border-radius: var(--ib-radius-lg);
  box-shadow: var(--ib-shadow-md);
}

.ib-login-box__logo {
  text-align: center;
  margin-bottom: var(--ib-space-xl);
}

.ib-login-box__brand {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ib-primary);
  letter-spacing: -.5px;
}

/* --------------------------------------------------------------------------
   5. Breadcrumb
   -------------------------------------------------------------------------- */
.ib-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  list-style: none;
}

.ib-breadcrumb__item {
  display: flex;
  align-items: center;
  font-size: .85rem;
  color: var(--ib-text-muted);
}

.ib-breadcrumb__item + .ib-breadcrumb__item::before {
  content: '/';
  margin: 0 6px;
  color: var(--ib-border);
}

.ib-breadcrumb__link { color: var(--ib-primary); }
.ib-breadcrumb__link:hover { text-decoration: underline; }

.ib-breadcrumb__item--current { color: var(--ib-text); font-weight: 500; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.ib-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ib-space-xs);
  padding: 7px 14px;
  font-size: .875rem;
  font-weight: 500;
  border-radius: var(--ib-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--ib-transition), border-color var(--ib-transition),
              color var(--ib-transition), box-shadow var(--ib-transition);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.4;
  user-select: none;
}

.ib-btn:focus-visible {
  outline: 2px solid var(--ib-primary);
  outline-offset: 2px;
}

/* Variants */
.ib-btn--primary {
  background: var(--ib-primary);
  color: var(--ib-text-inverted);
  border-color: var(--ib-primary);
}
.ib-btn--primary:hover {
  background: var(--ib-primary-dark);
  border-color: var(--ib-primary-dark);
}

.ib-btn--secondary {
  background: var(--ib-secondary-light);
  color: var(--ib-text);
  border-color: var(--ib-border);
}
.ib-btn--secondary:hover {
  background: #e2e4e7;
  border-color: #bcc0c5;
}

.ib-btn--danger {
  background: var(--ib-danger);
  color: var(--ib-text-inverted);
  border-color: var(--ib-danger);
}
.ib-btn--danger:hover {
  background: var(--ib-danger-dark);
  border-color: var(--ib-danger-dark);
}

.ib-btn--ghost {
  background: transparent;
  color: var(--ib-primary);
  border-color: var(--ib-primary);
}
.ib-btn--ghost:hover { background: var(--ib-primary-light); }

/* Sizes */
.ib-btn--sm {
  padding: 4px 10px;
  font-size: .8rem;
  border-radius: var(--ib-radius-sm);
}

.ib-btn--lg {
  padding: 10px 20px;
  font-size: 1rem;
}

.ib-btn--icon {
  padding: 6px 8px;
  border-radius: var(--ib-radius-sm);
  background: transparent;
  border-color: transparent;
  color: var(--ib-text-muted);
}
.ib-btn--icon:hover { background: var(--ib-secondary-light); color: var(--ib-text); }

.ib-btn:disabled,
.ib-btn[aria-disabled="true"] {
  opacity: .55;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */
.ib-form {
  display: flex;
  flex-direction: column;
  gap: var(--ib-space-md);
}

.ib-form__row {
  display: flex;
  flex-direction: column;
  gap: var(--ib-space-xs);
}

.ib-form__label {
  font-size: .85rem;
  font-weight: 500;
  color: var(--ib-text);
}

.ib-form__control {
  display: flex;
  flex-direction: column;
  gap: var(--ib-space-xs);
}

.ib-form__hint {
  font-size: .8rem;
  color: var(--ib-text-muted);
}

.ib-form__error {
  font-size: .8rem;
  color: var(--ib-danger);
}

/* Fields */
.ib-input,
.ib-select,
.ib-textarea {
  width: 100%;
  padding: 8px 12px;
  font-family: inherit;
  font-size: .9rem;
  color: var(--ib-text);
  background: var(--ib-surface);
  border: 1px solid var(--ib-border);
  border-radius: var(--ib-radius-md);
  transition: border-color var(--ib-transition), box-shadow var(--ib-transition);
  line-height: 1.5;
  appearance: none;
  -webkit-appearance: none;
}

.ib-input:focus,
.ib-select:focus,
.ib-textarea:focus {
  outline: none;
  border-color: var(--ib-border-focus);
  box-shadow: 0 0 0 3px rgba(59,111,218,.18);
}

.ib-input::placeholder,
.ib-textarea::placeholder { color: var(--ib-text-muted); }

.ib-input--error,
.ib-select--error,
.ib-textarea--error { border-color: var(--ib-danger); }

.ib-textarea { min-height: 100px; resize: vertical; }

.ib-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 34px;
}

/* Inline form row */
.ib-form--inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
}
.ib-form--inline .ib-form__row { flex: 1; min-width: 180px; }

/* --------------------------------------------------------------------------
   8. Browser (DataBrowser)
   -------------------------------------------------------------------------- */
.ib-browser {
  background: var(--ib-surface);
  border: 1px solid var(--ib-border);
  border-radius: var(--ib-radius-lg);
  box-shadow: var(--ib-shadow-sm);
  overflow: hidden;
}

.ib-browser__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ib-space-sm);
  padding: var(--ib-space-md) var(--ib-space-md);
  border-bottom: 1px solid var(--ib-border);
  background: var(--ib-bg);
}

.ib-browser__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ib-text);
}

.ib-browser__actions {
  display: flex;
  align-items: center;
  gap: var(--ib-space-xs);
  flex-wrap: wrap;
}

.ib-browser__search {
  display: flex;
  align-items: center;
  gap: var(--ib-space-xs);
  padding: var(--ib-space-sm) var(--ib-space-md);
  border-bottom: 1px solid var(--ib-border);
  background: var(--ib-bg);
  flex-wrap: wrap;
}

/* Table */
.ib-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}

.ib-table__th,
.ib-table__td {
  text-align: left;
  padding: 10px var(--ib-space-md);
  border-bottom: 1px solid var(--ib-border);
}

.ib-table__th {
  font-weight: 600;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ib-text-muted);
  background: var(--ib-bg);
  white-space: nowrap;
  user-select: none;
}

.ib-table__th--sortable { cursor: pointer; }
.ib-table__th--sortable:hover { color: var(--ib-primary); }
.ib-table__th--asc::after  { content: ' ↑'; }
.ib-table__th--desc::after { content: ' ↓'; }

.ib-table__td { vertical-align: middle; }

.ib-table__tr:hover .ib-table__td { background: var(--ib-primary-light); }
.ib-table__tr--selected .ib-table__td { background: var(--ib-primary-light); }

.ib-table__td--actions {
  white-space: nowrap;
  text-align: right;
  width: 1px;
}

/* Empty state */
.ib-browser__empty {
  padding: var(--ib-space-2xl) var(--ib-space-lg);
  text-align: center;
  color: var(--ib-text-muted);
}

/* --------------------------------------------------------------------------
   9. Pagination
   -------------------------------------------------------------------------- */
.ib-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ib-space-sm);
  padding: var(--ib-space-sm) var(--ib-space-md);
  border-top: 1px solid var(--ib-border);
}

.ib-pagination__info {
  font-size: .8rem;
  color: var(--ib-text-muted);
}

.ib-pagination__nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.ib-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  font-size: .8rem;
  font-family: inherit;
  font-weight: 500;
  border: 1px solid var(--ib-border);
  border-radius: var(--ib-radius-sm);
  background: var(--ib-surface);
  color: var(--ib-text);
  cursor: pointer;
  transition: background var(--ib-transition), border-color var(--ib-transition);
  text-decoration: none;
}

.ib-pagination__btn:hover { background: var(--ib-secondary-light); }
.ib-pagination__btn--active {
  background: var(--ib-primary);
  border-color: var(--ib-primary);
  color: var(--ib-text-inverted);
}
.ib-pagination__btn:disabled { opacity: .45; pointer-events: none; }

/* --------------------------------------------------------------------------
   10. Tabs
   -------------------------------------------------------------------------- */
.ib-tabs { display: flex; flex-direction: column; }

.ib-tabs__nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--ib-border);
  overflow-x: auto;
}

.ib-tabs__nav-item {
  display: inline-flex;
  align-items: center;
  gap: var(--ib-space-xs);
  padding: 10px var(--ib-space-md);
  font-size: .875rem;
  font-weight: 500;
  color: var(--ib-text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--ib-transition), border-color var(--ib-transition);
}
.ib-tabs__nav-item:hover { color: var(--ib-text); }
.ib-tabs__nav-item--active {
  color: var(--ib-primary);
  border-bottom-color: var(--ib-primary);
}

.ib-tabs__panel {
  display: none;
  padding: var(--ib-space-lg) 0;
}
.ib-tabs__panel--active { display: block; }

/* --------------------------------------------------------------------------
   11. Badges
   -------------------------------------------------------------------------- */
.ib-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: .75rem;
  font-weight: 600;
  border-radius: 9999px;
  white-space: nowrap;
  line-height: 1.4;
}

.ib-badge--primary  { background: var(--ib-primary-light);  color: var(--ib-primary-dark); }
.ib-badge--success  { background: var(--ib-success-light);  color: var(--ib-success-dark); }
.ib-badge--danger   { background: var(--ib-danger-light);   color: var(--ib-danger-dark); }
.ib-badge--warning  { background: var(--ib-warning-light);  color: var(--ib-warning-dark); }
.ib-badge--neutral  { background: var(--ib-secondary-light); color: var(--ib-secondary-dark); }

/* --------------------------------------------------------------------------
   12. Alerts / Toasts
   -------------------------------------------------------------------------- */
.ib-alert {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ib-space-sm);
  padding: 12px var(--ib-space-md);
  border-radius: var(--ib-radius-md);
  border-left: 4px solid transparent;
  font-size: .9rem;
  margin-bottom: var(--ib-space-sm);
}

.ib-alert--success {
  background: var(--ib-success-light);
  border-color: var(--ib-success);
  color: var(--ib-success-dark);
}
.ib-alert--danger {
  background: var(--ib-danger-light);
  border-color: var(--ib-danger);
  color: var(--ib-danger-dark);
}
.ib-alert--warning {
  background: var(--ib-warning-light);
  border-color: var(--ib-warning);
  color: var(--ib-warning-dark);
}
.ib-alert--info {
  background: var(--ib-info-light);
  border-color: var(--ib-info);
  color: var(--ib-info);
}

.ib-alert__close {
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: .7;
  flex-shrink: 0;
  padding: 0 2px;
}
.ib-alert__close:hover { opacity: 1; }

/* Toast variant (fixed position, auto-dismiss) */
.ib-toast {
  position: fixed;
  bottom: var(--ib-space-lg);
  right: var(--ib-space-lg);
  z-index: var(--ib-z-toast);
  min-width: 280px;
  max-width: 420px;
  box-shadow: var(--ib-shadow-lg);
  animation: ib-slide-in .25s ease;
}

@keyframes ib-slide-in {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.ib-toast--dismiss {
  animation: ib-slide-out .25s ease forwards;
}

@keyframes ib-slide-out {
  to { transform: translateX(110%); opacity: 0; }
}

/* --------------------------------------------------------------------------
   13. Dashboard
   -------------------------------------------------------------------------- */
.ib-dashboard {
  max-width: 1100px;
}

.ib-dashboard__header {
  margin-bottom: var(--ib-space-xl);
}

.ib-dashboard__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ib-text);
  margin-bottom: var(--ib-space-xs);
}

.ib-dashboard__subtitle {
  color: var(--ib-text-muted);
}

.ib-dashboard__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--ib-space-md);
}

.ib-dashboard-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ib-space-md);
  padding: var(--ib-space-lg);
  background: var(--ib-surface);
  border: 1px solid var(--ib-border);
  border-radius: var(--ib-radius-lg);
  box-shadow: var(--ib-shadow-sm);
  text-align: center;
  color: var(--ib-text);
  transition: transform var(--ib-transition), box-shadow var(--ib-transition),
              border-color var(--ib-transition);
  text-decoration: none;
}

.ib-dashboard-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ib-shadow-md);
  border-color: var(--ib-primary);
  text-decoration: none;
  color: var(--ib-text);
}

.ib-dashboard-card__icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: var(--ib-radius-lg);
  background: var(--ib-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ib-dashboard-card__icon {
  font-size: 1.5rem;
  color: var(--ib-primary);
}

.ib-dashboard-card__name {
  display: block;
  font-weight: 600;
  font-size: .95rem;
}

.ib-dashboard-card__desc {
  font-size: .8rem;
  color: var(--ib-text-muted);
  margin-top: 2px;
}

.ib-dashboard__empty {
  padding: var(--ib-space-2xl);
  text-align: center;
  color: var(--ib-text-muted);
}

.ib-dashboard__empty-icon {
  font-size: 2.5rem;
  margin-bottom: var(--ib-space-md);
  opacity: .4;
}

/* --------------------------------------------------------------------------
   14. Detailer (DataDetailer)
   -------------------------------------------------------------------------- */
.ib-detailer {
  background: var(--ib-surface);
  border: 1px solid var(--ib-border);
  border-radius: var(--ib-radius-lg);
  box-shadow: var(--ib-shadow-sm);
  overflow: hidden;
}

.ib-detailer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ib-space-md) var(--ib-space-lg);
  border-bottom: 1px solid var(--ib-border);
  background: var(--ib-bg);
  gap: var(--ib-space-sm);
  flex-wrap: wrap;
}

.ib-detailer__title {
  font-size: 1rem;
  font-weight: 600;
}

.ib-detailer__actions {
  display: flex;
  gap: var(--ib-space-xs);
  flex-wrap: wrap;
}

.ib-detailer__body { padding: var(--ib-space-lg); }

.ib-detailer__section {
  margin-bottom: var(--ib-space-xl);
}
.ib-detailer__section:last-child { margin-bottom: 0; }

.ib-detailer__section-title {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--ib-text-muted);
  margin-bottom: var(--ib-space-md);
  padding-bottom: var(--ib-space-xs);
  border-bottom: 1px solid var(--ib-border);
}

.ib-detailer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--ib-space-md) var(--ib-space-lg);
}

.ib-detailer__field { display: flex; flex-direction: column; gap: 2px; }

.ib-detailer__field-label {
  font-size: .75rem;
  font-weight: 500;
  color: var(--ib-text-muted);
  text-transform: uppercase;
  letter-spacing: .3px;
}

.ib-detailer__field-value {
  font-size: .9rem;
  color: var(--ib-text);
}

/* --------------------------------------------------------------------------
   15. Modal / Overlay
   -------------------------------------------------------------------------- */
.ib-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: var(--ib-z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ib-space-lg);
}

.ib-modal {
  background: var(--ib-surface);
  border-radius: var(--ib-radius-lg);
  box-shadow: var(--ib-shadow-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  animation: ib-fade-in .2s ease;
}

@keyframes ib-fade-in {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}

.ib-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ib-space-md) var(--ib-space-lg);
  border-bottom: 1px solid var(--ib-border);
  font-weight: 600;
}

.ib-modal__body { padding: var(--ib-space-lg); }
.ib-modal__footer {
  padding: var(--ib-space-md) var(--ib-space-lg);
  border-top: 1px solid var(--ib-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--ib-space-sm);
}

/* --------------------------------------------------------------------------
   16. Utility classes
   -------------------------------------------------------------------------- */
.ib-text-muted   { color: var(--ib-text-muted); }
.ib-text-danger  { color: var(--ib-danger); }
.ib-text-success { color: var(--ib-success); }
.ib-text-right   { text-align: right; }
.ib-text-center  { text-align: center; }

.ib-mt-sm  { margin-top: var(--ib-space-sm); }
.ib-mt-md  { margin-top: var(--ib-space-md); }
.ib-mt-lg  { margin-top: var(--ib-space-lg); }
.ib-mb-sm  { margin-bottom: var(--ib-space-sm); }
.ib-mb-md  { margin-bottom: var(--ib-space-md); }
.ib-mb-lg  { margin-bottom: var(--ib-space-lg); }

.ib-d-flex      { display: flex; }
.ib-align-center { align-items: center; }
.ib-gap-sm      { gap: var(--ib-space-sm); }

.ib-w-full      { width: 100%; }
.ib-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* --------------------------------------------------------------------------
   17. Responsive – Mobile (max 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Sidebar hides off-screen, toggled by JS class */
  .ib-sidebar {
    transform: translateX(-100%);
  }
  .ib-sidebar--open {
    transform: translateX(0);
    box-shadow: var(--ib-shadow-lg);
  }
  .ib-sidebar__toggle { display: flex; }

  /* Overlay when sidebar is open */
  .ib-sidebar--open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: -1;
  }

  /* Main area takes full width */
  .ib-layout__main { margin-left: 0; }

  /* Show hamburger in header */
  #ib-menu-open { display: inline-flex; }

  /* Layout content padding */
  .ib-layout__content { padding: var(--ib-space-md); }

  /* Dashboard grid */
  .ib-dashboard__grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  /* Detailer grid */
  .ib-detailer__grid { grid-template-columns: 1fr; }

  /* Header */
  .ib-header { padding: 0 var(--ib-space-md); }

  /* Toast */
  .ib-toast {
    left: var(--ib-space-md);
    right: var(--ib-space-md);
    bottom: var(--ib-space-md);
    min-width: 0;
    max-width: none;
  }

  /* Table horizontal scroll */
  .ib-browser { overflow-x: auto; }
}

@media (max-width: 480px) {
  .ib-dashboard__grid {
    grid-template-columns: 1fr 1fr;
  }
  .ib-login-box {
    padding: var(--ib-space-lg);
    border: none;
    box-shadow: none;
  }
}

/* --------------------------------------------------------------------------
   18. Print
   -------------------------------------------------------------------------- */
@media print {
  .ib-sidebar,
  .ib-header,
  .ib-layout__footer,
  .ib-toast,
  .ib-btn { display: none !important; }
  .ib-layout__main { margin-left: 0 !important; }
  .ib-layout__content { padding: 0 !important; }
}

/* --------------------------------------------------------------------------
   19. Advanced filters panel
   -------------------------------------------------------------------------- */
.ib-browser__filters {
  background: var(--ib-surface-alt, #f8f9fa);
  border: 1px solid var(--ib-border);
  border-radius: var(--ib-radius);
  margin-bottom: var(--ib-space-md);
}

.ib-browser__filters-toggle {
  display: flex;
  align-items: center;
  gap: var(--ib-space-sm);
  padding: var(--ib-space-sm) var(--ib-space-md);
  cursor: pointer;
  font-weight: 500;
  font-size: .875rem;
  color: var(--ib-text-secondary, #6c757d);
  list-style: none;
  user-select: none;
}
.ib-browser__filters-toggle::-webkit-details-marker { display: none; }
.ib-browser__filters-toggle:hover { color: var(--ib-primary); }
details.ib-browser__filters[open] .ib-browser__filters-toggle {
  border-bottom: 1px solid var(--ib-border);
  color: var(--ib-primary);
}

.ib-filter__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ib-primary);
  color: #fff;
  border-radius: 10px;
  font-size: .7rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
}

.ib-filters__form {
  padding: var(--ib-space-md);
}

.ib-filters__fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ib-space-md);
  margin-bottom: var(--ib-space-md);
}

.ib-filter__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
}

.ib-filter__field--active .ib-filter__label {
  color: var(--ib-primary);
  font-weight: 600;
}

.ib-filter__label {
  font-size: .8rem;
  font-weight: 500;
  color: var(--ib-text-secondary, #6c757d);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ib-filter__range {
  display: flex;
  align-items: center;
  gap: var(--ib-space-sm);
}

.ib-filter__range-sep {
  color: var(--ib-text-secondary, #6c757d);
  font-size: .85rem;
}

.ib-input--date {
  min-width: 130px;
}

.ib-filters__actions {
  display: flex;
  gap: var(--ib-space-sm);
  padding-top: var(--ib-space-sm);
  border-top: 1px solid var(--ib-border);
}