/* ==========================================================
   CoordX UI v1.0
   ========================================================== */

:root{

    --primary:#0f2747;
    --primary-dark:#091b33;
    --gold:#d4af37;

    --bg:#f4f6f9;

    --white:#ffffff;

    --text:#222;

    --text-light:#777;

    --border:#e5e7eb;

    --success:#16a34a;

    --danger:#dc2626;

    --warning:#f59e0b;

    --radius:14px;

    --shadow:0 8px 25px rgba(0,0,0,.08);

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    direction:rtl;

    background:var(--bg);

    font-family:
    "Segoe UI",
    Tahoma,
    sans-serif;

    color:var(--text);

}

html[dir="ltr"] body{
    direction:ltr;
}

/* ================= LOGIN ================= */

.login-page{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

    background:
    linear-gradient(135deg,#102b50,#1f4d87);

}

.login-card{

    width:430px;

    background:white;

    border-radius:22px;

    padding:40px;

    box-shadow:var(--shadow);

}

.brand{

    text-align:center;

    margin-bottom:35px;

}

.brand h1{

    color:var(--primary);

    font-size:34px;

    font-weight:bold;

}

.brand p{

    color:#666;

    margin-top:10px;

}

.gold-line{

    width:80px;

    height:5px;

    background:var(--gold);

    margin:15px auto;

    border-radius:20px;

}

.form-group{

    margin-bottom:20px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-weight:bold;

}

.form-control{

    width:100%;

    height:48px;

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

    border-radius:12px;

    padding:0 15px;

    font-size:15px;

}

.form-control:focus{

    outline:none;

    border-color:var(--primary);

}

.btn-primary{

    width:100%;

    height:48px;

    border:none;

    border-radius:12px;

    background:var(--primary);

    color:white;

    font-size:16px;

    cursor:pointer;

    transition:.3s;

}

.btn-primary:hover{

    background:var(--primary-dark);

}

/* ================= LAYOUT ================= */

.dashboard{

    display:flex;

    min-height:100vh;

}

/* Sidebar */

.sidebar{

    width:260px;

    background:var(--primary);

    color:white;

    box-shadow:var(--shadow);

}

.logo{

    text-align:center;

    padding:30px 15px;

    border-bottom:1px solid rgba(255,255,255,.15);

}

.logo h2{

    font-size:34px;

}

.logo span{

    color:#ddd;

}

.sidebar ul{

    list-style:none;

    padding:20px;

}

.sidebar li{

    margin-bottom:10px;

}

.sidebar a{

    display:block;

    color:white;

    text-decoration:none;

    padding:13px 15px;

    border-radius:10px;

    transition:.25s;

}

.sidebar a:hover{

    background:rgba(255,255,255,.15);

}

/* Content */

.content{

    flex:1;

    padding:30px;

}

.topbar{

    background:white;

    border-radius:15px;

    padding:20px;

    box-shadow:var(--shadow);

    margin-bottom:25px;

}

/* Cards */

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

}

.card{

    background:white;

    border-radius:18px;

    padding:25px;

    box-shadow:var(--shadow);

}

.card h3{

    color:#777;

    margin-bottom:15px;

    font-size:16px;

}

.card h1{

    color:var(--primary);

    font-size:40px;

}

.sidebar a.active {
  background: rgba(255, 255, 255, 0.18);
  border-right: 4px solid var(--gold);
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.action-btn,
.filter-btn,
.reset-btn,
.table-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

.action-btn {
  background: var(--primary);
  color: white;
  padding: 12px 18px;
}

.panel {
  margin-top: 24px;
  background: white;
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow);
}

.filters {
  display: grid;
  grid-template-columns: minmax(250px, 2fr) minmax(170px, 1fr) auto auto;
  gap: 14px;
  align-items: end;
  margin-bottom: 22px;
}

.filter-field label {
  display: block;
  margin-bottom: 7px;
  font-weight: 600;
}

.filter-btn {
  height: 48px;
  padding: 0 22px;
  background: var(--primary);
  color: white;
}

.reset-btn {
  height: 48px;
  padding: 0 18px;
  background: #eef1f5;
  color: var(--text);
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 850px;
}

.data-table th,
.data-table td {
  padding: 15px 12px;
  text-align: right;
  border-bottom: 1px solid var(--border);
}

.data-table th {
  background: #f8fafc;
  color: var(--primary);
  font-size: 14px;
}

.data-table tbody tr:hover {
  background: #fafbfc;
}

.status-badge {
  display: inline-block;
  padding: 6px 11px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}

.status-active {
  background: #dcfce7;
  color: #166534;
}

.status-inactive {
  background: #f1f5f9;
  color: #475569;
}

.status-suspended {
  background: #fee2e2;
  color: #991b1b;
}

.table-action {
  padding: 7px 10px;
  margin-left: 5px;
  background: #edf2f7;
  color: var(--primary);
  font-size: 13px;
}

.empty-state {
  text-align: center !important;
  color: var(--text-light);
  padding: 40px !important;
}

@media (max-width: 900px) {
  .sidebar {
    width: 220px;
  }

  .content {
    padding: 18px;
  }

  .filters {
    grid-template-columns: 1fr;
  }

  .topbar {
    gap: 15px;
    align-items: flex-start;
    flex-direction: column;
  }
}

.disabled-link {
  opacity: 0.55;
  cursor: not-allowed;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}

.disabled-link span {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.14);
  padding: 3px 7px;
  border-radius: 12px;
}

.alert {
  padding: 16px 18px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.alert-danger {
  background: #fee2e2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.member-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-section {
  background: white;
  border-radius: 18px;
  padding: 25px;
  box-shadow: var(--shadow);
}

.section-heading {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.section-heading h3 {
  color: var(--primary);
  margin-bottom: 6px;
}

.section-heading p {
  color: var(--text-light);
  font-size: 14px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.form-span-2 {
  grid-column: span 2;
}

.form-span-4 {
  grid-column: span 4;
}

.form-control {
  min-height: 48px;
}

select.form-control {
  background: white;
}

.file-control {
  padding-top: 11px;
}

.textarea-control {
  height: auto;
  min-height: 110px;
  padding-top: 13px;
  resize: vertical;
}

.form-group small {
  display: block;
  color: var(--text-light);
  margin-top: 7px;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  border-radius: 18px;
  padding: 20px 25px;
  box-shadow: var(--shadow);
}

.form-actions .action-btn,
.form-actions .reset-btn {
  min-width: 140px;
}

@media (max-width: 1100px) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-span-4 {
    grid-column: span 2;
  }
}

@media (max-width: 700px) {
  .dashboard {
    display: block;
  }

  .sidebar {
    width: 100%;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-span-2,
  .form-span-4 {
    grid-column: span 1;
  }

  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }
}
.member-profile-header {
  display: flex;
  align-items: center;
  gap: 24px;
}

.member-photo-box {
  width: 130px;
  height: 130px;
  flex-shrink: 0;
}

.member-profile-photo,
.member-photo-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid var(--border);
}

.member-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  color: var(--text-light);
}

.member-main-info h1 {
  color: var(--primary);
  margin-bottom: 8px;
}

.member-main-info p {
  color: var(--text-light);
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.profile-item {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}

.profile-item span {
  display: block;
  color: var(--text-light);
  font-size: 13px;
  margin-bottom: 6px;
}

.profile-item strong {
  color: var(--text);
  font-size: 15px;
}

.profile-notes {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  line-height: 1.8;
  white-space: pre-wrap;
}

@media (max-width: 1000px) {
  .profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .member-profile-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .profile-grid {
    grid-template-columns: 1fr;
  }
}
/* ================================
   Member Profile
================================ */
.member-profile-topbar { gap: 20px; flex-wrap: wrap; }
.profile-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.profile-action { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border: 0; border-radius: 10px; text-decoration: none; font: inherit; font-weight: 700; cursor: pointer; }
.profile-action-primary { background: var(--primary); color: #fff; }
.profile-action-light, .profile-action-print { background: #eef2f7; color: var(--primary); }
.profile-action-disabled { background: #f4f6f9; color: #94a3b8; cursor: not-allowed; pointer-events: none; }
.profile-action-disabled span { font-size: 10px; padding: 2px 6px; border-radius: 10px; background: #e2e8f0; }
.member-hero { overflow: hidden; position: relative; }
.member-hero::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--primary); }
.member-profile-header { display: flex; align-items: center; gap: 26px; }
.member-photo-box { width: 138px; height: 138px; flex-shrink: 0; }
.member-profile-photo, .member-avatar-placeholder { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 5px solid #fff; box-shadow: 0 8px 24px rgba(15,45,82,.14); }
.member-avatar-placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, var(--primary), #28558c); color: #fff; }
.member-avatar-placeholder span { font-size: 54px; font-weight: 800; }
.member-main-info { flex: 1; min-width: 0; }
.member-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.member-main-info h1 { color: var(--primary); margin: 0 0 7px; font-size: clamp(27px,3vw,42px); }
.member-main-info p { margin: 0; color: var(--text-light); font-size: 16px; }
.member-status { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.member-status-active { color: #15803d; background: #dcfce7; }
.member-status-inactive { color: #a16207; background: #fef3c7; }
.member-status-suspended { color: #b91c1c; background: #fee2e2; }
.member-status-inline { padding: 5px 10px; font-size: 13px; }
.member-summary { margin-top: 24px; display: grid; grid-template-columns: repeat(4,minmax(130px,1fr)); gap: 12px; }
.member-summary > div { padding: 13px 15px; background: #f8fafc; border: 1px solid var(--border); border-radius: 12px; }
.member-summary span { display: block; color: var(--text-light); font-size: 12px; margin-bottom: 5px; }
.member-summary strong { color: var(--text); font-size: 15px; }
.profile-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.compact-profile-grid .profile-item { min-height: 90px; }
.profile-item { background: #f8fafc; border: 1px solid var(--border); border-radius: 12px; padding: 15px; }
.profile-item span { display: block; color: var(--text-light); font-size: 12px; margin-bottom: 7px; }
.profile-item strong { color: var(--text); font-size: 15px; word-break: break-word; }
.profile-notes { background: #f8fafc; border: 1px solid var(--border); border-radius: 12px; padding: 18px; line-height: 1.9; white-space: pre-wrap; }
@media print { .sidebar, .profile-actions { display: none !important; } .dashboard { display: block; } .content { padding: 0; } .form-section, .topbar { box-shadow: none !important; break-inside: avoid; } }
@media (max-width: 1100px) { .member-summary, .profile-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 700px) { .member-profile-header, .member-title-row { flex-direction: column; align-items: flex-start; } .member-summary, .profile-grid { grid-template-columns: 1fr; } .profile-actions { width: 100%; } .profile-action { flex: 1 1 150px; } }