/* ─────────────────────────────────────────────────────────────────────────
   UBiLL brand accent
   ─────────────────────────────────────────────────────────────────────────
   สีจากโลโก้ (แดงส้ม → เหลืองทอง, hue 3°–49°)

   ทำไมแยกเป็นไฟล์นี้แทนที่จะไปแก้ tailwind.config.js:
   1) คลาสของ Tailwind ต้อง build ใหม่ทุกครั้งที่เพิ่มสี แล้วต้องอัป
      public/assets/ เอง เพราะอัปเดตเตอร์ส่ง CSS ไม่ได้ — ไฟล์นี้อยู่ใน
      public/css/ ซึ่งส่งผ่านอัปเดตเตอร์ได้ตามปกติ
   2) โทนส้มของโลโก้อยู่ hue เดียวกับ warning (ค้างชำระ) และใกล้ danger
      มาก ถ้าเปลี่ยน primary ทั้งระบบเป็นส้ม ผู้ใช้จะแยกไม่ออกว่าอันไหน
      คือปุ่มกด อันไหนคือสถานะเงิน จึงใช้ส้มเฉพาะจุดที่สื่อถึง "แบรนด์"
      ไม่ใช่จุดที่สื่อ "สถานะ"

   ค่า contrast กับตัวหนังสือขาว (มาตรฐาน WCAG AA ต้อง ≥ 4.5)
     #fd0e00 = 4.09  ✗   #ca5701 = 4.31  ✗
     #b14c01 = 5.38  ✓   #984101 = 6.79  ✓
   ฉะนั้นสีสดใช้ได้แค่กับพื้นตกแต่ง/ไล่เฉด ส่วนปุ่มและตัวหนังสือต้องใช้
   ระดับ 700 ขึ้นไปเสมอ
   ───────────────────────────────────────────────────────────────────── */

:root {
    --ubill-flame: #fd0e00;   /* แดงส้มปลายล่างของโลโก้ */
    --ubill-gold:  #fdd302;   /* เหลืองทองปลายบนของโลโก้ */
    --ubill-500:   #fd6d01;   /* สีกลางของไล่เฉด */
    --ubill-600:   #ca5701;
    --ubill-700:   #b14c01;   /* ระดับต่ำสุดที่ตัวหนังสือขาวยังอ่านออก (5.38) */
    --ubill-800:   #984101;
    --ubill-900:   #7f3701;
}

/* ไล่เฉดตามโลโก้ — ใช้กับพื้นหลังตกแต่งเท่านั้น ห้ามวางตัวหนังสือเล็กทับ */
.brand-gradient {
    background-image: linear-gradient(135deg, var(--ubill-flame), var(--ubill-gold));
}

/* รุ่นเข้มสำหรับพื้นที่ที่มีตัวหนังสือขาว เช่น hero */
.brand-gradient-deep {
    background-image: linear-gradient(135deg, var(--ubill-900), var(--ubill-800), var(--ubill-700));
}

/* ตัวอักษรไล่เฉด — ใช้กับหัวข้อใหญ่เท่านั้น ตัวเล็กจะอ่านยาก */
.brand-text-gradient {
    background-image: linear-gradient(135deg, var(--ubill-gold), #ffd27a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.text-brand { color: var(--ubill-700); }

.btn-brand {
    background-color: var(--ubill-700);
    color: #fff;
    transition: background-color .15s ease;
}
.btn-brand:hover  { background-color: var(--ubill-800); }
.btn-brand:focus-visible {
    outline: 2px solid var(--ubill-600);
    outline-offset: 2px;
}

/* พื้นอ่อนสำหรับแถบไฮไลต์ (แทน bg-blue-50 เดิม) */
.brand-soft { background-color: #fff7ed; }

/* เส้นคาดบางๆ ไว้ติดขอบการ์ด/หัวหน้า ให้จำแบรนด์ได้โดยไม่แย่งสายตา */
.brand-bar {
    height: 3px;
    background-image: linear-gradient(90deg, var(--ubill-flame), var(--ubill-gold));
}

/* ─────────────────────────────────────────────────────────────────────────
   เมนูฝั่งแอดมินในไซด์บาร์
   ใช้โทนโลโก้เพื่อแยกโซนแอดมินออกจากเมนูของร้านให้เห็นชัด
   เมนูของร้านยังเป็นสีเดิม จะได้ไม่กระทบความคุ้นเคยของผู้ใช้ทั่วไป
   ───────────────────────────────────────────────────────────────────── */

.sidebar-admin-title {
    color: var(--ubill-gold);
    letter-spacing: .08em;
}

/* หัวข้อ Admin มีเส้นคาดสีแบรนด์นำหน้า */
.sidebar-admin-title::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 2px;
    margin-right: 6px;
    vertical-align: middle;
    background-image: linear-gradient(90deg, var(--ubill-flame), var(--ubill-gold));
}

/* หน้าที่เปิดอยู่ — ตัวหนังสือขาวบน --ubill-700 ผ่านเกณฑ์ความอ่านง่าย */
.sidebar-admin .sidebar-link.active {
    background-color: var(--ubill-700);
    color: #fff;
}
.sidebar-admin .sidebar-link.active:hover {
    background-color: var(--ubill-800);
}

/* ชี้เมาส์ค้าง — แค่เรืองโทนแบรนด์บางๆ ไม่ให้แย่งสายตากับหน้าที่เปิดอยู่ */
.sidebar-admin .sidebar-link:hover {
    background-color: rgba(253, 109, 1, .14);
    color: #fff;
}
.sidebar-admin .sidebar-link:not(.active):hover i {
    color: var(--ubill-gold);
}

/* วงเรืองรอบโลโก้ */
.brand-glow {
    box-shadow: 0 0 0 3px rgba(253, 14, 0, .12), 0 6px 18px -6px rgba(253, 14, 0, .45);
}