/* Damans Design Vault — Designer Portal CSS */
*, *::before, *::after { box-sizing: border-box; }

.ddv-portal-wrap {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: #1a1f2e;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 0 40px;
}

/* ════════════════════════════════════════════════════════
   LOGIN — matches After-Sales Staff Portal exactly
   ════════════════════════════════════════════════════════ */

.ddv-sp-login-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 480px !important;
    padding: 24px 16px !important;
}

.ddv-sp-login-box {
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06) !important;
    padding: 40px 36px 36px !important;
    width: 100% !important;
    max-width: 380px !important;
    text-align: center !important;
}

.ddv-sp-login-logo {
    margin-bottom: 16px !important;
}

.ddv-sp-login-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1a2332 !important;
    margin: 0 0 4px !important;
}

.ddv-sp-login-sub {
    font-size: 13px !important;
    color: #6c757d !important;
    margin: 0 0 28px !important;
}

.ddv-login-step-inner {
    text-align: left !important;
}

/* Fields */
.ddv-sp-field {
    margin-bottom: 16px !important;
    text-align: left !important;
}

.ddv-sp-field label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #495057 !important;
    margin-bottom: 5px !important;
    letter-spacing: .3px !important;
    text-transform: uppercase !important;
}

.ddv-sp-field input,
.ddv-sp-field select {
    width: 100% !important;
    padding: 9px 12px !important;
    border: 1px solid #ced4da !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    color: #1a2332 !important;
    background: #fff !important;
    transition: border-color .15s, box-shadow .15s;
    outline: none !important;
    appearance: none;
    -webkit-appearance: none;
}

.ddv-sp-field input:focus,
.ddv-sp-field select:focus {
    border-color: #1a3a5c !important;
    box-shadow: 0 0 0 3px rgba(26,58,92,.12) !important;
}

/* Buttons */
.ddv-sp-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    border: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background .15s, transform .1s;
    font-family: inherit !important;
    white-space: nowrap !important;
}
.ddv-sp-btn:active { transform: scale(.98); }

.ddv-sp-btn-primary {
    background: #1a3a5c !important;
    color: #fff !important;
}
.ddv-sp-btn-primary:hover { background: #14304f !important; }
.ddv-sp-btn-primary:disabled { opacity: .6 !important; cursor: not-allowed !important; }

.ddv-sp-btn-full { width: 100% !important; }

.ddv-sp-btn-back {
    display: block !important;
    width: 100% !important;
    margin-top: 10px !important;
    padding: 8px !important;
    background: none !important;
    border: none !important;
    color: #6c757d !important;
    font-size: 13px !important;
    cursor: pointer !important;
    text-align: center !important;
    font-family: inherit !important;
}
.ddv-sp-btn-back:hover { color: #1a3a5c !important; }

/* Alert */
.ddv-sp-alert {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 16px;
    text-align: left;
}
.ddv-sp-alert-error {
    background: #fff0f0;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

/* Step 2 intro */
.ddv-sp-step2-intro {
    font-size: 14px;
    color: #374151;
    margin-bottom: 18px;
}

/* Spinner */
.ddv-sp-spinner {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ddv-spin .7s linear infinite;
    display: inline-block;
}
@keyframes ddv-spin { to { transform: rotate(360deg); } }

/* ── Top bar (logged in) ── */
.ddv-portal-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1a1f2e;
    padding: 14px 24px;
    flex-wrap: wrap;
    gap: 8px;
}
.ddv-portal-topbar .ddv-portal-logo {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin: 0;
}
.ddv-portal-user {
    font-size: 13px;
    color: rgba(255,255,255,.6);
    display: flex;
    align-items: center;
    gap: 12px;
}
.ddv-portal-user strong { color: #fff; }

/* ── Body layout ── */
.ddv-portal-body {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 1px;
    background: #e2e4e9;
    border: 1px solid #e2e4e9;
    border-top: none;
}
@media (max-width: 840px) {
    .ddv-portal-body { grid-template-columns: 1fr; }
}

/* ── Panels ── */
.ddv-portal-panel {
    background: #fff;
    padding: 24px;
}
.ddv-portal-panel h2 {
    margin: 0 0 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #9ca3af;
    border-bottom: 1px solid #f0f1f3;
    padding-bottom: 10px;
}
.ddv-portal-panel h3 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #374151;
    margin: 18px 0 10px;
}

/* ── Fields ── */
.ddv-field { margin-bottom: 14px; }
.ddv-field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 5px;
}
.ddv-field input,
.ddv-field select,
.ddv-field textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #d1d5db;
    font-size: 14px;
    color: #1a1f2e;
    background: #fff;
    transition: border-color .15s;
}
.ddv-field input:focus,
.ddv-field select:focus,
.ddv-field textarea:focus {
    outline: none;
    border-color: #1a1f2e;
}
.ddv-field-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.ddv-check-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
}
.ddv-check-label input { width: auto; }

/* ── Buttons ── */
.ddv-portal-btn {
    display: inline-block;
    background: #1a1f2e;
    color: #fff;
    border: none;
    padding: 10px 22px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity .15s;
    margin-top: 4px;
}
.ddv-portal-btn:hover { opacity: .85; }
.ddv-portal-btn-green { background: #0d4b36; }
.ddv-portal-btn-ghost {
    display: inline-block;
    background: transparent;
    color: #6b7280;
    border: 1px solid #d1d5db;
    padding: 9px 18px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 4px;
}
.ddv-portal-btn-ghost:hover { background: #f8f9fb; color: #1a1f2e; }

/* ── Error / notice ── */
.ddv-auth-error {
    background: #fef2f2;
    border-left: 3px solid #ef4444;
    color: #7f1d1d;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 16px;
}
.ddv-created-notice {
    background: #f0fdf4;
    border-left: 3px solid #22c55e;
    padding: 10px 14px;
    font-size: 13px;
    color: #14532d;
    margin-bottom: 18px;
}

/* ── Drop zones ── */
.ddv-drop-zone {
    border: 2px dashed #d1d5db;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    position: relative;
    transition: border-color .2s, background .2s;
}
.ddv-drop-zone:hover,
.ddv-drop-zone.dragover { border-color: #1a1f2e; background: #f8f9fb; }
.ddv-drop-zone p { margin: 0; font-size: 13px; color: #9ca3af; pointer-events: none; }
.ddv-drop-zone .ddv-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

/* ── Thumbnails ── */
.ddv-thumb-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ddv-portal-thumb {
    width: 72px;
    height: 72px;
    border: 1px solid #e2e4e9;
    position: relative;
    overflow: hidden;
}
.ddv-portal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ddv-thumb-uploading {
    width: 72px;
    height: 72px;
    border: 1px solid #e2e4e9;
    background: #f8f9fb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.ddv-upload-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: #1a1f2e;
    width: 0;
    transition: width .2s;
}

/* ── Send row ── */
.ddv-send-row { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ddv-send-confirm {
    margin-top: 12px;
    font-size: 13px;
    color: #065f46;
    background: #f0fdf4;
    border-left: 3px solid #22c55e;
    padding: 10px 14px;
}

/* ── Projects list ── */
.ddv-loading { color: #9ca3af; font-size: 13px; }
.ddv-project-item {
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 13px;
}
.ddv-project-item:last-child { border-bottom: none; }
.ddv-project-item-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ddv-project-ref { font-weight: 700; color: #1a1f2e; font-size: 12px; }
.ddv-project-client { color: #374151; flex: 1; }
.ddv-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ddv-status-dot.sent  { background: #22c55e; }
.ddv-status-dot.draft { background: #9ca3af; }
.ddv-project-meta { font-size: 11px; color: #9ca3af; display: flex; gap: 12px; }
.ddv-no-projects { font-size: 13px; color: #9ca3af; padding: 20px 0; }

/* ── Detail header ── */
.ddv-detail-header { display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid #e8eaee; margin-bottom:14px; flex-wrap:wrap; }
.ddv-detail-ref { font-size:13px; font-weight:800; color:#1a1f2e; }
#ddv-detail-client { font-size:13px; color:#6b7280; flex:1; }
.ddv-detail-meta { font-size:11px; color:#9ca3af; margin-bottom:14px; line-height:1.8; }
.ddv-status-pill-label { font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:3px 10px; }
.ddv-status-pill-label.sent  { background:#dcfce7; color:#166534; }
.ddv-status-pill-label.draft { background:#f3f4f6; color:#6b7280; }

/* ── Portal tabs ── */
.ddv-portal-tabs { display:flex; border-bottom:2px solid #e8eaee; margin-bottom:16px; }
.ddv-portal-tab { background:none; border:none; border-bottom:2px solid transparent; padding:8px 16px; font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:#9ca3af; cursor:pointer; margin-bottom:-2px; }
.ddv-portal-tab.active { color:#1a1f2e; border-bottom-color:#1a1f2e; }
.ddv-ptab-content { display:none; }
.ddv-ptab-content.active { display:block; }

/* ── Revision tabs ── */
.ddv-revision-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.ddv-rev-tab { background:#f3f4f6; border:1px solid #e8eaee; padding:4px 12px; font-size:11px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:#6b7280; cursor:pointer; }
.ddv-rev-tab.active { background:#1a1f2e; color:#fff; border-color:#1a1f2e; }

/* ── File sections ── */
.ddv-files-section { margin-bottom:16px; }
.ddv-section-label { font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#9ca3af; margin:0 0 8px; }
.ddv-detail-thumbs { display:flex; flex-wrap:wrap; gap:8px; min-height:30px; }
.ddv-detail-thumb { width:90px; height:90px; border:1px solid #e8eaee; cursor:pointer; overflow:hidden; }
.ddv-detail-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:opacity .15s; }
.ddv-detail-thumb:hover img { opacity:.85; }
.ddv-no-files { font-size:12px; color:#9ca3af; padding:8px 0; }

/* ── Feedback thread ── */
.ddv-feedback-thread { max-height:300px; overflow-y:auto; margin-bottom:14px; }
.ddv-fb-msg { padding:10px 12px; margin-bottom:8px; }
.ddv-fb-client  { background:#f0f7ff; border-left:3px solid #3b82f6; }
.ddv-fb-designer{ background:#f0fdf4; border-left:3px solid #22c55e; }
.ddv-fb-meta { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.ddv-fb-meta strong { font-size:12px; color:#1a1f2e; }
.ddv-fb-meta small  { font-size:11px; color:#9ca3af; margin-left:auto; }
.ddv-fb-msg p { margin:0; font-size:13px; line-height:1.6; color:#374151; }
.ddv-reply-box textarea { width:100%; padding:10px 12px; border:1px solid #d1d5db; font-size:13px; resize:vertical; }
.ddv-reply-box textarea:focus { outline:none; border-color:#1a1f2e; }

/* ── Add revision row ── */
.ddv-add-revision-row { display:flex; gap:8px; margin-bottom:14px; }
.ddv-add-revision-row input { flex:1; padding:8px 12px; border:1px solid #d1d5db; font-size:13px; }
.ddv-active-rev-info { font-size:11px; color:#6b7280; margin-bottom:12px; font-weight:600; }

/* ── Projects panel header ── */
.ddv-projects-panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.ddv-projects-panel-head h2 { margin:0; }

/* ── Portal lightbox ── */
.ddv-portal-lightbox { position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:999999; display:flex; align-items:center; justify-content:center; }
.ddv-portal-lightbox .ddv-lb-modal { position:relative; background:#111; max-width:min(90vw,1100px); max-height:90vh; display:flex; flex-direction:column; }
.ddv-portal-lightbox .ddv-lb-toolbar { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:#1a1a1a; }
.ddv-portal-lightbox .ddv-lb-counter { font-size:12px; color:rgba(255,255,255,.5); }
.ddv-portal-lightbox .ddv-lb-close { background:rgba(255,255,255,.1); border:none; color:#fff; font-size:13px; cursor:pointer; padding:4px 12px; }
.ddv-portal-lightbox .ddv-lb-img-wrap { position:relative; flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ddv-portal-lightbox #ddv-plb-img { max-width:100%; max-height:calc(90vh - 80px); object-fit:contain; display:block; }
.ddv-portal-lightbox .ddv-lb-prev,
.ddv-portal-lightbox .ddv-lb-next { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.15); color:#fff; font-size:20px; padding:12px 16px; cursor:pointer; z-index:2; }
.ddv-portal-lightbox .ddv-lb-prev { left:12px; }
.ddv-portal-lightbox .ddv-lb-next { right:12px; }