/* Apple Style Base CSS with Dark/Light Mode */

 :root {
     --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     --transition: all 0.2s ease-in-out;

     /* Light mode colors */
     --bg-color: #ffffff;
     --text-color: #1d1d1f;
     --secondary-text: #6e6e73;
     --link-color: #0071e3;
     --border-color: #d2d2d7;
     --bg-color-popup: rgba(0, 0, 0, 0.5);
     --header-bg: #f5f5f7;
     --header-text: #1d1d1f;
     --menu-bg: #e5e5ea;
     --menu-text: #1d1d1f;
     --menu-hover: rgba(0, 0, 0, 0.06);
     --btn-bg-hover: rgba(0, 0, 0, 0.06);

     --color-white: #ffffff;
     --color-black: #000000;
     --color-primary: #007aff;
     /* Blue (iOS style) */
     --color-secondary: #6c757d;
     /* Gray */
     --color-success: #28a745;
     /* Green */
     --color-danger: #dc3545;
     /* Red */
     --color-border: #e0e0e0;
     --color-bg-hover: rgba(0, 0, 0, 0.05);
     --color-bg-dark: #1c1c1e;
 }

 @media (prefers-color-scheme: dark) {
     :root {
         --bg-color: #000000;
         --text-color: #f5f5f7;
         --secondary-text: #86868b;
         --link-color: #0a84ff;
         --border-color: #3a3a3c;
         --bg-color-popup: rgba(255, 255, 255, 0.1);
         --header-bg: #1c1c1e;
         --header-text: #f5f5f7;
         --menu-bg: #2c2c2e;
         --menu-text: #f5f5f7;
         --menu-hover: rgba(255, 255, 255, 0.1);
         --btn-bg-hover: rgba(255, 255, 255, 0.1);

         --color-white: #ffffff;
         --color-black: #000000;
         --color-primary: #0a84ff;
         --color-secondary: #a1a1a1;
         --color-success: #32d74b;
         --color-danger: #ff453a;
         --color-border: #2c2c2e;
         --color-bg-hover: rgba(255, 255, 255, 0.1);
         --color-bg-dark: #000000;
     }
 }

 html,
 body {
     height: 100%;
     margin: 0;
     padding: 0;
 }

 body {
     display: flex;
     flex-direction: column;
     font-family: var(--font-family);
     background-color: var(--bg-color);
     color: var(--text-color);
     transition: var(--transition);
 }

 a {
     color: var(--link-color);
     text-decoration: none;
     transition: var(--transition);
 }

 header,
 footer,
 .header,
 .footer {
     border-bottom: 1px solid var(--border-color);
     background-color: var(--header-bg);
     color: var(--header-text);
 }

 footer,
 .footer {
     border-top: 1px solid var(--border-color);
 }

 h1,
 h2,
 h3,
 h4,
 h5 {
     font-weight: 600;
 }

 button,
 .btn {
     font-family: inherit;
     /* background-color: var(--link-color); */
     color: var(--link-color);
     border: none;
     cursor: pointer;
     padding: 0.5rem 1rem;
     transition: var(--transition);
     text-decoration: none;
     font-weight: 500;
 }

 button:hover,
 .btn:hover {
     background-color: var(--btn-bg-hover);
 }

 /* Primary */
 .btn-primary {
     background-color: var(--color-primary);
     color: var(--color-white);
     transition: filter 0.2s ease, opacity 0.2s ease;
 }

 .btn-primary:hover {
     background-color: var(--color-primary);
     filter: brightness(90%);
     opacity: 0.9;
 }

 /* Secondary */
 .btn-secondary {
     background-color: var(--color-secondary);
     color: var(--color-white);
 }

 .btn-secondary:hover {
     background-color: var(--color-secondary);
     opacity: 0.85;
 }

 /* Success */
 .btn-success {
     background-color: var(--color-success);
     color: var(--color-white);
 }

 .btn-success:hover {
     background-color: var(--color-success);
     opacity: 0.85;
 }

 /* Danger */
 .btn-danger {
     background-color: var(--color-danger);
     color: var(--color-white);
 }

 .btn-danger:hover {
     background-color: var(--color-danger);
     opacity: 0.9;
 }

 /* Ghost */
 .btn-ghost {
     background-color: transparent;
     color: var(--color-primary);
     border: 1px solid var(--color-border);
 }

 .btn-ghost:hover {
     background-color: var(--color-bg-hover);
 }

 .header {
     gap: 1rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0.3rem;
     flex-shrink: 0;
 }

 .device {
     flex: 1;
     display: flex;
     justify-content: flex-end;
 }

 .device select,
 .device button {
     padding: 0.7rem 0.5rem;
     max-width: 6rem;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
 }



 hr {
     border: none;
     background-color: var(--border-color);
 }


 h4 {
     margin: 0;
     /* background-color: #262525; */
     padding: 0.3rem;
 }

 .border {
     /* border: 1px solid lightblue; */
     border-radius: 0.3rem 0.6rem;
     padding: 0.3rem;
 }

 .btn {
     overflow: hidden;
     border: 0;
     outline: 0;
     /* color: white;
     background: #3498db; */
     transition: background-color 0.3s ease;
 }


 .btn-2 {
     background: #057708;
 }

 .btn-2:hover {
     background: #03b438;
 }

 .btn-right {
     float: right;
 }

 button,
 .btn,
 input,
 select {
     border-radius: 0.3rem;
     font-size: 1rem;
     padding: 0.3rem;
     box-sizing: border-box;
 }

 table {
     border-collapse: collapse;
     width: 100%;
 }

 th,
 td {
     border: 1px solid #ccc;
     padding: 0.3rem;
     text-align: center;
     max-width: 10rem;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .tab {
     overflow: hidden;
     padding-bottom: 0;
     display: flex;
     width: 100%;
 }

 .tab .btn {
     float: left;
     border: none;
     outline: none;
     padding: 0.3rem 0.6rem;
     cursor: pointer;
     transition: 0.3s;
     font-size: 1.5rem;
     /* color: whitesmoke; */
     flex: 1;
     text-decoration: none;
     text-align: center;
     border-radius: 0;
 }

 .margin-bottom {
     margin-bottom: 0.5rem;
 }

 .password-container {
     position: relative;
     display: inline-block;
 }

 .password-input {
     box-sizing: border-box;
     padding-right: 2rem;
 }

 .toggle-password {
     position: absolute;
     top: 0.8rem;
     right: 1rem;
     transform: translateY(-50%);
     background: none;
     border: none;
     cursor: pointer;
     font-size: 18px;
 }

 /* Vùng phủ toàn màn hình */
 #loader-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--bg-color-popup);
     z-index: 9999;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* Vòng xoay */
 .spinner {
     border: 12px solid #f3f3f3;
     border-top: 12px solid #3498db;
     border-radius: 50%;
     width: 80px;
     height: 80px;
     animation: spin 1s linear infinite;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 .input-one-row {
     width: 10rem;
     margin-right: 1rem;
 }

 .table input[type="number"] {
     width: 5em;
 }


 .footer {
     width: 100%;
     position: absolute;
     bottom: 0;
     left: 0;
 }

 .content {
     flex: 1;
     overflow-y: auto;
 }

 .form-popup {
     display: none;
     /* Ẩn mặc định */
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--bg-color-popup);
     justify-content: center;
     align-items: center;
     z-index: 999;
 }

 .form-container {
     background: var(--bg-color);
     padding: 1rem;
     border-radius: 0.3rem;
     width: 22rem;
 }

 .form-container input {
     width: 100%;
     padding: 0.3rem;
     margin: 0.3rem 0;
     box-sizing: border-box;
 }

 .form-container .btn {
     width: 48%;
     padding: 0.3rem;
     margin: 0.2rem 1%;
 }

 .form-group {
     display: flex;
     align-items: center;
     padding: 0.3rem;
 }

 .form-group label {
     width: 6rem;
     margin-right: 0.3rem;
 }

 .form-group .dayofweed input {
     width: auto;
     margin-right: 0.1rem;
     padding: 0;
 }


 .form-group input {
     flex: 1;
     /* Input tự co giãn */
     padding: 0.3rem;
 }

 .form-group .password-input {
     width: 100%;
     padding-right: 2rem;

 }

 .form-group .toggle-password {
     right: 0;
 }

 .form-group .password-container {
     flex: 2;
 }

 .form-group button {
     margin-left: 0.3rem;
 }

 .form-group-button {
     text-align: right;
 }

 .form-group-btton {
     display: flex;
     justify-content: space-between;
     gap: 1rem;
 }


 .form-buttons {
     display: flex;
     justify-content: space-between;
     margin-top: 0.5rem;
 }

 .form-buttons .btn {
     flex: 1;
     margin: 0 0.2rem;
 }

 .width14 {
     width: 14rem !important;
 }

 .width8 {
     width: 8rem !important;
 }

 .btn-icon {
     padding: 0;
     font-size: 1.5rem;
     background: transparent;
     border: none;
     align-items: center;
     color: var(--menu-text);
     text-decoration: none;
 }

 .btn-icon img {
     height: 2rem;
 }

 .btn-icon-pading {
     font-size: 1.5rem;
     line-height: 1.5rem;
 }

 .prompt {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: var(--bg-color-popup);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 9999;
 }

 .prompt-box {
     background: var(--bg-color);
     padding: 1rem;
     border-radius: 0.5rem;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
     text-align: center;
 }

 .prompt-box .form-group {
     margin: 1rem 0;
 }

 .log-item {
     margin: 0 0 4px;
     padding-left: 2em;
     text-indent: -2em;
     white-space: normal;
     word-break: break-word;
     font-family: monospace;
 }

 .top-right {
     position: fixed;
     top: 3rem;
     right: 1rem;
     z-index: 9999;
     padding: 0;
     color: white;
     border: none;
     border-radius: 0.3rem;
     cursor: pointer;
 }

 input[readonly] {
     background-color: transparent;
     border: 1px solid #ccc;
     cursor: not-allowed;
     color: var(--text-color);
 }

 #component-content {
     flex: 1;
     overflow-y: auto;
     padding: 1rem;
     padding-bottom: 2rem;
 }

 svg {
     vertical-align: middle;
 }