/* ===========================
   Components: Cards, Modals, Buttons, Forms, Login
   =========================== */

/* Icon Grid */
.id-tag { display: none !important; }
body.dark-mode .id-tag { display: none !important; }
.grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 2rem; justify-items: center; }
.icon-item { display: flex; flex-direction: column; align-items: center; width: 120px; cursor: pointer; position: relative; }
.icon-wrapper { width: 90px; height: 90px; background-color: var(--white); border-radius: 20px; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; transition: all 0.2s ease; overflow: hidden; border: 1px solid transparent; }
.icon-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.icon-item:hover .icon-wrapper { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: #cbd5e1; }
.icon-label { font-size: 0.85rem; font-weight: 600; color: var(--text-light); text-align: center; word-wrap: break-word; width: 100%; }
.inner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 1.5rem; }

/* Edit / Delete Mode Buttons */
.delete-btn, .delete-major-btn, .edit-major-btn { background: #ef4444; color: white; border: none; font-size: 14px; cursor: pointer; display: none; z-index: 10; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.delete-btn { position: absolute; top: -5px; right: 15px; border-radius: 50%; width: 24px; height: 24px; }
.edit-btn { position: absolute; top: -5px; right: 45px; border-radius: 50%; width: 24px; height: 24px; background: var(--primary-orange); color: white; border: none; font-size: 14px; cursor: pointer; display: none; z-index: 10; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.delete-major-btn { font-size: 0.75rem; padding: 0.3rem 0.8rem; border-radius: 6px; margin-left: 1rem; }
.edit-major-btn { background: var(--primary-orange); border-radius: 50%; width: 26px; height: 26px; padding: 0; margin-left: auto; }
.icon-update-btn { background: var(--primary-orange); color: white; border: none; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 6px rgba(252,128,25,0.4); transition: transform 0.2s; }
.icon-update-btn:hover { transform: scale(1.05); }
.delete-mode-home .icon-item .delete-btn { display: flex; }
.edit-mode-home .icon-item .edit-btn { display: flex; }
.delete-mode-popup .popup-service-item .delete-btn { display: flex; }
.edit-mode-popup .popup-service-item .edit-btn { display: flex; }
.delete-mode-major .major-category-header .delete-major-btn { display: flex; }
.edit-mode-major .major-category-header .edit-major-btn { display: flex; }
/* categorySelectGroup visibility controlled by JS — see modals.js openGlobalAddService / openSpecificAddService */

/* Drag & Drop Upload Zone */
.drag-drop-zone { border: 2px dashed #cbd5e1; border-radius: 8px; padding: 1.5rem; text-align: center; color: var(--text-light); cursor: pointer; transition: all 0.2s ease; background: #f8fafc; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 0.5rem; }
.drag-drop-zone:hover { border-color: #94a3b8; background: #f1f5f9; }
.drag-drop-zone.dragover { border-color: var(--primary-orange); background: #fff7ed; }

/* Modals */
.modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -45%) scale(0.95); background: var(--white); padding: 2rem; border-radius: 12px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); width: 100%; max-width: 450px; max-height: 90vh; overflow-y: auto; z-index: 110; opacity: 0; pointer-events: none; transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1), transform 0.4s cubic-bezier(0.16,1,0.3,1); color: var(--text-dark); }
.modal.active { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.modal-large { max-width: 600px; width: 90%; }
.modal h3 { margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; }
.modal-close-btn { position: absolute; top: -45px; right: 0px; width: 36px; height: 36px; border-radius: 50%; background-color: #f1f5f9; border: 1px solid #e2e8f0; color: #64748b; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); transition: all 0.2s ease; z-index: 10; }
.modal-close-btn:hover { background-color: #e2e8f0; color: #0f172a; transform: scale(1.1); }
body.dark-mode .modal-close-btn { background-color: #334155; border-color: #475569; color: #cbd5e1; }
body.dark-mode .modal-close-btn:hover { background-color: #1e293b; color: #f8fafc; }

/* Forms */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--text-light); }
.form-group input, .form-group select { width: 100%; padding: 0.75rem; border: 1px solid #cbd5e1; border-radius: 6px; outline: none; background: var(--white); color: var(--text-dark); }
.form-group input:focus, .form-group select:focus { border-color: var(--primary-orange); }
body.dark-mode .form-group input, body.dark-mode .form-group select { border-color: #475569; }
.modal-actions { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 1.5rem; }
.btn-cancel { padding: 0.5rem 1rem; background: #e2e8f0; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; color: #1e293b; }
.btn-submit { padding: 0.5rem 1rem; background: var(--primary-orange); color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; }
body.dark-mode .btn-cancel { background: #334155; color: #f8fafc; }

/* Search Dropdown */
.search-results-dropdown { position: fixed; top: 85px; left: 2rem; right: 2rem; background: var(--white); border-radius: 16px; box-shadow: 0 20px 40px -5px rgba(0,0,0,0.15), 0 8px 16px rgba(0,0,0,0.05); max-height: 60vh; overflow-y: auto; z-index: 200; display: none; border: 1px solid #e2e8f0; padding: 0.75rem; }
body.dark-mode .search-results-dropdown { background: #1e293b; border-color: #475569; }
.search-item { display: flex; align-items: center; padding: 0.75rem 1rem; border-radius: 12px; cursor: pointer; transition: all 0.2s ease; margin-bottom: 4px; }
.search-item:last-child { margin-bottom: 0; }
.search-item:hover { background: #f8fafc; transform: translateX(5px); }
body.dark-mode .search-item:hover { background: #334155; }
.search-item-img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.search-item-info { margin-left: 1.25rem; display: flex; flex-direction: column; }
.search-item-title { font-size: 0.95rem; font-weight: 700; color: var(--text-dark); }
.search-item-sub { font-size: 0.8rem; color: var(--text-light); margin-top: 0.2rem; }

/* Floating Update Pill */
.update-pill { position: fixed; bottom: 20px; right: 20px; z-index: 80; background-color: var(--primary-orange); color: white; padding: 12px 24px; border-radius: 9999px; font-weight: 700; font-size: 0.95rem; display: flex; align-items: center; gap: 0.5rem; cursor: pointer; box-shadow: 0 4px 12px rgba(252,128,25,0.4); border: none; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }
.update-pill:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(252,128,25,0.5); }
.update-pill svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* Login Overlay */
#loginOverlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(255,255,255,0.8); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; z-index: 10000; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
body.dark-mode #loginOverlay { background: rgba(23,26,41,0.8); }
#loginOverlay.active { opacity: 1; pointer-events: all; }
.login-box { background: var(--white); padding: 2.5rem; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); width: 100%; max-width: 400px; text-align: center; border: 1px solid rgba(0,0,0,0.05); }
body.dark-mode .login-box { border-color: rgba(255,255,255,0.05); }
.login-box h2 { font-weight: 800; font-size: 1.8rem; margin-bottom: 0.5rem; color: var(--primary-orange); }
.login-box p { color: var(--text-light); margin-bottom: 2rem; font-size: 0.95rem; }
.login-input { width: 100%; padding: 0.8rem 1rem; border-radius: 8px; border: 2px solid #e2e8f0; background: var(--bg-color); color: var(--text-dark); margin-bottom: 1rem; font-size: 1rem; outline: none; transition: border-color 0.2s; }
.login-input:focus { border-color: var(--primary-orange); }
body.dark-mode .login-input { border-color: #334155; }
.login-btn { width: 100%; padding: 0.9rem; background: var(--primary-orange); color: white; border: none; border-radius: 8px; font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: background 0.2s; }
.login-btn:hover { background: #e06c11; }

/* Confirm Dialog */
.confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.confirm-overlay.active { opacity: 1; pointer-events: auto; }
.confirm-box { background: var(--white); border-radius: 16px; padding: 2rem; max-width: 360px; width: 90%; box-shadow: 0 25px 50px rgba(0,0,0,0.2); text-align: center; transform: scale(0.9); transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1); }
.confirm-overlay.active .confirm-box { transform: scale(1); }
.confirm-box h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text-dark); }
.confirm-box p { font-size: 0.9rem; color: var(--text-light); margin-bottom: 1.5rem; }
.confirm-actions { display: flex; gap: 0.75rem; justify-content: center; }
.confirm-cancel-btn { padding: 0.6rem 1.5rem; background: #e2e8f0; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; color: #1e293b; }
.confirm-delete-btn { padding: 0.6rem 1.5rem; background: #ef4444; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; }