/*
|--------------------------------------------------------------------------
| CUSTOMER CSS
|--------------------------------------------------------------------------
*/
:root {
    --ptc-primary: #0A84FF;
    --ptc-primary-hover: #0066CC;

    --ptc-bg: #F8FAFC;

    --ptc-dark: #0F172A;

    --ptc-text: #334155;

    --ptc-border: #E2E8F0;

    --ptc-white: #FFFFFF;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family:
        "Segoe UI",
        Tahoma,
        sans-serif;
    background: var(--ptc-bg);
    color: var(--ptc-text);
}

/* ---------------------------------------------------------------
   Alerts / Notifications
   ------------------------------------------------------------ */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    width: 100%;
    margin-bottom: 24px;
    padding: 14px 18px;

    border: 1px solid transparent;
    border-radius: 8px;

    font-size: 15px;
    line-height: 1.5;
}

.alert-success {
    background: #F0FDF4;
    color: #166534;
    border-color: #BBF7D0;
}

.alert-danger {
    background: #FEF2F2;
    color: #991B1B;
    border-color: #FECACA;
}

.alert ul {
    margin: 0;
    padding-left: 20px;
}

.alert li + li {
    margin-top: 4px;
}

.form-error {
    margin-top: 6px;
    color: #DC2626;
    font-size: 13px;
    line-height: 1.4;
}

/* ---------------------------------------------------------------
   Badges
   ------------------------------------------------------------ */
.badge-success {
    background: #DCFCE7;
    color: #15803D;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

.badge-primary {
    background: #DBEAFE;
    color: #1D4ED8;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

.badge-info {
    background: #DBEAFE;
    color: #1D4ED8;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

.badge-warning {
    background: #FEF3C7;
    color: #B45309;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

.badge-danger {
    background: #FEE2E2;
    color: #DC2626;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

/* ---------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn-primary,
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: 0 20px;

    border-radius: 8px;

    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;
    text-decoration: none;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}

/* Primary */
.btn-primary {
    background: var(--ptc-primary);
    color: var(--ptc-white);
    border: 1px solid var(--ptc-primary);
}

.btn-primary:hover {
    background: var(--ptc-primary-hover);
    border-color: var(--ptc-primary-hover);
}

/* Outline */
.btn-outline {
    background: var(--ptc-white);
    color: var(--ptc-primary);
    border: 1px solid var(--ptc-primary);
}

.btn-outline:hover {
    background: #EFF6FF;
    color: var(--ptc-primary-hover);
    border-color: var(--ptc-primary-hover);
}

/* Keyboard focus */
.btn-primary:focus-visible,
.btn-outline:focus-visible {
    outline: 3px solid rgba(10, 132, 255, 0.2);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------
   Form
   ------------------------------------------------------------ */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.form-control {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
}

.form-control:focus {
    outline: none;
    border-color: #2563EB;
    box-shadow: 0 0 0 4px rgba(37,99,235,.10);
}

.form-control:readonly {
    background: #F8FAFC;
    color: #64748B;
}

textarea.form-control {
    resize: vertical;
}

/* ---------------------------------------------------------------
   Sidebar & Header
   ------------------------------------------------------------ */
.customer-layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 260px;
    background: #0F172A;
    color: #fff;
    display: flex;
    flex-direction: column;
}

.sidebar-brand {
    padding: 24px;
}

.brand-name {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}

.brand-name span {
    color: #0A84FF;
}

.brand-tagline {
    font-size: 12px;
    color: #94A3B8;
    margin-top: 5px;
}

.sidebar-menu {
    flex: 1;
    padding: 20px;
}

.menu-item {
    display: block;
    color: #CBD5E1;
    text-decoration: none;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 8px;
}

.menu-item.active {
    background: #0A84FF;
    color: #fff;
}

.sidebar-footer {
    padding: 24px;
}

.logout-btn {
    width: 100%;
    padding: 12px;
    border: 0;
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    color: white;
    cursor: pointer;
}

.customer-main {
    flex: 1;
    background: #F8FAFC;
}

.customer-header {
    height: 72px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    border-bottom: 1px solid #E2E8F0;
}

.customer-content {
    padding: 32px;
}

.stats-grid {
    display: grid;
    grid-template-columns:
        repeat(4, 1fr);
    gap: 20px;
}

.stat-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow:
        0 2px 10px rgba(0,0,0,.05);
}

.stat-title {
    color: #64748B;
}

.stat-value {
    font-size: 36px;
    font-weight: 700;
    margin-top: 10px;
}

.user-menu {
    position: relative;
}

.user-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    cursor: pointer;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #0A84FF;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 220px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
    padding: 10px 0;
    display: none;
    z-index: 100;
}

.user-dropdown.show {
    display: block;
}

.dropdown-arrow {
    font-size: 12px;
    color: #64748b;
}

.user-dropdown a,
.user-dropdown button {
    display: block;
    width: 100%;
    padding: 12px 18px;
    border: none;
    background: none;
    text-align: left;
    color: #334155;
    text-decoration: none;
    cursor: pointer;
}

/* ---------------------------------------------------------------
   Customer Dashboard
   ------------------------------------------------------------ */
.stat-card.services .stat-value {
    color: #2563eb;
}

.stat-card.tickets .stat-value {
    color: #f97316;
}

.stat-card.invoices .stat-value {
    color: #dc2626;
}

.stat-card.expiring .stat-value {
    color: #d97706;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 24px;
}

.dashboard-panel {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(15,23,42,.05);
}

.dashboard-panel h3 {
    margin-bottom: 20px;
    font-size: 18px;
    color: #1e293b;
}

.dashboard-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dashboard-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.dashboard-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dashboard-meta {
    font-size: 13px;
    color: #64748b;
    margin-top: 4px;
}

.ticket-id {
    color: #2563eb;
    font-weight: 700;
}

.dashboard-footer {
    margin-top: 24px;
    text-align: right;
    font-size: 13px;
    color: #64748b;
}

/* ---------------------------------------------------------------
   Customer Services
   ------------------------------------------------------------ */
.service-summary {
    display: grid;
    grid-template-columns:
        repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.summary-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow:
        0 2px 10px rgba(0,0,0,.05);
}

.summary-title {
    color: #64748B;
    margin-bottom: 10px;
}

.summary-value {
    font-size: 32px;
    font-weight: 700;
}

.summary-value.success {
    color: #16A34A;
}

.summary-value.warning {
    color: #F59E0B;
}

.summary-value.danger {
    color: #DC2626;
}

.service-toolbar {
    margin-bottom: 24px;
}

.service-search {
    width: 100%;
    max-width: 400px;
    padding: 12px 16px;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
}

.service-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow:
        0 2px 10px rgba(0,0,0,.05);
}

.service-card.service-inactive {
    opacity: 0.6;
}

.service-header {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 1fr 1fr auto;
    align-items: center;
    column-gap: 20px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--ptc-border);
}

.service-header h3 {
    margin-bottom: 6px;
}

.service-header p {
    color: #64748B;
}

.service-main {
    min-width: 0;
}

.service-main h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--ptc-dark);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.service-type {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 5px;
}

.service-type.domain {
    background: #FEF3C7;
    color: #B45309;
}

.service-type.hosting {
    background: #DBEAFE;
    color: #1D4ED8;
}

.service-type.email {
    background: #EDE9FE;
    color: #6D28D9;
}

.service-type.other {
    background: #DCFCE7;
    color: #15803D;
}

.service-product {
    min-width: 0;
    font-size: 15px;
}

.service-product strong {
    font-weight: 500;
    color: var(--ptc-dark);
    line-height: 1.4;
}

.service-product p {
    color: #64748B;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.service-code {
    min-width: 0;
    font-size: 14px;
}

.service-code label {
    display: block;
    color: #94A3B8;
    margin-bottom: 3px;
}

.service-code strong {
    display: block;
    color: var(--ptc-dark);
    font-weight: 500;
}

.service-info {
    display: grid;
    grid-template-columns: 1.35fr 1.35fr 1fr 1fr auto;
    align-items: center;
    gap: 20px;
}

.service-info label {
    display: block;
    color: #64748B;
    margin-bottom: 6px;
    font-size: 14px;
}

.text-success {
    color: #16A34A;
}

.text-warning {
    color: #F59E0B;
}

.text-danger {
    color: #DC2626;
}

.service-actions {
    text-align: right;
}

/* ---------------------------------------------------------------
   Customer Invoices
   ------------------------------------------------------------ */
.invoice-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 24px;
}

.invoice-toolbar {
margin-bottom: 24px;
}

.invoice-search {
width: 100%;
max-width: 400px;
padding: 12px 16px;
border: 1px solid #CBD5E1;
border-radius: 8px;
}

.invoice-list {
display: flex;
flex-direction: column;
gap: 20px;
}

.invoice-card {
background: #fff;
border-radius: 12px;
padding: 24px;
box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

.invoice-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}

.invoice-header h3 {
margin-bottom: 6px;
}

.invoice-header p {
color: #64748B;
}

.invoice-info {
display: grid;
grid-template-columns: 1fr 1fr 1fr auto;
gap: 20px;
}

.invoice-info label {
display: block;
color: #64748B;
margin-bottom: 6px;
font-size: 14px;
}

.invoice-actions {
text-align: right;
}

/* ---------------------------------------------------------------
   Customer Tickets
   ------------------------------------------------------------ */
.ticket-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 24px;
}

.ticket-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-bottom: 24px;
}

.ticket-search {
width: 100%;
max-width: 400px;
padding: 12px 16px;
border: 1px solid #CBD5E1;
border-radius: 8px;
}

.ticket-list {
display: flex;
flex-direction: column;
gap: 20px;
}

.ticket-card {
background: #fff;
border-radius: 12px;
padding: 24px;
box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

.ticket-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}

.ticket-header h3 {
margin-bottom: 6px;
}

.ticket-header p {
color: #64748B;
}

.ticket-info {
display: grid;
grid-template-columns: 1fr 1fr 1fr auto;
gap: 20px;
}

.ticket-info label {
display: block;
color: #64748B;
margin-bottom: 6px;
font-size: 14px;
}

.ticket-actions {
text-align: right;
}

/* ---------------------------------------------------------------
   Customer Profile
   ------------------------------------------------------------ */
.page-header {
    margin-bottom: 30px;
}

.page-header h1 {
    margin-bottom: 8px;
}

.page-subtitle {
    color: #64748B;
}

.profile-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.profile-card {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

.profile-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.profile-card-legal {
    grid-column: 1 / -1;
}

.profile-card-legal .form-row {
    grid-template-columns: repeat(3, 1fr);
}

.profile-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

.card-header {
    padding: 20px 24px;
    border-bottom: 1px solid #E2E8F0;
}

.card-body {
    padding: 24px;
}

.card-description {
    margin: 6px 0 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
}

.security-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.security-item p {
    margin-top: 4px;
    color: #64748B;
    font-size: 14px;
}