/* Sourcewav Features 5-8 — shared tokens, badges, responsive */
/* Sourcewav Features 5-8 Styling:
   5. Booking Board — ระบบหาคนร่วมงานและรับจ้าง
   6. Follow & Drop Alert — ติดตามศิลปินและแจ้งงานใหม่
   7. Event Command Center — หลังบ้านผู้จัดงาน
   8. Artist Store — ร้านขายของศิลปิน
*/

/* --------------------------------------------------------------------------
   SHARED BADGES & UTILITIES
--------------------------------------------------------------------------- */
.badge-pro {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #10243a, #1a3c60);
  color: #72ded0;
  border: 1px solid #48b8a9;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.badge-pro span {
  color: #d7fa48;
}

.badge-sponsored {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #171916;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.6px;
  padding: 3px 8px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
  text-transform: uppercase;
}

.badge-digital {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 9px;
  font-weight: 700;
}

.badge-physical {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 9px;
  font-weight: 700;
}

/* Drop Alert indicator on topbar notification button */
.notification i.badge-active {
  display: block;
  background: #ea6844;
  box-shadow: 0 0 0 2px #171916, 0 0 8px #ea6844;
}

/* Topbar Command Center button (style only — element removed from topbar) */
#commandCenterBtn {
  display: none !important;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .command-columns {
    grid-template-columns: 1fr;
  }
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 680px) {
  .booking-section, .artist-store-section {
    padding: 18px 16px;
    margin-top: 20px;
  }
  .kpi-grid {
    grid-template-columns: 1fr;
  }
  .summary-retro-grid {
    grid-template-columns: 1fr;
  }
  .store-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 460px) {
  .store-grid {
    grid-template-columns: 1fr;
  }
}


/* Clearer type and larger controls across the community's two core flows. */
.modal{padding:36px;max-height:min(calc(100dvh - 32px),900px);overflow-y:auto;overscroll-behavior:contain}
.modal h2{font-size:30px;line-height:1.25;letter-spacing:-.35px}
.modal p{font-size:19px;line-height:1.6}
.modal-field{margin-top:19px;font-size:18px;line-height:1.5}
.modal-field input,.modal-field textarea,.modal-field select{min-height:56px;padding:13px 15px;font-size:18px}
.modal-field textarea{min-height:142px;line-height:1.65}
.modal-primary{min-height:54px;margin-top:23px;font-size:16px;font-weight:700}
.local-note{font-size:16px}
.post-author strong{font-size:16px}
.post-author small{font-size:13px}
.post-copy{font-size:16px;line-height:1.8}
.post-actions button{min-height:44px;font-size:14px}
.filter-chip,.feed-sort{font-size:14px}
.event-info h3{font-size:17px}
.event-info p,.event-bottom,.market-item small{font-size:13px}

.modal.composer-modal{position:relative;width:min(620px,100%);max-height:calc((100dvh - 36px)/1.18);padding:26px 34px 22px;overflow-x:hidden;border:1px solid #e1d8e9;border-top:0;border-radius:20px;background:linear-gradient(180deg,#fff 0%,#fff 72%,#fcfafd 100%);box-shadow:0 28px 84px #17132940,inset 0 1px 0 #fff}
.composer-heading{position:relative;isolation:isolate;margin:-26px -34px 17px;padding:16px 34px 15px;overflow:hidden;border-radius:19px 19px 0 0;border-bottom:3px solid #dc42c4;background:linear-gradient(112deg,#182b3c 0%,#23344a 58%,#382b4c 100%);color:#fff}
.composer-heading:before{position:absolute;z-index:-1;top:-82px;right:11%;width:218px;height:218px;border:1px solid #ffffff20;border-radius:50%;background:repeating-radial-gradient(circle at center,transparent 0 8px,#ffffff11 9px 10px);content:"";opacity:.75}
.composer-brand-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;padding-right:42px}
.composer-brand-lockup{display:inline-flex;min-width:0;align-items:center;gap:9px}
.composer-brand-mark{display:grid;width:35px;height:35px;flex:none;place-items:center;border:1px solid #68d9cd;border-radius:50%;background:#101f2b;box-shadow:0 0 0 4px #ffffff0c}
.composer-brand-mark svg{width:27px;height:27px;fill:none;stroke:#8fe1d6;stroke-width:1.25}
.composer-brand-mark circle:nth-child(3){fill:#d7fa48;stroke:#d7fa48}
.composer-brand-mark path{stroke:#1c2d3b;stroke-width:1.8;stroke-linecap:round}
.composer-brand-name{color:#fff;font:700 18px/1 var(--display);letter-spacing:.7px;white-space:nowrap}
.composer-brand-name span{color:#d7fa48}
.composer-audience{display:inline-flex;min-height:31px;flex:none;align-items:center;gap:7px;padding:0 10px;border:1px solid #ffffff35;border-radius:999px;background:#ffffff12;color:#edf2f5;font-size:13px;font-weight:500;white-space:nowrap}
.composer-audience svg,.composer-footer-note svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4}
.composer-heading-copy{position:relative;max-width:470px}
.composer-heading h2{margin:0 0 5px;color:#fff;font-size:27px;line-height:1.25;letter-spacing:-.3px;text-wrap:balance}
.composer-heading p{margin:0;color:#d1d9e2;font-size:16px;line-height:1.55;text-wrap:pretty}
.composer-modal .modal-close{z-index:2;top:12px;right:14px;width:38px;height:38px;border:1px solid #ffffff2e;border-radius:12px;background:#ffffff12;color:#f5f7f8;transition:background-color .16s,border-color .16s,transform .16s}
.composer-modal .modal-close:hover{border-color:#ffffff56;background:#ffffff20;transform:rotate(4deg)}
.composer-heading-icon{display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px;border:1px solid #b5e7df;border-radius:16px;background:#eaf8f5;color:#167a70;font-size:25px}
.composer-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.composer-modal .modal-field{min-width:0;margin-top:12px;color:#26394e;font-size:16px;line-height:1.45}
.composer-fields .modal-field:first-child,.composer-fields .modal-field:nth-child(2){grid-column:1/-1}
.composer-fields .modal-field:nth-child(3){grid-column:1/-1}
.composer-label-row{display:flex;min-height:24px;align-items:center;gap:9px;margin:0 0 7px 2px;color:#26394e;font-weight:650}
.composer-optional,.composer-required{display:inline-flex;min-height:21px;align-items:center;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:500}
.composer-optional{background:#f0edf4;color:#6c6079}
.composer-required{background:#eaf7f4;color:#187165}
.composer-modal .modal-field input,.composer-modal .modal-field select,.composer-modal .modal-field textarea{width:100%;border:1px solid #d2dbe5;border-radius:12px;background:#f9fbfd;color:#1d3045;font-size:16px;box-shadow:inset 0 1px 2px #13284008;transition:border-color .16s,background-color .16s,box-shadow .16s}
.composer-modal .modal-field input,.composer-modal .modal-field select{min-height:51px;padding:11px 14px}
.composer-modal .modal-field textarea{min-height:118px;padding:13px 14px;line-height:1.65;resize:vertical}
.composer-modal .modal-field input::placeholder,.composer-modal .modal-field textarea::placeholder{color:#8995a4}
.composer-modal .modal-field:focus-within{transform:none}
.composer-modal .modal-field input:focus,.composer-modal .modal-field select:focus,.composer-modal .modal-field textarea:focus{border-color:#3d8e99;background:#fff;box-shadow:0 0 0 4px #53c3b31f;outline:0}
.composer-field-meta{display:flex;justify-content:space-between;gap:12px;margin-top:7px;color:#607387;font-size:13px;font-weight:450}
.composer-field-meta #postBodyCount{flex:none;color:#556e84;font-variant-numeric:tabular-nums}
.composer-footer{display:flex;flex-direction:column;gap:9px;margin-top:15px;padding-top:12px;border-top:1px solid #e7e2eb}
.composer-footer-note{display:flex;align-items:center;gap:8px;margin:0;color:#586d82;font-size:14px}
.composer-footer-note svg{color:#40877e}
.composer-modal .modal-primary{display:flex;min-height:50px;align-items:center;justify-content:center;gap:10px;margin:0;border:1px solid #c72caf;border-radius:11px;background:linear-gradient(105deg,#d632bd,#b423a9);color:#fff;font-size:16px;font-weight:650;box-shadow:0 7px 16px #b423a92a;transition:background-color .16s,box-shadow .16s,transform .16s}
.composer-modal .modal-primary:hover:not(:disabled){background:linear-gradient(105deg,#c323ae,#951d93);box-shadow:0 9px 19px #b423a93d;transform:translateY(-1px)}
.composer-modal .modal-primary:active:not(:disabled){transform:translateY(0) scale(.99)}
.composer-modal .modal-primary svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.composer-modal .modal-primary:disabled{border-color:#d8dfe6;background:#e8edf2;color:#738195;box-shadow:none;cursor:not-allowed;transform:none}
.composer-modal :focus-visible{outline:3px solid #238b82;outline-offset:3px}

.modal.drop-center-modal{display:flex;width:min(880px,100%);max-height:min(90dvh,880px);flex-direction:column;padding:34px 38px;border-top-width:5px}
.drop-center-modal{display:flex;min-height:0;flex:1;flex-direction:column}
.drop-center-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}
.drop-center-title{display:flex;align-items:center;gap:14px;min-width:0}
.drop-center-icon{display:grid;place-items:center;flex:0 0 50px;width:50px;height:50px;border:1px solid #b5e7df;border-radius:15px;background:#eaf8f5;color:#167a70;font-size:25px}
.drop-center-title h2{margin:0 0 3px}
.drop-center-title p{margin:0;color:#52677e}
.drop-mark-read{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border:1px solid #b9cadd;border-radius:10px;background:#fff;color:#245590;font:600 14px var(--font);cursor:pointer;transition:background-color .16s,border-color .16s,color .16s}
.drop-mark-read:hover{border-color:#9bb7d2;background:#eff5fa;filter:none}
.drop-tabs{display:flex;gap:7px;margin:0 0 18px;padding:0 0 11px;border-bottom:1px solid #d7e1eb;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}
.drop-tab-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid #d6e0e9;border-radius:11px;background:#f7f9fb;color:#41586f;font:600 14px var(--font);transition:background-color .16s,border-color .16s,color .16s;cursor:pointer}
.drop-tab-btn>span{color:#167a70;font-size:17px;line-height:1}
.drop-tab-btn:hover{border-color:#9bb6ca;background:#f1f7f7;filter:none}
.drop-tab-btn.active{border-color:#315ee8;background:#edf3ff;color:#173e80;box-shadow:inset 0 -2px #315ee8}
.drop-tab-btn b{display:grid;min-width:23px;height:23px;place-items:center;padding:0 5px;border-radius:7px;background:#dce8f8;color:#1f4d8e;font-size:12px;font-variant-numeric:tabular-nums}
.drop-feed-list{display:flex;min-height:210px;max-height:min(43dvh,430px);flex:1 1 auto;flex-direction:column;gap:11px;padding:1px 5px 3px 1px;overflow-y:auto;overscroll-behavior:contain}
.drop-empty{display:grid;min-height:210px;flex:1;align-content:center;justify-items:center;padding:28px 20px;border:1px dashed #c7d5e1;border-radius:16px;background:#f8fafc;text-align:center}
.drop-empty-icon{display:grid;width:48px;height:48px;place-items:center;border:1px solid #d6e2ec;border-radius:15px;background:#fff;color:#438e89;font-size:24px}
.drop-empty h3{margin:13px 0 3px;color:#1d3550;font-size:19px;text-wrap:balance}
.drop-empty p{max-width:420px;margin:0;color:#566d84;text-wrap:pretty}
.drop-card{gap:15px;padding:16px;border:1px solid #dbe4eb;border-radius:14px;background:#fff;transition:border-color .16s,background-color .16s,box-shadow .16s}
.drop-card:hover{border-color:#b7cad7;box-shadow:0 5px 16px #19364d0c}
.drop-card.unread{border-left:4px solid #315ee8;background:#f8fbff;box-shadow:inset 0 0 0 1px #e3edfb}
.drop-card.sponsored-drop{border-color:#d8e7a1;border-left:4px solid #b7d635;background:#fbfdf4;box-shadow:none}
.drop-icon{flex:0 0 46px;width:46px;height:46px;border-radius:13px;font-size:20px}
.drop-content{min-width:0}
.drop-topline{align-items:flex-start;margin-bottom:5px}
.drop-creator{color:#4c6379;font-size:14px;line-height:1.5}
.drop-time{flex:none;color:#60778c;font-size:13px;font-variant-numeric:tabular-nums}
.drop-content h4{margin:3px 0 5px;color:#18334f;font-size:17px;line-height:1.4;text-wrap:pretty}
.drop-content p{margin:0 0 12px;color:#485e73;font-size:17px;line-height:1.6;text-wrap:pretty}
.drop-action-btn{min-height:40px;padding:7px 13px;border:1px solid #b7cadc;border-radius:9px;background:#f5f8fc;color:#234e84;font:600 13px var(--font);transition:background-color .16s,border-color .16s}
.drop-action-btn:hover{border-color:#91abc3;background:#eaf1f8;color:#193d6d;filter:none}
.boost-cta-box{margin-top:20px;padding:18px 20px;border:1px solid #294867;border-radius:15px;background:linear-gradient(115deg,#142a40,#244b67);box-shadow:0 8px 20px #142a4017}
.boost-cta-box strong{color:#dff276;font-size:17px}
.boost-cta-box p{margin-top:3px;color:#e0e8ee;font-size:16px;line-height:1.5}
.boost-launch-btn{display:inline-flex;min-height:46px;align-items:center;justify-content:center;gap:7px;padding:0 17px;border:1px solid #e8ff7d;border-radius:11px;background:#d7f45c;color:#1d2b20;font:700 14px var(--font);transition:transform .15s,background-color .15s,box-shadow .15s}
.boost-launch-btn>span{font-size:20px;line-height:1}
.boost-launch-btn:hover{background:#e4fb7a;box-shadow:0 4px 12px #d7f45c3b;filter:none;transform:translateY(-1px)}
.drop-center-modal :focus-visible,.composer-modal :focus-visible{outline:3px solid #315ee8;outline-offset:3px}

@media(max-width:700px){
  .modal{padding:28px 22px}
  .modal.composer-modal{max-height:calc((100dvh - 32px)/1.06);padding:23px 24px 20px}
  .composer-heading{margin:-23px -24px 16px;padding:16px 24px 15px}
  .modal.drop-center-modal{max-height:calc(100dvh - 24px);padding:27px 23px}
  .drop-center-heading{align-items:flex-start;margin-bottom:17px}
  .drop-tabs{margin-bottom:13px}
  .drop-feed-list{max-height:42dvh}
}
@media(max-width:520px){
  .modal{padding:25px 19px}
  .modal h2{font-size:26px}
  .modal.composer-modal{padding:20px 18px 17px;border-radius:18px}
  .composer-heading{margin:-20px -18px 14px;padding:15px 18px 14px;border-radius:17px 17px 0 0}
  .composer-heading:before{top:-74px;right:5%;width:170px;height:170px}
  .composer-brand-row{gap:8px;margin-bottom:11px;padding-right:40px}
  .composer-brand-name{font-size:17px}
  .composer-brand-mark{width:32px;height:32px}
  .composer-brand-mark svg{width:25px;height:25px}
  .composer-audience{min-height:28px;padding:0 8px;font-size:12px}
  .composer-heading h2{font-size:24px}
  .composer-heading p{max-width:290px;font-size:15px}
  .composer-modal .modal-close{top:9px;right:9px;width:36px;height:36px}
  .composer-heading-icon{flex-basis:44px;width:44px;height:44px;border-radius:13px;font-size:22px}
  .composer-fields{grid-template-columns:1fr;gap:0}
  .composer-fields .modal-field{grid-column:1}
  .composer-modal .modal-field textarea{min-height:112px}
  .composer-field-meta{font-size:12px}
  .composer-footer{margin-top:13px;padding-top:11px}
  .composer-footer-note{font-size:13px}
  .modal.drop-center-modal{max-height:calc(100dvh - 16px);padding:23px 17px 18px}
  .drop-center-heading{gap:9px}
  .drop-center-title{gap:10px}
  .drop-center-icon{flex-basis:42px;width:42px;height:42px;border-radius:12px;font-size:21px}
  .drop-center-title h2{font-size:24px}
  .drop-center-title p{max-width:240px;font-size:15px;line-height:1.45}
  .drop-mark-read{min-height:40px;padding-inline:10px;font-size:13px;white-space:nowrap}
  .drop-tabs{gap:6px;padding-bottom:9px}
  .drop-tab-btn{min-height:42px;padding-inline:11px;font-size:14px}
  .drop-feed-list{min-height:180px;max-height:40dvh}
  .drop-empty{min-height:180px;padding:20px 14px}
  .drop-empty h3{font-size:17px}
  .drop-empty p{font-size:15px}
  .drop-card{gap:11px;padding:13px}
  .drop-icon{flex-basis:40px;width:40px;height:40px;border-radius:11px;font-size:18px}
  .drop-topline{flex-direction:column;gap:0}
  .drop-creator{font-size:14px}
  .drop-time{font-size:12px}
  .drop-content h4{font-size:16px}
  .drop-content p{font-size:15px}
  .boost-cta-box{align-items:flex-start;padding:15px;flex-direction:column;gap:12px}
  .boost-cta-box strong{font-size:16px}
  .boost-cta-box p{font-size:15px}
  .boost-launch-btn{width:100%}
}
@media(prefers-reduced-motion:reduce){.drop-tab-btn,.drop-card,.drop-action-btn,.boost-launch-btn,.drop-mark-read{transition:none}}

.modal.drop-create-modal{width:min(650px,100%);max-height:calc(100dvh - 32px);padding:36px 40px;border-top-width:5px;overflow-y:auto}
.drop-create-heading{display:flex;align-items:center;gap:15px;margin:0 42px 13px 0}
.drop-create-heading h2{margin:0 0 4px}
.drop-create-heading p,.drop-create-note{margin:0;color:#52677e;font-size:17px}
.drop-create-note{margin-bottom:16px;padding:11px 13px;border:1px solid #c9e8df;border-radius:10px;background:#f1faf7}
.drop-create-modal #boostDropForm{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.drop-create-modal #boostDropForm .modal-field:first-child,.drop-create-modal #boostDropForm .modal-field:nth-child(3),.drop-create-modal #boostDropForm .modal-field:nth-child(4),.drop-create-modal #boostDropForm .modal-primary{grid-column:1/-1}
.drop-create-modal #boostDropForm .modal-field textarea{min-height:120px}
@media(max-width:520px){.modal.drop-create-modal{padding:27px 20px 23px}.drop-create-heading{gap:12px;margin-right:34px}.drop-create-modal #boostDropForm{grid-template-columns:1fr}.drop-create-modal #boostDropForm .modal-field,.drop-create-modal #boostDropForm .modal-primary{grid-column:1}}