/* ==========================================================================
   lw-theme.css — Design tokens cho khu vực basic
   Bê bảng màu từ mockup lwaka-home.html. CHỈ light mode — dark mode đã được
   bỏ theo yêu cầu, nên file này không có @media (prefers-color-scheme)
   lẫn [data-theme].

   QUY TẮC QUAN TRỌNG:
   - Mọi class mới PHẢI có tiền tố lw- (hoặc mở rộng app-sidebar__ / bot-dropdown__).
     Tên trần trong mockup trùng dày đặc: content 419, btn-primary 235, nav 87,
     main 85, user 85, status 75, search 44, qr 31 lượt trong resources/views.
   ========================================================================== */

/* ---------- Bảng màu ---------- */
:root {
    --lw-accent:        #06C755;
    --lw-accent-strong: #05A648;
    --lw-accent-weak:   #E4F7EC;

    --lw-ink:    #14211C;
    --lw-muted:  #657570;
    --lw-faint:  #8F9C97;

    --lw-bg:        #FFFFFF;
    --lw-surface:   #FFFFFF;
    --lw-surface-2: #F7FAF8;
    --lw-row-hover: #F4FAF6;

    --lw-border:        #E4EAE7;
    --lw-border-strong: #D3DBD7;

    --lw-warn:        #D68A0C;
    --lw-warn-weak:   #FBF0DC;
    --lw-danger:      #E0484D;
    --lw-danger-weak: #FBE7E8;

    --lw-shadow: 0 1px 2px rgba(20, 33, 28, .04), 0 8px 24px rgba(20, 33, 28, .04);

    /* FontAwesome PHẢI nằm cuối stack: icon .fa là glyph vùng Private Use,
       các font trước không có nên trình duyệt rơi xuống FontAwesome.
       Đây đúng là mẹo bs_style.css:379 đang dùng. Bỏ ra là mất sạch icon. */
    --lw-header-h: 60px;
    --lw-footer-h: 44px;

    /* Stack của các màn Zoom (zoom/admin.css:4 `main section *`) — chốt làm font
       chung cho toàn app. Không dùng webfont: để máy nào dùng font gothic Nhật
       sẵn có của máy đó (mac: Hiragino, Windows: Yu Gothic/Meiryo).
       Đuôi emoji + FontAwesome giữ nguyên như bs_style.css:379 để chữ emoji và
       icon .fa không mất glyph. */
    --lw-sans: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Yu Gothic", "游ゴシック", Meiryo, "メイリオ", system-ui, sans-serif, "Apple Color Emoji", emojisymbols, FontAwesome;
}

/* ---------- Nối token mới vào sidebar sẵn có ---------- */
/* sidebar-menu.css định nghĩa --sb-*; trỏ chúng sang --lw-* để sidebar
   tự đổi màu theo theme mà không phải viết lại toàn bộ file đó. */
:root {
    --sb-bg:          var(--lw-surface);
    --sb-border:      var(--lw-border);
    --sb-text:        var(--lw-muted);
    --sb-icon:        var(--lw-faint);
    --sb-muted:       var(--lw-faint);
    --sb-ink:            var(--lw-ink);
    --sb-accent:         var(--lw-accent);
    --sb-accent-strong:  var(--lw-accent-strong);
    --sb-accent-soft: var(--lw-accent-weak);
    --sb-hover:       var(--lw-surface-2);
}

/* ---------- Khoá nền + chống nhảy layout khi mở modal ---------- */
/* Trên trang này <html> luôn được tính overflow là `auto`, nên quy tắc lan
   truyền overflow (body -> viewport) KHÔNG áp dụng: cơ chế khoá cuộn sẵn của
   BS3 (`body.modal-open{overflow:hidden}`) vô tác dụng, mà phần `padding-right`
   nó tự thêm vào <body> lại làm nội dung hụt đúng bề rộng scrollbar.

   Cách xử lý: khoá cuộn ngay trên <html> và bù bề rộng scrollbar cũng trên
   <html> (JS đo và gán, xem layout/basic/footer.blade.php). Bù ở <html> chứ
   không phải <body> vì .modal-backdrop là position:fixed nên phủ trọn viewport,
   che luôn vùng padding đó -> không hở dải trắng bên phải.
   KHÔNG dùng `scrollbar-gutter: stable`: phần gutter nằm ngoài initial
   containing block nên backdrop không che được, để lộ đúng dải trắng đó. */
html.lw-scroll-lock {
    overflow: hidden;
}

body.modal-open {
    padding-right: 0 !important;
}

/* ---------- Chống tràn ngang ---------- */
/* footer.css: @media(min-width:1200px){.container{width:1000px}}
   Sidebar ăn mất --sb-width nên khoảng 1200–1232px sẽ tràn. */
body.has-app-sidebar .container {
    width: auto;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Hover mượt ---------- */
/* reset.css đặt a,a:hover{transition:.7s} => hover ở UI mới cảm giác bị ì. */
.app-sidebar a,
#top-header a,
[class^="lw-"] a,
[class*=" lw-"] a {
    transition: .15s;
}

/* ---------- Font dùng chung cho TOÀN APP ---------- */
/* Trước đây chỉ áp cho sidebar + topbar nên mỗi tầng một font:
     - layout basic:  bs_style.css:379 `*{font-family:'Lucida Grande',…!important}`
     - layout admin:  không có bs_style -> style.css:3,9 Lato / 'Open Sans'
     - màn redesign:  tự khai báo "Hiragino…" nhưng thua `*!important` ở trên
   -> hai màn cạnh nhau hiện hai kiểu chữ khác hẳn. Nay chốt một font duy nhất.

   Phải là `* !important` mới thắng được bs_style.css:379 (cùng 0,0,0 nhưng file
   này nạp sau). File CSS của trang Landing Page do người dùng tự dựng
   (core-style-ld.css, các font GenEi/Anito/Cezanne…) nằm ở file HTML riêng,
   KHÔNG đi qua layout này nên không bị ảnh hưởng. */
body,
body * {
    font-family: var(--lw-sans) !important;
}

/* Chốt chặn thứ hai: rule trên dùng !important nên sẽ đè
   `.fa{font-family:FontAwesome}`. Selector dưới đây (0,1,0) thắng lại.
   (--lw-sans có FontAwesome ở cuối stack nên icon vẫn hiện kể cả khi thiếu,
   nhưng khai báo thẳng vẫn chắc hơn cho .fa lồng trong phần tử khác.) */
.fa,
.fas,
.far,
.fab {
    font-family: FontAwesome !important;
}

.glyphicon {
    font-family: 'Glyphicons Halflings' !important;
}


.lw-tnum {
    font-variant-numeric: tabular-nums;
}

/* ---------- Lớp phủ mờ + kích thước cho MỌI modal ---------- */
/* bs_style.css có `.modal-backdrop.in{display:none}` -> toàn app không modal nào
   có lớp phủ. Bật lại cho TẤT CẢ (trước đây chỉ bật cho popup QR). */
/* Đặt sẵn màu + độ mờ cho CẢ trạng thái .fade lẫn .in, không chờ hiệu ứng
   fade-in của BS3: nếu transitionend không bắn (đã gặp), lớp phủ sẽ kẹt ở
   opacity 0 và nền không hề bị làm tối. */
.modal-backdrop,
.modal-backdrop.fade,
.modal-backdrop.in {
    display: block !important;
    background-color: #000;
    opacity: .5;
}

/* Không modal nào được tràn ra ngoài màn hình. max-width vẫn chặn được cả
   những modal đặt width cứng bằng inline style (vd 900px trên màn hẹp). */
.modal-dialog {
    max-width: 96vw;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   Shell 4 vùng: ① sidebar · ② header · ③ footer · ④ content
   sidebar (position:fixed) và header (position:sticky) đã đứng yên sẵn.
   Phần thêm ở đây là footer cố định đáy + chừa chỗ cho nó ở vùng content.
   ========================================================================== */

.lw-footer {
    position: fixed;
    left: var(--sb-width);
    right: 0;
    bottom: 0;
    height: var(--lw-footer-h);
    z-index: 1001;              /* dưới .app-sidebar (1002) và #top-header (1005),
                                   dưới .modal-backdrop (1040) nên vẫn bị làm mờ */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    background: var(--lw-surface);
    border-top: 1px solid var(--lw-border);
    color: var(--lw-faint);
    font-size: 12px;
    text-align: center;
}

/* Lịch của jQuery UI (#ui-datepicker-div) được gắn thẳng vào <body>, và jQuery UI tự
   tính z-index từ tổ tiên của ô nhập — ô nhập nằm trong khối tĩnh thì ra inline
   `z-index:1`, thấp hơn .lw-footer (1001) ở trên, nên nửa dưới của lịch chui xuống
   dưới thanh chân trang (mẫu: ô 送信日 màn /basic/message-send-all/create).

   1100 = cùng tầng popup với menu của lw-dropdown (css/components/lw-dropdown.css:81),
   trên .modal (1050) và .modal-backdrop (1040) nên lịch mở TRONG modal cũng đúng.
   Phải !important vì jQuery UI đặt z-index bằng style nội tuyến. */
#ui-datepicker-div { z-index: 1100 !important; }

body.sidebar-collapsed .lw-footer {
    left: var(--sb-width-collapsed);
}

/* _all-skins.css:434 `.skin-black footer{background:#333}` là (0,1,1) nên cần (0,2,1) */
body.skin-black .lw-footer {
    background: var(--lw-surface);
}

/* Chừa chỗ để nội dung không bị footer che. style.css:544 đặt main{padding:20px}. */
body.has-app-sidebar main {
    padding-bottom: calc(20px + var(--lw-footer-h));
}

@media screen and (max-width: 1024px) {
    .lw-footer {
        left: var(--sb-width-collapsed);
    }
}

/* ============================================================================
   VÒNG FOCUS: bỏ viền đen của Bootstrap 3 / hệ điều hành trên MỌI nút
   ---------------------------------------------------------------------------
   Bootstrap 3 (chat_files/bootstrap.min.css) đặt
       .btn:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}
   và trình duyệt cũng tự vẽ vòng focus cho <button>. Kết quả: bấm chuột vào nút nào là nút
   đó đeo một khung ĐEN vuông cho tới khi bấm chỗ khác — lạc hẳn với giao diện.

   Bỏ vòng đen, NHƯNG KHÔNG bỏ dấu hiệu focus cho bàn phím: :focus-visible chỉ sáng khi người
   dùng đi bằng Tab/phím, không sáng khi bấm chuột. Bỏ sạch cả hai là hỏng khả năng dùng bàn
   phím (không biết đang đứng ở nút nào).

   Selector viết ngang hạng với Bootstrap (.btn:focus = 0,2,0) và file này nạp SAU nên thắng,
   khỏi cần !important. Trình duyệt không hiểu :focus-visible thì chỉ mất phần vòng xanh.
   ========================================================================= */
button:focus,
[role="button"]:focus,
.btn:focus,
.btn:active:focus,
.btn.focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
summary:focus {
    outline: 0;
}

button:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible,
summary:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(6, 199, 85, .22);
}