/* ===== Mobile Responsive Styles ===== */

/* --- Layout: Sidebar & Header --- */
.hamburger {
  display: none;
}
.sidebar-overlay {
  display: none;
}

@media (max-width: 768px) {
  .hamburger {
    display: inline-flex !important;
    margin-right: 8px;
  }
  .app-aside {
    position: fixed !important;
    left: -220px !important;
    top: 0;
    bottom: 0;
    z-index: 1001;
    transition: left 0.3s ease !important;
    width: 200px !important;
  }
  .app-aside.open {
    left: 0 !important;
  }
  .sidebar-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1000;
  }
  .app-header {
    padding: 0 12px !important;
  }
  .app-main {
    padding: 12px !important;
  }
}

/* --- Login Page --- */
@media (max-width: 768px) {
  .login-card {
    width: 90% !important;
    max-width: 360px;
    padding: 24px !important;
  }
  .login-title {
    font-size: 18px !important;
    margin-bottom: 20px !important;
  }
}

/* --- Dashboard: Toolbar & Table --- */
@media (max-width: 768px) {
  .toolbar[data-v-3fddba58] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .toolbar[data-v-3fddba58] > div {
    width: 100% !important;
  }
  .filter-group[data-v-3fddba58] {
    flex-wrap: wrap !important;
  }
  .filter-group[data-v-3fddba58] .el-select,
  .filter-group[data-v-3fddba58] .el-date-editor {
    width: 100% !important;
  }
  .filter-group[data-v-3fddba58] .el-button {
    width: 100% !important;
  }
  .el-table {
    font-size: 12px !important;
  }
  .el-table .el-table__header th,
  .el-table .el-table__body td {
    padding: 6px 4px !important;
  }
  .el-pagination {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .img-item img {
    width: 120px !important;
    height: 90px !important;
  }
  .el-dialog {
    width: 95% !important;
    margin: 16px auto !important;
  }
}

/* --- RecordForm: Compact Layout --- */
@media (max-width: 768px) {
  .form-card[data-v-8d9d562c] {
    padding: 12px !important;
  }
  .form-card[data-v-8d9d562c] h3 {
    font-size: 18px !important;
    margin-bottom: 12px !important;
  }
  .form-card[data-v-8d9d562c] .el-form {
    max-width: 100% !important;
  }
  .form-card[data-v-8d9d562c] .el-form-item {
    margin-bottom: 14px !important;
  }
  .form-card[data-v-8d9d562c] .el-form-item__label {
    padding-bottom: 4px !important;
    font-size: 13px !important;
  }
  .form-card[data-v-8d9d562c] textarea {
    min-height: 60px !important;
  }
  .form-card[data-v-8d9d562c] .el-upload--picture-card {
    width: 80px !important;
    height: 80px !important;
  }
  .form-card[data-v-8d9d562c] .el-upload-list--picture-card .el-upload-list__item {
    width: 80px !important;
    height: 80px !important;
  }
  .form-card[data-v-8d9d562c] .el-button {
    width: 100% !important;
    margin-left: 0 !important;
  }
  .form-card[data-v-8d9d562c] .el-button + .el-button {
    margin-top: 8px !important;
  }
}

/* --- UserManage (if exists) --- */
@media (max-width: 768px) {
  .el-table {
    font-size: 12px !important;
  }
}

/* --- General Element Plus Overrides for Mobile --- */
@media (max-width: 768px) {
  .el-select {
    width: 100% !important;
  }
  .el-date-editor.el-date-editor--date {
    width: 100% !important;
  }
  .el-input__wrapper {
    min-height: 36px !important;
  }
}