/* webroot/css/admin-layout.css */ /* --- Biến CSS (Variables) --- */ :root { --primary-bg: #0099FF; --secondary-bg: #0088E6; --header-bg: #ffffff; --content-bg: #ecf0f1; --text-color: #ecf0f1; --border-color: #e9ecef; --transition-speed: 0.3s ease; --sidebar-width: 300px; } /* --- Cấu trúc chung & Layout --- */ html, body { height: 100%; margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; background-color: var(--content-bg); } .page-container { display: flex; min-height: 100vh; } /* --- Sidebar (Menu dọc bên trái) --- */ .sidebar { width: var(--sidebar-width); background-color: var(--primary-bg); color: var(--text-color); box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; z-index: 1000; position: fixed; height: 100vh; left: 0; transform: translateX(-100%); transition: transform var(--transition-speed); } /* Hiển thị sidebar khi có class 'sidebar-open' trên */ body.sidebar-open .sidebar { transform: translateX(0); } /* Thu gọn sidebar cho mobile */ .sidebar.collapsed { width: 0; overflow: hidden; } .sidebar-header { padding: 20px 15px; font-size: 1.5em; font-weight: bold; text-align: center; background-color: var(--secondary-bg); white-space: nowrap; } .sidebar-nav { list-style: none; padding: 0; margin: 20px 0; flex-grow: 1; } .sidebar-nav li a { display: block; color: var(--text-color); text-decoration: none; padding: 15px 20px; transition: background-color 0.2s; white-space: nowrap; } .sidebar-nav li a:hover { background-color: var(--secondary-bg); } /* === CSS CHO MENU CON TRONG SIDEBAR === */ .sidebar-fieldset { border: 1px solid var(--border-color); border-radius: 4px; margin: 10px 15px; padding: 0 10px 10px 10px; } .sidebar-legend { width: auto; border: none; padding: 0 10px; margin-bottom: 5px; font-size: 0.9em; font-weight: bold; color: var(--text-color); } .sidebar-nav-submenu { list-style: none; padding: 0; margin: 0; } /* --- Main Wrapper (Bao bọc Header, Content, Footer) --- */ .main-wrapper { flex: 1; display: flex; flex-direction: column; transition: margin-left var(--transition-speed); } /* --- Header (Menu ngang) --- */ .header { background-color: var(--header-bg); padding: 10px 20px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .menu-toggle { font-size: 24px; background: none; border: none; cursor: pointer; margin-right: 20px; display: block; } .header-title { font-size: 1.2em; font-weight: bold; } /* --- Main Content (Nội dung chính) --- */ .main-content { flex: 1; padding: 20px; background-color: var(--content-bg); } /* --- Footer --- */ .footer { padding: 20px; text-align: center; background-color: #ffffff; border-top: 1px solid var(--border-color); font-size: 0.9em; color: #555; } /* --- Header & Button --- */ .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 10px; } .page-header h3 { margin: 0; } /* --- Tiêu đề bảng tự xuống dòng --- */ .report-summary-table th.incident-type-header { max-width: 150px; white-space: normal; vertical-align: middle; text-align: center; } /* --- Thiết kế đáp ứng cho màn hình lớn (Desktop) --- */ @media (min-width: 992px) { .page-container { flex-direction: row; } .sidebar { position: relative; height: auto; transform: translateX(0); width: var(--sidebar-width); transition: width var(--transition-speed); } .sidebar.collapsed { width: 0; overflow: hidden; } .main-wrapper { margin-left: 0; transition: margin-left var(--transition-speed); } .sidebar.collapsed + .main-wrapper { margin-left: 0; } .menu-toggle { display: block; } } /* Tạo khoảng cách cho các nút thao tác trong bảng */ .actions .action-btn { margin-right: 10px; /* Tạo khoảng cách 5px bên phải mỗi nút */ } /* Xóa khoảng cách cho nút cuối cùng để trông cân đối hơn */ .actions .action-btn:last-child { margin-right: 0; } /* Ghi đè CSS cho các nút bấm trong form */ .form-horizontal .form-group .btn { margin-right: 10px; /* Tạo khoảng cách 10px bên phải mỗi nút */ }