:root {
    --sidebar-width: 280px;
    --transition-time: 320ms;
}

/* mgt */
.btn-left {
  padding-left: 0px;
}
.btn-min-size {
  min-width: 70px;
  height: 37px;
}
.min-size-width-90 {
  min-width: 90px;
}
.min-size-width-74 {
  min-width: 74px;
}
/* 手機樣式 (寬度 <= 576px)*/
@media (max-width: 576px) {
  .min-size-flex-warp {
    flex-wrap: wrap;
  }
  .min-size-justify-center {
    justify-content: center;
  }
  .min-size-mb-3 {
    margin-bottom: 1rem;
  }
  .min-size-order-1 {
    order: 1;
  }
  .min-size-order-2 {
    order: 2;
  }
  .min-size-order-3 {
    order: 3;
  }
  .min-size-order-4 {
    order: 4;
  }
  .min-size-order-5 {
    order: 5;
  }
  .min-size-order-6 {
    order: 6;
  }
  .min-size-order-7 {
    order: 7;
  }
  .min-size-order-8 {
    order: 8;
  }
  .min-size-order-9 {
    order: 9;
  }
  .min-size-order-10 {
    order: 10;
  }
  .min-size-order-11 {
    order: 11;
  }
}
/*apply(申請作業)頁面*/
/* .apply-header {
  background-color: #ffffff;
  border-radius: 10px;
  border-bottom: 5px solid #ffd21f;
} */
.customHr {
  border: 0;
  height: 5px;
  background-color: #ff9100;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  margin: 0;
  opacity: 1;
}

.card-contenter {
  background-color: #ffffffb6;
  padding: 20px;
  border-radius: 0 0 10px 10px;
}

/* 標題背景樣式 */
.apply-header {
  display: flex;
  position: relative;
  border-radius: 10px 50px 0 0;
  background-color: #ff9100;
  color: #ffffff;
  width: 30%;
/*  transform: skew(8deg) translateX(-4px);*/
}

.apply-content-text {
  color: #525252;
}
.card-apply {
  margin-bottom: 15px;
  border-radius: 10px;
  border-color: #ffffff00;
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
  transition: all 0.3s;
}
.card-apply img {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  width: 130px;
  height: 130px;
}

.card-apply:hover {
  transform: scale(1.03);
  box-shadow: 0 2px 4px #ffe066c4;
}
/* card-files */
.card-files {
  margin-bottom: 15px;
  border-radius: 0 0 10px 10px;
  border-color: #ffffff00;
  background-color: #ffffffb6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.badge {
  background-color: white;
  color: #6c757d;
  border-radius: 30px;
  font-size: 15px;
  border: 1px solid #6c757d;
}
.badge:hover {
  background-color: #6c757d;
  color: #fff;
}

/*announcements(公告事項)MGT頁面*/
.card-body-gridview-title {
  border-bottom: 2px solid var(--mof-blue-500);
  width: 50%;
}
.text-brown-dark {
  color: #6b514a;
}

/*audittasks_mgt(審核作業)mgt頁面*/
.card-serch {
  border-bottom: 4px solid var(--mof-blue-500);
  border-radius: 12px;
}
.card-header-serch {
  background-color: #c4e7f8;
  border-bottom: 4px solid var(--mof-blue-500);
}

/*audittasks_handle(審核作業)handle頁面*/

/* table4 */
.w-200px {
  width: 200px;
}
.w-300px {
  width: 300px;
}

.h-200-scroll {
  max-height: 200px;
  width: 100% !important;
  overflow-y: auto !important;
}

/* sidebar */
/* 側邊欄 */
.sidebar {
    position: absolute;
/*     width: 300px; */
    /* background: #fff; */
    color: #333;
    transition: width var(--transition-time) ease;
    flex-shrink: 0;
    overflow: hidden;
}

.sidebar {
    color: #333;
}

/* 收合狀態 */
.sidebar-collapsed .sidebar {
    width: var(--sidebar-collapsed-width);
}

    .sidebar-collapsed .sidebar .label {
        display: none;
        font-size: 1rem !important;
    }

    .sidebar-collapsed .sidebar .collapse a {
        font-size: 0.8rem !important;
        color: #333 !important;
    }

.sidebar_link{
    color: #333;
    padding-left: 15px;
    margin-top:5px;
}

    .sidebar_link:hover {
        color: var(--mof-blue-500);
    }



    .sidebar-collapsed .sidebar .sidebar-header .brand-text {
        display: none;
    }

    .sidebar-collapsed .sidebar .nav .collapse {
        padding-left: 2rem;
        margin-top: 0.5rem;
    }

.sidebar .sidebar-header {
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* 側邊欄：固定於畫面左側，使用 transform 做滑動 */
#appSidebar {
    position: fixed;
    left: 0;
    top: 150px;
    bottom: 0;
    width: var(--sidebar-width);
    background: #fff;
    padding: 1rem;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
    transform: translateX(0); /* 在畫面內 */
    transition: transform var(--transition-time) ease;
    z-index: 1000;
    overflow-y: auto;
}

    /* 隱藏時向左滑出畫面 */
    #appSidebar.sidebar-hidden {
        transform: translateX(calc(-1 * var(--sidebar-width) - 10px));
    }

/* main-wrapper 固定寬度並置中（不會因為 sidebar 顯示而移動） */
.main-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1rem;
    transition: filter var(--transition-time) ease;
    min-height: 100vh;
}

/* button變化 */
.btn-toggle-nav {
    width: 1.25em;
    line-height: 0;
    transition: transform 0.35s ease;
    transform-origin: center;
}

/* 當父層 a[aria-expanded="true"] 時，旋轉圖示 */
a[aria-expanded="true"] .btn-toggle-nav {
    transform: rotate(90deg);
}


