/* static/admin.css */

<style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }

    table {
      margin: 20px auto;
      border-collapse: collapse;
      width: 90%;
    }

    table, th, td {
      border: 1px solid #ccc;
    }

    th {
      background-color: #f2f2f2;
    }

    th, td {
      padding: 10px;
    }

    h2 {
      margin-top: 20px;
    }

	.action-form {
		display: inline-block !important;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		background: none !important;
		width: auto !important;
		vertical-align: middle !important;
	}

	.action-form button {
		margin: 0 !important;   /* prevent extra spacing from button itself */
	}

	/* Optional: make sure the parent td doesn't force wrapping */
	.admin-table td {
		white-space: nowrap !important;
	}
	
	/* Restore nice styling for main add forms */
	.add-form {
		display: block !important;
		text-align: left !important;
		margin: 30px auto !important;
		padding: 20px !important;
		border: 1px solid #ddd !important;
		border-radius: 10px !important;
		width: 90% !important;
		max-width: 600px !important;
		background-color: #f9f9f9 !important;
	}

	/* Optional: make labels full-width and inputs nicer */
	.add-form label {
		display: block;
		margin-bottom: 5px;
		font-weight: bold;
	}

	.add-form input {
		width: 100%;
		padding: 8px;
		margin-bottom: 15px;
		border: 1px solid #ccc;
		border-radius: 4px;
		box-sizing: border-box;
	}

	.add-form button {
		background: #0d6efd;
		color: white;
		border: none;
		padding: 10px 20px;
		border-radius: 4px;
		cursor: pointer;
		font-size: 1em;
	}

    label {
      font-weight: bold;
    }

    input[type="text"],
    input[type="email"],
    select {
      width: 100%;
      padding: 8px;
      margin: 8px 0 16px 0;
      box-sizing: border-box;
    }

    input[type="submit"] {
      width: 100%;
      padding: 10px;
      background-color: #4CAF50;
      border: none;
      color: white;
      font-size: 16px;
      cursor: pointer;
      margin-top: 10px;
    }

    a.logout-link {
      color: red;
      font-weight: bold;
      float: right;
      margin: 20px;
    }

    hr {
      margin: 40px 0;
    }
	/* Service Control Styles */
	.service-control {
	  background: #f8f9fa;
	  border: 1px solid #ddd;
	  border-radius: 8px;
	  padding: 15px;
	  margin: 20px auto; /* Center horizontally */
	  max-width: 500px;
	  width: 90%;
	  text-align: center; /* Center all text content */
	}
	
	.admin-header {
    /*display: flex;*/
    justify-content: center;   /* centers horizontally */
    align-items: center;
    width: 100%;
	}

	.admin-menu-centered {
		flex-direction: column;
		align-items: center;
		gap: 12px;
		text-align: center;
	}

	.admin-menu-title h2 {
		margin: 0;
	}

	.admin-menu-title .page-subtitle {
		margin: 4px 0 10px;
		font-size: 0.9rem;
		color: #666;
	}

	.admin-menu-actions {
		display: flex;
		gap: 10px;
		flex-wrap: wrap;
		justify-content: center;
}
	.admin-table-wrapper {
		padding: 20px;
		overflow-x: auto;
	}
	
	.admin-customer_form .admin-customer-menu-title {
    text-align: center;   /* centers the h2 inside */
    margin-bottom: 20px;  /* optional spacing */
	}


	.admin-customer_form {
		text-align: center;
		margin: 0 auto;
		width: 50%;   /* optional: control form width */
	}
	.admin-customer_form form {
		display: inline-block; /* keeps form compact and centered */
		text-align: left;      /* labels/inputs aligned nicely inside */
	}


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

	.admin-table th,
	.admin-table td {
		padding: 8px 10px;
		border-bottom: 1px solid #ddd;
		text-align: left;
		vertical-align: middle;
	}

	.status-enabled {
		color: green;
		font-weight: bold;
	}

	.status-disabled {
		color: red;
		font-weight: bold;
	}

	.flash-messages {
		margin-bottom: 15px;
	}

	.flash {
		padding: 8px 12px;
		border-radius: 4px;
		font-size: 13px;
	}

	.flash.success {
		background: #e6f4ea;
		color: #137333;
		border: 1px solid #b7e1cd;
	}

	.flash.error {
		background: #fdecea;
		color: #b3261e;
		border: 1px solid #f5c2c7;
	}

	.form-hint {
		font-size: 11px;
		color: #666;
		margin-bottom: 10px;
		display: block;
	}


	/* Service Control Styles */
	.admin-menu {
	  background: #f8f9fa;
	  border: 1px solid #ddd;
	  border-radius: 8px;
	  padding: 15px;
	  margin: 20px auto; /* Center horizontally */
	  max-width: 600px;
	  width: 90%;
	  text-align: center; /* Center all text content */
	  /*display: flex;
      gap: 10px; */
	}
	
	.page-title {
    text-align: center;
}

	/* Keep license form compact inside table */
	.license-form {
		display: inline-flex;
		align-items: center;
		gap: 2px;
		margin: 0;
		padding: 0;
	}

	/* Inputs */
	.license-form select,
	.license-form input[type="submit"] {
		height: 18px;
		font-size: 11px;
		padding: 0 4px;
		border: none;
		outline: none;
		background: transparent;
		box-shadow: none;
		line-height: 1;
	}

	/* Remove browser chrome */
	.license-form select {
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		cursor: pointer;
	}

	/* Button styling (still visible, no frame) */
	.license-form input[type="submit"] {
		background-color: #f2f2f2;
		border-radius: 3px;
		cursor: pointer;
	}

	/* Hover feedback */
	.license-form input[type="submit"]:hover {
		background-color: #e0e0e0;
	}


	/* Status Display */
	#whatsapp-status {
	  margin-bottom: 15px;
	  padding: 10px;
	  background: white;
	  border-radius: 4px;
	  display: inline-block; /* Fits content width */
	  text-align: center; /* Center status text */
	  min-width: 200px; /* Prevent too narrow on mobile */
	}

	/* Button Container (invisible) */
	.service-control > button {
	  display: inline-block; /* Puts buttons side-by-side */
	  margin: 0 4px; /* Space between buttons */
	  vertical-align: middle; /* Aligns buttons properly */
	}

	/* Individual Buttons */
	.btn-menu,
	.btn-start, 
	.btn-stop, 
	.btn-restart {
	  padding: 8px 15px;
	  border: none;
	  border-radius: 4px;
	  cursor: pointer;
	  font-weight: bold;
	  transition: all 0.2s;
	  /* Font Awesome icon alignment */
	  display: inline-flex;
	  align-items: center;
	  gap: 5px;
	}
	
		/* Add to your existing styles */
	.btn-warning {
		background: #ffc107;
		color: #212529;
	}

	.btn-action {
		padding: 6px 12px;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		font-size: 0.9em;
		font-weight: 500;
		white-space: nowrap;
	}

	/* Button Colors */
	.btn-start { background: #28a745; color: white; }
	.btn-stop { background: #dc3545; color: white; }
	.btn-restart { background: #ffc107; color: #212529; }

	/* Hover Effects */
	.btn-start:hover { opacity: 0.9; }
	.btn-stop:hover { opacity: 0.9; }
	.btn-restart:hover { opacity: 0.9; }

	/* Uptime Text */
	#whatsapp-uptime {
	  color: #6c757d;
	  font-size: 0.85em;
	  display: block; /* Ensure it's on new line */
	  margin-top: 5px;
	}

	/* Font Awesome Icons */
	.fas {
	  font-size: 0.9em;
	}
			
 </style>