/* ==========================================
   CAWFA TALENT DOCUMENTS - DARK FINAL (v3.5)
   Perfect Alignment + Responsive + Modal Fix
========================================== */
.docm-section {
  background: linear-gradient(145deg, #000, #0c0c0c);
  border-radius: 14px;
  padding: 25px;
  color: #fff;
  box-shadow: 0 0 30px rgba(0, 0, 0, .8);
}

/* ---------- HEADER ---------- */
.docm-section .d-flex.justify-content-between {
  flex-wrap: wrap;
  align-items: center;
  gap:.75rem;
}
.docm-title {
  font-weight: 700;
  color: #fff;
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:1.25rem;
}
.docm-title i { color:#d90404; font-size:1.25rem; }
.docm-sub {
  color: #bbb;
  font-size: 14px;
  margin-top: -5px;
}

/* ---------- BUTTONS ---------- */
.docm-section .d-flex.justify-content-between > div:last-child {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.docm-btn {
  border: none;
  border-radius: 30px;
  font-weight: 600;
  padding: 10px 20px;
  color: #fff;
  transition: .25s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  min-width: 150px;
  text-align: center;
  white-space: nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,.5);
}
.docm-btn i { font-size: 1rem; line-height: 1; }

.docm-btn-add {
  background: linear-gradient(135deg, #d90404, #730707);
}
.docm-btn-add:hover {
  background: linear-gradient(135deg, #730707, #d90404);
}
.docm-btn-order {
  background: #1a1a1a;
  border:1px solid #333;
}
.docm-btn-order:hover { background: #333; }

/* ---------- TABLE ---------- */
.docm-table {
  width: 100%;
  color: #fff;
  background: linear-gradient(145deg, #0a0a0a, #111);
  border-radius: 12px;
  border-collapse: collapse;
  overflow: hidden;
  border: none;
  margin-top:1rem;
}
.docm-table thead {
  background: linear-gradient(145deg, #111, #000);
  color: #ccc;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.docm-table th, .docm-table td {
  padding: 13px 16px;
  border-top: 1px solid #1d1d1d;
  vertical-align: middle;
  background: transparent;
  color: #fff;
}
.docm-table th { border-bottom: 2px solid #222; }
.docm-table tbody tr {
  background: #111;
  transition: .25s;
}
.docm-table tbody tr:nth-child(even) { background: #141414; }
.docm-table tbody tr:hover { background: #1d1d1d; }

/* ---------- ACTION BUTTONS ---------- */
.docm-btn-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.docm-btn-action {
  border: none;
  background: linear-gradient(135deg, #d90404, #730707);
  color: #fff;
  border-radius: 6px;
  padding: 7px 10px;
  transition: .2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width:36px; height:36px;
}
.docm-btn-action:hover {
  background: linear-gradient(135deg, #730707, #d90404);
  transform: scale(1.05);
}
.docm-btn-action i { font-size: .95rem; }

/* ---------- INPUTS ---------- */
.docm-input {
  background: #1a1a1a;
  border: 1px solid #333;
  color: #fff;
  border-radius:8px;
  min-height:44px;
}
.docm-input::placeholder { color: #666; font-style: italic; }
.docm-input:focus {
  border-color: #d90404;
  box-shadow: 0 0 0 .25rem rgba(217, 4, 4, .25);
}

/* ---------- MODAL ---------- */
.docm-modal {
  background: #111;
  color: #fff;
  border: 1px solid #222;
  border-radius:12px;
}
.docm-modal .modal-header,
.docm-modal .modal-footer {
  background: #111;
  border-color: #222;
}
.docm-modal .modal-title i { color: #d90404; }

/* =======================================================
   MODAL BUTTON FIX – dark/red consistency
   ======================================================= */
.docm-modal .modal-content{
  background: #111 !important;
  color:#fff !important;
  border:1px solid #222;
  border-radius:12px;
}
.docm-modal .modal-footer{
  display:flex; gap:12px; justify-content:flex-end;
  padding-top:1rem;
}
.docm-modal .modal-footer .btn{
  border-radius:30px;
  min-width:130px; height:44px;
  font-weight:700; letter-spacing:.2px;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.45);
  transition:transform .15s ease, background .2s ease, opacity .2s ease;
}

/* Save (Kırmızı) */
.docm-modal .modal-footer .docm-btn-save{
  background: linear-gradient(135deg,#d90404,#730707) !important;
  color:#fff !important; border:none !important;
}
.docm-modal .modal-footer .docm-btn-save:hover{
  background: linear-gradient(135deg,#730707,#d90404) !important;
  transform: translateY(-1px);
}

/* Cancel (Koyu Gri) */
.docm-modal .modal-footer .docm-btn-cancel{
  background:#222 !important; color:#ddd !important;
  border:1px solid #333 !important;
}
.docm-modal .modal-footer .docm-btn-cancel:hover{
  background:#333 !important; color:#fff !important;
  transform: translateY(-1px);
}

/* Disabled durumlarda da renkleri koru */
.docm-modal .modal-footer .btn:disabled,
.docm-modal .modal-footer .btn.disabled{
  opacity:.75 !important;
  filter:none !important;
  pointer-events:none;
}

/* Close (X) butonu beyaz görünsün */
.docm-modal .btn-close{
  filter: invert(1) grayscale(100%);
  opacity:.8;
}
.docm-modal .btn-close:hover{ opacity:1; }

/* Form kontrolleri ve dosya inputları */
.docm-modal .form-control,
.docm-modal .form-select{
  background:#1a1a1a !important;
  color:#fff !important;
  border:1px solid #333 !important;
  border-radius:10px;
  min-height:46px;
}
.docm-modal .form-control::placeholder{ color:#666; }

.docm-modal input[type="file"].form-control::-webkit-file-upload-button{
  background:#222; color:#fff; border:none; border-right:1px solid #333;
}
.docm-modal input[type="file"].form-control::file-selector-button{
  background:#222; color:#fff; border:none; border-right:1px solid #333;
}

/* ---------- MOBILE VIEW ---------- */
@media (max-width: 768px) {
  .docm-section { padding:20px; }
  .docm-section .d-flex.justify-content-between {
    flex-direction:column;
    align-items:flex-start;
  }
  .docm-section .d-flex.justify-content-between > div:last-child {
    width:100%; justify-content:flex-start; flex-wrap:wrap; gap:.5rem;
  }
  .docm-btn { width:auto; min-width:130px; font-size:.9rem; padding:.5rem 1rem; }

  /* Table -> Cards */
  .docm-table, .docm-table thead, .docm-table tbody, .docm-table th, .docm-table td, .docm-table tr {
    display: block;
    width: 100%;
  }
  .docm-table thead { display: none; }

  .docm-table tbody tr {
    margin-bottom: 16px;
    border: 1px solid #222;
    border-radius: 12px;
    background: linear-gradient(135deg, #111, #090909);
    padding: 14px 16px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
  }

  .docm-table td {
    border: none;
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
  .docm-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #d90404;
    margin-right: 10px;
    text-transform: uppercase;
    flex: 1;
    font-size: 13px;
  }
  .docm-table td a, .docm-table td span, .docm-table td i {
    flex: 1.5;
    text-align: right;
    white-space: normal;
    word-break: break-word;
  }

  .docm-btn-group {
    justify-content: flex-end;
    margin-top: 8px;
  }

  .docm-table td:nth-child(2) { font-weight: 600; font-size: 15px; }
  .docm-table td:nth-child(3) { display: flex; align-items: center; gap: 6px; }

  .docm-btn-action { width:30px; height:30px; padding:5px 8px; }
  .docm-btn-action i { font-size:.85rem; }

  @media (max-width: 480px) {
    .docm-table tbody tr { padding: 10px 12px; }
    .docm-table td::before { font-size: 12px; }
  }
}