/* ================================================================
   PCBUILDERS.LK Service Desk — Front-End Styles
   ================================================================ */
:root {
    --psd-blue:   #2563eb;
    --psd-dark:   #1a1a2e;
    --psd-green:  #16a34a;
    --psd-orange: #ea580c;
    --psd-red:    #dc2626;
    --border:     #e2e8f0;
    --bg:         #f8fafc;
    --text:       #1e293b;
    --muted:      #64748b;
    --radius:     10px;
    --shadow:     0 2px 8px rgba(0,0,0,0.08);
}

.psd { font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color: var(--text); }
.psd *, .psd *::before, .psd *::after { box-sizing: border-box; }

/* ── Inputs ──────────────────────────────────────────────────────── */
.psd .psd-input {
    width: 100%; padding: 11px 14px;
    border: 1.5px solid var(--border); border-radius: 8px;
    font-size: 15px; color: var(--text); background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.psd .psd-input:focus { outline: none; border-color: var(--psd-blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.psd .psd-textarea { resize: vertical; min-height: 90px; }
.psd .psd-form-group { margin-bottom: 16px; }
.psd .psd-form-group label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.psd .psd-required { color: var(--psd-red); }
.psd .psd-hint { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.psd .psd-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600;
    cursor: pointer; text-decoration: none; border: none;
    transition: all .15s; white-space: nowrap;
}
.psd .psd-btn-primary   { background: var(--psd-blue); color: #fff; }
.psd .psd-btn-primary:hover   { background: #1d4ed8; color: #fff; transform: translateY(-1px); }
.psd .psd-btn-secondary { background: #fff; color: var(--text); border: 1.5px solid var(--border); }
.psd .psd-btn-secondary:hover { border-color: var(--psd-blue); color: var(--psd-blue); }
.psd .psd-btn-sm   { padding: 6px 12px; font-size: 13px; }
.psd .psd-btn-lg   { padding: 13px 28px; font-size: 15px; }
.psd .psd-btn-full { width: 100%; }

/* ── Form messages ───────────────────────────────────────────────── */
.psd .psd-form-msg { padding: 12px 16px; border-radius: 8px; font-size: 14px; margin-top: 14px; }
.psd .psd-success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.psd .psd-error   { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.psd .psd-notice  { padding: 12px 16px; border-radius: 8px; }
.psd .psd-notice-info { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }

/* ── Badges ──────────────────────────────────────────────────────── */
.psd .psd-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12.5px; font-weight: 600; }
.psd .psd-badge-lg { font-size: 15px; padding: 6px 18px; }
.psd .psd-status-waiting    { background: #fef9c3; color: #854d0e; }
.psd .psd-status-inspecting { background: #ede9fe; color: #5b21b6; }
.psd .psd-status-in_repair  { background: #ffedd5; color: #9a3412; }
.psd .psd-status-testing    { background: #cffafe; color: #155e75; }
.psd .psd-status-ready      { background: #dcfce7; color: #14532d; }
.psd .psd-status-completed  { background: #f0fdf4; color: #166534; }
.psd .psd-status-cancelled  { background: #fee2e2; color: #991b1b; }

/* ── Auth / Register ─────────────────────────────────────────────── */
.psd-register-wrap, .psd-lookup-wrap { display: flex; justify-content: center; padding: 30px 16px; }
.psd-auth-card, .psd-lookup-card {
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 36px; width: 100%; max-width: 480px;
}
.psd-auth-logo { text-align: center; margin-bottom: 24px; }
.psd-auth-logo h2 { font-size: 22px; color: var(--psd-dark); margin: 0; }
.psd-auth-sub { color: var(--muted); font-size: 13px; margin: 4px 0 0; }
.psd-auth-tabs { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 24px; }
.psd-auth-tab {
    flex: 1; padding: 10px; background: none; border: none;
    font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .15s;
}
.psd-auth-tab.active { color: var(--psd-blue); border-bottom-color: var(--psd-blue); }
.psd-auth-footer { text-align: center; font-size: 13px; margin-top: 16px; }
.psd-auth-footer a { color: var(--psd-blue); }
.psd-track-link { text-align: center; font-size: 13px; color: var(--muted); margin-top: 20px; }
.psd-track-link a { color: var(--psd-blue); text-decoration: none; }

/* ── Ticket Lookup ───────────────────────────────────────────────── */
.psd-lookup-card h2 { font-size: 20px; color: var(--psd-dark); display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.psd-lookup-card h2 .dashicons { color: var(--psd-blue); }
.psd-lookup-input { font-size: 16px; }
.psd-lookup-result-header { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 16px; flex-wrap: wrap; gap: 10px; }
.psd-lookup-ticket-num { font-size: 22px; font-weight: 700; color: var(--psd-dark); }
.psd-result-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.psd-result-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 8px 0; width: 40%; }
.psd-result-table td { color: var(--text); padding: 8px 0; border-bottom: 1px solid var(--border); }
.psd-lookup-footer { text-align: center; color: var(--muted); font-size: 13px; margin-top: 20px; }
.psd-lookup-footer a { color: var(--psd-blue); }

/* ── Customer Portal ─────────────────────────────────────────────── */
.psd-customer-portal { max-width: 900px; margin: 0 auto; padding: 20px 16px; }
.psd-portal-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.psd-portal-header h2 { margin: 0; font-size: 22px; }
.psd-customer-table { font-size: 14px; }
.psd-ticket-table-wrap { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; }
.psd-empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.psd-empty-state .dashicons { font-size: 48px; width: 48px; height: 48px; color: var(--border); display: block; margin: 0 auto 16px; }
.psd-empty-state h3 { font-size: 18px; color: var(--text); margin-bottom: 8px; }

/* ── Pickup notice ───────────────────────────────────────────────── */
.psd-pickup-notice {
    background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px;
    padding: 16px 20px; font-size: 14px; color: #166534;
    display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
    margin-top: 20px;
}
.psd-pickup-notice .dashicons { font-size: 22px; color: var(--psd-green); flex-shrink: 0; }
.psd-pickup-notice a { color: var(--psd-blue); }

/* ── Ticket detail public ────────────────────────────────────────── */
.psd-ticket-detail-public { max-width: 900px; }
.psd-ticket-hero {
    border-radius: var(--radius); padding: 28px;
    text-align: center; margin-bottom: 20px;
    background: var(--bg);
}
.psd-ticket-hero-num { font-size: 28px; font-weight: 700; color: var(--psd-dark); }
.psd-ticket-hero-status { font-size: 18px; font-weight: 600; margin-top: 6px; }
.psd-status-bg-waiting    { background: #fef9c3; }
.psd-status-bg-inspecting { background: #ede9fe; }
.psd-status-bg-in_repair  { background: #ffedd5; }
.psd-status-bg-testing    { background: #cffafe; }
.psd-status-bg-ready      { background: #dcfce7; }
.psd-status-bg-completed  { background: #f0fdf4; }
.psd-status-bg-cancelled  { background: #fee2e2; }

/* ── Detail grid ─────────────────────────────────────────────────── */
.psd-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
@media (max-width: 640px) { .psd-detail-grid { grid-template-columns: 1fr; } }
.psd-info-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.psd-info-card h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 0 0 14px; }
.psd-info-card dl { display: grid; grid-template-columns: 120px 1fr; gap: 8px 12px; font-size: 14px; margin: 0; }
.psd-info-card dt { color: var(--muted); font-weight: 600; }
.psd-info-card dd { margin: 0; color: var(--text); }

/* ── Timeline ────────────────────────────────────────────────────── */
.psd-timeline { list-style: none; margin: 0; padding: 0; }
.psd-timeline-item { display: flex; gap: 14px; margin-bottom: 16px; }
.psd-timeline-dot {
    width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
    margin-top: 4px; border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--border);
    background: var(--muted);
}
.psd-timeline-dot.psd-status-waiting    { background: #d97706; }
.psd-timeline-dot.psd-status-inspecting { background: #7c3aed; }
.psd-timeline-dot.psd-status-in_repair  { background: var(--psd-orange); }
.psd-timeline-dot.psd-status-testing    { background: #0891b2; }
.psd-timeline-dot.psd-status-ready,
.psd-timeline-dot.psd-status-completed  { background: var(--psd-green); }
.psd-timeline-dot.psd-status-cancelled  { background: var(--psd-red); }
.psd-timeline-content strong { font-size: 14px; color: var(--text); display: block; }
.psd-timeline-content .psd-muted { display: inline-block; font-size: 12px; color: var(--muted); margin-right: 8px; }
.psd-timeline-content p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.psd-timeline-note { background: var(--bg); padding: 6px 10px; border-radius: 5px; }

/* ── Technician dashboard ────────────────────────────────────────── */
.psd-technician-dashboard { max-width: 1200px; margin: 0 auto; padding: 20px 16px; }
.psd-dash-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.psd-dash-header h2 { font-size: 22px; margin: 0; }

/* Ticket card grid */
.psd-ticket-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }
.psd-ticket-card {
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    display: flex; flex-direction: column; overflow: hidden;
    transition: transform .15s, box-shadow .15s;
}
.psd-ticket-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.1); }
.psd-priority-border-urgent   { border-left: 4px solid var(--psd-orange); }
.psd-priority-border-critical { border-left: 4px solid var(--psd-red); }
.psd-ticket-card-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg); }
.psd-ticket-num { font-size: 14px; font-weight: 700; color: var(--psd-dark); }
.psd-ticket-card-body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 7px; }
.psd-ticket-info-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); }
.psd-ticket-info-row .dashicons { font-size: 15px; width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }
.psd-ticket-instructions { font-size: 12px; color: var(--muted); background: var(--bg); padding: 6px 10px; border-radius: 5px; margin-top: 4px; }
.psd-ticket-card-footer { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-top: 1px solid var(--border); }
.psd-ticket-date { font-size: 12px; }

/* Tech ticket detail */
.psd-ticket-header { display: flex; align-items: center; gap: 16px; margin: 16px 0 20px; flex-wrap: wrap; }
.psd-ticket-header h2 { font-size: 24px; font-weight: 700; margin: 0; }
.psd-back-btn { margin-bottom: 16px; }
.psd-ticket-detail { max-width: 1100px; }

.psd-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 20px; overflow: hidden; }
.psd-card-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--bg); }
.psd-card-header h3 { margin: 0; font-size: 15px; }
.psd-card > form, .psd-card > .psd-form-grid { padding: 20px; }

.psd-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.psd-col-span-2 { grid-column: span 2; }
.psd-form-actions { padding: 16px 20px; border-top: 1px solid var(--border); background: var(--bg); display: flex; align-items: center; gap: 12px; }

.psd-inline-form { display: flex; flex-direction: column; gap: 10px; }
.psd-inline-form select { width: 100%; }

/* Status tabs front-end */
.psd .psd-status-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; border-bottom: 2px solid var(--border); padding-bottom: 0; }
.psd .psd-tab { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; font-size: 13px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .15s; }
.psd .psd-tab.active { color: var(--psd-blue); border-bottom-color: var(--psd-blue); font-weight: 600; }
.psd .psd-count { background: #e2e8f0; color: #475569; font-size: 11px; padding: 1px 6px; border-radius: 10px; }

.psd-muted { color: var(--muted); font-size: 12px; }
.psd-empty { text-align: center; padding: 30px; color: var(--muted); }

/* Priority badges */
.psd .psd-priority { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
.psd .psd-priority-normal   { background: #f1f5f9; color: #475569; }
.psd .psd-priority-urgent   { background: #fff7ed; color: #c2410c; }
.psd .psd-priority-critical { background: #fef2f2; color: #b91c1c; }

/* Customer tracking technician notes */
.psd-public-notes{margin-top:1.5rem}.psd-public-note{background:#fff7ed;border:1px solid #fed7aa;border-radius:12px;padding:12px 14px;margin:10px 0}.psd-public-note strong{display:block;color:#9a3412;text-transform:uppercase;font-size:12px;letter-spacing:.04em}.psd-public-note p{color:#431407;white-space:pre-wrap;margin:6px 0 0;line-height:1.5}

/* ================================================================
   PCBUILDERS.LK Service Desk - Public/Technician Redesign v6
   ================================================================ */
.psd{--psd-blue:#2563eb;--psd-purple:#6d28d9;--border:#e2e8f0;--bg:#f5f7fb;--text:#0f172a;--muted:#64748b;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;}
.psd *{box-sizing:border-box;}
.psd-register-wrap,.psd-lookup-wrap,.psd-customer-portal,.psd-technician-dashboard{background:linear-gradient(180deg,#f8fafc,#eef2ff);border-radius:28px;padding:28px 18px;}
.psd-auth-card,.psd-lookup-card,.psd-card,.psd-ticket-table-wrap,.psd-info-card,.psd-ticket-card{border:1px solid rgba(148,163,184,.30)!important;border-radius:24px!important;box-shadow:0 18px 45px rgba(15,23,42,.07)!important;background:#fff!important;overflow:hidden;}
.psd-auth-card,.psd-lookup-card{max-width:520px;padding:38px!important;}
.psd-auth-logo h2,.psd-lookup-card h2,.psd-portal-header h2,.psd-dash-header h2{font-weight:900!important;letter-spacing:-.035em;color:#111827!important;}
.psd-auth-sub,.psd-lookup-footer,.psd-muted{color:#64748b!important;}
.psd .psd-input{border:1px solid #dbe3ef!important;border-radius:14px!important;min-height:46px;box-shadow:none!important;}
.psd .psd-input:focus{border-color:#7c3aed!important;box-shadow:0 0 0 4px rgba(124,58,237,.10)!important;}
.psd .psd-btn{border-radius:14px!important;min-height:42px;font-weight:800!important;}
.psd .psd-btn-primary{background:linear-gradient(135deg,#2563eb,#6d28d9)!important;color:#fff!important;}
.psd .psd-btn-secondary{background:#f8fafc!important;border:1px solid #e2e8f0!important;color:#0f172a!important;}
.psd-auth-tabs{background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:6px;border-bottom:0!important;gap:6px;}
.psd-auth-tab{border-radius:12px!important;border:0!important;margin:0!important;}
.psd-auth-tab.active{background:#fff;color:#6d28d9!important;box-shadow:0 8px 18px rgba(15,23,42,.06);}
.psd-ticket-hero{border-radius:26px!important;background:radial-gradient(circle at top right,rgba(167,139,250,.34),transparent 34%),linear-gradient(135deg,#120018,#32105f 58%,#6d28d9)!important;color:#fff!important;padding:34px!important;}
.psd-ticket-hero-num,.psd-ticket-hero-status{color:#fff!important;}
.psd-detail-grid{align-items:stretch;}
.psd-info-card{height:100%;padding:22px!important;}
.psd-info-card h3{font-weight:900!important;letter-spacing:.08em!important;}
.psd-ticket-grid{grid-template-columns:repeat(auto-fill,minmax(310px,1fr))!important;gap:18px!important;align-items:stretch!important;grid-auto-rows:1fr;}
.psd-ticket-card{height:100%;min-height:255px;display:flex!important;flex-direction:column!important;transition:transform .18s ease,box-shadow .18s ease;}
.psd-ticket-card:hover{transform:translateY(-3px);box-shadow:0 22px 52px rgba(15,23,42,.10)!important;}
.psd-ticket-card-header{min-height:58px;background:linear-gradient(180deg,#fff,#f8fafc)!important;padding:14px 16px!important;}
.psd-ticket-card-body{flex:1;padding:16px!important;gap:9px!important;}
.psd-ticket-card-footer{margin-top:auto;padding:14px 16px!important;background:#fbfdff;}
.psd-ticket-instructions{border:1px solid #e2e8f0;border-radius:14px!important;padding:10px 12px!important;background:#f8fafc!important;}
.psd .psd-status-tabs{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:8px;border-bottom:1px solid #e2e8f0!important;gap:8px!important;}
.psd .psd-tab{border:1px solid #e2e8f0!important;border-radius:999px!important;margin:0!important;background:#f8fafc;padding:8px 14px!important;font-weight:800!important;}
.psd .psd-tab.active{background:#6d28d9!important;color:#fff!important;border-color:#6d28d9!important;}
.psd-public-note{border-radius:16px!important;background:#fff7ed!important;}
@media(max-width:700px){.psd-detail-grid,.psd-ticket-grid,.psd-form-grid{grid-template-columns:1fr!important}.psd-auth-card,.psd-lookup-card{padding:26px!important}}

.psd-solution-box{background:#f5f3ff;border:1px solid #ddd6fe;border-radius:16px;padding:16px;}