/* =========================================================
   HOSTOYUN ADMIN PANEL V12
   CUSTOMER PANEL İLE AYNI TASARIM DİLİ
   ========================================================= */

:root{
  --ha-bg:#080d18;
  --ha-bg2:#0d1422;
  --ha-sidebar:#09101d;
  --ha-card:#101829;
  --ha-card2:#121c30;
  --ha-row:#0c1423;

  --ha-border:rgba(132,151,194,.14);
  --ha-border-strong:rgba(105,130,205,.23);

  --ha-text:#f5f7fc;
  --ha-muted:#8b98b3;
  --ha-muted2:#66738e;

  --ha-blue:#536cff;
  --ha-purple:#713cff;
  --ha-pink:#ff315e;
  --ha-red:#f3224f;
  --ha-green:#2bd879;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.admin-body,
.admin-body button,
.admin-body input,
.admin-body select,
.admin-body textarea{

  font-family:
    Inter,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif !important;

  text-rendering:
    optimizeLegibility;

  -webkit-font-smoothing:
    antialiased;
}


.admin-body{

  margin:0;

  background:
    radial-gradient(
      circle at 70% -15%,
      rgba(70,75,150,.12),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      #080d17,
      #0b1220
    ) !important;

  color:
    var(--ha-text) !important;

  font-size:14px !important;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.admin-app,
.admin-shell{

  min-height:100vh;

  background:
    transparent !important;
}


.admin-main{

  min-width:0;

  background:
    transparent !important;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.admin-sidebar{

  background:
    linear-gradient(
      180deg,
      #080e1b,
      #0b1221
    ) !important;

  border-right:
    1px solid
    rgba(255,255,255,.055) !important;

  color:
    var(--ha-text) !important;
}


.admin-brand,
.admin-pro-brand{

  border-bottom:
    1px solid
    rgba(255,255,255,.045);

  background:
    transparent !important;
}


.admin-brand img,
.admin-pro-brand img{

  object-fit:contain !important;

  filter:none !important;

  background:
    transparent !important;
}


.admin-sidebar nav a{

  min-height:42px;

  display:flex;

  align-items:center;

  gap:10px;

  padding:
    0 12px !important;

  border-radius:9px !important;

  border:0 !important;

  background:
    transparent !important;

  color:
    #8d9ab3 !important;

  font-size:
    13px !important;

  font-weight:
    600 !important;

  transition:
    .15s ease;
}


.admin-sidebar nav a:hover{

  background:
    rgba(91,104,179,.08) !important;

  color:
    #fff !important;

  transform:none !important;
}


.admin-sidebar nav a.active{

  position:relative;

  background:
    linear-gradient(
      90deg,
      rgba(87,67,180,.18),
      rgba(41,51,85,.14)
    ) !important;

  color:
    #fff !important;

  box-shadow:none !important;
}


.admin-sidebar nav a.active:after{

  content:"";

  position:absolute;

  right:-1px;

  top:0;
  bottom:0;

  width:2px;

  background:
    var(--ha-pink);
}


/* =========================================================
   TOP / HEADER
   ========================================================= */

.admin-top,
.admin-topbar,
.admin-header{

  border-bottom:
    1px solid
    rgba(255,255,255,.055) !important;

  background:
    rgba(8,13,24,.86) !important;

  backdrop-filter:
    blur(18px);
}


.admin-top h1,
.admin-header h1{

  color:
    var(--ha-text) !important;

  font-size:
    28px !important;

  font-weight:
    700 !important;

  letter-spacing:
    -.5px !important;
}


.admin-top p,
.admin-header p{

  color:
    var(--ha-muted) !important;

  font-size:
    12px !important;
}


/* =========================================================
   CARDS
   ========================================================= */

.admin-card,
.admin-pro-card,
.admin-stat-grid article,
.admin-pro-stats article{

  position:relative;

  overflow:hidden;

  border:
    1px solid
    var(--ha-border) !important;

  border-radius:
    14px !important;

  background:
    linear-gradient(
      145deg,
      rgba(18,27,46,.98),
      rgba(12,19,34,.98)
    ) !important;

  color:
    var(--ha-text) !important;

  box-shadow:
    0 15px 36px
    rgba(0,0,0,.12) !important;
}


.admin-card:before,
.admin-pro-card:before{

  content:"";

  position:absolute;

  top:0;
  left:8px;
  right:8px;

  height:1px;

  background:
    linear-gradient(
      90deg,
      #536cff,
      #713cff,
      #ff315e
    );
}


.admin-card h2,
.admin-pro-card h2{

  color:
    #f2f4f9 !important;

  font-size:
    18px !important;

  font-weight:
    700 !important;

  letter-spacing:
    -.25px;
}


.admin-card h3,
.admin-pro-card h3{

  color:
    #eef1f6 !important;

  font-weight:
    650 !important;
}


.admin-card p,
.admin-pro-card p,
.admin-card small,
.admin-pro-card small,
.table-sub{

  color:
    var(--ha-muted) !important;
}


/* =========================================================
   STATS
   ========================================================= */

.admin-stat-grid,
.admin-pro-stats{

  gap:10px !important;
}


.admin-stat-grid article,
.admin-pro-stats article{

  min-height:
    105px;

  padding:
    17px !important;
}


.admin-stat-grid span,
.admin-pro-stats span{

  color:
    #74809a !important;

  font-size:
    10px !important;
}


.admin-stat-grid b,
.admin-pro-stats b{

  color:
    #f2f4f9 !important;

  font-size:
    24px !important;

  font-weight:
    700 !important;
}


/* =========================================================
   TABLES
   ========================================================= */

.admin-table,
.admin-pro-table{

  width:100%;

  border-collapse:
    separate !important;

  border-spacing:
    0 !important;

  background:
    transparent !important;
}


.admin-table th,
.admin-pro-table th{

  padding:
    11px 13px !important;

  border-bottom:
    1px solid
    rgba(255,255,255,.055) !important;

  background:
    rgba(255,255,255,.018) !important;

  color:
    #6f7d98 !important;

  font-size:
    9px !important;

  font-weight:
    700 !important;

  text-transform:
    uppercase;

  letter-spacing:
    .7px;
}


.admin-table td,
.admin-pro-table td{

  padding:
    12px 13px !important;

  border-bottom:
    1px solid
    rgba(255,255,255,.045) !important;

  background:
    transparent !important;

  color:
    #d7deeb !important;

  font-size:
    11px !important;

  vertical-align:
    middle;
}


.admin-table tbody tr,
.admin-pro-table tbody tr{

  transition:
    background .15s ease;
}


.admin-table tbody tr:hover,
.admin-pro-table tbody tr:hover{

  background:
    rgba(78,98,164,.055) !important;
}


/* =========================================================
   FORMS
   ========================================================= */

.admin-body input,
.admin-body textarea,
.admin-body select{

  border:
    1px solid
    rgba(118,135,177,.17) !important;

  border-radius:
    8px !important;

  background:
    #0c1423 !important;

  color:
    #fff !important;

  box-shadow:
    none !important;
}


.admin-body input{

  min-height:
    39px;
}


.admin-body textarea{

  min-height:
    100px;
}


.admin-body input::placeholder,
.admin-body textarea::placeholder{

  color:
    #59667e !important;
}


.admin-body input:focus,
.admin-body select:focus,
.admin-body textarea:focus{

  outline:none !important;

  border-color:
    rgba(91,108,255,.6) !important;

  box-shadow:
    0 0 0 3px
    rgba(83,108,255,.07) !important;
}


.admin-body label{

  color:
    #98a4ba !important;

  font-size:
    11px !important;

  font-weight:
    500 !important;
}


/* =========================================================
   BUTTON SYSTEM
   ========================================================= */

.admin-body button,
.admin-button-link,
.admin-pro-form button,
.admin-row-actions button{

  min-height:
    36px;

  padding:
    0 13px !important;

  border:
    1px solid
    rgba(104,123,181,.18) !important;

  border-radius:
    8px !important;

  background:
    #121d31 !important;

  color:
    #d9e1f1 !important;

  font-family:
    inherit;

  font-size:
    10px !important;

  font-weight:
    700 !important;

  cursor:pointer;

  transition:
    .15s ease;
}


.admin-body button:hover,
.admin-button-link:hover,
.admin-row-actions button:hover{

  border-color:
    rgba(91,108,255,.55) !important;

  background:
    #17233a !important;

  color:
    #fff !important;
}


/* PRIMARY */

.admin-body .primary,
.admin-body button.primary,
.admin-pro-form button[type="submit"],
.admin-button-link.primary{

  border:0 !important;

  background:
    linear-gradient(
      100deg,
      #5036c7,
      #c43272,
      #f22752
    ) !important;

  color:
    #fff !important;

  box-shadow:
    0 8px 20px
    rgba(126,37,111,.14) !important;
}


.admin-body .primary:hover,
.admin-pro-form button[type="submit"]:hover{

  filter:
    brightness(1.08);
}


/* DANGER */

.admin-body .danger,
.admin-body button.danger{

  border:
    1px solid
    rgba(255,49,94,.32) !important;

  background:
    rgba(255,49,94,.08) !important;

  color:
    #ff758f !important;
}


/* SUCCESS */

.admin-body .success{

  border:
    1px solid
    rgba(43,216,121,.25) !important;

  background:
    rgba(43,216,121,.07) !important;

  color:
    #4be18e !important;
}


/* =========================================================
   BADGES / STATUS
   ========================================================= */

.admin-body .status,
.admin-body .badge,
.admin-body .pill{

  border-radius:
    999px !important;

  font-size:
    9px !important;

  font-weight:
    700 !important;
}


.admin-body .online,
.admin-body .active,
.admin-body .ready{

  color:
    #42df85 !important;

  background:
    rgba(43,216,121,.09) !important;

  border-color:
    rgba(43,216,121,.22) !important;
}


.admin-body .stopped,
.admin-body .passive{

  color:
    #8692a9 !important;

  background:
    rgba(120,137,170,.07) !important;

  border-color:
    rgba(120,137,170,.12) !important;
}


/* =========================================================
   COMMAND / PLUGIN ROWS
   ========================================================= */

.command-control-row,
.plugin-list-row,
.gp-plugin,
.plugin{

  border:
    1px solid
    rgba(118,137,179,.13) !important;

  border-radius:
    10px !important;

  background:
    linear-gradient(
      145deg,
      #111a2d,
      #0d1627
    ) !important;

  box-shadow:
    none !important;
}


.command-control-row:hover,
.plugin-list-row:hover{

  border-color:
    rgba(90,109,255,.35) !important;
}


/* Toggle circle / state */

.command-state-dot{

  border-color:
    #62708b !important;
}


.command-state-dot.active{

  background:
    #5975ff !important;

  border-color:
    #7890ff !important;

  box-shadow:
    0 0 12px
    rgba(89,117,255,.35) !important;
}


/* =========================================================
   ADMIN NOTES
   ========================================================= */

.admin-note{

  border:
    1px solid
    rgba(102,123,181,.12) !important;

  border-radius:
    9px !important;

  background:
    #0d1626 !important;

  color:
    #8794aa !important;
}


/* =========================================================
   ALERTS
   ========================================================= */

.admin-body .alert{

  border-radius:
    9px !important;

  font-size:
    11px !important;
}


.admin-body .alert.success{

  border-color:
    rgba(43,216,121,.23) !important;

  background:
    rgba(43,216,121,.07) !important;

  color:
    #4be18e !important;
}


.admin-body .alert.danger{

  border-color:
    rgba(255,49,94,.25) !important;

  background:
    rgba(255,49,94,.07) !important;

  color:
    #ff758f !important;
}


/* =========================================================
   TICKET SYSTEM
   ========================================================= */

.ticket-message,
.customer-ticket-message{

  border:
    1px solid
    rgba(116,135,177,.13) !important;

  border-radius:
    10px !important;

  background:
    #0e1728 !important;

  color:
    #d8deea !important;
}


.ticket-message.admin,
.customer-ticket-message.support{

  border-color:
    rgba(255,49,94,.20) !important;

  background:
    rgba(80,20,46,.22) !important;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

.admin-body *{

  scrollbar-width:
    thin;

  scrollbar-color:
    #33415c
    #0b1220;
}


.admin-body ::-webkit-scrollbar{

  width:7px;
  height:7px;
}


.admin-body ::-webkit-scrollbar-track{

  background:
    #0b1220;
}


.admin-body ::-webkit-scrollbar-thumb{

  border-radius:
    999px;

  background:
    #33415c;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:900px){

  .admin-sidebar{

    box-shadow:
      20px 0 45px
      rgba(0,0,0,.35);
  }


  .admin-card,
  .admin-pro-card{

    border-radius:
      12px !important;
  }


  .admin-stat-grid,
  .admin-pro-stats{

    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

}


@media(max-width:600px){

  .admin-stat-grid,
  .admin-pro-stats{

    grid-template-columns:
      1fr !important;
  }


  .admin-table th,
  .admin-table td,
  .admin-pro-table th,
  .admin-pro-table td{

    padding:
      10px !important;
  }

}