/* =========================================
   Custom CSS สำหรับแต่ง UI/UX โปรเจค
   ========================================= */

/* 1. แต่งไฮไลท์คำที่ค้นหาเจอ (Search Highlighting) 
   เรียกใช้โดยใส่คลาส class="highlight-text" ให้กับคำที่เจอ */
.highlight-text {
    background-color: #ffe600; /* สีเหลืองสว่าง */
    color: #000;
    font-weight: bold;
    padding: 2px 4px;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* 2. แต่งกล่องอัปโหลดไฟล์แบบ Drag & Drop 
   เรียกใช้โดยใส่คลาส class="drop-zone" ให้กับ <div> ครอบ input file */
.drop-zone {
    max-width: 100%;
    height: 200px;
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Sofia', sans-serif; /* ฟอนต์เดียวกับโลโก้คุณ */
    font-weight: 500;
    font-size: 20px;
    cursor: pointer;
    color: #cccccc;
    border: 2px dashed #1a73e8; /* เส้นประสีฟ้า */
    border-radius: 10px;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
}

/* เอฟเฟกต์ตอนเอาเมาส์วางบนกล่อง Drag & Drop */
.drop-zone:hover, .drop-zone.dragover {
    background-color: #e8f4fd;
    border-color: #174ea6;
    color: #174ea6;
}

/* ซ่อน input file เดิมให้เนียนไปกับกล่อง */
.drop-zone__input {
    display: none;
}

/* 3. ทำให้ Card ดูมีมิติเวลานำเมาส์ไปชี้ (Hover Effect)
   เอาไปใส่เพิ่มใน class="card custom-card-hover" ได้เลย */

/* 4. ปรับแต่ง Scrollbar ให้ดูโมเดิร์น (เข้ากับ Theme) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb {
    background: #c1c1c1; 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #1a73e8; /* เปลี่ยนเป็นสีฟ้าตอน Hover */
}
/* =========================================
   การตกแต่งโทนสีและฟอนต์ให้ดูทันสมัย
   ========================================= */

/* นำเข้าฟอนต์ Prompt จาก Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600&display=swap');

/* บังคับใช้ฟอนต์ใหม่กับส่วนประกอบหลักๆ ให้สีอักษรดูนุ่มนวลขึ้น */
body, .card-title, .form-control, .btn, table, .dropdown-search-result, .search-container, p, span, a {
    font-family: 'Prompt', sans-serif !important;
    color: #334155; 
}

/* ทำให้ Card โค้งมนและมีเงาสวยๆ */

/* -------------------------------------
   ตกแต่งกล่องค้นหา (Search Box)
   ------------------------------------- */
.search-wrapper {
    position: relative;
    width: 380px; 
    max-width: 100%;
}

.search-wrapper input {
    padding-left: 45px !important;
    border-radius: 30px !important;
    border: 1px solid #cbd5e1;
    background-color: #f8fafc;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

.search-wrapper input:focus {
    background-color: #ffffff;
    border-color: #1a73e8;
    box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.15);
}

.search-wrapper .icon-search {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    z-index: 10;
    font-size: 1.1rem;
}

/* -------------------------------------
   กล่องผลลัพธ์ที่ลอยออกมา (Dropdown)
   ------------------------------------- */
.search-container {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    z-index: 9999;
    max-height: 350px;
    overflow-y: auto;
    display: none;
    border: 1px solid #e2e8f0;
}

/* แต่ง Scrollbar ของ Dropdown */
.search-container::-webkit-scrollbar { width: 6px; }
.search-container::-webkit-scrollbar-track { background: transparent; }
.search-container::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.search-container::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

#dropdown_search, #suggestions_box {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}

#dropdown_search a, .suggestion-item {
    display: block;
    padding: 12px 20px;
    color: #475569;
    text-decoration: none;
    border-bottom: 1px solid #f1f5f9;
    white-space: nowrap;      
    overflow: hidden;         
    text-overflow: ellipsis;  
    font-size: 14.5px;
    transition: all 0.2s ease;
    cursor: pointer;
}

#dropdown_search a:last-child, .suggestion-item:last-child {
    border-bottom: none;
}

#dropdown_search a:hover, .suggestion-item:hover {
    background-color: #eff6ff;
    color: #2563eb;
    padding-left: 24px; /* ลูกเล่นขยับข้อความตอนเอาเมาส์ชี้ */
}

#dropdown_search a i, .suggestion-item i {
    margin-right: 12px;
    color: #94a3b8;
    font-size: 18px;
    transition: color 0.2s;
}

#dropdown_search a:hover i, .suggestion-item:hover i {
    color: #1a73e8;
}

/* =========================================
   สไตล์เฉพาะสำหรับปุ่มและฟอร์ม (Soft UI)
   ========================================= */

/* สีข้อความหัวข้อ (สีน้ำเงินอมม่วงแบบในรูป) */
.text-indigo { color: #174ea6 !important; }
.bg-indigo { background-color: #174ea6 !important; color: white !important; }
.bg-indigo:hover { background-color: #174ea6 !important; color: white !important; }

/* แต่งช่อง Input ให้โค้งมนแบบ Pill */
.form-control-pill {
    border-radius: 50px !important;
    padding: 0.75rem 1.5rem !important;
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
}
.form-control-pill:focus {
    border-color: #174ea6;
    box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.1);
}

/* ปุ่มแบบ Soft Colors (สีอ่อนตัวเข้ม) */
.btn-soft-danger {
    background-color: #fee2e2 !important;
    color: #ef4444 !important;
    font-weight: 500;
    transition: all 0.2s;
}
.btn-soft-danger:hover {
    background-color: #fca5a5 !important;
}

.btn-soft-success {
    background-color: #d1fae5 !important;
    color: #10b981 !important;
    font-weight: 500;
    transition: all 0.2s;
}
.btn-soft-success:hover {
    background-color: #a7f3d0 !important;
}

/* ปรับระยะห่างตารางให้ดูโปร่งขึ้น */
.table-modern td, .table-modern th {
    padding: 1rem 1.5rem !important;
    vertical-align: middle;
}
/* จัดตารางให้ดูทันสมัย */
.table-modern th, .table-modern td {
    vertical-align: middle;
    padding: 1rem 1.2rem !important;
}

/* ช่องกรอกข้อมูลและปุ่มทรงแคปซูล (Pill Shape) */
.form-control-pill {
    border-radius: 50px !important;
    padding: 0.6rem 1.2rem !important;
    border: 1px solid #e2e8f0;
}

/* ปุ่มอัปโหลดสีน้ำเงิน Indigo ที่เห็นตัวหนังสือสีขาวชัดเจน */
.btn-upload-custom {
    background-color: #1a73e8 !important;
    color: #ffffff !important;
    border: none;
    font-weight: bold;
    transition: all 0.3s;
}

.btn-upload-custom:hover {
    background-color: #174ea6 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(26, 115, 232, 0.3);
}
/* =========================================
   สไตล์อัปเดตใหม่: ฟอนต์และ UI ให้ดูสบายตา (Soft UI)
   เตรียมพร้อมสำหรับหน้า Share Folder และหน้าอื่นๆ
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&display=swap');

body, .font-weight-bold, h1, h2, h3, h4, h5, h6, .card-title, .modal-title, .btn {
    font-family: 'Prompt', sans-serif !important;
}

/* ตกแต่งการ์ดให้ดูนุ่มนวล ขอบมน มีมิติ */
.card {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}

/* ตกแต่งปุ่มให้เป็นทรงแคปซูล ดูทันสมัย */
.btn {
    border-radius: 50px !important;
    padding: 10px 20px;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* จัดตารางให้โปร่ง อ่านง่าย */
.table-modern th, .table-modern td {
    vertical-align: middle;
    padding: 1rem 1.2rem !important;
    border-bottom: 1px solid #f1f5f9;
}

.table-modern th {
    color: #64748b !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* =========================================
   สไตล์เพิ่มเติมเฉพาะหน้า Add New Friends (UI ใหม่สบายตา)
   ========================================= */

/* 1. ปรับการ์ดผู้ใช้ให้ดูนุ่มนวล ไม่แสบตา */
.user-card-soft {
    background-color: #f8fafc; /* พื้นหลังสีเทาอมฟ้าอ่อนๆ ลดแสงสะท้อน */
    border: 1px solid #eff6ff;
    border-radius: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.user-card-soft:hover {
    background-color: #ffffff;
    box-shadow: 0 12px 25px rgba(26, 115, 232, 0.06);
    transform: translateY(-4px);
    border-color: #e2e8f0;
}

.avatar-lg {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    color: #94a3b8;
    border: 4px solid #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

.avatar-sm {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #eff6ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #1a73e8;
}

/* 2. สไตล์ปุ่มคำขอต่างๆ */
.btn-cancel-req {
    background-color: #fee2e2 !important;
    color: #ef4444 !important;
    border: none;
    font-weight: 600;
    transition: all 0.3s;
}
.btn-cancel-req:hover { background-color: #fca5a5 !important; color: #fff !important; }

.btn-accept-req {
    background-color: #20c997 !important;
    color: #fff !important;
    border: none;
    font-weight: 600;
}
.btn-accept-req:hover { background-color: #1aa179 !important; color: #fff !important; }

.btn-reject-req {
    background-color: transparent !important;
    color: #ef4444 !important;
    border: 1px solid #ef4444 !important;
    font-weight: 600;
}
.btn-reject-req:hover { background-color: #fee2e2 !important; }

/* 3. กล่องค้นหา & แอนิเมชันปุ่มแว่นขยาย (Slide Left to Expand) */
.search-wrapper-animated {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 46px; /* ขนาดเริ่มต้นเท่ากับตัวปุ่มกลมๆ */
    height: 46px;
    transition: width 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* เอฟเฟกต์เด้งดึ๋ง */
}

.search-wrapper-animated.active {
    width: 300px; /* ขนาดตอนขยายช่องค้นหา */
}

.search-input-animated {
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    border: 1px solid transparent;
    background-color: transparent;
    padding: 0 1.5rem 0 3.5rem; /* เว้นพื้นที่ฝั่งซ้ายให้ไอคอน */
    opacity: 0;
    transition: all 0.4s ease;
    outline: none;
    font-family: 'Prompt', sans-serif;
}

.search-wrapper-animated.active .search-input-animated {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    opacity: 1;
    box-shadow: 0 4px 15px rgba(26, 115, 232, 0.08);
}

.search-icon-animated {
    position: absolute;
    right: 5px; /* เริ่มต้นแว่นขยายจะอยู่ขวาสุด */
    width: 36px;
    height: 36px;
    background-color: #1a73e8;
    color: white;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 5;
}

.search-wrapper-animated.active .search-icon-animated {
    right: calc(100% - 41px); /* สไลด์พุ่งไปอยู่ซ้ายสุดของกล่อง */
    transform: rotate(-360deg); /* เพิ่มลูกเล่นหมุนแว่นขยายตอนสไลด์ */
}

.search-icon-animated:hover {
    background-color: #174ea6;
}
/* =========================================
   Sidebar nav link: กล่องโค้งมน เว้นระยะให้หายใจ (แทนที่สไตล์ hover สไลด์+เงาแบบเก่า
   ด้วยสไตล์ Drive ด้านล่าง ซึ่ง override รายการนี้อยู่แล้ว)
   ========================================= */
#sidebar .nav-item .nav-link {
    transition: background-color 0.15s ease, color 0.15s ease;
    border-radius: 12px;
    margin: 3px 12px;
}
/* =========================================
   AUTHENTICATION PAGES (Login & Register)
   ========================================= */
.auth-card {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    background: white;
}

/* ฝั่งกราฟิก Login (Indigo) */
.auth-half-bg {
    background: linear-gradient(135deg, #1a73e8 0%, #1a73e8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}

/* ฝั่งกราฟิก Register (Teal) */
.auth-half-bg-right {
    background: linear-gradient(135deg, #20c997 0%, #0d9488 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}

.auth-half-bg::before, .auth-half-bg::after, .auth-half-bg-right::before {
    content: '';
    position: absolute;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
}
.auth-half-bg::before { width: 400px; height: 400px; top: -100px; left: -100px; }
.auth-half-bg::after { width: 300px; height: 300px; bottom: -50px; right: -50px; }
.auth-half-bg-right::before { width: 400px; height: 400px; top: -50px; right: -100px; }

.form-control-custom {
    border-radius: 12px;
    padding: 0.8rem 1.2rem;
    border: 1px solid #e2e8f0;
    background-color: #f8fafc;
    font-size: 0.95rem;
    transition: all 0.3s;
}
.form-control-custom:focus {
    background-color: #ffffff;
    border-color: #1a73e8;
    box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.1);
}

.btn-auth {
    background-color: #1a73e8;
    color: white;
    border-radius: 12px;
    padding: 12px;
}
.btn-auth-register {
    background-color: #0d9488;
    color: white;
    border-radius: 12px;
    padding: 12px;
    border: none;
}

/* =========================================
   SEARCH ANIMATION & UTILITIES
   ========================================= */
.search-wrapper-animated {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 46px;
    height: 46px;
    transition: width 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-wrapper-animated.active { width: 300px; }

.search-input-animated {
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    border: 1px solid transparent;
    background-color: transparent;
    padding: 0 1.5rem 0 3.5rem;
    opacity: 0;
    transition: all 0.4s ease;
    outline: none;
}
.search-wrapper-animated.active .search-input-animated {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    opacity: 1;
}

.search-icon-animated {
    position: absolute;
    right: 5px;
    width: 36px;
    height: 36px;
    background-color: #1a73e8;
    color: white;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 5;
}
.search-wrapper-animated.active .search-icon-animated {
    right: calc(100% - 41px);
    transform: rotate(-360deg);
}

.modal-title, .modal-title i { color: #1a73e8 !important; }
/* เพิ่มความสวยงามให้ Card และ Input ใน explore.php */
.search-container {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
}

.file-card-modern {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid rgba(0,0,0,0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.file-card-modern:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(26, 115, 232, 0.08);
    border-color: #aecbfa;
}

.btn-open-file {
    background-color: #1a73e8;
    color: white;
    border-radius: 20px;
    padding: 5px 20px;
    border: none;
    transition: 0.3s;
}

.btn-open-file:hover {
    background-color: #174ea6;
    color: white;
}

/* ปรับสี Highlight ข้อความค้นหา */
mark {
    background-color: #fef08a !important;
    padding: 0 2px;
    border-radius: 3px;
}
.input-group:focus-within {
    box-shadow: 0 0 0 0.25rem rgba(26, 115, 232, 0.25) !important;
}
.btn-primary:hover {
    background: #174ea6 !important;
}

.drop-zone-modern {
position: relative;
width: 100%;
min-height: 220px;
border: 2px dashed #cbd5e1;
border-radius: 16px;
background-color: #f8fafc;
transition: all 0.3s ease;
/ หัวใจสำคัญ: บังคับให้เรียงซ้อนกันเป็นแนวตั้ง (แยกบรรทัด) /
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 2rem;
overflow: hidden; / เพิ่มตรงนี้เพื่อไม่ให้ของข้างในล้นออกมา */
}

.drop-zone-modern:hover, .drop-zone-modern.dragover {
background-color: #eef2ff;
border-color: #4285f4;
}

/* ซ่อน input file แต่กางให้เต็มพื้นที่ */
.file-input-hidden {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 10;
}

/* =========================================
Dashboard (welcome.php) Styles
========================================= /
/ Welcome Banner */
.welcome-banner {
background: linear-gradient(135deg, #1a73e8 0%, #1a73e8 100%);
border-radius: 20px;
padding: 30px;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 10px 25px rgba(26, 115, 232, 0.2);
flex-wrap: wrap;
gap: 20px;
}
.btn-glass {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
backdrop-filter: blur(10px);
transition: all 0.2s;
}
.btn-glass:hover { background: rgba(255, 255, 255, 0.3); color: white; transform: translateY(-2px); }

/* Storage Linear Bar */
.storage-card { background: #ffffff; border-radius: 20px; border: 1px solid rgba(0,0,0,0.03); padding: 30px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02); height: 100%; display: flex; flex-direction: column;}
.progress-thick { height: 16px; border-radius: 50px; background-color: #f1f5f9; overflow: hidden; display: flex; }
.progress-bar-used { background: linear-gradient(90deg, #1a73e8, #4285f4); border-radius: 50px; }
.file-type-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: 8px; }

/* Folder Row */
.folder-row-card { display: flex; align-items: center; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 15px; text-decoration: none; color: #334155; transition: 0.2s; }
.folder-row-card:hover { background: #f8fafc; border-color: #cbd5e1; }
.folder-row-icon { font-size: 1.8rem; color: #f59e0b; margin-right: 15px; }

/* File Cards (Grid) */
.file-grid-card { background: #ffffff; border-radius: 16px; border: 1px solid rgba(0,0,0,0.05); padding: 20px; text-align: center; transition: all 0.3s; cursor: pointer; height: 100%; display: flex; flex-direction: column; justify-content: center;}
.file-grid-card:hover { transform: translateY(-5px); box-shadow: 0 12px 20px rgba(0,0,0,0.04); border-color: #aecbfa; }
.file-grid-icon { font-size: 3rem; margin-bottom: 10px; }
.file-grid-name { font-weight: 600; color: #1e293b; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; }

.upload-more-card { background: #f8fafc; border: 2px dashed #cbd5e1; box-shadow: none; text-decoration: none; transition: 0.2s;}
.upload-more-card:hover { border-color: #1a73e8; background: #eef2ff;}



/* =========================================
Shared Folders (shared_folder.php) Styles
========================================= */
/* แถบสร้างโฟลเดอร์แชร์ */
.create-folder-bar {
    background: white; border-radius: 12px; padding: 15px 20px; display: flex; align-items: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); border: 1px solid #e2e8f0; margin-bottom: 30px;
}
.create-folder-bar input {
    border: none; outline: none; flex-grow: 1; padding: 8px 15px;
    background: #f8fafc; border-radius: 8px; margin: 0 15px; font-family: 'Prompt', sans-serif;
}

/* Folder Card Design */
.folder-card {
    background: #ffffff; border-radius: 16px; border: 1px solid rgba(0,0,0,0.04);
    padding: 24px; transition: all 0.3s ease; position: relative; cursor: pointer;
    display: flex; flex-direction: column; height: 100%; text-decoration: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.folder-card:hover { transform: translateY(-4px); box-shadow: 0 12px 25px rgba(16, 185, 129, 0.1); border-color: #a7f3d0; }

.folder-icon-wrapper {
    background: #ecfdf5; width: 55px; height: 55px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; margin-bottom: 15px;
}
.folder-icon { font-size: 2rem; color: #10b981; }

.folder-name { font-weight: 600; color: #1e293b; font-size: 1.1rem; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-stats { font-size: 0.85rem; color: #64748b; margin-bottom: 20px; }

/* Avatar สมาชิกที่ซ้อนกัน */
.avatar-group { display: flex; align-items: center; }
.avatar-group .avatar {
    width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: bold; color: white;
    margin-right: -10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.avatar-group .avatar:last-child { margin-right: 0; }
.avatar-more { background: #f1f5f9; color: #64748b; border: 2px solid #fff; z-index: 1; }

/* ปุ่ม 3 จุด (ใช้ร่วมกันทุกการ์ดโฟลเดอร์: shared_folder.php, new_folder.php, documents_lists.php) */
.btn-more { position: absolute; top: 20px; right: 20px; color: #94a3b8; background: transparent; border: none; padding: 4px 8px; border-radius: 50%; transition: 0.2s; }
.btn-more:hover { background: #f1f5f9; color: #1e293b; }

/* =========================================
My Folders (new_folder.php) Styles
========================================= */
.my-folder-card {
background: #ffffff; border-radius: 16px; border: 1px solid rgba(0,0,0,0.04);
padding: 20px; transition: all 0.3s ease; position: relative; cursor: pointer;
display: flex; flex-direction: column; height: 100%; text-decoration: none;
}
.my-folder-card:hover { transform: translateY(-4px); box-shadow: 0 12px 25px rgba(245, 158, 11, 0.15); border-color: #fde68a; }
.my-folder-card .dropdown-menu { border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-radius: 12px; }

.my-folder-icon-wrapper { background: #fffbeb; width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.my-folder-icon { font-size: 1.8rem; color: #f59e0b; }

.privacy-badge { font-size: 0.75rem; padding: 4px 10px; border-radius: 50px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.badge-locked { background: #fee2e2; color: #ef4444; }
.badge-unlocked { background: #dcfce3; color: #22c55e; }

/* View Toggle (ใช้ร่วมกันทุกหน้าได้) */
.view-toggle-group { display: inline-flex; background: #f1f5f9; border-radius: 50px; padding: 4px; border: 1px solid #e2e8f0; }
.view-toggle-btn { background: transparent; border: none; padding: 6px 16px; border-radius: 50px; color: #64748b; font-size: 1.1rem; transition: all 0.2s; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.view-toggle-btn.active { background: #dbeafe; color: #1e40af; box-shadow: 0 2px 4px rgba(0,0,0,0.05); font-weight: bold; }
.view-container { display: none; }
.view-container.active { display: flex; }

/* ========================================= */
/* CSS สำหรับหน้า My Friends (Compact List) */
/* ========================================= */

.compact-card { 
    border-radius: 12px; 
    border: none; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.03); 
    background: #ffffff; 
}

/* โซนค้นหาแบบกะทัดรัด */
.search-box-compact { 
    background: #f9fafb; 
    border: 1px solid #e5e7eb; 
    border-radius: 20px; 
    padding: 6px 16px; 
    display: flex; 
    align-items: center; 
    width: 100%;
    max-width: 260px;
    transition: 0.3s; 
}
.search-box-compact:focus-within { 
    border-color: #cbd5e1; 
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1); 
    background: #ffffff; 
}
.search-box-compact input { 
    border: none; 
    background: transparent; 
    outline: none; 
    font-size: 0.85rem; 
    width: 100%; 
    margin-left: 8px; 
    color: #475569;
}

/* รายการเพื่อน */
.friend-list-group { 
    display: flex; 
    flex-direction: column; 
}
.friend-list-item { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 16px 20px; 
    border-bottom: 1px solid #f3f4f6; 
    transition: background 0.2s; 
}
.friend-list-item:last-child { border-bottom: none; }
.friend-list-item:hover { background-color: #f9fafb; }

/* อวาตาร์และข้อความ */
.friend-avatar { 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 1.2rem; 
}
.avatar-blue { background: #eef2ff; color: #1a73e8; }
.avatar-pink { background: #fdf2f8; color: #db2777; }
.avatar-green { background: #f0fdf4; color: #16a34a; }

.friend-name-text { 
    font-weight: 600; 
    font-size: 0.95rem; 
    color: #111827; 
    line-height: 1.2; 
    margin-bottom: 2px; 
}
.friend-username-text { 
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; 
    font-size: 0.8rem; 
    color: #6b7280; 
    line-height: 1.2; 
    letter-spacing: -0.3px; 
}

/* ปุ่ม Unfriend แบบ Outline สีแดง */
.btn-unfriend-outline { 
    border: 1px solid #fca5a5; 
    color: #ef4444; 
    background: transparent; 
    padding: 4px 16px; 
    border-radius: 20px; 
    font-size: 0.8rem; 
    font-weight: 600; 
    transition: 0.2s; 
}
.btn-unfriend-outline:hover { 
    background: #fef2f2; 
    border-color: #ef4444; 
    color: #dc2626;
}

/* ========================================= */
/* CSS สำหรับหน้า Add New Friends (Social List) */
/* ========================================= */

/* 👥 รายการผู้ใช้ (ฝั่งซ้าย) */
.user-list-item { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 16px 20px; 
    border-bottom: 1px solid #f3f4f6; 
    transition: background 0.2s; 
}
.user-list-item:last-child { border-bottom: none; }
.user-list-item:hover { background-color: #f9fafb; }

.user-name-text { 
    font-weight: 600; 
    font-size: 0.95rem; 
    color: #111827; 
    margin-bottom: 2px; 
}
.user-username-text { 
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; 
    font-size: 0.8rem; 
    color: #6b7280; 
    letter-spacing: -0.3px;
}

/* 🔘 ปุ่ม Action ฝั่งซ้าย */
.btn-add-friend { 
    background: #1a73e8; 
    color: #fff; 
    border: none; 
    padding: 6px 20px; 
    border-radius: 20px; 
    font-size: 0.8rem; 
    font-weight: 600; 
    transition: 0.2s; 
    text-decoration: none;
    display: inline-block;
}
.btn-add-friend:hover { background: #174ea6; color: #fff; }

.btn-cancel-req { 
    background: #fee2e2; 
    color: #dc2626; 
    border: none; 
    padding: 6px 20px; 
    border-radius: 20px; 
    font-size: 0.8rem; 
    font-weight: 600; 
    transition: 0.2s; 
    text-decoration: none;
    display: inline-block;
}
.btn-cancel-req:hover { background: #fecaca; color: #dc2626; }

/* 🔔 ฝั่งขวา (Requests) */
.req-card { 
    background: #ffffff; 
    border: 1px solid #f1f5f9; 
    border-radius: 12px; 
    padding: 16px; 
    margin-bottom: 12px; 
}
.req-btn-accept { 
    background: #10b981; 
    color: white; 
    border: none; 
    padding: 6px 12px; 
    border-radius: 8px; 
    font-size: 0.8rem; 
    font-weight: 600; 
    flex: 1; 
    transition: 0.2s; 
    text-align: center;
    text-decoration: none;
}
.req-btn-accept:hover { background: #059669; color: white; }

.req-btn-reject { 
    background: #fff; 
    border: 1px solid #fca5a5; 
    color: #ef4444; 
    padding: 6px 12px; 
    border-radius: 8px; 
    font-size: 0.8rem; 
    font-weight: 600; 
    flex: 1; 
    transition: 0.2s; 
    text-align: center;
    text-decoration: none;
}
.req-btn-reject:hover { background: #fef2f2; color: #dc2626; }

/* =========================================
   Group Portal Cards & Layout (Google Drive Scale)
   ========================================= */
.card-custom { border-radius: 8px; border: 1px solid #dadce0; background: #ffffff; box-shadow: none; overflow: hidden; }

/* Form Elements */
.form-control-custom { border: 1px solid #dadce0; border-radius: 4px; padding: 10px 12px; font-size: 14px; transition: 0.2s; }
.form-control-custom:focus { outline: none; border: 2px solid #1a73e8; padding: 9px 11px; box-shadow: none; }
.btn-primary-custom { background: #1a73e8; color: white; border: none; font-weight: 500; padding: 10px 24px; border-radius: 4px; transition: 0.2s; }
.btn-primary-custom:hover { background: #1557b0; color: white; }
.btn-text { background: transparent; color: #1a73e8; border: none; font-weight: 500; padding: 8px 16px; border-radius: 4px; transition: 0.2s; }
.btn-text:hover { background: #f4f8fe; }
.form-label-custom { font-size: 13px; font-weight: 500; color: #3c4043; margin-bottom: 6px; }

/* Search Box */
.search-box { position: relative; }
.search-box .bi-search { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #5f6368; }
.search-box input { padding-left: 36px; border-radius: 20px; border: 1px solid #dadce0; font-size: 13px; height: 36px; transition: 0.2s; }
.search-box input:focus { border-color: #1a73e8; box-shadow: inset 0 0 0 1px #1a73e8; outline: none; }

/* Group Cards */
.group-card { border-radius: 8px; border: 1px solid #dadce0; background: #ffffff; transition: all 0.2s ease; display: block; color: inherit; position: relative; height: 100%; display: flex; flex-direction: column; }
.group-card:hover { border-color: #1a73e8; box-shadow: 0 4px 12px rgba(26, 115, 232, 0.08); transform: translateY(-2px); }
.group-card-header { padding: 16px; display: flex; justify-content: space-between; align-items: stretch; flex-grow: 1; min-height: 100px; }
.group-title { font-size: 16px; font-weight: 500; color: #202124; margin: 0; display: flex; align-items: center; gap: 10px; transition: color 0.2s; cursor: pointer; text-decoration: none; }
.group-title:hover { color: #1a73e8; }
.group-card-footer { padding: 12px 16px; border-top: 1px solid #f1f3f4; display: flex; justify-content: space-between; align-items: center; background: #fafafa; border-radius: 0 0 8px 8px; }

/* Badges & Buttons */
.role-badge { font-size: 11px; padding: 3px 10px; border-radius: 4px; font-weight: 500; line-height: 1; }
.role-admin { background: #fce8e6; color: #d93025; }
.role-member { background: #f1f3f4; color: #5f6368; }

.btn-enter { background: #ffffff; border: 1px solid #dadce0; color: #1a73e8; border-radius: 4px; padding: 4px 16px; font-size: 13px; font-weight: 500; transition: 0.2s; text-decoration: none; }
.btn-enter:hover { background: #f4f8fe; border-color: #1a73e8; color: #1a73e8; }

.dropdown-menu-custom { border-radius: 8px; border: 1px solid #dadce0; box-shadow: 0 4px 12px rgba(0,0,0,0.1); font-size: 13px; }

/* =========================================
   GOOGLE DRIVE THEME (global overrides)
   ปรับโทนสีและพื้นผิวทั้งเว็บให้ไปทาง Google Drive:
   - สีฟ้า Google (#1a73e8) แทนสีม่วง/indigo เดิม (แก้ไปแล้วทั้งไฟล์ด้านบน)
   - พื้นผิวแบนราบ ขอบเส้นบาง แทนเงาหนาๆ แบบ soft-UI
   - Sidebar/Navbar แบบ Drive: highlight สีฟ้าอ่อน ไม่มีแอนิเมชันเลื่อน
   ========================================= */
/* ลดขนาดพื้นฐานทั้งเว็บลงให้กระชับแบบ Google Drive
   เทคนิคนี้ย่อทุกอย่างที่หน่วยเป็น rem พร้อมกันทีเดียว (font-size, padding
   ของ Bootstrap utility เช่น px-4/py-2/fs-4, ไอคอน, border-radius ฯลฯ)
   เพราะ 1rem อ้างอิงจาก font-size ของ <html> เสมอ ไม่ต้องไปไล่แก้ทีละไฟล์ */
html {
    font-size: 87.5%; /* 16px -> 14px */
}

:root {
    --gd-blue: #1a73e8;
    --gd-blue-dark: #174ea6;
    --gd-blue-light: #e8f0fe;
    --gd-border: #dadce0;
    --gd-text: #202124;
    --gd-text-secondary: #5f6368;
    --gd-surface: #f8f9fa;
}

body {
    background-color: var(--gd-surface) !important;
}

/* ให้ปุ่ม/ไอคอน "primary" ของ Bootstrap ในเทมเพลตเดิมใช้สีฟ้า Google แทนสีน้ำเงินเข้มเดิม */
.btn-primary {
    background-color: var(--gd-blue) !important;
    border-color: var(--gd-blue) !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--gd-blue-dark) !important;
    border-color: var(--gd-blue-dark) !important;
}
.text-primary { color: var(--gd-blue) !important; }
.bg-primary { background-color: var(--gd-blue) !important; }

/* การ์ดทั่วไป: แบนราบ มีเส้นขอบบาง ไม่มีเงาหนา (ยกเว้นการ์ดที่มีคลาสเฉพาะของตัวเองอยู่แล้ว เช่น folder-card, group-card) */
.card {
    border: 1px solid var(--gd-border) !important;
    box-shadow: none !important;
    border-radius: 8px !important;
}

/* Navbar: กล่องค้นหาแบบ Drive (พื้นเทาอ่อน เปลี่ยนเป็นขาว+ขอบฟ้าตอนโฟกัส) */
.navbar .search-form input[type="search"] {
    background-color: var(--gd-surface) !important;
    border: 1px solid transparent !important;
}
.navbar .search-form input[type="search"]:focus {
    background-color: #ffffff !important;
    border-color: var(--gd-border) !important;
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28) !important;
}

/* Sidebar: highlight แบบ Drive คือพื้นฟ้าอ่อน ตัวหนังสือสีฟ้า ไม่มีการเลื่อน/เงา
   (ไอคอนไม่บังคับสีฟ้าตอน hover/active แล้ว เพราะแต่ละอันมีสีวงกลมประจำตัวของตัวเองอยู่แล้ว - ดู .nav-icon-badge) */
#sidebar .nav-item .nav-link:hover {
    background-color: var(--gd-blue-light) !important;
    transform: none !important;
    box-shadow: none !important;
}
#sidebar .nav-item .nav-link:hover .menu-title {
    color: var(--gd-blue) !important;
}
#sidebar .nav-item.active .nav-link {
    background-color: var(--gd-blue-light);
    border-radius: 0 24px 24px 0;
}
#sidebar .nav-item.active .nav-link .menu-title {
    color: var(--gd-blue) !important;
    font-weight: 600;
}
/* วงกลมพื้นหลังสีหลังไอคอนแต่ละเมนู (คนละสีต่อรายการ ตั้งค่าผ่าน inline style ใน sidebar.php)
   ตอน active จะมีวงแหวนล้อมรอบด้วยสีของตัวเอง (currentColor) เป็นตัวบอกสถานะแทนการบังคับสีฟ้า */
.nav-icon-badge {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 12px;
}
.nav-icon-badge i {
    font-size: 0.95rem !important;
}
#sidebar .nav-item.active .nav-link .nav-icon-badge {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px currentColor;
}

/* =========================================
   GOOGLE DRIVE DENSITY (ลดขนาดตาราง/ปุ่ม/แถวให้กระชับขึ้นอีกชั้น
   นอกเหนือจากการลด root font-size ด้านบน)
   ========================================= */

/* ตารางไฟล์/โฟลเดอร์: แถวเตี้ยลง ตัวอักษรเล็กลงแบบ Drive */
.table-modern th, .table-modern td {
    padding: 0.55rem 1rem !important;
    font-size: 0.85rem;
}
.table-modern th {
    font-size: 0.7rem;
}

/* ปุ่มทั่วไป: กระชับขึ้น ไม่หนาเกินไป */
.btn {
    padding: 6px 16px;
    font-size: 0.85rem;
}
.btn-sm, .table-modern .btn {
    padding: 4px 10px !important;
    font-size: 0.8rem !important;
}

/* หัวข้อหน้า (เช่น "My Folders") ให้เล็กลงเข้าใกล้สเกลของ Drive */
h2, .breadcrumb-title {
    font-size: 1.35rem !important;
}

/* แถบเมนู sidebar: ระยะห่างแนวตั้ง + ไอคอน-ข้อความให้หายใจกำลังดี ไม่แน่นหรือหลวมเกินไป */
#sidebar .nav-item .nav-link {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    display: flex;
    align-items: center;
}
#sidebar .menu-title {
    font-size: 0.85rem;
}

/* =========================================
   Explore & Search (explore.php) Styles
   ========================================= */
.tags-container { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-pill {
    background-color: #ffffff; border: 1px solid #cbd5e1; color: #475569;
    padding: 6px 16px; border-radius: 50px; font-size: 0.85rem;
    cursor: pointer; transition: all 0.2s; display: flex; align-items: center; text-decoration: none;
}
.tag-pill:hover { background-color: #f1f5f9; color: #1a73e8; }
.tag-pill.active { background-color: #eef2ff; color: #1a73e8; border-color: #aecbfa; font-weight: 600; }

/* =========================================
   Group Workspace (group_workspace.php) Styles
   ========================================= */
.workspace-header { padding: 16px 20px; border-bottom: 1px solid #dadce0; display: flex; align-items: center; justify-content: space-between; background: #fff; border-radius: 8px 8px 0 0; }
.breadcrumb-title { display: flex; align-items: center; gap: 8px; margin: 0; color: #202124; font-weight: 500; }
.breadcrumb-title a { color: #5f6368; text-decoration: none; }
.breadcrumb-title a:hover { color: #1a73e8; }

/* ปุ่ม "New" ทึบสีฟ้า (ตัวหนังสือ/ไอคอนขาวใช้ currentColor เลยเปลี่ยนสีอัตโนมัติ) */
.btn-new { background: #1a73e8; color: #ffffff; border: none; border-radius: 24px; padding: 0 24px; height: 36px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3); transition: 0.2s; }
.btn-new:hover, .btn-new[aria-expanded="true"] { background: #1557b0; color: #ffffff; box-shadow: 0 1px 3px 1px rgba(60,64,67,0.15); }
.btn-new::after { display: none; }

.file-list-header { font-size: 12px; font-weight: 500; color: #5f6368; padding: 12px 20px; border-bottom: 1px solid #dadce0; display: flex; background: #fafafa; }
.file-row { height: 52px; padding: 0 20px; border-bottom: 1px solid #f1f3f4; display: flex; align-items: center; transition: background 0.1s; cursor: pointer; background: #fff; }
.file-row:hover { background-color: #f5f5f5; }
.file-row:last-child { border-radius: 0 0 8px 8px; border-bottom: none; }

.col-name { flex: 2; display: flex; align-items: center; gap: 12px; font-weight: 500; color: #3c4043; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-owner { flex: 1; color: #5f6368; font-size: 13px; }
.col-date { flex: 1; color: #5f6368; font-size: 13px; }
.col-size { width: 80px; text-align: right; color: #5f6368; font-size: 13px; }
.col-action { width: 118px; display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-shrink: 0; }

.sidebar-header { padding: 16px 20px; font-size: 14px; font-weight: 500; color: #202124; border-bottom: 1px solid #dadce0; background: #fff; border-radius: 8px 8px 0 0; }
.member-item { padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; transition: background 0.1s; background: #fff; }
.member-item:hover { background: #f5f5f5; }
.member-item:last-child { border-radius: 0 0 8px 8px; }

/* เรียก .member-avatar แทน .avatar-sm เพราะ .avatar-sm ถูกใช้แล้วในหน้า friends (ขนาด 48px คนละบริบทกัน) */
.member-avatar { width: 36px; height: 36px; border-radius: 50%; background: #e8f0fe; color: #1a73e8; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; flex-shrink: 0; }
.member-name { font-size: 13px; font-weight: 500; color: #3c4043; margin-bottom: 2px; }
.member-email { font-size: 12px; color: #5f6368; }

#drag-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.9); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.2s ease-in-out; }
#drag-overlay.active { opacity: 1; pointer-events: all; }
.drag-box-content { border: 3px dashed #1a73e8; background-color: #f4f8fe; border-radius: 16px; width: 80%; height: 80%; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }

#upload-status-box { position: fixed; bottom: 24px; right: 24px; width: 320px; background: #ffffff; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); border: 1px solid #dadce0; z-index: 10000; transform: translateY(150%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
#upload-status-box.show { transform: translateY(0); }
.upload-header { background: #323232; color: white; padding: 12px 16px; border-radius: 8px 8px 0 0; font-weight: 500; display: flex; justify-content: space-between; align-items: center; }
.upload-body { padding: 16px; }
.upload-file-name { font-size: 13px; margin-bottom: 8px; color: #3c4043; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upload-progress-track { height: 6px; border-radius: 3px; background: #e8eaed; overflow: hidden; }
.upload-progress-bar { height: 100%; background-color: #1a73e8; transition: width 0.15s linear; }