/* =========================
   DASHBOARD
========================= */

.dashboard {
  min-height: 100vh;
  background: var(--hamim-bg);
  color: var(--hamim-dark);
  padding-top: 30px;
}

/* =========================
   GREETING
========================= */

.dashboard-title {
  margin: 0;

  font-size: 36px;
  font-weight: 700;

  color: var(--hamim-dark);
  letter-spacing: -1px;
}

.dashboard-subtitle {
  margin-top: 6px;
  margin-bottom: 0;

  color: var(--hamim-gray);
  font-size: 15px;
}

/* =========================
   ACTION CARDS
========================= */

.action-card {
  min-height: 164px;

  padding: 18px;

  background: var(--hamim-white);

  border: 1px solid var(--hamim-border);
  border-radius: 7px;
  cursor: pointer;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.action-card:hover {
  transform: translateY(-2px);

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  pointer: cursor;
}

/* Primary card */

.action-primary {
  background: var(--hamim-orange);
  border-color: var(--hamim-orange);

  color: var(--hamim-white);
}

.action-primary h3 {
  color: var(--hamim-white);
}

.action-primary p {
  color: rgba(255, 255, 255, 0.9);
}

/* Card title */

.action-card h3 {
  margin-top: 12px;
  margin-bottom: 3px;

  font-size: 20px;
  line-height: 1.2;

  font-weight: 700;

  color: var(--hamim-dark);
}

/* Card description */

.action-card p {
  margin: 0;

  font-size: 12px;
  line-height: 1.4;

  color: var(--hamim-gray);
}

/* =========================
   ICON
========================= */

.action-icon {
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;

  font-size: 18px;

  background: rgba(255, 255, 255, 0.2);
  color: var(--hamim-white);
}

.action-icon-orange {
  background: rgba(226, 97, 0, 0.12);
  color: var(--hamim-orange);
}

.action-icon-green {
  background: rgba(39, 125, 93, 0.12);
  color: #277d5d;
}

.action-icon-gray {
  background: rgba(65, 67, 68, 0.08);
  color: var(--hamim-gray);
}

/* =========================
   SECTION HEADER
========================= */

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom: 1px solid var(--hamim-border);

  margin-bottom: 12px;
}

.section-header h2 {
  margin: 0;
  padding-bottom: 7px;

  font-size: 25px;
  font-weight: 700;

  color: var(--hamim-dark);
}

.calendar-link {
  color: var(--hamim-orange);

  font-size: 12px;
  font-weight: 600;

  text-decoration: none;
}

.calendar-link:hover {
  color: #b94f00;
}

/* =========================
   MEETING CARD
========================= */

.meeting-list {
  display: flex;
  flex-direction: column;

  gap: 6px;
}

.meeting-card {
  min-height: 72px;

  display: flex;
  align-items: center;

  padding: 10px 12px;

  background: var(--hamim-white);

  border: 1px solid var(--hamim-border);
  border-radius: 5px;
}

/* =========================
   TIME
========================= */

.meeting-time {
  width: 48px;
  min-width: 48px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background: #f5f5f5;

  border: 1px solid #e5e5e5;

  padding: 4px 2px;

  border-radius: 3px;
}

.meeting-time small {
  font-size: 9px;
  font-weight: 700;

  color: var(--hamim-orange);
}

.meeting-time strong {
  font-size: 17px;
  line-height: 1;

  color: var(--hamim-dark);
}

/* =========================
   MEETING INFO
========================= */

.meeting-info {
  flex: 1;

  margin-left: 12px;
}

.meeting-info h4 {
  margin: 0 0 3px;

  font-size: 17px;
  font-weight: 600;

  color: var(--hamim-dark);
}

.meeting-info span {
  font-size: 11px;

  color: var(--hamim-gray);
}

/* =========================
   BUTTON
========================= */

.btn-hamim {
  background: var(--hamim-orange);
  border: 1px solid var(--hamim-orange);

  color: var(--hamim-white);

  font-size: 12px;
  font-weight: 600;

  padding: 6px 20px;

  border-radius: 3px;
}

.btn-hamim:hover {
  background: #c95400;
  border-color: #c95400;

  color: var(--hamim-white);
}

.btn-outline-hamim {
  background: transparent;

  border: 1px solid var(--hamim-orange);

  color: var(--hamim-orange);

  font-size: 12px;
  font-weight: 600;

  padding: 6px 20px;

  border-radius: 3px;
}

.btn-outline-hamim:hover {
  background: var(--hamim-orange);
  color: var(--hamim-white);
}

/* Modal Material */
.material-item {
  padding: 16px;

  background: #fff;

  border: 1px solid #e2e2e2;

  border-radius: 8px;

  cursor: pointer;

  transition: all 0.2s ease;
}

.material-item:hover {
  border-color: var(--hamim-orange);

  transform: translateY(-2px);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.material-icon {
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 12px;

  border-radius: 8px;

  background: rgba(226, 97, 0, 0.1);

  color: var(--hamim-orange);

  font-size: 20px;
}

.material-item h6 {
  margin-bottom: 4px;

  color: var(--hamim-dark);
}

.material-item small {
  color: var(--hamim-gray);
}