/* Tharwah Pay Admin Theme */
/* Based on Tharwah branding colors and design */

:root {
    --tharwah-primary: #003a55;
    --tharwah-secondary: #d0c7c0;
    --tharwah-accent: #417690;
    --tharwah-light: #f8f9fa;
    --tharwah-success: #28a745;
    --tharwah-warning: #ffc107;
    --tharwah-danger: #dc3545;
    --tharwah-info: #17a2b8;
}

/* Header Styling */
#header {
    background: linear-gradient(135deg, var(--tharwah-primary) 0%, var(--tharwah-accent) 100%) !important;
    color: white !important;
    border-bottom: 3px solid var(--tharwah-secondary) !important;
}

#branding h1, #branding h1 a:link, #branding h1 a:visited {
    color: white !important;
    font-weight: 300 !important;
    font-size: 24px !important;
    margin: 0 !important;
    padding: 10px 20px !important;
}

#branding h1 a:hover {
    color: var(--tharwah-secondary) !important;
    text-decoration: none !important;
}

/* Add Tharwah logo */
#branding h1:before {
    content: '';
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-right: 15px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='xMidYMid meet' data-bbox='-0.1 0 737.5 284.5' viewBox='-0.1 0 737.5 284.5' xmlns='http://www.w3.org/2000/svg' data-type='color' role='img' aria-label='Tharwah logo'%3E%3Cg%3E%3Cpath d='M-.1 179.2h42.8v105.2h11.7V179.2h42.7v-3.4H-.1v3.4z' fill='%23ffffff' data-color='1'%3E%3C/path%3E%3Cpath d='M191.7 228.5h-70.6V176h-11.7v108.5h11.7V232h70.6v52.5h11.7V176h-11.7v52.5z' fill='%23ffffff' data-color='1'%3E%3C/path%3E%3Cpath d='M216.8 284.4h3.7c5.1-11.7 12.7-29.2 22.7-52.7h33.3c5 11.8 12.6 29.3 22.7 52.7h11.9c-10.5-24.1-26.2-60.4-47.3-108.8-10.4 24.3-26.1 60.6-47 108.8zm27.8-56c3.4-7.8 8.5-19.5 15.2-35.2 3.4 7.9 8.5 19.6 15.2 35.2h-30.4z' fill='%23ffffff' data-color='1'%3E%3C/path%3E%3Cpath d='M380.4 234.3c2.1-.4 4.3-.9 6.6-1.6 2.4-.6 4.6-1.4 6.8-2.5 4.2-2.1 7.7-5 10.7-8.7 3-3.7 4.5-8.8 4.5-15.2 0-4.7-.7-8.7-2-12.1-1.3-3.4-3-6.3-5.2-8.5-4-4.2-8.9-6.9-14.6-8.1-5.7-1.2-10.7-1.8-14.9-1.8h-45.6v108.6h11.7v-49.2H362c11.7 0 21.2 4.7 28.5 14.1 7.2 9.5 11.4 21.2 12.5 35h12c-.8-11.2-4-21.5-9.6-31.1-5.6-9.4-13.9-15.8-25-18.9zm-12.7-2.5h-29.5v-52.5h33.9c2.3 0 4.6.1 6.8.4 2.2.2 4.3.7 6.1 1.5 3.6 1.5 6.5 4.1 8.7 8 2.3 3.8 3.5 9.6 3.5 17.2 0 4.2-.7 7.8-2 10.6-1.4 2.9-3.1 5.3-5.1 7.2-3.7 3.4-8 5.6-12.8 6.5-4.7.7-7.9 1.1-9.6 1.1z' fill='%23ffffff' data-color='1'%3E%3C/path%3E%3Cpath d='M536.7 176c-7.3 20-18.3 50-33.1 89.9-4.9-12-12.1-30-21.7-54-4.2 12-10.4 30-18.8 54-8-20-20-50-36.1-90.1h-11.2c9.8 24.1 24.5 60.3 44.1 108.6 4.2-11.9 10.4-29.7 18.8-53.6 4.8 12 12.1 29.8 21.7 53.6 8.9-24.1 22.1-60.3 39.8-108.5-.8.1-2 .1-3.5.1z' fill='%23ffffff' data-color='1'%3E%3C/path%3E%3Cpath d='M533.9 284.4h3.7c5.1-11.7 12.7-29.2 22.7-52.7h33.3c5 11.8 12.6 29.3 22.7 52.7h11.9c-10.5-24.1-26.2-60.4-47.3-108.8-10.4 24.3-26.1 60.6-47 108.8zm27.8-56c3.4-7.8 8.5-19.5 15.2-35.2 3.4 7.9 8.5 19.6 15.2 35.2h-30.4z' fill='%23ffffff' data-color='1'%3E%3C/path%3E%3Cpath d='M725.7 176v52.5h-70.6V176h-11.7v108.5h11.7V232h70.6v52.5h11.7V176h-11.7z' fill='%23ffffff' data-color='1'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* User tools styling */
#user-tools {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    padding: 8px 15px !important;
    margin: 10px 20px !important;
}

#user-tools a {
    color: white !important;
    text-decoration: none !important;
    margin: 0 10px !important;
    padding: 5px 10px !important;
    border-radius: 15px !important;
    transition: background-color 0.3s ease !important;
}

#user-tools a:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

/* Navigation styling */
.module h2, .module caption, .inline-group h2 {
    background: var(--tharwah-primary) !important;
    color: white !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 12px 15px !important;
    margin: 0 !important;
    font-weight: 500 !important;
}

/* Breadcrumbs */
.breadcrumbs {
    background: var(--tharwah-light) !important;
    border: 1px solid var(--tharwah-secondary) !important;
    border-radius: 8px !important;
    padding: 10px 15px !important;
    margin: 20px !important;
}

.breadcrumbs a {
    color: var(--tharwah-primary) !important;
    text-decoration: none !important;
}

.breadcrumbs a:hover {
    color: var(--tharwah-accent) !important;
    text-decoration: underline !important;
}

/* Content area */
#content {
    background: white !important;
    border-radius: 8px !important;
    margin: 20px !important;
    box-shadow: 0 2px 10px rgba(0, 58, 85, 0.1) !important;
}

/* Tables */
.results table {
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid var(--tharwah-secondary) !important;
}

.results thead th {
    background: var(--tharwah-primary) !important;
    color: white !important;
    border-bottom: 2px solid var(--tharwah-secondary) !important;
    padding: 12px !important;
}

.results tbody tr:nth-child(even) {
    background: #f8f9fa !important;
}

.results tbody tr:hover {
    background: rgba(65, 118, 144, 0.1) !important;
}

/* Buttons */
.button, input[type=submit], input[type=button], .submit-row input, button {
    background: var(--tharwah-primary) !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 20px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.button:hover, input[type=submit]:hover, input[type=button]:hover, .submit-row input:hover, button:hover {
    background: var(--tharwah-accent) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 58, 85, 0.2) !important;
}

.button.default, input[type=submit].default, .submit-row input.default {
    background: var(--tharwah-success) !important;
}

.button.default:hover, input[type=submit].default:hover, .submit-row input.default:hover {
    background: #218838 !important;
}

/* Delete button */
.deletelink, .deletelink-box {
    background: var(--tharwah-danger) !important;
}

.deletelink:hover, .deletelink-box:hover {
    background: #c82333 !important;
}

/* Form styling */
.form-row {
    border-bottom: 1px solid var(--tharwah-secondary) !important;
    padding: 15px 0 !important;
}

.form-row:last-child {
    border-bottom: none !important;
}

.form-row label {
    color: var(--tharwah-primary) !important;
    font-weight: 500 !important;
}

input[type=text], input[type=password], input[type=email], input[type=url], 
input[type=number], input[type=tel], textarea, select {
    border: 2px solid var(--tharwah-secondary) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    transition: border-color 0.3s ease !important;
}

input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, 
input[type=url]:focus, input[type=number]:focus, input[type=tel]:focus, 
textarea:focus, select:focus {
    border-color: var(--tharwah-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 58, 85, 0.1) !important;
}

/* Login form specific styling */
body.login {
    background: linear-gradient(135deg, var(--tharwah-primary) 0%, var(--tharwah-accent) 50%, var(--tharwah-secondary) 100%) !important;
    min-height: 100vh !important;
}

.login #container {
    width: 400px !important;
    margin: 50px auto !important;
    background: white !important;
    border-radius: 16px !important;
    box-shadow: 0 15px 35px rgba(0, 58, 85, 0.3) !important;
    overflow: hidden !important;
    border: none !important;
}

.login #header {
    background: white !important;
    padding: 40px 30px 20px !important;
    border-bottom: 2px solid #f0f0f0 !important;
    text-align: center !important;
}

.login #header h1 {
    color: var(--tharwah-primary) !important;
    font-size: 28px !important;
    margin: 0 !important;
    font-weight: 300 !important;
}

.login #content {
    padding: 30px !important;
    background: white !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.login .form-row {
    margin-bottom: 25px !important;
    border-bottom: none !important;
    padding: 0 !important;
}

.login .form-row label {
    display: block !important;
    margin-bottom: 8px !important;
    color: var(--tharwah-primary) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

.login .form-row input[type="text"],
.login .form-row input[type="password"] {
    width: 100% !important;
    padding: 15px !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

.login .form-row input[type="text"]:focus,
.login .form-row input[type="password"]:focus {
    border-color: var(--tharwah-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(0, 58, 85, 0.1) !important;
}

.login .submit-row {
    text-align: center !important;
    margin-top: 35px !important;
    padding-top: 20px !important;
    border-top: 1px solid #f0f0f0 !important;
}

.login .submit-row input[type="submit"] {
    background: linear-gradient(135deg, var(--tharwah-primary) 0%, var(--tharwah-accent) 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 15px 40px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.login .submit-row input[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 58, 85, 0.3) !important;
}

/* Dashboard modules */
.dashboard .module {
    border: 1px solid var(--tharwah-secondary) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 8px rgba(0, 58, 85, 0.1) !important;
}

.dashboard .module table {
    margin: 0 !important;
}

.dashboard .module th {
    background: var(--tharwah-light) !important;
    color: var(--tharwah-primary) !important;
    border-bottom: 1px solid var(--tharwah-secondary) !important;
}

/* Messages */
.messagelist .success {
    background: var(--tharwah-success) !important;
    border-left: 5px solid #1e7e34 !important;
    border-radius: 6px !important;
}

.messagelist .warning {
    background: var(--tharwah-warning) !important;
    border-left: 5px solid #e0a800 !important;
    border-radius: 6px !important;
}

.messagelist .error {
    background: var(--tharwah-danger) !important;
    border-left: 5px solid #bd2130 !important;
    border-radius: 6px !important;
}

.messagelist .info {
    background: var(--tharwah-info) !important;
    border-left: 5px solid #117a8b !important;
    border-radius: 6px !important;
}

/* Custom development tools styling */
.development-tools {
    background: linear-gradient(135deg, #e8f4fd 0%, #f0f8ff 100%) !important;
    border: 2px solid var(--tharwah-accent) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin: 20px 0 !important;
    box-shadow: 0 4px 12px rgba(65, 118, 144, 0.1) !important;
}

.development-tools h3 {
    color: var(--tharwah-primary) !important;
    margin: 0 0 15px 0 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

.development-tools a {
    display: inline-block !important;
    background: var(--tharwah-accent) !important;
    color: white !important;
    text-decoration: none !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    margin: 5px 10px 5px 0 !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.development-tools a:hover {
    background: var(--tharwah-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(0, 58, 85, 0.2) !important;
}

/* Responsive design */
@media (max-width: 768px) {
    #branding h1:before {
        width: 30px !important;
        height: 30px !important;
        margin-right: 10px !important;
    }
    
    #branding h1 {
        font-size: 20px !important;
        padding: 8px 15px !important;
    }
    
    #user-tools {
        margin: 8px 15px !important;
        padding: 6px 12px !important;
    }
    
    #content {
        margin: 15px !important;
    }
    
    .breadcrumbs {
        margin: 15px !important;
        padding: 8px 12px !important;
    }
    
    .login #container {
        width: 90% !important;
        margin: 20px auto !important;
    }
    
    .login #header {
        padding: 30px 20px 15px !important;
    }
    
    .login #content {
        padding: 20px !important;
    }
}