/* SmartAI — responsive shell (mobile, tablet, desktop) */

/* Prevent horizontal page scroll from chrome overflow */
body.smartai-app-shell {
  overflow-x: hidden;
}

body.smartai-app-shell #wrapper #content-wrapper {
  width: 100%;
  min-width: 0;
}

body.smartai-app-shell .container-fluid {
  max-width: 100%;
}

/* ----- Sidebar: off-canvas overlay below lg (992px) ----- */
@media (max-width: 991.98px) {
  body.smartai-app-shell #wrapper {
    position: relative;
  }

  body.smartai-app-shell #wrapper #content-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.smartai-app-shell .sidebar {
    position: fixed !important;
    top: 0;
    bottom: 0;
    height: 100vh !important;
    min-height: 100vh !important;
    z-index: 1052;
    width: 14rem !important;
    overflow-x: hidden;
    overflow-y: auto;
    transition: transform 0.25s ease;
    box-shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.2);
  }

  body.smartai-app-shell:not([dir="rtl"]) .sidebar {
    left: 0;
    right: auto;
    transform: translateX(0);
  }

  [dir="rtl"] body.smartai-app-shell .sidebar {
    left: auto;
    right: 0;
    transform: translateX(0);
  }

  /* Hidden when toggled (default on mobile) */
  body.smartai-app-shell.sidebar-toggled:not(.sidebar-mobile-open) .sidebar,
  body.smartai-app-shell.sidebar-toggled:not(.sidebar-mobile-open) .sidebar.toggled {
    width: 14rem !important;
    overflow: hidden;
  }

  body.smartai-app-shell:not([dir="rtl"]).sidebar-toggled:not(.sidebar-mobile-open) .sidebar,
  body.smartai-app-shell:not([dir="rtl"]).sidebar-toggled:not(.sidebar-mobile-open) .sidebar.toggled {
    transform: translateX(-100%);
  }

  [dir="rtl"] body.smartai-app-shell.sidebar-toggled:not(.sidebar-mobile-open) .sidebar,
  [dir="rtl"] body.smartai-app-shell.sidebar-toggled:not(.sidebar-mobile-open) .sidebar.toggled {
    transform: translateX(100%);
  }

  /* Open overlay menu */
  body.smartai-app-shell.sidebar-mobile-open .sidebar {
    transform: translateX(0) !important;
    width: 14rem !important;
  }

  body.smartai-app-shell .sidebar .nav-item .nav-link {
    width: 100% !important;
    text-align: left;
  }

  [dir="rtl"] body.smartai-app-shell .sidebar .nav-item .nav-link {
    text-align: right;
  }

  body.smartai-app-shell .sidebar .sidebar-brand .sidebar-brand-text {
    display: inline !important;
  }

  body.smartai-app-shell .sidebar .nav-item .nav-link span {
    display: inline !important;
    font-size: 0.85rem;
  }

  body.smartai-app-shell .sidebar .nav-item .collapse {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
  }

  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 1051;
  }

  body.smartai-app-shell.sidebar-mobile-open .sidebar-backdrop {
    display: block;
  }
}

/* Desktop: preserve SB Admin toggled narrow rail */
@media (min-width: 992px) {
  body.smartai-app-shell .sidebar-backdrop {
    display: none !important;
  }

  body.smartai-app-shell.sidebar-mobile-open {
    /* class only used on mobile */
  }
}

/* ----- Topbar ----- */
.smartai-topbar {
  flex-wrap: wrap;
  min-height: 3.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  gap: 0.25rem;
}

.smartai-topbar .smartai-topbar-nav {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem;
  max-width: 100%;
}

@media (max-width: 991.98px) {
  .smartai-topbar .smartai-topbar-nav {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .smartai-topbar .topbar-icon-link {
    padding: 0 0.5rem !important;
    margin: 0 !important;
  }

  .smartai-topbar .user-info-container {
    padding: 0.35rem 0.5rem;
  }

  .smartai-topbar .topbar-divider {
    display: none !important;
  }

  .smartai-topbar-mobile-menu .dropdown-menu {
    min-width: 12rem;
  }

  .smartai-topbar-mobile-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
  }

  .smartai-topbar-mobile-menu .dropdown-item i {
    width: 1.25rem;
    text-align: center;
  }
}

@media (max-width: 575.98px) {
  body.smartai-app-shell .container-fluid {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .smartai-topbar {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* ----- Cards, headers, tabs ----- */
@media (max-width: 991.98px) {
  .card-header.d-flex,
  .card-header .d-flex {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .card-header h6 {
    width: 100%;
    margin-bottom: 0.25rem;
  }

  .parent-menu-tabs-container .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .parent-menu-tabs-container .nav-tabs .nav-link {
    white-space: nowrap;
  }
}

/* ----- DataTables responsive ----- */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Expand control on first column; actions column always visible */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
  cursor: pointer;
  white-space: nowrap;
}

/* Font Awesome expand/collapse (replaces default ► / ▼ glyphs) */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before,
table.dataTable.dtr-column > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-column > tbody > tr > th.dtr-control:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1;
  vertical-align: middle;
  color: var(--theme-primary, #4e73df);
  content: "\f054" !important; /* fa-chevron-right */
  margin-right: 0.5rem;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before,
table.dataTable.dtr-column > tbody > tr.parent > td.dtr-control:before,
table.dataTable.dtr-column > tbody > tr.parent > th.dtr-control:before {
  content: "\f078" !important; /* fa-chevron-down */
}

html[data-theme="dark"] table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
html[data-theme="dark"] table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before,
[data-theme="dark"] table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
[data-theme="dark"] table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
  color: var(--theme-primary, #6c8ef5);
}

table.dataTable > tbody > tr.child {
  background-color: #f8f9fc;
}

table.dataTable > tbody > tr.child ul.dtr-details {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
}

table.dataTable > tbody > tr.child ul.dtr-details > li {
  padding: 0.35rem 0;
  border-bottom: 1px solid #e3e6f0;
}

table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {
  border-bottom: none;
}

table.dataTable > tbody > tr.child span.dtr-title {
  display: inline-block;
  min-width: 7rem;
  font-weight: 600;
  color: #5a5c69;
  margin-right: 0.5rem;
}

table.dataTable > tbody > tr.child span.dtr-data {
  display: inline;
  color: #3a3b45;
}

table.dataTable td.all,
table.dataTable th.all {
  white-space: nowrap;
  vertical-align: middle;
}

table.dataTable td.all .d-flex.gap-1 {
  flex-wrap: nowrap;
}

html[data-theme="dark"] table.dataTable > tbody > tr.child,
[data-theme="dark"] table.dataTable > tbody > tr.child {
  background-color: var(--dm-surface-elevated);
}

html[data-theme="dark"] table.dataTable > tbody > tr.child ul.dtr-details > li,
[data-theme="dark"] table.dataTable > tbody > tr.child ul.dtr-details > li {
  border-bottom-color: var(--dm-border);
}

html[data-theme="dark"] table.dataTable > tbody > tr.child span.dtr-title,
[data-theme="dark"] table.dataTable > tbody > tr.child span.dtr-title {
  color: var(--dm-text-muted);
}

html[data-theme="dark"] table.dataTable > tbody > tr.child span.dtr-data,
[data-theme="dark"] table.dataTable > tbody > tr.child span.dtr-data {
  color: var(--dm-text);
}

@media (max-width: 767.98px) {
  div.dataTables_wrapper div.dataTables_info,
  div.dataTables_wrapper div.dataTables_paginate {
    text-align: center;
    float: none;
    width: 100%;
    margin-top: 0.5rem;
  }

  div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    justify-content: center;
    flex-wrap: wrap;
  }

  table.dataTable > tbody > tr.child span.dtr-title {
    min-width: 5.5rem;
    display: block;
    margin-bottom: 0.15rem;
  }

  table.dataTable > tbody > tr.child span.dtr-data {
    display: block;
  }
}

/* Drawer forms on small screens */
@media (max-width: 575.98px) {
  .drawer-form-container .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .config-flow .config-section .card-body {
    padding: 0.75rem;
  }
}

/* Account / login pages */
@media (max-width: 575.98px) {
  .account-layout .login-container,
  .login-shell .login-container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}