/* =======================================================================  
   custom.css – Dock + BottomBar (v3.0)  
   ======================================================================= */

/* === Root Variables ==================================================== */
:root {
  --dock-collapsed:   90px;
  --dock-expanded:    280px;
  --dock-bg:          linear-gradient(160deg, #2c3e50, #34495e);
  --dock-accent:      #1abc9c;
  --text-color:       #222831;  /* ⚠️ تعديل هنا */
  --transition:       0.3s ease;
  --navbar-height:    58px;
  --glass-bg:         rgba(255, 255, 255, 0.7);
  --glass-blur:       blur(10px);
  --font-size-icon:   clamp(1.2rem, 1.5vw, 1.5rem);
}


/* === Dark Mode Support ================================================= */
@media (prefers-color-scheme: dark) {
  :root {
    --dock-bg:         #1a252f;
    --dock-accent:     #0fb9b1;
    --text-color:      #222831;
    --glass-bg:        rgba(30, 30, 30, 0.75);
  }
  body {
    background-color: #121212;
  }
}

/* === Base Styling ====================================================== */
body {
  margin: 0;
  font-family: 'Tajawal', sans-serif;
  background-color: #f7fafc;
  overflow-x: hidden;
  color: var(--text-color);
}
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--navbar-height);
  z-index: 1150;
}
main.main-content {
  margin-top: var(--navbar-height);
  transition: margin var(--transition);
}

/* === Dock Sidebar (≥ 992px) =========================================== */
.dock {
  position: fixed;
  top: var(--navbar-height);
  bottom: 0;
  right: 0;
  width: var(--dock-collapsed);
  background: var(--dock-bg);
  color: #fff; /* بدلاً من الاعتماد على var(--text-color) */
  display: flex;
  flex-direction: column;
  transition: width var(--transition);
  z-index: 1040;
}
.dock:hover,
.dock.expanded {
  width: var(--dock-expanded);
}

@media (min-width: 992px) {
  body {
    margin-right: var(--dock-collapsed);
    transition: margin var(--transition);
  }
  .dock:hover ~ main,
  .dock.expanded ~ main {
    margin-right: var(--dock-expanded);
  }
}

/* === Dock Menu ========================================================= */
.dock-menu {
  list-style: none;
  margin: 0;
  padding: 1rem 0;
}
.dock-item {
  margin: 0.25rem 0;
}
.dock-item a {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  transition: background var(--transition);
}
.dock-item a:hover {
  background: rgba(255, 255, 255, 0.1);
}
.dock-item.active a {
  background: var(--dock-accent);
}

/* === Labels + Icons ==================================================== */
.dock-label {
  opacity: 0;
  white-space: nowrap;
  transition: opacity var(--transition);
}
.dock-item a i {
  font-size: var(--font-size-icon);
  transition: font-size var(--transition);
}
.dock:hover .dock-label,
.dock.expanded .dock-label {
  opacity: 1;
}

/* === Dock Footer (Logout) ============================================= */
.dock-footer {
  margin-top: auto;
  padding: 1rem 0;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.dock-footer a {
  color: inherit;
}

/* === BottomBar (Mobile Only) ========================================== */
.offcanvas-bottom {
  height: auto !important;
}
.bottom-menu {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0;
  padding: 0.5rem 0;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.bottom-menu li {
  list-style: none;
}
.bottom-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--dock-bg);
  text-decoration: none;
  transition: color 0.2s ease;
  padding: 0.25rem;
}
.bottom-link.active {
  color: var(--dock-accent);
}
.bottom-link i {
  font-size: var(--font-size-icon);
  transition: transform 0.2s ease;
}
.bottom-link.active i {
  transform: scale(1.2);
}

/* === Responsive Tweaks ================================================ */
@media (max-width: 991.98px) {
  main.main-content {
    padding-bottom: 70px !important;
  }
  #dock {
    display: none !important;
  }
}
.page-table {
  overflow-x: auto;
}
@media (max-width: 767.98px) {
  table.dataTable {
    width: 100% !important;
  }
}

/* === Accessibility ==================================================== */
.dock-item a:focus-visible {
  outline: 2px dashed var(--dock-accent);
  outline-offset: 4px;
}

/* ======================================================================
   Custom Login Page Styling (optional)
   ====================================================================== */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: #f7f9fc;
}
.login-card {
  width: 100%;
  max-width: 800px;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: rgba(0,0,0,0.1) 0px 10px 25px;
}
.login-image {
  background: linear-gradient(135deg, #2176bd, #33a1fd) center/cover no-repeat;
  min-height: 300px;
}
.input-group .form-control {
  border-radius: 0;
  transition: box-shadow .3s, border-color .3s;
}
.input-group:focus-within .form-control {
  box-shadow: 0 0 0 0.2rem rgba(33, 118, 189, .25);
  border-color: #2176bd;
}
.toggle-password {
  cursor: pointer;
  user-select: none;
}
.animate__animated {
  --animate-duration: .6s;
}
@media (max-width: 767.98px) {
  .login-card {
    margin: 0 1rem;
  }
  .login-image {
    display: none;
  }
}