/* Scrolling (all screen sizes): custom.css locks ".login-page" with overflow:hidden and the page body keeps
   that class after signing in, so the dashboard couldn't scroll. Allow vertical scrolling everywhere. */
html body.login-page, html body.bgimg, html body.hold-transition { overflow-x: hidden !important; overflow-y: auto !important; height: auto !important; }
html { overflow-y: auto; }

/* Phone & small-tablet layout for AlshamsElect. Only applies below 768px, so desktop is unchanged. */
@media (max-width: 767px) {
  html, body { max-width: 100%; }
  /* iPhones zoom "fixed" backgrounds badly; let the photo scroll with the page. */
  body.bgimg, body.login-page { background-attachment: scroll !important; }
  /* Inputs at 16px stop iOS from zooming in when a field is tapped. */
  input.form-control, select.form-control, textarea.form-control { font-size: 16px; }

  /* ── Top bar: breadcrumb on its own line, buttons side by side ─────────── */
  .content-header {
    height: auto !important; opacity: 1 !important; background: rgba(204, 204, 204, .92) !important;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px !important;
  }
  .content-header > .breadcrumb {
    position: static !important; float: none !important; order: 3; flex: 1 0 100%; margin: 2px 0 0 !important;
    padding: 0 !important; background: transparent; font-size: 13px; white-space: nowrap; overflow-x: auto;
  }
  .content-header > .logout-btn, .content-header > .lang-btn, .content-header > .btn {
    float: none !important; position: static !important; margin: 0 !important; padding: 6px 12px !important; font-size: 13px !important; height: auto !important;
  }
  .content-header > h1 { font-size: 20px; margin: 0; flex: 1 0 100%; order: 2; }

  /* ── Page frame: no sideways overhang ───────────────────────────────────── */
  .content-wrapper { margin-left: 0 !important; min-height: 0 !important; }
  .content-wrapper .row, #dataManipulate .row, #dataManipulate .container { margin-left: 0 !important; margin-right: 0 !important; }
  #dataManipulate .container, .content-wrapper .container { width: auto !important; padding-left: 10px !important; padding-right: 10px !important; }
  .content { padding: 10px !important; }
  .box { margin-bottom: 12px; }
  .box-body { padding: 10px; }

  /* ── Login & registration ───────────────────────────────────────────────── */
  .login-box, .register-box { width: auto !important; max-width: 420px; margin: 0 auto !important; padding: 0 12px; }
  .login-box-body, .register-box-body { padding: 16px 14px !important; }
  .login-box .row, .register-box .row { margin-left: 0; margin-right: 0; }
  .login-box .col-xs-4, .register-box .col-xs-4, .login-box .col-xs-8 { width: 100% !important; float: none !important; padding: 0 !important; margin-top: 8px; }
  .login-box .btn-block, .login-box .btn-primary, .login-box .btn-info, .login-box button[type=submit] { width: 100%; padding: 10px; font-size: 16px; }
  .lang-btn { position: static !important; float: none !important; display: inline-block; margin: 8px !important; max-width: calc(100% - 16px); }
  .login-logo, .register-logo { font-size: 30px; margin-bottom: 14px; }

  /* ── Dashboard tiles: compact cards ─────────────────────────────────────── */
  .info-box { min-height: 0 !important; margin-bottom: 10px; }
  .info-box .info-box-icon { height: 64px !important; width: 64px !important; line-height: 64px !important; font-size: 30px !important; }
  .info-box .info-box-content { padding: 12px 10px !important; margin-left: 64px; min-height: 64px; }
  .info-box .info-box-content .info-box-text { display: inline; font-size: 16px; white-space: normal; }
  .info-box .info-box-content .info-box-text + .info-box-text::before { content: " "; }
  .info-box .info-box-content a { display: block; }
  [dir="rtl"] .info-box .info-box-content, .rtl .info-box .info-box-content { margin-left: 0; margin-right: 64px; }

  /* ── Tables: scroll sideways inside their own box instead of being cut off ─ */
  #dataManipulate table.table, .content table.table { margin-bottom: 0; }
  #dataManipulate .box-body, #dataManipulate .table-wrap, #dataManipulate .dataTables_wrapper,
  #dataManipulate .table-responsive, .content .box-body {
    overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100%;
  }
  #dataManipulate table.table th, #dataManipulate table.table td { padding: 6px 8px; font-size: 13px; }
  .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate { float: none !important; text-align: center !important; margin: 6px 0; }
  .dataTables_wrapper .dataTables_filter input { width: 100% !important; margin: 4px 0 0 !important; }
  .dt-buttons, .rpt-actions { display: flex; flex-wrap: wrap; gap: 6px; }

  /* ── Forms & filters stack full width ───────────────────────────────────── */
  #dataManipulate [class*="col-md-"], #dataManipulate [class*="col-sm-"] { width: 100%; float: none; }
  #dataManipulate .form-group { margin-bottom: 10px; }
  #dataManipulate .btn { white-space: normal; }
  .modal-dialog { width: auto !important; margin: 10px !important; }
}